"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { toast } from "sonner";
import {
  Search,
  SlidersHorizontal,
  Plus,
  UploadCloud,
  Eye,
  Trash2,
  MoreHorizontal,
  ChevronDown,
  ChevronLeft,
  ChevronRight,
  Download,
  ShieldOff,
  Users,
} from "lucide-react";

import { Breadcrumb } from "@/shared/components/ui/breadcrumb";
import { Card, CardContent } from "@/shared/components/ui/card";
import { Badge } from "@/shared/components/ui/badge";
import { Input } from "@/shared/components/ui/input";
import { Label } from "@/shared/components/ui/label";
import { Button } from "@/shared/components/ui/button";
import { Checkbox } from "@/shared/components/ui/checkbox";
import { Skeleton } from "@/shared/components/ui/skeleton";
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/shared/components/ui/table";
import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerFooter, DrawerClose, DrawerTrigger } from "@/shared/components/ui/drawer";
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/shared/components/ui/dropdown-menu";
import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogCancel,
  AlertDialogAction,
} from "@/shared/components/ui/alert-dialog";
import { useDebouncedValue } from "@/shared/hooks/use-debounced-value";
import { buildPageNumbers } from "@/shared/utils/build-page-numbers";
import { ListFormModal } from "../components/list-form-modal";
import { useImportContactsModal } from "../context/import-contacts-modal-context";
import { getContactListsPaginatedAction } from "../actions/get-contact-lists-paginated-action";
import { deleteContactListAction } from "../actions/delete-contact-list-action";

type MarketingChannel = "EMAIL" | "SMS";

interface ListRow {
  id: string;
  name: string;
  description: string | null;
  marketingChannel: MarketingChannel;
  activeContactsCount: number;
  createdAt: string;
}

interface ListsResponse {
  items: ListRow[];
  total: number;
  page: number;
  pageSize: number;
}

const CHANNEL_LABEL: Record<MarketingChannel, string> = {
  EMAIL: "Email",
  SMS: "SMS",
};

const CHANNEL_BADGE_STYLE: Record<MarketingChannel, string> = {
  EMAIL: "border-blue-200 text-blue-800 bg-blue-50",
  SMS: "border-violet-200 text-violet-800 bg-violet-50",
};

const PAGE_SIZE_OPTIONS = [20, 50, 100];

function formatDateInput(value: string): string {
  return new Date(`${value}T00:00:00`).toLocaleDateString("pt-BR");
}

