"use client";

import { Suspense } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
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 {
  DataTable,
  DataTableCell,
  DataTableEmpty,
  DataTableHead,
  DataTableLoading,
  DataTableRow,
} from "@/components/ui/data-table";
import { useInstantList } from "@/hooks/use-instant-list";
import { useLocale } from "@/components/providers/locale-provider";
import { ListDeleteButton } from "@/components/ui/list-delete-button";
import { cn } from "@/lib/utils";

interface CampaignRow {
  _id: string;
  name: string;
  segmentId?: { name?: string };
  templateId?: { name?: string };
  status: string;
  stats: {
    totalRecipients: number;
    sent: number;
    opened: number;
    replied: number;
  };
  createdAt: string;
}

const DEFAULT_FILTERS = { q: "", status: "" };

function CampaignsListInner({
  initialData,
  initialPagination,
}: {
  initialData: CampaignRow[];
  initialPagination?: { totalPages?: number };
}) {
  const router = useRouter();
  const { locale, t } = useLocale();
  const {
    data,
    loading,
    totalPages,
    page,
    setPage,
    values,
    setFilters,
    clearFilters,
    activeChips,
    refetch,
  } = useInstantList<CampaignRow>({
    apiPath: "/api/campaigns",
    defaultFilters: DEFAULT_FILTERS,
    initialData,
    initialPagination,
  });

  return (
    <PageLayout
      title={locale === "ar" ? "الحملات" : "Campaigns"}
      description={
        locale === "ar" ? "إدارة حملات البريد والمتابعة" : "Manage email campaigns and performance"
      }
      actions={
        <Button asChild size="sm">
          <Link href="/campaigns/new">{locale === "ar" ? "إنشاء حملة" : "New campaign"}</Link>
        </Button>
      }
    >
      <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"
        />
        <FilterSelect
          value={values.status}
          onChange={(v) => setFilters({ status: v })}
          options={[
            "draft",
            "scheduled",
            "paused",
            "sending",
            "sent",
            "completed",
            "failed",
            "archived",
          ]}
          allLabel={locale === "ar" ? "كل الحالات" : "All statuses"}
        />
      </FilterToolbar>

      <div className="space-y-3 md:hidden">
        {loading && data.length === 0 ? (
          <p className="py-8 text-center text-sm text-muted-foreground">{t.loading}</p>
        ) : data.length === 0 ? (
          <p className="py-8 text-center text-sm text-muted-foreground">{t.noResults}</p>
        ) : (
          data.map((row) => (
            <div
              key={row._id}
              className="surface-elevated relative flex items-start gap-2 p-4 active:scale-[0.99]"
            >
              <button
                type="button"
                className="min-w-0 flex-1 text-start"
                onClick={() => router.push(`/campaigns/${row._id}`)}
              >
                <p className="font-semibold">{row.name}</p>
                <p className="mt-1 text-sm text-muted-foreground">{row.status}</p>
                <p className="mt-2 text-xs text-primary">
                  {locale === "ar" ? "مرسل" : "Sent"}: {row.stats?.sent ?? 0}
                </p>
              </button>
              <ListDeleteButton
                apiUrl={`/api/campaigns/${row._id}`}
                title={locale === "ar" ? "حذف الحملة" : "Delete campaign"}
                description={
                  locale === "ar"
                    ? "سيتم حذف الحملة وجميع المستلمين. لا يمكن التراجع."
                    : "The campaign and all recipients will be deleted. This cannot be undone."
                }
                successMessage={locale === "ar" ? "تم حذف الحملة" : "Campaign deleted"}
                onDeleted={() => void refetch()}
              />
            </div>
          ))
        )}
      </div>

      <DataTable className={cn("hidden md:block", loading && data.length > 0 && "opacity-70")}>
        <DataTableHead>
          <DataTableRow>
            <DataTableCell>{locale === "ar" ? "الاسم" : "Name"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "الشريحة" : "Segment"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "الحالة" : "Status"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "مرسل" : "Sent"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "فتح" : "Opened"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "رد" : "Replied"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "إجراء" : "Action"}</DataTableCell>
          </DataTableRow>
        </DataTableHead>
        <tbody>
          {loading && data.length === 0 ? (
            <DataTableLoading colSpan={7} />
          ) : data.length === 0 ? (
            <DataTableEmpty colSpan={7} />
          ) : (
            data.map((row) => (
              <DataTableRow
                key={row._id}
                onClick={() => router.push(`/campaigns/${row._id}`)}
              >
                <DataTableCell className="font-medium">{row.name}</DataTableCell>
                <DataTableCell>{row.segmentId?.name ?? "—"}</DataTableCell>
                <DataTableCell>{row.status}</DataTableCell>
                <DataTableCell>{row.stats?.sent ?? 0}</DataTableCell>
                <DataTableCell>{row.stats?.opened ?? 0}</DataTableCell>
                <DataTableCell>{row.stats?.replied ?? 0}</DataTableCell>
                <DataTableCell
                  className="w-[1%] whitespace-nowrap"
                  onClick={(e) => e.stopPropagation()}
                >
                  <ListDeleteButton
                    apiUrl={`/api/campaigns/${row._id}`}
                    title={locale === "ar" ? "حذف الحملة" : "Delete campaign"}
                    description={
                      locale === "ar"
                        ? "سيتم حذف الحملة وجميع المستلمين. لا يمكن التراجع."
                        : "The campaign and all recipients will be deleted. This cannot be undone."
                    }
                    successMessage={locale === "ar" ? "تم حذف الحملة" : "Campaign deleted"}
                    onDeleted={() => void refetch()}
                  />
                </DataTableCell>
              </DataTableRow>
            ))
          )}
        </tbody>
      </DataTable>

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

export function CampaignsList(props: {
  initialData: CampaignRow[];
  initialPagination?: { totalPages?: number };
}) {
  return (
    <Suspense fallback={<div className="p-8 text-muted-foreground">...</div>}>
      <CampaignsListInner {...props} />
    </Suspense>
  );
}