"use client";

import { useCallback, useEffect, useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { Briefcase, Lightbulb, Pencil, Trash2 } from "lucide-react";
import MainTitle from "@/components/layout/dashboard/main-title";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import DataService from "@/config/axios";
import { useRequireSuperAdmin } from "@/hooks/use-require-super-admin";
import { getApiErrorMessage } from "@/lib/api-error";
import { uploadAdminServiceImage } from "@/lib/upload-admin-service-image";
import { BlogRichTextEditor } from "@/features/super-admin/blogs/blog-rich-text-editor";
import { cn } from "@/lib/utils";
import { toast } from "sonner";

export type ServiceCategoryType = "service" | "solution";

type Category = {
  _id: string;
  categoryType: ServiceCategoryType;
  name: string;
  slug: string;
  description?: string;
  parent?: { _id: string; name: string; slug: string; categoryType?: string } | null;
  icon?: string;
  banner?: string;
  metaTitle?: string;
  metaDescription?: string;
  metaKeywords?: string[];
};

type ServiceItemRow = {
  _id: string;
  title: string;
  slug: string;
  status: "draft" | "published";
  icon?: string;
  banner?: string;
  category?: { _id: string; name: string } | null;
};

function MediaThumb({
  src,
  variant,
  label,
}: {
  src?: string;
  variant: "icon" | "banner";
  label: string;
}) {
  const url = src?.trim();
  if (!url) {
    return <span className="text-xs text-slate-400">—</span>;
  }
  return (
    /* eslint-disable-next-line @next/next/no-img-element -- remote admin URLs from API */
    <img
      src={url}
      alt=""
      title={label}
      className={cn(
        "rounded border border-slate-200 bg-slate-50 object-cover",
        variant === "icon" ? "size-10 shrink-0" : "h-10 w-[4.5rem] shrink-0",
      )}
    />
  );
}

function getFileLabelFromUrl(url: string) {
  if (!url) return "";
  try {
    const parsed = new URL(url);
    const part = parsed.pathname.split("/").filter(Boolean).pop();
    return part || url;
  } catch {
    return url;
  }
}

export default function ServicesAdminBlock() {
  const ready = useRequireSuperAdmin();
  const params = useParams();
  const app = params.app as string;

  const [loading, setLoading] = useState(true);
  const [mainTab, setMainTab] = useState<ServiceCategoryType>("service");
  const [innerTab, setInnerTab] = useState<"categories" | "items">("categories");
  const [categories, setCategories] = useState<Category[]>([]);
  const [items, setItems] = useState<ServiceItemRow[]>([]);
  const [openCategory, setOpenCategory] = useState(false);
  const [editingCategory, setEditingCategory] = useState<Category | null>(null);
  const [categorySaving, setCategorySaving] = useState(false);
  const [iconUploading, setIconUploading] = useState(false);
  const [bannerUploading, setBannerUploading] = useState(false);
  const [categoryForm, setCategoryForm] = useState({
    name: "",
    parent: "",
    description: "",
    slug: "",
    icon: "",
    banner: "",
    metaTitle: "",
    metaDescription: "",
    metaKeywords: "",
  });

  useEffect(() => {
    setInnerTab("categories");
  }, [mainTab]);

  const load = useCallback(async (categoryType: ServiceCategoryType) => {
    try {
      const [cats, rows] = await Promise.all([
        DataService.get(`/admin/service-categories?categoryType=${categoryType}`),
        DataService.get(`/admin/service-items?categoryType=${categoryType}`),
      ]);
      setCategories(cats.data?.data || []);
      setItems(rows.data?.data || []);
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Failed to load data"));
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    if (!ready) return;
    setLoading(true);
    load(mainTab);
  }, [ready, mainTab, load]);

  const resetCategoryForm = () => {
    setEditingCategory(null);
    setCategoryForm({
      name: "",
      parent: "",
      description: "",
      slug: "",
      icon: "",
      banner: "",
      metaTitle: "",
      metaDescription: "",
      metaKeywords: "",
    });
  };

  const onUploadCategoryImage = async (
    e: React.ChangeEvent<HTMLInputElement>,
    field: "icon" | "banner",
  ) => {
    const file = e.target.files?.[0];
    e.target.value = "";
    if (!file) return;
    try {
      if (field === "icon") setIconUploading(true);
      else setBannerUploading(true);
      const url = await uploadAdminServiceImage(file);
      setCategoryForm((prev) => ({ ...prev, [field]: url }));
      toast.success(`${field === "icon" ? "Icon" : "Banner"} uploaded`);
    } catch (err: unknown) {
      toast.error(err instanceof Error ? err.message : "Upload failed");
    } finally {
      if (field === "icon") setIconUploading(false);
      else setBannerUploading(false);
    }
  };

  const saveCategory = async () => {
    try {
      if (!categoryForm.name.trim()) {
        toast.error("Category name is required");
        return;
      }
      if (editingCategory && categoryForm.parent && categoryForm.parent === editingCategory._id) {
        toast.error("Category cannot be parent of itself");
        return;
      }
      const payload = {
        name: categoryForm.name.trim(),
        parent: categoryForm.parent || null,
        description: categoryForm.description.trim(),
        slug: categoryForm.slug.trim(),
        icon: categoryForm.icon.trim(),
        banner: categoryForm.banner.trim(),
        metaTitle: categoryForm.metaTitle.trim(),
        metaDescription: categoryForm.metaDescription.trim(),
        metaKeywords: categoryForm.metaKeywords
          .split(",")
          .map((item) => item.trim())
          .filter(Boolean),
      };
      setCategorySaving(true);
      if (editingCategory) {
        await DataService.patch(`/admin/service-categories/${editingCategory._id}`, payload);
        toast.success("Category updated");
      } else {
        await DataService.post("/admin/service-categories", {
          ...payload,
          categoryType: mainTab,
        });
        toast.success("Category created");
      }
      setOpenCategory(false);
      resetCategoryForm();
      load(mainTab);
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Could not save category"));
    } finally {
      setCategorySaving(false);
    }
  };

  const removeCategory = async (category: Category) => {
    if (!confirm(`Delete category "${category.name}"?`)) return;
    try {
      await DataService.delete(`/admin/service-categories/${category._id}`);
      toast.success("Category deleted");
      load(mainTab);
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Could not delete category"));
    }
  };

  const removeItem = async (row: ServiceItemRow) => {
    if (!confirm(`Delete "${row.title}"?`)) return;
    try {
      await DataService.delete(`/admin/service-items/${row._id}`);
      toast.success("Deleted");
      load(mainTab);
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Could not delete"));
    }
  };

  const itemsTabLabel = mainTab === "service" ? "Services" : "Solutions";
  const addItemLabel = mainTab === "service" ? "Add service" : "Add solution";

  const mainTabHint =
    mainTab === "service"
      ? "Organize consulting, support, and delivery offerings. Categories and listings here are separate from solutions."
      : "Group productized solutions and packages. Uses the same tools as services, with its own category tree.";

  if (!ready || loading) {
    return <div className="rounded-md border bg-white p-8 text-center text-gray-500">Loading…</div>;
  }

  return (
    <div className="space-y-6">
      <MainTitle title="Services management (Super admin)" />

      <Tabs
        value={mainTab}
        onValueChange={(v) => setMainTab(v as ServiceCategoryType)}
        className="w-full"
      >
        <div className="mb-6 flex flex-col gap-4 rounded-xl border border-slate-200/80 bg-white px-4 py-4 shadow-sm sm:flex-row sm:items-center sm:justify-between sm:gap-6 sm:px-5">
          <div className="min-w-0 w-full space-y-2 sm:max-w-2xl">
            <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">Workspace</p>
            <TabsList className="mb-0 flex h-auto w-full min-w-0 max-w-2xl gap-1.5 rounded-lg border-0 bg-slate-100/90 p-1.5 sm:inline-flex">
              <TabsTrigger
                value="service"
                className="flex min-h-11 flex-1 items-center justify-center gap-2 rounded-md border-0 px-6 py-3 text-sm font-semibold text-slate-600 shadow-none ring-offset-white transition-all hover:bg-white/60 hover:text-slate-900 data-[state=active]:border-b-0 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-md"
              >
                <Briefcase className="size-4 shrink-0" aria-hidden />
                Services
              </TabsTrigger>
              <TabsTrigger
                value="solution"
                className="flex min-h-11 flex-1 items-center justify-center gap-2 rounded-md border-0 px-6 py-3 text-sm font-semibold text-slate-600 shadow-none ring-offset-white transition-all hover:bg-white/60 hover:text-slate-900 data-[state=active]:border-b-0 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-md"
              >
                <Lightbulb className="size-4 shrink-0" aria-hidden />
                Solutions
              </TabsTrigger>
            </TabsList>
          </div>
          <p className="max-w-xl text-sm leading-relaxed text-slate-600 sm:border-l sm:border-slate-200 sm:pl-6">
            {mainTabHint}
          </p>
        </div>

        <TabsContent value={mainTab} className="mt-0 space-y-4">
          <Tabs
            value={innerTab}
            onValueChange={(v) => setInnerTab(v as "categories" | "items")}
            className="w-full"
          >
            <TabsList className="mb-4 w-full border-b border-slate-200 bg-transparent p-0 sm:w-auto">
              <TabsTrigger
                value="categories"
                className="rounded-none border-0 border-b-2 border-transparent px-4 pb-3 pt-2 text-slate-600 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-primary"
              >
                Categories
              </TabsTrigger>
              <TabsTrigger
                value="items"
                className="rounded-none border-0 border-b-2 border-transparent px-4 pb-3 pt-2 text-slate-600 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-primary"
              >
                {itemsTabLabel}
              </TabsTrigger>
            </TabsList>

            <TabsContent value="categories" className="mt-0 space-y-4">
              <div className="flex justify-end">
                <Button
                  variant="outline"
                  onClick={() => {
                    resetCategoryForm();
                    setOpenCategory(true);
                  }}
                >
                  Add category
                </Button>
              </div>
              <div className="rounded-md border bg-white">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Category</TableHead>
                      <TableHead className="w-[52px]">Icon</TableHead>
                      <TableHead className="w-[88px]">Banner</TableHead>
                      <TableHead>Parent</TableHead>
                      <TableHead>Slug</TableHead>
                      <TableHead className="w-[100px]" />
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {categories.length === 0 ? (
                      <TableRow>
                        <TableCell colSpan={6} className="text-center text-gray-400">
                          No categories yet.
                        </TableCell>
                      </TableRow>
                    ) : (
                      categories.map((c) => (
                        <TableRow key={c._id}>
                          <TableCell>{c.name}</TableCell>
                          <TableCell className="align-middle">
                            <MediaThumb src={c.icon} variant="icon" label={`${c.name} icon`} />
                          </TableCell>
                          <TableCell className="align-middle">
                            <MediaThumb src={c.banner} variant="banner" label={`${c.name} banner`} />
                          </TableCell>
                          <TableCell>{c.parent?.name || "—"}</TableCell>
                          <TableCell>{c.slug}</TableCell>
                          <TableCell className="flex gap-2">
                            <Button
                              variant="outline"
                              size="icon"
                              onClick={() => {
                                setEditingCategory(c);
                                setCategoryForm({
                                  name: c.name,
                                  parent: c.parent?._id || "",
                                  description: c.description || "",
                                  slug: c.slug || "",
                                  icon: c.icon || "",
                                  banner: c.banner || "",
                                  metaTitle: c.metaTitle || "",
                                  metaDescription: c.metaDescription || "",
                                  metaKeywords: Array.isArray(c.metaKeywords)
                                    ? c.metaKeywords.join(", ")
                                    : "",
                                });
                                setOpenCategory(true);
                              }}
                            >
                              <Pencil className="size-4" />
                            </Button>
                            <Button variant="outline" size="icon" onClick={() => removeCategory(c)}>
                              <Trash2 className="size-4 text-red-600" />
                            </Button>
                          </TableCell>
                        </TableRow>
                      ))
                    )}
                  </TableBody>
                </Table>
              </div>
            </TabsContent>

            <TabsContent value="items" className="mt-0 space-y-4">
              <div className="flex justify-end">
                <Button asChild>
                  <Link href={`/${app}/admin/services/new?type=${mainTab}`}>{addItemLabel}</Link>
                </Button>
              </div>
              <div className="rounded-md border bg-white">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Title</TableHead>
                      <TableHead className="w-[52px]">Icon</TableHead>
                      <TableHead className="w-[88px]">Banner</TableHead>
                      <TableHead>Category</TableHead>
                      <TableHead>Slug</TableHead>
                      <TableHead>Status</TableHead>
                      <TableHead className="w-[100px]" />
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {items.length === 0 ? (
                      <TableRow>
                        <TableCell colSpan={7} className="text-center text-gray-400">
                          No items yet.
                        </TableCell>
                      </TableRow>
                    ) : (
                      items.map((p) => (
                        <TableRow key={p._id}>
                          <TableCell className="font-medium">{p.title}</TableCell>
                          <TableCell className="align-middle">
                            <MediaThumb src={p.icon} variant="icon" label={`${p.title} icon`} />
                          </TableCell>
                          <TableCell className="align-middle">
                            <MediaThumb src={p.banner} variant="banner" label={`${p.title} banner`} />
                          </TableCell>
                          <TableCell>{p.category?.name || "—"}</TableCell>
                          <TableCell>{p.slug}</TableCell>
                          <TableCell className="capitalize">{p.status}</TableCell>
                          <TableCell className="flex gap-2">
                            <Button variant="outline" size="icon" asChild>
                              <Link
                                href={`/${app}/admin/services/${p._id}/edit?type=${mainTab}`}
                                aria-label="Edit"
                              >
                                <Pencil className="size-4" />
                              </Link>
                            </Button>
                            <Button variant="outline" size="icon" onClick={() => removeItem(p)}>
                              <Trash2 className="size-4 text-red-600" />
                            </Button>
                          </TableCell>
                        </TableRow>
                      ))
                    )}
                  </TableBody>
                </Table>
              </div>
            </TabsContent>
          </Tabs>
        </TabsContent>
      </Tabs>

      <Dialog open={openCategory} onOpenChange={setOpenCategory}>
        <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-2xl">
          <DialogHeader>
            <DialogTitle>{editingCategory ? "Edit category" : "Add category"}</DialogTitle>
          </DialogHeader>
          <div className="grid gap-3">
            <div className="grid gap-2">
              <Label>Category name</Label>
              <Input
                value={categoryForm.name}
                onChange={(e) => setCategoryForm((prev) => ({ ...prev, name: e.target.value }))}
              />
            </div>
            <div className="grid gap-2">
              <Label>Parent</Label>
              <select
                className="h-10 rounded-md border bg-background px-3 text-sm"
                value={categoryForm.parent}
                onChange={(e) => setCategoryForm((prev) => ({ ...prev, parent: e.target.value }))}
              >
                <option value="">None (top-level)</option>
                {categories
                  .filter((c) => !editingCategory || c._id !== editingCategory._id)
                  .map((c) => (
                    <option key={c._id} value={c._id}>
                      {c.name}
                    </option>
                  ))}
              </select>
            </div>
            <div className="grid gap-2">
              <Label>Description</Label>
              <BlogRichTextEditor
                value={categoryForm.description}
                onChange={(html) => setCategoryForm((prev) => ({ ...prev, description: html }))}
                placeholder="Category description..."
              />
            </div>
            <div className="grid gap-2">
              <Label>Slug</Label>
              <Input
                placeholder="Leave empty to auto-generate from name"
                value={categoryForm.slug}
                onChange={(e) => setCategoryForm((prev) => ({ ...prev, slug: e.target.value }))}
              />
            </div>
            <div className="grid gap-2">
              <Label>Icon</Label>
              <div className="flex flex-col gap-3 sm:flex-row sm:items-start">
                {categoryForm.icon.trim() ? (
                  /* eslint-disable-next-line @next/next/no-img-element -- admin preview of uploaded URL */
                  <img
                    src={categoryForm.icon}
                    alt=""
                    className="size-20 shrink-0 rounded-md border border-slate-200 bg-slate-50 object-cover"
                  />
                ) : (
                  <div className="flex size-20 shrink-0 items-center justify-center rounded-md border border-dashed border-slate-200 bg-slate-50 text-center text-xs text-muted-foreground">
                    No icon
                  </div>
                )}
                <div className="flex min-w-0 flex-1 flex-col gap-2">
                  <div className="flex flex-wrap items-center gap-2">
                    <Input
                      readOnly
                      className="min-w-[12rem] flex-1"
                      value={
                        categoryForm.icon ? getFileLabelFromUrl(categoryForm.icon) : "No icon selected"
                      }
                    />
                    <label className="inline-flex h-10 cursor-pointer items-center rounded-md border px-3 text-sm">
                      {iconUploading
                        ? "Uploading..."
                        : categoryForm.icon
                          ? "Change"
                          : "Upload"}
                      <input
                        type="file"
                        accept="image/*"
                        className="hidden"
                        onChange={(e) => onUploadCategoryImage(e, "icon")}
                      />
                    </label>
                    {categoryForm.icon ? (
                      <Button
                        type="button"
                        variant="outline"
                        onClick={() => setCategoryForm((prev) => ({ ...prev, icon: "" }))}
                      >
                        Delete
                      </Button>
                    ) : null}
                  </div>
                </div>
              </div>
            </div>
            <div className="grid gap-2">
              <Label>Banner</Label>
              <div className="flex flex-col gap-3 sm:flex-row sm:items-start">
                {categoryForm.banner.trim() ? (
                  /* eslint-disable-next-line @next/next/no-img-element -- admin preview of uploaded URL */
                  <img
                    src={categoryForm.banner}
                    alt=""
                    className="h-24 w-40 max-w-full shrink-0 rounded-md border border-slate-200 bg-slate-50 object-cover"
                  />
                ) : (
                  <div className="flex h-24 w-40 max-w-full shrink-0 items-center justify-center rounded-md border border-dashed border-slate-200 bg-slate-50 text-center text-xs text-muted-foreground">
                    No banner
                  </div>
                )}
                <div className="flex min-w-0 flex-1 flex-col gap-2">
                  <div className="flex flex-wrap items-center gap-2">
                    <Input
                      readOnly
                      className="min-w-[12rem] flex-1"
                      value={
                        categoryForm.banner ? getFileLabelFromUrl(categoryForm.banner) : "No banner selected"
                      }
                    />
                    <label className="inline-flex h-10 cursor-pointer items-center rounded-md border px-3 text-sm">
                      {bannerUploading
                        ? "Uploading..."
                        : categoryForm.banner
                          ? "Change"
                          : "Upload"}
                      <input
                        type="file"
                        accept="image/*"
                        className="hidden"
                        onChange={(e) => onUploadCategoryImage(e, "banner")}
                      />
                    </label>
                    {categoryForm.banner ? (
                      <Button
                        type="button"
                        variant="outline"
                        onClick={() => setCategoryForm((prev) => ({ ...prev, banner: "" }))}
                      >
                        Delete
                      </Button>
                    ) : null}
                  </div>
                </div>
              </div>
            </div>
            <div className="grid gap-2">
              <Label>Meta title</Label>
              <Input
                value={categoryForm.metaTitle}
                onChange={(e) => setCategoryForm((prev) => ({ ...prev, metaTitle: e.target.value }))}
              />
            </div>
            <div className="grid gap-2">
              <Label>Meta description</Label>
              <Textarea
                value={categoryForm.metaDescription}
                onChange={(e) =>
                  setCategoryForm((prev) => ({ ...prev, metaDescription: e.target.value }))
                }
              />
            </div>
            <div className="grid gap-2">
              <Label>Meta keywords</Label>
              <Input
                placeholder="keyword1, keyword2"
                value={categoryForm.metaKeywords}
                onChange={(e) =>
                  setCategoryForm((prev) => ({ ...prev, metaKeywords: e.target.value }))
                }
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setOpenCategory(false)}>
              Cancel
            </Button>
            <Button onClick={saveCategory} disabled={categorySaving}>
              {categorySaving ? "Saving..." : "Save"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}