"use client";

import { useCallback, useEffect, useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { Pencil, Trash2 } from "lucide-react";
import MainTitle from "@/components/layout/dashboard/main-title";
import { Button } from "@/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import DataService from "@/config/axios";
import { useRequireSuperAdmin } from "@/hooks/use-require-super-admin";
import { getApiErrorMessage } from "@/lib/api-error";
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;
};

export default function PageSeoAdminBlock() {
  const ready = useRequireSuperAdmin();
  const params = useParams();
  const app = params.app as string;
  const [loading, setLoading] = useState(true);
  const [rows, setRows] = useState<PageSeo[]>([]);

  const load = useCallback(async () => {
    try {
      const res = await DataService.get("/admin/page-seo");
      setRows(res.data?.data || []);
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Failed to load page SEO"));
    } finally {
      setLoading(false);
    }
  }, []);

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

  const remove = async (row: PageSeo) => {
    if (!confirm(`Delete SEO config for "${row.pageName}"?`)) return;
    try {
      await DataService.delete(`/admin/page-seo/${row._id}`);
      toast.success("Page SEO deleted");
      load();
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Could not delete page SEO"));
    }
  };

  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="Pages SEO (Super admin)" />

      <div className="flex justify-end">
        <Button variant="outline" asChild>
          <Link href={`/${app}/admin/page-seo/new`}>Add page SEO</Link>
        </Button>
      </div>

      <div className="rounded-md border bg-white">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Page</TableHead>
              <TableHead>Key</TableHead>
              <TableHead>Meta title</TableHead>
              <TableHead>Canonical path</TableHead>
              <TableHead className="w-[100px]" />
            </TableRow>
          </TableHeader>
          <TableBody>
            {rows.length === 0 ? (
              <TableRow>
                <TableCell colSpan={5} className="text-center text-gray-400">
                  No page SEO configured yet.
                </TableCell>
              </TableRow>
            ) : (
              rows.map((row) => (
                <TableRow key={row._id}>
                  <TableCell className="font-medium">{row.pageName}</TableCell>
                  <TableCell>{row.pageKey}</TableCell>
                  <TableCell>{row.metaTitle || "—"}</TableCell>
                  <TableCell>{row.canonicalPath || "—"}</TableCell>
                  <TableCell className="flex gap-2">
                    <Button variant="outline" size="icon" asChild>
                      <Link href={`/${app}/admin/page-seo/${row._id}/edit`} aria-label="Edit page SEO">
                        <Pencil className="size-4" />
                      </Link>
                    </Button>
                    <Button variant="outline" size="icon" onClick={() => remove(row)}>
                      <Trash2 className="size-4 text-red-600" />
                    </Button>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}