"use client";



import { Suspense, useState } from "react";

import Link from "next/link";

import { useRouter } from "next/navigation";

import { Copy, Eye, LayoutGrid, List, Pencil, Plus } from "lucide-react";
import { TemplateDeleteButton } from "@/components/email-templates/template-delete-button";

import { FilterToolbar } from "@/components/design-system/filter-toolbar";

import { PageLayout } from "@/components/design-system/page-layout";

import { FilterSelect } from "@/components/ui/filter-select";

import { ListPagination } from "@/components/ui/list-pagination";

import { Button } from "@/components/ui/button";

import { Input } from "@/components/ui/input";

import { Badge } from "@/components/ui/badge";

import {

  DataTable,

  DataTableCell,

  DataTableEmpty,

  DataTableHead,

  DataTableLoading,

  DataTableRow,

} from "@/components/ui/data-table";

import { useInstantList } from "@/hooks/use-instant-list";

import { LAYOUT_THEME_LABELS } from "@/lib/email-builder/render";

import { CATEGORY_LABELS } from "@/lib/email-builder/starters";

import type { LayoutTheme } from "@/lib/email-builder/types";

import { useLocale } from "@/components/providers/locale-provider";

import { cn } from "@/lib/utils";

import { stripDangerousHtml } from "@/lib/html-safety";



interface TemplateRow {

  _id: string;

  name: string;

  subject: string;

  category?: string;

  layoutTheme?: string;

  status: string;

  language: string;

  variables: string[];

  updatedAt: string;

  htmlContent?: string;

}



const DEFAULT_FILTERS = {

  q: "",

  status: "",

  language: "",

  category: "",

};



