"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { useParams, useRouter } from "next/navigation";
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 DataService from "@/config/axios";
import { useRequireSuperAdmin } from "@/hooks/use-require-super-admin";
import { getApiErrorMessage } from "@/lib/api-error";
import { uploadAdminPageSeoImage } from "@/lib/upload-admin-page-seo-image";
import { BlogRichTextEditor } from "@/features/super-admin/blogs/blog-rich-text-editor";
import { toast } from "sonner";

type PageSeo = {
  _id: string;
  pageKey: string;
  pageName: string;
  title?: string;
  metaTitle?: string;
  metaDescription?: string;
  metaKeywords?: string[];
  canonicalPath?: string;
  image?: string;
  content?: string;
};

const PAGE_OPTIONS = [
  { key: "home", name: "Home page", defaultCanonicalPath: "/" },
  { key: "products", name: "Products page", defaultCanonicalPath: "/product" },
  { key: "services", name: "Services page", defaultCanonicalPath: "/services" },
  { key: "blogs", name: "Blogs page", defaultCanonicalPath: "/blogs" },
  { key: "about", name: "About page", defaultCanonicalPath: "/about" },
  { key: "contact-us", name: "Contact us page", defaultCanonicalPath: "/contact-us" },
  { key: "faqs", name: "FAQs page", defaultCanonicalPath: "/faqs" },
  { key: "pricing", name: "Pricing page", defaultCanonicalPath: "/pricing" },
  { key: "privacy", name: "Privacy page", defaultCanonicalPath: "/privacy" },
  { key: "terms", name: "Terms page", defaultCanonicalPath: "/terms" },
  { key: "checkout", name: "Checkout page", defaultCanonicalPath: "/checkout" },
  { key: "checkout-pay", name: "Checkout pay page", defaultCanonicalPath: "/checkout/pay" },
  { key: "account-orders", name: "Account orders page", defaultCanonicalPath: "/account/orders" },
  { key: "account-wishlist", name: "Account wishlist page", defaultCanonicalPath: "/account/wishlist" },
];