export function ContactsListsPageView() {
  const { openImportModal } = useImportContactsModal();
  const [items, setItems] = useState<ListRow[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(20);
  const [isLoading, setIsLoading] = useState(true);

  const [searchInput, setSearchInput] = useState("");
  const search = useDebouncedValue(searchInput, 400);
  const [marketingChannel, setMarketingChannel] = useState<MarketingChannel | "">("");
  const [createdFrom, setCreatedFrom] = useState("");
  const [createdTo, setCreatedTo] = useState("");

  const [createModalOpen, setCreateModalOpen] = useState(false);
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
  const [deleteTarget, setDeleteTarget] = useState<{ ids: string[] } | null>(null);

  useEffect(() => {
    setPage(1);
  }, [search, marketingChannel, createdFrom, createdTo, pageSize]);

  const load = useCallback(() => {
    setIsLoading(true);

    getContactListsPaginatedAction({
      page,
      pageSize,
      search: search || undefined,
      marketingChannel: marketingChannel || undefined,
      createdFrom: createdFrom || undefined,
      createdTo: createdTo || undefined,
    })
      .then((data: ListsResponse) => {
        setItems(data.items ?? []);
        setTotal(data.total ?? 0);
      })
      .catch(() => {})
      .finally(() => setIsLoading(false));
  }, [page, pageSize, search, marketingChannel, createdFrom, createdTo]);

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

  const totalPages = Math.max(1, Math.ceil(total / pageSize));
  const pageNumbers = useMemo(() => buildPageNumbers(page, totalPages), [page, totalPages]);

  function toggleSelected(id: string) {
    setSelectedIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  }

  function toggleSelectAll() {
    setSelectedIds((prev) => (prev.size === items.length ? new Set() : new Set(items.map((i) => i.id))));
  }

  async function handleBulkDelete(ids: string[]) {
    try {
      await Promise.all(ids.map((id) => deleteContactListAction(id)));
      toast.success(`${ids.length} lista(s) excluída(s).`);
      setSelectedIds(new Set());
      setDeleteTarget(null);
      load();
    } catch {
      toast.error("Não foi possível excluir as listas selecionadas.");
    }
  }

  const activeAdvancedFilters = [
    (createdFrom || createdTo) && {
      key: "createdRange",
      label: `Criada ${createdFrom ? `de ${formatDateInput(createdFrom)}` : ""}${createdTo ? ` até ${formatDateInput(createdTo)}` : ""}`.trim(),
      clear: () => {
        setCreatedFrom("");
        setCreatedTo("");
      },
    },
  ].filter((f): f is { key: string; label: string; clear: () => void } => !!f);

  return (
    <div className="space-y-4">
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
        <Breadcrumb
          className="text-sm"
          items={[
            { label: "Início", href: "/" },
            { label: "Contatos", href: "/contacts" },
            { label: "Listas" },
          ]}
        />
        <div className="flex items-center gap-2">
          {/*
          <DropdownMenu>
            <DropdownMenuTrigger render={<Button variant="outline" className="h-9" />}>
              <MoreHorizontal className="w-4 h-4" />
              Mais Ações
            </DropdownMenuTrigger>
            <DropdownMenuContent>
              <DropdownMenuItem render={<Link href="/contacts" />}>
                <Users className="w-4 h-4" />
                Contatos
              </DropdownMenuItem>
              <DropdownMenuItem render={<Link href="/contacts/export" />}>
                <Download className="w-4 h-4" />
                Exportar
              </DropdownMenuItem>
              <DropdownMenuItem render={<Link href="/contacts/suppression" />}>
                <ShieldOff className="w-4 h-4" />
                Supressão
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
          <Button variant="outline" className="h-9" onClick={() => openImportModal()}>
            <UploadCloud className="w-4 h-4" />
            Importar
          </Button>
         */}


          <Button onClick={() => setCreateModalOpen(true)} className="h-9">
            <Plus className="w-4 h-4" />
            Adicione uma lista
          </Button>
        </div>
      </div>

      <div className="text-center space-y-4 py-2">
        <h1 className="text-2xl sm:text-[26px] font-extrabold text-zinc-900 leading-snug">
          Encontre as listas que você precisa
        </h1>

        <div className="relative max-w-xl mx-auto">
          <Search className="w-4 h-4 text-zinc-400 absolute left-4 top-1/2 -translate-y-1/2 pointer-events-none" />
          <Input
            value={searchInput}
            onChange={(e) => setSearchInput(e.target.value)}
            placeholder="Pesquisar listas..."
            className="pl-10 h-11 rounded-full"
          />
        </div>

        <div className="flex flex-wrap items-center justify-center gap-2">
          <Drawer>
            <DrawerTrigger
              render={
                <Button variant="outline" size="sm" className="shrink-0">
                  <SlidersHorizontal className="w-4 h-4" />
                  Pesquisa avançada
                  {activeAdvancedFilters.length > 0 && (
                    <Badge className="ml-1.5 bg-indigo-600">{activeAdvancedFilters.length}</Badge>
                  )}
                </Button>
              }
            />
            <DrawerContent>
              <DrawerHeader>
                <DrawerTitle>Pesquisa avançada</DrawerTitle>
              </DrawerHeader>
              <div className="space-y-4 text-left">
                <div className="space-y-1.5">
                  <Label>Criada de</Label>
                  <Input
                    type="date"
                    value={createdFrom}
                    onChange={(e) => setCreatedFrom(e.target.value)}
                    className="h-9"
                  />
                </div>
                <div className="space-y-1.5">
                  <Label>Criada até</Label>
                  <Input
                    type="date"
                    value={createdTo}
                    onChange={(e) => setCreatedTo(e.target.value)}
                    className="h-9"
                  />
                </div>
              </div>
              <DrawerFooter>
                <DrawerClose render={<Button variant="outline" />}>Fechar</DrawerClose>
              </DrawerFooter>
            </DrawerContent>
          </Drawer>

          <select
            value={marketingChannel}
            onChange={(e) => setMarketingChannel(e.target.value as MarketingChannel | "")}
            className="h-8 min-h-8 shrink-0 rounded-md border border-[#D1D5DB] bg-white px-3 py-1.5 text-xs font-medium text-[#374151] shadow-xs hover:bg-[#F9FAFB] hover:text-[#111827] cursor-pointer"
          >
            <option value="">Qualquer canal de marketing</option>
            <option value="EMAIL">Email</option>
            <option value="SMS">SMS</option>
          </select>

          {activeAdvancedFilters.map((filter) => (
            <Badge key={filter.key} variant="outline" className="gap-1.5 border-indigo-200 text-indigo-700 bg-indigo-50">
              {filter.label}
              <button type="button" onClick={filter.clear} className="hover:text-indigo-900">
                ×
              </button>
            </Badge>
          ))}
        </div>
      </div>

      {selectedIds.size > 0 && (
        <div className="flex items-center justify-between gap-3 bg-indigo-50 border border-indigo-100 rounded-xl px-4 py-2.5">
          <span className="text-xs font-bold text-indigo-900">{selectedIds.size} selecionada(s)</span>
          <Button variant="destructive" size="sm" onClick={() => setDeleteTarget({ ids: [...selectedIds] })}>
            <Trash2 className="w-3.5 h-3.5 mr-1.5" />
            Excluir
          </Button>
        </div>
      )}

      <Card className="bg-white border border-zinc-200/80 rounded-2xl shadow-xs overflow-hidden">
        <CardContent className="p-0">
          <div className="overflow-x-auto w-full">
            <Table className="w-full text-left text-xs">
              <TableHeader className="bg-zinc-50 border-b border-zinc-200">
                <TableRow className="hover:bg-transparent border-zinc-200">
                  <TableHead className="w-10 py-3.5 px-4">
                    <Checkbox checked={items.length > 0 && selectedIds.size === items.length} onCheckedChange={toggleSelectAll} />
                  </TableHead>
                  <TableHead className="text-xs font-bold uppercase text-zinc-700 py-3.5 px-4">Lista</TableHead>
                  <TableHead className="text-xs font-bold uppercase text-zinc-700 py-3.5 px-4">Contatos Ativos</TableHead>
                  <TableHead className="text-xs font-bold uppercase text-zinc-700 py-3.5 px-4">Canal de Marketing</TableHead>
                  <TableHead className="text-xs font-bold uppercase text-zinc-700 py-3.5 px-4">Data de Criação</TableHead>
                  <TableHead className="text-xs font-bold uppercase text-zinc-700 text-right w-16 py-3.5 px-4">Ações</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {isLoading ? (
                  Array.from({ length: 8 }).map((_, i) => (
                    <TableRow key={i} className="border-b border-zinc-100">
                      {Array.from({ length: 6 }).map((__, j) => (
                        <TableCell key={j} className="py-3.5 px-4">
                          <Skeleton className="h-4 w-full" />
                        </TableCell>
                      ))}
                    </TableRow>
                  ))
                ) : items.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={6} className="text-center py-10 text-zinc-500">
                      Nenhuma lista encontrada com esses filtros.
                    </TableCell>
                  </TableRow>
                ) : (
                  items.map((list) => {
                    const contactsHref = `/contacts?listId=${list.id}&status=ACTIVE`;
                    return (
                      <TableRow key={list.id} className="border-b border-zinc-100 hover:bg-zinc-50/80">
                        <TableCell className="py-3.5 px-4">
                          <Checkbox checked={selectedIds.has(list.id)} onCheckedChange={() => toggleSelected(list.id)} />
                        </TableCell>
                        <TableCell className="py-3.5 px-4">
                          <Link href={contactsHref} className="font-semibold text-zinc-900 hover:text-indigo-600 transition-colors">
                            {list.name}
                          </Link>
                          {list.description && <p className="text-[11px] text-zinc-500 mt-0.5">{list.description}</p>}
                        </TableCell>
                        <TableCell className="py-3.5 px-4">
                          <Link href={contactsHref} className="font-semibold text-indigo-600 hover:text-indigo-800 transition-colors">
                            {list.activeContactsCount.toLocaleString("pt-BR")}
                          </Link>
                        </TableCell>
                        <TableCell className="py-3.5 px-4">
                          <Badge variant="outline" className={CHANNEL_BADGE_STYLE[list.marketingChannel]}>
                            {CHANNEL_LABEL[list.marketingChannel]}
                          </Badge>
                        </TableCell>
                        <TableCell className="text-zinc-600 py-3.5 px-4">
                          {new Date(list.createdAt).toLocaleDateString("pt-BR")}
                        </TableCell>
                        <TableCell className="text-right py-3.5 px-4">
                          <div className="flex items-center justify-end gap-1.5">
                            <Link
                              href={contactsHref}
                              className="inline-flex items-center gap-1.5 h-8 px-3 rounded-lg border border-zinc-300 text-xs font-semibold text-zinc-700 hover:bg-zinc-100 transition-colors"
                            >
                              <Eye className="w-3.5 h-3.5" />
                              Visualizar
                            </Link>
                            <DropdownMenu>
                              <DropdownMenuTrigger
                                render={
                                  <button
                                    type="button"
                                    aria-label="Mais ações"
                                    className="h-8 w-8 shrink-0 inline-flex items-center justify-center rounded-lg border border-zinc-300 text-zinc-500 hover:bg-zinc-100 transition-colors"
                                  >
                                    <ChevronDown className="w-3.5 h-3.5" />
                                  </button>
                                }
                              />
                              <DropdownMenuContent>
                                <DropdownMenuItem onClick={() => openImportModal(list.id)}>
                                  <UploadCloud className="w-3.5 h-3.5" />
                                  Importar contatos
                                </DropdownMenuItem>
                              </DropdownMenuContent>
                            </DropdownMenu>
                          </div>
                        </TableCell>
                      </TableRow>
                    );
                  })
                )}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>

      {!isLoading && items.length > 0 && (
        <div className="flex flex-col sm:flex-row items-center justify-between gap-3 pt-1">
          <div className="flex items-center gap-2 text-xs text-zinc-500">
            <span>Linhas:</span>
            <select
              value={pageSize}
              onChange={(e) => setPageSize(Number(e.target.value))}
              className="h-8 rounded-lg border border-zinc-300 bg-white px-2 text-xs"
            >
              {PAGE_SIZE_OPTIONS.map((size) => (
                <option key={size} value={size}>
                  {size}
                </option>
              ))}
            </select>
          </div>

          <div className="flex items-center gap-1.5">
            <button
              type="button"
              onClick={() => setPage((p) => Math.max(1, p - 1))}
              disabled={page <= 1}
              aria-label="Página anterior"
              className="h-8 w-8 inline-flex items-center justify-center rounded-lg border border-zinc-300 text-zinc-700 hover:bg-zinc-100 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
            >
              <ChevronLeft className="w-4 h-4" />
            </button>
            {pageNumbers.map((p, idx) =>
              p === "..." ? (
                <span key={`ellipsis-${idx}`} className="text-xs text-zinc-400 px-1">
                  ...
                </span>
              ) : (
                <button
                  key={p}
                  type="button"
                  onClick={() => setPage(p)}
                  className={`text-xs font-semibold h-8 w-8 rounded-lg cursor-pointer ${
                    p === page ? "bg-indigo-600 text-white" : "text-zinc-700 hover:bg-zinc-100"
                  }`}
                >
                  {p}
                </button>
              )
            )}
            <button
              type="button"
              onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
              disabled={page >= totalPages}
              aria-label="Próxima página"
              className="h-8 w-8 inline-flex items-center justify-center rounded-lg border border-zinc-300 text-zinc-700 hover:bg-zinc-100 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
            >
              <ChevronRight className="w-4 h-4" />
            </button>
          </div>

          <div className="flex items-center gap-1.5 text-xs text-zinc-500">
            <span>Ir para a página</span>
            <Input
              type="number"
              min={1}
              max={totalPages}
              className="h-8 w-16 px-2"
              onKeyDown={(e) => {
                if (e.key === "Enter") {
                  const value = Number((e.target as HTMLInputElement).value);
                  if (value >= 1 && value <= totalPages) setPage(value);
                }
              }}
            />
          </div>
        </div>
      )}

      <ListFormModal open={createModalOpen} onOpenChange={setCreateModalOpen} onSaved={load} />

      <AlertDialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Excluir lista(s)?</AlertDialogTitle>
            <AlertDialogDescription>
              Esta ação não pode ser desfeita. Contatos que pertencem exclusivamente às listas selecionadas também serão excluídos.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <div className="py-2 text-sm text-zinc-800 text-center">
            Deseja excluir {deleteTarget?.ids.length} lista(s)?
          </div>
          <AlertDialogFooter>
            <AlertDialogCancel onClick={() => setDeleteTarget(null)}>Cancelar</AlertDialogCancel>
            <AlertDialogAction variant="destructive" onClick={() => deleteTarget && handleBulkDelete(deleteTarget.ids)}>
              <Trash2 className="w-4 h-4 mr-1.5" />
              Sim, excluir
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}