import { useState, useMemo, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { FileText, Plus, Eye, Edit, Copy, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { usePrompts } from "@/contexts/PromptsContext";
import type { Prompt } from "@/contexts/PromptsContext";
import { promptsService, type PromptItem } from "@/services/promptsApi";
import { toast } from "sonner";

function formatarDataCriacao(iso: string | undefined): string {
  if (!iso?.trim()) return "—";
  try {
    return new Date(iso.replace(" ", "T")).toLocaleDateString("pt-BR");
  } catch {
    return iso;
  }
}

function apiItemToPrompt(item: PromptItem): Prompt {
  return {
    id: item.id,
    titulo: item.titulo,
    area: item.area_nome,
    area_id: item.area_id,
    descricao: item.descricao ?? undefined,
    conteudo: item.conteudo ?? "",
    created_at: item.created_at,
  };
}

export const PromptsView = () => {
  const navigate = useNavigate();
  const { prompts, setPrompts, areaItems, refreshAreas } = usePrompts();

  const [isDetailsDialogOpen, setIsDetailsDialogOpen] = useState(false);
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
  const [selectedPrompt, setSelectedPrompt] = useState<Prompt | null>(null);
  const [promptToDelete, setPromptToDelete] = useState<Prompt | null>(null);
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(10);

  const [filterNome, setFilterNome] = useState("");
  const [filterAreaId, setFilterAreaId] = useState<string>("");
  const [promptsList, setPromptsList] = useState<Prompt[]>([]);
  const [totalRegistros, setTotalRegistros] = useState(0);
  const [totalPaginas, setTotalPaginas] = useState(1);
  const [loadingList, setLoadingList] = useState(true);
  const [isDeletingPrompt, setIsDeletingPrompt] = useState(false);

  const totalPages = Math.max(1, totalPaginas);

  const selectedAreaItem = useMemo(
    () => (selectedPrompt ? areaItems.find((a) => a.nome === selectedPrompt.area || a.id === selectedPrompt.area_id) ?? null : null),
    [selectedPrompt, areaItems]
  );

  useEffect(() => {
    let cancelled = false;
    setLoadingList(true);
    promptsService.listar({
      titulo: filterNome.trim() || undefined,
      area_id: filterAreaId.trim() || undefined,
      page: currentPage,
      per_page: itemsPerPage,
    })
      .then((res) => {
        if (!cancelled) {
          const list = (res.data ?? []).map(apiItemToPrompt);
          setPromptsList(list);
          setTotalRegistros(res.total_registros ?? 0);
          setTotalPaginas(res.total_paginas ?? 1);
          setPrompts((prev) => {
            const byId = new Map(prev.map((p) => [p.id, p]));
            list.forEach((p) => byId.set(p.id, p));
            return Array.from(byId.values());
          });
        }
      })
      .catch((e: unknown) => {
        if (!cancelled) {
          const msg = e && typeof e === "object" && "message" in e ? (e as { message: string }).message : "Erro ao carregar prompts.";
          toast.error(msg);
          setPromptsList([]);
          setTotalRegistros(0);
          setTotalPaginas(1);
        }
      })
      .finally(() => {
        if (!cancelled) setLoadingList(false);
      });
    return () => { cancelled = true; };
  }, [filterNome, filterAreaId, currentPage, itemsPerPage]);

  useEffect(() => {
    setCurrentPage(1);
  }, [filterNome, filterAreaId]);

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

  const clearFilters = () => {
    setFilterNome("");
    setFilterAreaId("");
    setCurrentPage(1);
  };

  const hasActiveFilters = filterNome.trim() !== "" || filterAreaId !== "";

  const handleItemsPerPageChange = (value: string) => {
    setItemsPerPage(Number(value));
    setCurrentPage(1);
  };

  const openDetailsDialog = (prompt: Prompt) => {
    setSelectedPrompt(prompt);
    setIsDetailsDialogOpen(true);
  };

  const openEditFromDetails = () => {
    if (!selectedPrompt) return;
    setIsDetailsDialogOpen(false);
    navigate(`/commander/prompts/${selectedPrompt.id}`);
  };

  const openDeleteDialog = (prompt: Prompt) => {
    setPromptToDelete(prompt);
    setIsDeleteDialogOpen(true);
  };

  const handleDeletePrompt = async () => {
    if (!promptToDelete) return;
    setIsDeletingPrompt(true);
    try {
      await promptsService.deletar(promptToDelete.id);
      setPromptsList((prev) => prev.filter((p) => p.id !== promptToDelete.id));
      setPrompts((prev) => prev.filter((p) => p.id !== promptToDelete.id));
      setTotalRegistros((prev) => Math.max(0, prev - 1));
      if (selectedPrompt?.id === promptToDelete.id) {
        setIsDetailsDialogOpen(false);
        setSelectedPrompt(null);
      }
      toast.success("Prompt excluído com sucesso!");
      setIsDeleteDialogOpen(false);
      setPromptToDelete(null);
      setCurrentPage(1);
    } catch (e: unknown) {
      const msg = e && typeof e === "object" && "message" in e ? (e as { message: string }).message : "Erro ao excluir prompt.";
      toast.error(msg);
    } finally {
      setIsDeletingPrompt(false);
    }
  };

  return (
    <div className="flex flex-col h-full bg-background pb-16 md:pb-0">
      <div className="p-3 md:p-6 border-b border-border">
        <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-3 mb-4">
          <h1 className="text-xl md:text-3xl font-bold text-foreground flex items-center gap-2">
            <FileText className="w-5 h-5 md:w-6 md:h-6" />
            Prompts
          </h1>
          <div className="flex gap-2 w-full md:w-auto">
            <Button onClick={() => navigate("/commander/prompts/novo")} className="gap-1 md:gap-2 flex-1 md:flex-none text-xs md:text-sm">
              <Plus className="w-3 h-3 md:w-4 md:h-4" />
              <span className="hidden sm:inline">Novo prompt</span>
              <span className="sm:hidden">Novo</span>
            </Button>
          </div>
        </div>
        <div className="flex flex-col md:flex-row items-stretch md:items-center gap-2 md:gap-4">
            <Input
              placeholder="Buscar prompts..."
              value={filterNome}
              onChange={(e) => setFilterNome(e.target.value)}
              className="w-full md:max-w-sm text-sm"
            />
            <Select value={filterAreaId || "all"} onValueChange={(v) => setFilterAreaId(v === "all" ? "" : v)}>
              <SelectTrigger className="w-full md:w-[180px] text-sm">
                <SelectValue placeholder="Todas as áreas" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Todas as áreas</SelectItem>
                {areaItems.map((a) => (
                  <SelectItem key={a.id} value={a.id}>
                    {a.nome}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            {hasActiveFilters && (
              <Button variant="ghost" size="sm" onClick={clearFilters}>
                Limpar
              </Button>
            )}
            <div className="flex items-center gap-2 justify-between md:justify-start">
              <span className="text-xs md:text-sm text-muted-foreground whitespace-nowrap">Itens:</span>
              <Select value={itemsPerPage.toString()} onValueChange={handleItemsPerPageChange}>
                <SelectTrigger className="w-16 md:w-20">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="5">5</SelectItem>
                  <SelectItem value="10">10</SelectItem>
                  <SelectItem value="20">20</SelectItem>
                  <SelectItem value="50">50</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
      </div>

      <div className="flex-1 overflow-auto p-3 md:p-6">
        {!loadingList && totalRegistros === 0 && !hasActiveFilters ? (
          <Card className="max-w-2xl mx-auto mt-12">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <FileText className="w-5 h-5" />
                Nenhum prompt cadastrado
              </CardTitle>
              <CardDescription>
                Crie seu primeiro prompt para organizar por título e área.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex flex-col sm:flex-row gap-2 sm:items-center">
                <Button onClick={() => navigate("/commander/prompts/novo")}>
                  <Plus className="w-4 h-4 mr-2" />
                  Novo prompt
                </Button>
              </div>
            </CardContent>
          </Card>
        ) : (
          <>
            <div className="border rounded-lg overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="min-w-[140px] whitespace-nowrap font-semibold text-xs md:text-sm">
                      Data de criação
                    </TableHead>
                    <TableHead className="min-w-[200px] font-semibold text-xs md:text-sm">Título</TableHead>
                    <TableHead className="min-w-[120px] font-semibold text-xs md:text-sm">Área</TableHead>
                    <TableHead className="text-center text-xs md:text-sm">Ações</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {loadingList ? (
                    <TableRow>
                      <TableCell colSpan={4} className="text-center text-muted-foreground py-8">
                        Carregando...
                      </TableCell>
                    </TableRow>
                  ) : totalRegistros === 0 ? (
                    <TableRow>
                      <TableCell colSpan={4} className="text-center text-muted-foreground py-10 text-base">
                        {hasActiveFilters ? "Nenhum prompt encontrado para os filtros selecionados." : "Não há resultados."}
                      </TableCell>
                    </TableRow>
                  ) : (
                    promptsList.map((prompt) => (
                    <TableRow key={prompt.id}>
                      <TableCell className="text-xs md:text-sm whitespace-nowrap tabular-nums">
                        {formatarDataCriacao(prompt.created_at)}
                      </TableCell>
                      <TableCell className="font-medium text-xs md:text-sm">{prompt.titulo}</TableCell>
                      <TableCell className="text-xs md:text-sm">{prompt.area}</TableCell>
                      <TableCell>
                        <div className="flex items-center justify-center gap-1">
                          <Button
                            variant="ghost"
                            size="icon"
                            onClick={() => openDetailsDialog(prompt)}
                            title="Detalhes"
                            className="h-7 w-7 md:h-9 md:w-9 hover:bg-slate-300 dark:hover:bg-slate-700 hover:text-foreground"
                          >
                            <Eye className="w-3 h-3 md:w-4 md:h-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="icon"
                            onClick={() => navigate(`/commander/prompts/${prompt.id}`)}
                            title="Editar"
                            className="h-7 w-7 md:h-9 md:w-9 hover:bg-slate-300 dark:hover:bg-slate-700 hover:text-foreground"
                          >
                            <Edit className="w-3 h-3 md:w-4 md:h-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="icon"
                            onClick={() => openDeleteDialog(prompt)}
                            title="Excluir"
                            className="h-7 w-7 md:h-9 md:w-9 text-destructive hover:text-destructive hover:bg-slate-300 dark:hover:bg-slate-700"
                          >
                            <Trash2 className="w-3 h-3 md:w-4 md:h-4" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </div>

            {!loadingList && totalRegistros > 0 && (
              <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-2 mt-4">
                <p className="text-xs md:text-sm text-muted-foreground text-center sm:text-left">
                  Mostrando {totalRegistros} {totalRegistros === 1 ? "prompt" : "prompts"}
                </p>
                <div className="flex gap-1 md:gap-2 justify-center">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
                    disabled={currentPage === 1}
                    className="text-xs md:text-sm px-2 md:px-4"
                  >
                    <span className="hidden sm:inline">Anterior</span>
                    <span className="sm:hidden">Ant</span>
                  </Button>
                  <div className="flex items-center gap-1">
                    {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
                      let page: number;
                      if (totalPages <= 5) {
                        page = i + 1;
                      } else if (currentPage <= 3) {
                        page = i + 1;
                      } else if (currentPage >= totalPages - 2) {
                        page = totalPages - 4 + i;
                      } else {
                        page = currentPage - 2 + i;
                      }
                      return (
                        <Button
                          key={page}
                          variant={currentPage === page ? "default" : "outline"}
                          size="sm"
                          onClick={() => setCurrentPage(page)}
                          className="w-8 h-8 md:w-10 md:h-9 p-0 text-xs md:text-sm"
                        >
                          {page}
                        </Button>
                      );
                    })}
                  </div>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
                    disabled={currentPage === totalPages}
                    className="text-xs md:text-sm px-2 md:px-4"
                  >
                    <span className="hidden sm:inline">Próxima</span>
                    <span className="sm:hidden">Prox</span>
                  </Button>
                </div>
              </div>
            )}
          </>
        )}
      </div>

      {/* Modal Detalhes */}
      <Dialog open={isDetailsDialogOpen} onOpenChange={setIsDetailsDialogOpen}>
        <DialogContent className="max-w-4xl max-h-[90vh] flex flex-col">
          <DialogHeader>
            <DialogTitle>Detalhes do Prompt</DialogTitle>
            <DialogDescription>
              Informações do prompt selecionado
            </DialogDescription>
          </DialogHeader>
          {selectedPrompt && (
            <div className="space-y-4 overflow-y-auto flex-1 min-h-0 p-3">
              {selectedPrompt.created_at?.trim() ? (
                <div>
                  <Label className="text-muted-foreground">Data de criação</Label>
                  <p className="mt-1 text-sm font-medium tabular-nums">{formatarDataCriacao(selectedPrompt.created_at)}</p>
                </div>
              ) : null}
              <div>
                <Label className="text-muted-foreground">Título</Label>
                <p className="font-medium mt-1">{selectedPrompt.titulo}</p>
              </div>
              <div>
                <Label className="text-muted-foreground">Área</Label>
                <p className="mt-1 font-medium">{selectedPrompt.area}</p>
                {selectedAreaItem?.descricao?.trim() && (
                  <p className="mt-1 text-sm text-muted-foreground">{selectedAreaItem.descricao}</p>
                )}
              </div>
              {selectedPrompt.conteudo != null && selectedPrompt.conteudo !== "" && (
                <div>
                  <Label className="text-muted-foreground">Conteúdo</Label>
                  <div className="mt-1 rounded-md border bg-muted/30 p-4 max-h-[50vh] overflow-y-auto">
                    <p className="whitespace-pre-wrap text-sm leading-relaxed">{selectedPrompt.conteudo}</p>
                  </div>
                </div>
              )}
            </div>
          )}
          <DialogFooter>
            <Button
              variant="outline"
              onClick={async () => {
                if (selectedPrompt?.conteudo != null) {
                  await navigator.clipboard.writeText(selectedPrompt.conteudo);
                  toast.success("Prompt copiado para a área de transferência.");
                } else {
                  toast.error("Nenhum conteúdo para copiar.");
                }
              }}
              disabled={!selectedPrompt?.conteudo?.trim()}
            >
              <Copy className="w-4 h-4 mr-2" />
              Copiar prompt
            </Button>
            <Button variant="outline" onClick={() => setIsDetailsDialogOpen(false)}>
              Fechar
            </Button>
            <Button onClick={openEditFromDetails}>
              <Edit className="w-4 h-4 mr-2" />
              Editar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Excluir prompt</AlertDialogTitle>
            <AlertDialogDescription>
              Deseja excluir o prompt "{promptToDelete?.titulo ?? ""}"? Esta ação não pode ser desfeita.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel disabled={isDeletingPrompt}>Cancelar</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleDeletePrompt}
              disabled={isDeletingPrompt || !promptToDelete}
              className={(isDeletingPrompt || !promptToDelete) ? "opacity-50 cursor-not-allowed" : "bg-destructive text-destructive-foreground hover:bg-destructive/90"}
            >
              {isDeletingPrompt ? "Excluindo..." : "Excluir"}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
};