export default function PageSeoEditorPage({ seoId }: { seoId: string | null }) {
  const ready = useRequireSuperAdmin();
  const router = useRouter();
  const params = useParams();
  const app = params.app as string;
  const isEdit = Boolean(seoId);
  const listHref = `/${app}/admin/page-seo`;

  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [imgUploading, setImgUploading] = useState(false);
  const [allRows, setAllRows] = useState<PageSeo[]>([]);
  const [selectedTemplate, setSelectedTemplate] = useState(PAGE_OPTIONS[0].key);
  const [form, setForm] = useState({
    pageKey: PAGE_OPTIONS[0].key,
    pageName: PAGE_OPTIONS[0].name,
    title: "",
    metaTitle: "",
    metaDescription: "",
    metaKeywords: "",
    canonicalPath: PAGE_OPTIONS[0].defaultCanonicalPath,
    image: "",
    content: "",
  });

  const existingMap = useMemo(() => {
    const map = new Map<string, PageSeo>();
    for (const row of allRows) map.set(row.pageKey, row);
    return map;
  }, [allRows]);

  const applyTemplate = (value: string) => {
    const opt = PAGE_OPTIONS.find((o) => o.key === value);
    if (!opt) return;
    setSelectedTemplate(value);
    setForm((prev) => ({
      ...prev,
      pageKey: opt.key,
      pageName: prev.pageName.trim() ? prev.pageName : opt.name,
      canonicalPath: prev.canonicalPath.trim() ? prev.canonicalPath : opt.defaultCanonicalPath,
    }));
  };

  const load = useCallback(async () => {
    try {
      const listRes = await DataService.get("/admin/page-seo");
      const rows: PageSeo[] = listRes.data?.data || [];
      setAllRows(rows);
      if (seoId) {
        const detailRes = await DataService.get(`/admin/page-seo/${seoId}`);
        const row: PageSeo | undefined = detailRes.data?.data;
        if (!row) {
          toast.error("SEO page not found");
          router.replace(listHref);
          return;
        }
        setForm({
          pageKey: row.pageKey,
          pageName: row.pageName,
          title: row.title || "",
          metaTitle: row.metaTitle || "",
          metaDescription: row.metaDescription || "",
          metaKeywords: Array.isArray(row.metaKeywords) ? row.metaKeywords.join(", ") : "",
          canonicalPath: row.canonicalPath || "",
          image: row.image || "",
          content: row.content || "",
        });
        setSelectedTemplate(row.pageKey);
      }
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Failed to load page SEO"));
    } finally {
      setLoading(false);
    }
  }, [seoId, router, listHref]);

  useEffect(() => {
    if (ready) load();
  }, [ready, load]);

  const save = async () => {
    if (!form.pageKey.trim()) {
      toast.error("Page key is required");
      return;
    }
    if (!form.pageName.trim()) {
      toast.error("Display name is required");
      return;
    }
    try {
      setSaving(true);
      const payload = {
        pageKey: form.pageKey.trim(),
        pageName: form.pageName.trim(),
        title: form.title.trim(),
        metaTitle: form.metaTitle.trim(),
        metaDescription: form.metaDescription.trim(),
        metaKeywords: form.metaKeywords
          .split(",")
          .map((k) => k.trim())
          .filter(Boolean),
        canonicalPath: form.canonicalPath.trim(),
        image: form.image.trim(),
        content: form.content.trim(),
      };

      if (isEdit && seoId) {
        await DataService.patch(`/admin/page-seo/${seoId}`, payload);
        toast.success("Page SEO updated");
      } else {
        await DataService.post("/admin/page-seo", payload);
        toast.success("Page SEO created");
      }
      router.push(listHref);
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Could not save page SEO"));
    } finally {
      setSaving(false);
    }
  };

  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={isEdit ? "Edit page SEO" : "Add page SEO"} goBack>
        <Button variant="outline" asChild>
          <Link href={listHref}>Back to list</Link>
        </Button>
      </MainTitle>

      <div className="rounded-lg border bg-white p-6 shadow-sm">
        <div className="mx-auto grid max-w-4xl gap-3">
          <div className="grid gap-2">
            <Label>Template (optional)</Label>
            <select
              className="h-10 rounded-md border bg-background px-3 text-sm"
              value={selectedTemplate}
              onChange={(e) => applyTemplate(e.target.value)}
            >
              {PAGE_OPTIONS.map((option) => (
                <option key={option.key} value={option.key}>
                  {option.name} ({option.key})
                </option>
              ))}
            </select>
          </div>
          <div className="grid gap-2">
            <Label>Page key</Label>
            <Input
              placeholder="e.g. contact-us, about, pricing"
              value={form.pageKey}
              onChange={(e) => setForm((prev) => ({ ...prev, pageKey: e.target.value.toLowerCase().trim() }))}
            />
          </div>
          <div className="grid gap-2">
            <Label>Display name</Label>
            <Input
              value={form.pageName}
              onChange={(e) => setForm((prev) => ({ ...prev, pageName: e.target.value }))}
            />
          </div>
          {!isEdit && existingMap.has(form.pageKey.trim().toLowerCase()) ? (
            <p className="text-xs text-amber-600">
              This page key already exists. Saving will update the existing record.
            </p>
          ) : null}
          <div className="grid gap-2">
            <Label>Title</Label>
            <Input value={form.title} onChange={(e) => setForm((prev) => ({ ...prev, title: e.target.value }))} />
          </div>
          <div className="grid gap-2">
            <Label>Meta title</Label>
            <Input
              value={form.metaTitle}
              onChange={(e) => setForm((prev) => ({ ...prev, metaTitle: e.target.value }))}
            />
          </div>
          <div className="grid gap-2">
            <Label>Meta description</Label>
            <Textarea
              value={form.metaDescription}
              onChange={(e) => setForm((prev) => ({ ...prev, metaDescription: e.target.value }))}
            />
          </div>
          <div className="grid gap-2">
            <Label>Meta keywords</Label>
            <Input
              placeholder="keyword1, keyword2"
              value={form.metaKeywords}
              onChange={(e) => setForm((prev) => ({ ...prev, metaKeywords: e.target.value }))}
            />
          </div>
          <div className="grid gap-2">
            <Label>Canonical path</Label>
            <Input
              placeholder="/product"
              value={form.canonicalPath}
              onChange={(e) => setForm((prev) => ({ ...prev, canonicalPath: e.target.value }))}
            />
          </div>
          <div className="grid gap-2">
            <Label>Image</Label>
            <div className="flex flex-col gap-3 sm:flex-row sm:items-start">
              {form.image.trim() ? (
                /* eslint-disable-next-line @next/next/no-img-element -- admin preview of uploaded URL */
                <img
                  src={form.image}
                  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 image
                </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={form.image ? form.image.split("/").pop() || form.image : "No image selected"}
                  />
                  <label className="inline-flex h-10 cursor-pointer items-center rounded-md border px-3 text-sm">
                    {imgUploading ? "Uploading..." : form.image ? "Change" : "Upload"}
                    <input
                      type="file"
                      accept="image/*"
                      className="hidden"
                      disabled={imgUploading}
                      onChange={async (e) => {
                        const file = e.target.files?.[0];
                        e.target.value = "";
                        if (!file) return;
                        setImgUploading(true);
                        try {
                          const url = await uploadAdminPageSeoImage(file);
                          setForm((prev) => ({ ...prev, image: url }));
                          toast.success("Image uploaded");
                        } catch (err: unknown) {
                          toast.error(err instanceof Error ? err.message : "Upload failed");
                        } finally {
                          setImgUploading(false);
                        }
                      }}
                    />
                  </label>
                  {form.image ? (
                    <Button type="button" variant="outline" onClick={() => setForm((prev) => ({ ...prev, image: "" }))}>
                      Delete
                    </Button>
                  ) : null}
                </div>
              </div>
            </div>
          </div>
          <div className="grid gap-2">
            <Label>Content</Label>
            <BlogRichTextEditor
              value={form.content}
              onChange={(html) => setForm((prev) => ({ ...prev, content: html }))}
              placeholder="Add page content..."
            />
          </div>
          <div className="flex flex-wrap justify-end gap-2 border-t pt-6">
            <Button variant="outline" asChild>
              <Link href={listHref}>Cancel</Link>
            </Button>
            <Button onClick={save} disabled={saving || imgUploading}>
              {saving ? "Saving..." : "Save"}
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}