"use client";

import { ArrowLeft, HardHat, Loader2, Package, Pencil, Plus, Save, Trash2 } from "lucide-react";
import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import { createBcItem, deleteBcItem, updateBcItem, updateBcPage } from "@/actions/catalog-bc";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Textarea } from "@/components/ui/textarea";
import { useServerAction } from "@/hooks/use-server-action";

// ── Types ────────────────────────────────────────────────────────────

export interface BcPageData {
  id: number;
  parentId: number;
  caption: string;
  pageLayout: string;
  iconColor: number;
  iconImage: number;
  orderNum: number;
  visible: string;
  enabled: string;
  pageHeadline: string;
  pageTeaser: string;
  pageSpecial: string;
  pageText1: string;
  pageText2: string;
  pageTextDetails: string;
  pageTextTeaser: string;
}

export interface BcItemData {
  id: number;
  pageId: number;
  itemIds: string;
  catalogName: string;
  orderNumber: number;
  extradata: string;
}

interface BcPageDetailProps {
  page: BcPageData;
  items: BcItemData[];
  canEdit: boolean;
}

// ── Main Component ───────────────────────────────────────────────────

export function BcPageDetail({ page, items, canEdit }: BcPageDetailProps) {
  const { isPending, run } = useServerAction();
  const formRef = useRef<HTMLFormElement>(null);
  const [editingItem, setEditingItem] = useState<BcItemData | null>(null);
  const [addingItem, setAddingItem] = useState(false);

  const [form, setForm] = useState({
    caption: page.caption,
    orderNum: page.orderNum,
    enabled: page.enabled as "0" | "1",
    visible: page.visible as "0" | "1",
    pageHeadline: page.pageHeadline,
    pageTeaser: page.pageTeaser,
    pageSpecial: page.pageSpecial,
    pageText1: page.pageText1,
    pageText2: page.pageText2,
    pageTextDetails: page.pageTextDetails,
    pageTextTeaser: page.pageTextTeaser,
  });

  // Ctrl+S / Cmd+S to save
  useEffect(() => {
    if (!canEdit) return;
    function onKeyDown(e: KeyboardEvent) {
      if ((e.metaKey || e.ctrlKey) && e.key === "s") {
        e.preventDefault();
        formRef.current?.requestSubmit();
      }
    }
    document.addEventListener("keydown", onKeyDown);
    return () => document.removeEventListener("keydown", onKeyDown);
  }, [canEdit]);

  function update<K extends keyof typeof form>(key: K, value: (typeof form)[K]) {
    setForm((prev) => ({ ...prev, [key]: value }));
  }

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    run(() => updateBcPage({ id: page.id, ...form }), {
      successMessage: "BC page updated and catalog synced.",
      errorMessage: "Failed to update.",
    });
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-3">
        <Link
          href="/admin/catalog?catalog=bc"
          className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
        >
          <ArrowLeft className="h-4 w-4" />
          BC Catalog
        </Link>
        <span className="text-muted-foreground">/</span>
        <div className="flex items-center gap-2">
          <HardHat className="h-5 w-5 text-[var(--admin-warning)]" />
          <h1 className="text-2xl font-bold tracking-tight">{page.caption}</h1>
          <Badge variant="outline" className="font-mono text-xs">
            #{page.id}
          </Badge>
          <Badge variant="secondary" className="font-mono text-xs">
            {page.pageLayout}
          </Badge>
        </div>
      </div>

      <form ref={formRef} onSubmit={handleSubmit}>
        <div className="grid gap-4 lg:grid-cols-3">
          {/* ── Left column: form fields ─────────────── */}
          <div className="lg:col-span-2 space-y-4">
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-base">Page Settings</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid gap-4 sm:grid-cols-2">
                  <div className="space-y-2">
                    <Label htmlFor="caption">Caption</Label>
                    <Input
                      id="caption"
                      value={form.caption}
                      onChange={(e) => update("caption", e.target.value)}
                      disabled={!canEdit}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="orderNum">Order</Label>
                    <Input
                      id="orderNum"
                      type="number"
                      value={form.orderNum}
                      onChange={(e) => update("orderNum", parseInt(e.target.value, 10) || 0)}
                      disabled={!canEdit}
                    />
                  </div>
                </div>

                <div className="space-y-2">
                  <Label>Headline</Label>
                  <Input
                    value={form.pageHeadline}
                    onChange={(e) => update("pageHeadline", e.target.value)}
                    disabled={!canEdit}
                    placeholder="Headline image path"
                  />
                </div>
                <div className="space-y-2">
                  <Label>Teaser</Label>
                  <Input
                    value={form.pageTeaser}
                    onChange={(e) => update("pageTeaser", e.target.value)}
                    disabled={!canEdit}
                    placeholder="Teaser image path"
                  />
                </div>

                <div className="grid gap-4 sm:grid-cols-2">
                  <div className="space-y-2">
                    <Label>Text 1</Label>
                    <Textarea
                      value={form.pageText1}
                      onChange={(e) => update("pageText1", e.target.value)}
                      disabled={!canEdit}
                      rows={3}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>Text 2</Label>
                    <Textarea
                      value={form.pageText2}
                      onChange={(e) => update("pageText2", e.target.value)}
                      disabled={!canEdit}
                      rows={3}
                    />
                  </div>
                </div>

                <div className="grid gap-4 sm:grid-cols-2">
                  <div className="space-y-2">
                    <Label>Details</Label>
                    <Textarea
                      value={form.pageTextDetails}
                      onChange={(e) => update("pageTextDetails", e.target.value)}
                      disabled={!canEdit}
                      rows={3}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>Text Teaser</Label>
                    <Textarea
                      value={form.pageTextTeaser}
                      onChange={(e) => update("pageTextTeaser", e.target.value)}
                      disabled={!canEdit}
                      rows={3}
                    />
                  </div>
                </div>

                <div className="space-y-2">
                  <Label>Special</Label>
                  <Textarea
                    value={form.pageSpecial}
                    onChange={(e) => update("pageSpecial", e.target.value)}
                    disabled={!canEdit}
                    rows={2}
                  />
                </div>
              </CardContent>
            </Card>

            {/* Items */}
            <Card>
              <CardHeader className="pb-3">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-base flex items-center gap-2">
                    <Package className="h-4 w-4" />
                    Items ({items.length})
                  </CardTitle>
                  {canEdit && (
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      className="h-7 text-xs"
                      onClick={() => setAddingItem(true)}
                    >
                      <Plus className="h-3 w-3 mr-1" />
                      Add Item
                    </Button>
                  )}
                </div>
              </CardHeader>
              <CardContent>
                {items.length === 0 ? (
                  <p className="text-sm text-muted-foreground text-center py-4">No items in this page.</p>
                ) : (
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead className="text-xs">ID</TableHead>
                        <TableHead className="text-xs">Name</TableHead>
                        <TableHead className="text-xs">Item IDs</TableHead>
                        <TableHead className="text-xs">Order</TableHead>
                        <TableHead className="text-xs">Extra Data</TableHead>
                        {canEdit && <TableHead className="text-xs w-20">Actions</TableHead>}
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {items.map((item) => (
                        <TableRow key={item.id}>
                          <TableCell className="text-xs font-mono">{item.id}</TableCell>
                          <TableCell className="text-xs font-medium">{item.catalogName}</TableCell>
                          <TableCell className="text-xs font-mono text-muted-foreground">
                            {item.itemIds}
                          </TableCell>
                          <TableCell className="text-xs">{item.orderNumber}</TableCell>
                          <TableCell className="text-xs text-muted-foreground max-w-32 truncate">
                            {item.extradata || "\u2014"}
                          </TableCell>
                          {canEdit && (
                            <TableCell>
                              <div className="flex gap-1">
                                <Button
                                  type="button"
                                  variant="ghost"
                                  size="sm"
                                  className="h-6 w-6 p-0"
                                  onClick={() => setEditingItem(item)}
                                >
                                  <Pencil className="h-3 w-3" />
                                </Button>
                                <Button
                                  type="button"
                                  variant="ghost"
                                  size="sm"
                                  className="h-6 w-6 p-0 text-[var(--admin-error)] hover:text-[var(--admin-error)]"
                                  onClick={() => {
                                    if (!confirm(`Delete item "${item.catalogName}"?`)) return;
                                    run(() => deleteBcItem({ id: item.id }), {
                                      successMessage: "Item deleted.",
                                    });
                                  }}
                                >
                                  <Trash2 className="h-3 w-3" />
                                </Button>
                              </div>
                            </TableCell>
                          )}
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                )}
              </CardContent>
            </Card>
          </div>

          {/* ── Right column: status ─────────────────── */}
          <div className="lg:col-span-1">
            <Card className="lg:sticky lg:top-4">
              <CardHeader className="pb-3">
                <CardTitle className="text-base">Status</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-3">
                  <ToggleRow
                    id="tg-enabled"
                    label="Enabled"
                    description="Active in the BC catalog"
                    checked={form.enabled === "1"}
                    onChange={(v) => update("enabled", v ? "1" : "0")}
                    disabled={!canEdit}
                  />
                  <ToggleRow
                    id="tg-visible"
                    label="Visible"
                    description="Shown in BC navigation"
                    checked={form.visible === "1"}
                    onChange={(v) => update("visible", v ? "1" : "0")}
                    disabled={!canEdit}
                  />
                </div>

                {/* Stats */}
                <div className="flex items-center gap-4 border-t pt-3 text-xs text-muted-foreground">
                  <span>
                    Layout: <span className="font-mono">{page.pageLayout}</span>
                  </span>
                  <span>
                    Parent:{" "}
                    <span className="font-mono">{page.parentId <= 0 ? "Root" : `#${page.parentId}`}</span>
                  </span>
                </div>

                {/* Actions */}
                {canEdit && (
                  <div className="space-y-2 border-t pt-3">
                    <Button type="submit" disabled={isPending} className="w-full">
                      {isPending ? (
                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      ) : (
                        <Save className="mr-2 h-4 w-4" />
                      )}
                      Save & Sync
                    </Button>
                    <p className="text-center text-[10px] text-muted-foreground">
                      Press <kbd className="rounded border px-1">Ctrl+S</kbd> to save
                    </p>
                  </div>
                )}
              </CardContent>
            </Card>
          </div>
        </div>
      </form>

      {/* Edit Item Dialog */}
      {editingItem && (
        <ItemDialog
          item={editingItem}
          mode="edit"
          isPending={isPending}
          onClose={() => setEditingItem(null)}
          onSubmit={(data) => {
            run(() => updateBcItem({ id: editingItem.id, ...data }), {
              successMessage: "Item updated.",
              onSuccess: () => setEditingItem(null),
            });
          }}
        />
      )}

      {/* Add Item Dialog */}
      {addingItem && (
        <ItemDialog
          item={{
            id: 0,
            pageId: page.id,
            itemIds: "",
            catalogName: "",
            orderNumber: 1,
            extradata: "",
          }}
          mode="add"
          isPending={isPending}
          onClose={() => setAddingItem(false)}
          onSubmit={(data) => {
            run(() => createBcItem({ pageId: page.id, ...data }), {
              successMessage: "Item created.",
              onSuccess: () => setAddingItem(false),
            });
          }}
        />
      )}
    </div>
  );
}

// ── Toggle row ───────────────────────────────────────────────────────

function ToggleRow({
  id,
  label,
  description,
  checked,
  onChange,
  disabled,
}: {
  id: string;
  label: string;
  description: string;
  checked: boolean;
  onChange: (v: boolean) => void;
  disabled?: boolean;
}) {
  return (
    <div className="flex items-start justify-between gap-3">
      <div className="min-w-0 flex-1">
        <Label htmlFor={id} className="text-sm font-medium cursor-pointer">
          {label}
        </Label>
        <p className="text-[11px] text-muted-foreground">{description}</p>
      </div>
      <Switch id={id} checked={checked} onCheckedChange={onChange} disabled={disabled} />
    </div>
  );
}

// ── Item Dialog ──────────────────────────────────────────────────────

function ItemDialog({
  item,
  mode,
  isPending,
  onClose,
  onSubmit,
}: {
  item: BcItemData;
  mode: "add" | "edit";
  isPending: boolean;
  onClose: () => void;
  onSubmit: (data: { itemIds: string; catalogName: string; orderNumber: number; extradata: string }) => void;
}) {
  const [form, setForm] = useState({
    itemIds: item.itemIds,
    catalogName: item.catalogName,
    orderNumber: item.orderNumber,
    extradata: item.extradata,
  });

  return (
    <Dialog open onOpenChange={(open) => !open && onClose()}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{mode === "add" ? "Add BC Item" : `Edit Item #${item.id}`}</DialogTitle>
        </DialogHeader>
        <div className="space-y-4 py-2">
          <div className="space-y-2">
            <Label>Catalog Name</Label>
            <Input
              value={form.catalogName}
              onChange={(e) => setForm((f) => ({ ...f, catalogName: e.target.value }))}
            />
          </div>
          <div className="space-y-2">
            <Label>Item IDs (semicolon-separated)</Label>
            <Input
              value={form.itemIds}
              onChange={(e) => setForm((f) => ({ ...f, itemIds: e.target.value }))}
            />
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label>Order</Label>
              <Input
                type="number"
                value={form.orderNumber}
                onChange={(e) => setForm((f) => ({ ...f, orderNumber: parseInt(e.target.value, 10) || 0 }))}
              />
            </div>
            <div className="space-y-2">
              <Label>Extra Data</Label>
              <Input
                value={form.extradata}
                onChange={(e) => setForm((f) => ({ ...f, extradata: e.target.value }))}
                placeholder="Optional"
              />
            </div>
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={onClose} disabled={isPending}>
            Cancel
          </Button>
          <Button onClick={() => onSubmit(form)} disabled={isPending || !form.catalogName || !form.itemIds}>
            {isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
            {mode === "add" ? "Add Item" : "Save"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}