"use client";

import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import {
  FileText,
  FolderPlus,
  Hash,
  Layers3,
  Pencil,
  ShieldCheck,
  ShieldOff,
  Text,
  Trash2,
} from "lucide-react";

import type { deleteCategoryAction, upsertCategoryAction } from "@/app/_admin/portfolio/actions";
import { AppCard } from "@/components/ui/app-card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { CardContent } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { Textarea } from "@/components/ui/textarea";
import type { PortfolioCategoryView } from "@/lib/portfolio";

const locales = [
  { key: "Ar", label: "Arabic" },
  { key: "En", label: "English" },
  { key: "De", label: "German" },
] as const;

const copy = {
  addCategory: "Add Category",
  saveCategory: "Save Category",
  save: "Save",
  delete: "Delete",
  active: "Active",
  sortOrder: "Sort Order",
  projects: "Projects",
  description: "Description",
  currentCategories: "Current Categories",
  modalDescription: "Create a new category with a faster flow for basics, localization, and status.",
  editDescription: "Update category content, change status, or remove the category if it has no assigned projects.",
  empty: "No categories yet.",
  deleteBlocked: "Delete becomes available only when no projects are assigned.",
  editCategory: "Edit Category",
  visibilityActive: "Visible on public portfolio filters.",
  visibilityInactive: "Hidden from public portfolio filters.",
  statusSection: "Visibility & Status",
  statusHint: "Control whether the category can be assigned and shown publicly.",
};

type CategoryAction = typeof upsertCategoryAction;
type CategoryDeleteAction = typeof deleteCategoryAction;

type CategoryFormValues = {
  slug?: string;
  sortOrder?: number;
  isActive?: boolean;
  nameAr?: string;
  nameEn?: string;
  nameDe?: string;
  descriptionAr?: string;
  descriptionEn?: string;
  descriptionDe?: string;
};

type PortfolioCategoriesManagerProps = {
  categories: Array<PortfolioCategoryView & { projectCount: number }>;
  activeCount: number;
  assignedProjects: number;
  saveCategoryAction: CategoryAction;
  removeCategoryAction: CategoryDeleteAction;
};

function CategoryLocaleFields({
  idPrefix,
  values,
}: {
  idPrefix: string;
  values?: CategoryFormValues;
}) {
  return (
    <div className="space-y-4">
      <div className="space-y-1">
        <p className="text-sm font-semibold text-foreground">Localized Content</p>
        <p className="text-sm text-muted-foreground">
          Keep names and descriptions ready in all supported locales.
        </p>
      </div>

      <div className="grid gap-4 xl:grid-cols-3">
        {locales.map((locale) => {
          const nameKey = `name${locale.key}` as const;
          const descriptionKey = `description${locale.key}` as const;

          return (
            <AppCard key={`${idPrefix}-${locale.key}`} level={2} padding="sm" className="space-y-4 rounded-nested">
              <p className="text-sm font-medium text-foreground">{locale.label}</p>

              <div className="space-y-2">
                <Label htmlFor={`${idPrefix}-${nameKey}`}>Name</Label>
                <div className="relative">
                  <Text className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                  <Input
                    id={`${idPrefix}-${nameKey}`}
                    name={nameKey}
                    defaultValue={values?.[nameKey] ?? ""}
                    required
                    placeholder={`Name ${locale.label}`}
                    className="pl-9"
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor={`${idPrefix}-${descriptionKey}`}>{copy.description}</Label>
                <div className="relative">
                  <FileText className="pointer-events-none absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                  <Textarea
                    id={`${idPrefix}-${descriptionKey}`}
                    name={descriptionKey}
                    rows={5}
                    defaultValue={values?.[descriptionKey] ?? ""}
                    required
                    placeholder={`${copy.description} ${locale.label}`}
                    className="pl-9"
                  />
                </div>
              </div>
            </AppCard>
          );
        })}
      </div>
    </div>
  );
}

function CategoryStatusFields({
  formId,
  values,
}: {
  formId: string;
  values?: CategoryFormValues;
}) {
  const isActive = values?.isActive ?? true;

  return (
    <div className="space-y-4">
      <div className="space-y-1">
        <p className="text-sm font-semibold text-foreground">{copy.statusSection}</p>
        <p className="text-sm text-muted-foreground">{copy.statusHint}</p>
      </div>

      <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_220px]">
        <AppCard level={2} padding="sm" className="rounded-nested">
          <div className="flex items-start gap-3">
            {isActive ? (
              <ShieldCheck className="mt-0.5 h-4 w-4 text-status-success" />
            ) : (
              <ShieldOff className="mt-0.5 h-4 w-4 text-status-warning" />
            )}
            <div className="space-y-2">
              <div className="flex flex-wrap items-center gap-2">
                <p className="text-sm font-medium text-foreground">{copy.active}</p>
                <Badge variant={isActive ? "success" : "warning"}>
                  {isActive ? "Public" : "Hidden"}
                </Badge>
              </div>
              <p className="text-sm text-muted-foreground">
                {isActive ? copy.visibilityActive : copy.visibilityInactive}
              </p>
            </div>
          </div>
        </AppCard>

        <label
          htmlFor={`${formId}-isActive`}
          className="flex items-center gap-3 rounded-nested border border-input bg-card px-4 py-3 text-sm"
        >
          <Checkbox id={`${formId}-isActive`} name="isActive" defaultChecked={isActive} />
          {copy.active}
        </label>
      </div>
    </div>
  );
}