function TemplatesListInner({

  initialData,

  initialPagination,

}: {

  initialData: TemplateRow[];

  initialPagination?: { totalPages?: number };

}) {

  const router = useRouter();

  const { locale, t } = useLocale();

  const isAr = locale === "ar";

  const [view, setView] = useState<"grid" | "table">("grid");



  const {

    data,

    loading,

    totalPages,

    page,

    setPage,

    values,

    setFilters,

    clearFilters,

    activeChips,

    refetch,

  } = useInstantList<TemplateRow>({

    apiPath: "/api/email-templates",

    defaultFilters: DEFAULT_FILTERS,

    initialData,

    initialPagination,

  });



  async function duplicate(id: string) {

    const res = await fetch(`/api/email-templates/${id}/duplicate`, { method: "POST" });

    const json = await res.json();

    if (res.ok && json.data?._id) {

      router.push(`/email-templates/${json.data._id}/edit`);

    }

  }

  function refreshList() {
    void refetch();
    router.refresh();
  }



  return (

    <PageLayout

      title={isAr ? "قوالب البريد" : "Email templates"}

      description={isAr ? "منشئ قوالب احترافي مع معاينة وهوية العلامة" : "Professional builder with brand preview"}

      actions={

        <div className="flex gap-2">

          <Button

            type="button"

            variant="outline"

            size="icon"

            onClick={() => setView(view === "grid" ? "table" : "grid")}

          >

            {view === "grid" ? <List className="h-4 w-4" /> : <LayoutGrid className="h-4 w-4" />}

          </Button>

          <Button asChild size="sm">

            <Link href="/email-templates/new">

              <Plus className="h-4 w-4" />

              {isAr ? "قالب جديد" : "New template"}

            </Link>

          </Button>

        </div>

      }

    >

      <FilterToolbar

        chips={activeChips.map((c) => ({ key: c.key, value: c.value }))}

        onClear={clearFilters}

      >

        <Input

          placeholder={t.search}

          value={values.q}

          onChange={(e) => setFilters({ q: e.target.value })}

          className="sm:col-span-2 lg:col-span-4"

        />

        <FilterSelect

          value={values.status}

          onChange={(v) => setFilters({ status: v })}

          options={["draft", "active", "archived"]}

          allLabel={isAr ? "كل الحالات" : "All statuses"}

        />

        <FilterSelect

          value={values.language}

          onChange={(v) => setFilters({ language: v })}

          options={["ar", "en", "mixed"]}

          allLabel={isAr ? "كل اللغات" : "All languages"}

        />

        <FilterSelect

          value={values.category}

          onChange={(v) => setFilters({ category: v })}

          options={[

            "general",

            "hr",

            "recruitment",

            "operations",

            "digital_transformation",

            "consulting",

            "follow_up",

            "event",

            "custom",

          ]}

          allLabel={isAr ? "كل التصنيفات" : "All categories"}

        />

      </FilterToolbar>



      {view === "grid" ? (

        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">

          {loading && data.length === 0 ? (

            <p className="col-span-full py-8 text-center text-muted-foreground">{t.loading}</p>

          ) : data.length === 0 ? (

            <p className="col-span-full py-8 text-center text-muted-foreground">{t.noResults}</p>

          ) : (

            data.map((row) => {

              const theme = row.layoutTheme as LayoutTheme | undefined;

              const thumb = row.htmlContent

                ? stripDangerousHtml(row.htmlContent).slice(0, 500)

                : "";

              return (

                <article key={row._id} className="surface-elevated flex flex-col overflow-hidden">

                  <div className="h-28 overflow-hidden border-b border-border bg-[#e8eef3] p-2">

                    {thumb ? (

                      <div

                        className="origin-top scale-[0.35] text-[10px]"

                        dangerouslySetInnerHTML={{ __html: thumb }}

                      />

                    ) : (

                      <div className="flex h-full items-center justify-center text-xs text-muted-foreground">

                        Preview

                      </div>

                    )}

                  </div>

                  <div className="flex flex-1 flex-col p-4">

                    <Link href={`/email-templates/${row._id}`} className="font-semibold hover:text-primary">

                      {row.name}

                    </Link>

                    <p className="mt-1 line-clamp-1 text-xs text-muted-foreground">{row.subject}</p>

                    <div className="mt-3 flex flex-wrap gap-1">

                      {row.category ? (

                        <Badge variant="secondary" className="text-[10px]">

                          {isAr

                            ? CATEGORY_LABELS[row.category]?.ar ?? row.category

                            : row.category}

                        </Badge>

                      ) : null}

                      {theme ? (

                        <Badge variant="secondary" className="text-[10px]">

                          {LAYOUT_THEME_LABELS[theme]?.ar?.slice(0, 12) ?? theme}

                        </Badge>

                      ) : null}

                      <Badge className="text-[10px]">{row.status}</Badge>

                    </div>

                    <p className="mt-2 text-[10px] text-muted-foreground">

                      {row.variables?.length ?? 0} vars ·{" "}

                      {new Date(row.updatedAt).toLocaleDateString(isAr ? "ar-SA" : "en-US")}

                    </p>

                    <div className="mt-auto flex gap-1 pt-3">

                      <Button asChild variant="outline" size="sm">

                        <Link href={`/email-templates/${row._id}`}>

                          <Eye className="h-3.5 w-3.5" />

                        </Link>

                      </Button>

                      <Button asChild variant="outline" size="sm">

                        <Link href={`/email-templates/${row._id}/edit`}>

                          <Pencil className="h-3.5 w-3.5" />

                        </Link>

                      </Button>

                      <Button type="button" variant="outline" size="sm" onClick={() => void duplicate(row._id)}>

                        <Copy className="h-3.5 w-3.5" />

                      </Button>

                      <TemplateDeleteButton
                        id={row._id}
                        name={row.name}
                        onDeleted={refreshList}
                      />

                    </div>

                  </div>

                </article>

              );

            })

          )}

        </div>

      ) : (

        <DataTable className={cn(loading && data.length > 0 && "opacity-70")}>

          <DataTableHead>

            <DataTableRow>

              <DataTableCell>{isAr ? "الاسم" : "Name"}</DataTableCell>

              <DataTableCell>{isAr ? "التصنيف" : "Category"}</DataTableCell>

              <DataTableCell>{isAr ? "التصميم" : "Theme"}</DataTableCell>

              <DataTableCell>{isAr ? "الحالة" : "Status"}</DataTableCell>

              <DataTableCell>{isAr ? "إجراء" : "Actions"}</DataTableCell>

            </DataTableRow>

          </DataTableHead>

          <tbody>

            {loading && data.length === 0 ? (

              <DataTableLoading colSpan={5} />

            ) : data.length === 0 ? (

              <DataTableEmpty colSpan={5} />

            ) : (

              data.map((row) => (

                <DataTableRow key={row._id}>

                  <DataTableCell>

                    <Link href={`/email-templates/${row._id}`} className="font-medium text-primary hover:underline">

                      {row.name}

                    </Link>

                  </DataTableCell>

                  <DataTableCell>{row.category ?? "—"}</DataTableCell>

                  <DataTableCell>{row.layoutTheme ?? "—"}</DataTableCell>

                  <DataTableCell>{row.status}</DataTableCell>

                  <DataTableCell>

                    <div className="flex gap-1">

                      <Button asChild variant="ghost" size="sm">

                        <Link href={`/email-templates/${row._id}/edit`}>{isAr ? "تعديل" : "Edit"}</Link>

                      </Button>

                      <Button type="button" variant="ghost" size="sm" onClick={() => void duplicate(row._id)}>

                        {isAr ? "نسخ" : "Copy"}

                      </Button>

                      <TemplateDeleteButton
                        id={row._id}
                        name={row.name}
                        onDeleted={refreshList}
                      />

                    </div>

                  </DataTableCell>

                </DataTableRow>

              ))

            )}

          </tbody>

        </DataTable>

      )}



      <ListPagination page={page} totalPages={totalPages} loading={loading} onPageChange={setPage} />

    </PageLayout>

  );

}



export function TemplatesList(props: {

  initialData: TemplateRow[];

  initialPagination?: { totalPages?: number };

}) {

  return (

    <Suspense fallback={<div className="p-8 text-muted-foreground">...</div>}>

      <TemplatesListInner {...props} />

    </Suspense>

  );

}