function CategoryForm({
  formId,
  action,
  values,
  categoryId,
}: {
  formId: string;
  action: CategoryAction;
  values?: CategoryFormValues;
  categoryId?: string;
}) {
  return (
    <form id={formId} action={action} className="space-y-6">
      {categoryId ? <input type="hidden" name="id" value={categoryId} /> : null}
      <input type="hidden" name="redirectPath" value="/portfolio/categories" />

      <div className="space-y-4">
        <div className="space-y-1">
          <p className="text-sm font-semibold text-foreground">Basics</p>
          <p className="text-sm text-muted-foreground">
            Set the stable identifier and display order first.
          </p>
        </div>

        <div className="grid gap-4 lg:grid-cols-3">
          <div className="space-y-2">
            <Label htmlFor={`${formId}-slug`}>Slug</Label>
            <div className="relative">
              <Text className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                id={`${formId}-slug`}
                name="slug"
                defaultValue={values?.slug ?? ""}
                required
                placeholder="Slug"
                className="pl-9"
              />
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor={`${formId}-sortOrder`}>{copy.sortOrder}</Label>
            <div className="relative">
              <Hash className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                id={`${formId}-sortOrder`}
                name="sortOrder"
                type="number"
                min="0"
                defaultValue={values?.sortOrder ?? 0}
                required
                className="pl-9"
              />
            </div>
          </div>
        </div>
      </div>

      <Separator />

      <CategoryLocaleFields idPrefix={formId} values={values} />

      <Separator />

      <CategoryStatusFields formId={formId} values={values} />
    </form>
  );
}

function EditCategoryDialog({
  category,
  open,
  onOpenChange,
  saveCategoryAction,
  removeCategoryAction,
}: {
  category: PortfolioCategoriesManagerProps["categories"][number];
  open: boolean;
  onOpenChange: (open: boolean) => void;
  saveCategoryAction: CategoryAction;
  removeCategoryAction: CategoryDeleteAction;
}) {
  const formId = `portfolio-category-form-${category.id}`;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-h-[90vh] max-w-5xl overflow-y-auto">
        <DialogHeader>
          <DialogTitle>{copy.editCategory}</DialogTitle>
          <DialogDescription>{copy.editDescription}</DialogDescription>
        </DialogHeader>

        <div className="grid gap-3 sm:grid-cols-3">
          <AppCard level={2} padding="sm" className="rounded-nested">
            <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Projects</p>
            <p className="mt-2 text-lg font-semibold text-foreground">{category.projectCount}</p>
          </AppCard>
          <AppCard level={2} padding="sm" className="rounded-nested">
            <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Status</p>
            <div className="mt-2">
              <Badge variant={category.isActive ? "success" : "warning"}>
                {category.isActive ? "Public" : "Hidden"}
              </Badge>
            </div>
          </AppCard>
          <AppCard level={2} padding="sm" className="rounded-nested">
            <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Order</p>
            <p className="mt-2 text-lg font-semibold text-foreground">{category.sortOrder}</p>
          </AppCard>
        </div>

        <CategoryForm
          formId={formId}
          action={saveCategoryAction}
          categoryId={category.id}
          values={{
            slug: category.slug,
            sortOrder: category.sortOrder,
            isActive: category.isActive,
            nameAr: category.name.ar,
            nameEn: category.name.en,
            nameDe: category.name.de,
            descriptionAr: category.description.ar,
            descriptionEn: category.description.en,
            descriptionDe: category.description.de,
          }}
        />

        <DialogFooter className="items-center justify-between sm:flex-row">
          <p className="text-sm text-muted-foreground">
            {category.projectCount > 0
              ? `Delete blocked. ${copy.deleteBlocked}`
              : "Category can be deleted."}
          </p>
          <div className="flex w-full flex-col-reverse gap-2 sm:w-auto sm:flex-row">
            <form action={removeCategoryAction}>
              <input type="hidden" name="id" value={category.id} />
              <input type="hidden" name="redirectPath" value="/portfolio/categories" />
              <Button type="submit" variant="destructive" disabled={category.projectCount > 0}>
                <Trash2 className="h-4 w-4" />
                {copy.delete}
              </Button>
            </form>
            <Button type="submit" form={formId}>
              {copy.save}
            </Button>
          </div>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

export function PortfolioCategoriesManager({
  categories,
  activeCount,
  assignedProjects,
  saveCategoryAction,
  removeCategoryAction,
}: PortfolioCategoriesManagerProps) {
  const searchParams = useSearchParams();
  const [createOpen, setCreateOpen] = useState(false);
  const [editingCategoryId, setEditingCategoryId] = useState<string | null>(null);

  useEffect(() => {
    if (searchParams.has("success")) {
      setCreateOpen(false);
      setEditingCategoryId(null);
    }
  }, [searchParams]);

  return (
    <div className="space-y-4">
      <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
        <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-muted-foreground">
          <span>
            Total:
            {" "}
            <span className="font-semibold text-foreground">{categories.length}</span>
          </span>
          <span>
            Active:
            {" "}
            <span className="font-semibold text-foreground">{activeCount}</span>
          </span>
          <span>
            Assigned:
            {" "}
            <span className="font-semibold text-foreground">{assignedProjects}</span>
          </span>
        </div>

        <Dialog open={createOpen} onOpenChange={setCreateOpen}>
          <DialogTrigger asChild>
            <Button>
              <FolderPlus className="h-4 w-4" />
              {copy.addCategory}
            </Button>
          </DialogTrigger>
          <DialogContent className="max-h-[90vh] max-w-5xl overflow-y-auto">
            <DialogHeader>
              <DialogTitle>{copy.addCategory}</DialogTitle>
              <DialogDescription>{copy.modalDescription}</DialogDescription>
            </DialogHeader>

            <AppCard level={2} padding="sm" className="rounded-nested">
              <div className="grid gap-3 sm:grid-cols-3">
                <div className="space-y-1">
                  <p className="text-sm font-medium text-foreground">1. Basics</p>
                  <p className="text-sm text-muted-foreground">Slug and sort order first.</p>
                </div>
                <div className="space-y-1">
                  <p className="text-sm font-medium text-foreground">2. Localization</p>
                  <p className="text-sm text-muted-foreground">Names and descriptions in all locales.</p>
                </div>
                <div className="space-y-1">
                  <p className="text-sm font-medium text-foreground">3. Visibility</p>
                  <p className="text-sm text-muted-foreground">Decide if the category is public or hidden.</p>
                </div>
              </div>
            </AppCard>

            <CategoryForm
              formId="portfolio-category-create-form"
              action={saveCategoryAction}
            />

            <DialogFooter>
              <Button type="submit" form="portfolio-category-create-form">
                {copy.saveCategory}
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>

      <AppCard level={3}>
        <CardContent className="space-y-4 p-6">
          <div className="flex items-center gap-3">
            <Layers3 className="h-5 w-5 text-brand-primary" />
            <h2 className="text-lg font-semibold text-foreground">{copy.currentCategories}</h2>
          </div>

          {categories.length === 0 ? (
            <p className="text-sm text-muted-foreground">{copy.empty}</p>
          ) : (
            <div className="grid gap-3">
              {categories.map((category) => (
                <AppCard
                  key={category.id}
                  level={2}
                  padding="sm"
                  className="rounded-nested"
                >
                  <div className="flex min-w-0 flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                    <div className="min-w-0 space-y-1">
                      <div className="flex flex-wrap items-center gap-2">
                        <span className="truncate text-base font-semibold text-foreground">
                          {category.name.de || category.name.en || category.name.ar}
                        </span>
                        <Badge variant={category.isActive ? "success" : "warning"}>
                          {category.isActive ? "Active" : "Inactive"}
                        </Badge>
                      </div>
                      <div className="flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted-foreground">
                        <span>{category.slug}</span>
                        <span>{copy.projects}: {category.projectCount}</span>
                        <span>{copy.sortOrder}: {category.sortOrder}</span>
                      </div>
                    </div>

                    <Button
                      type="button"
                      variant="outline"
                      onClick={() => setEditingCategoryId(category.id)}
                    >
                      <Pencil className="h-4 w-4" />
                      Edit
                    </Button>
                  </div>

                  <EditCategoryDialog
                    category={category}
                    open={editingCategoryId === category.id}
                    onOpenChange={(open) => setEditingCategoryId(open ? category.id : null)}
                    saveCategoryAction={saveCategoryAction}
                    removeCategoryAction={removeCategoryAction}
                  />
                </AppCard>
              ))}
            </div>
          )}
        </CardContent>
      </AppCard>
    </div>
  );
}