import { useState, useEffect, useCallback } from "react";
import { Plus, Search, Eye, Trash2, ArrowUpDown, Download, Loader2, CheckCircle2, XCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { OpinionDialog } from "./OpinionDialog";
import { AgentSearch } from "./AgentSearch";
import { agentService, OpinionRecord } from "@/services/agent";
import { useToast } from "@/hooks/use-toast";

type SortField = "titulo" | "created_at" | "categoria";
type SortOrder = "asc" | "desc";

export const AgentView = () => {
  const [opinions, setOpinions] = useState<OpinionRecord[]>([]);
  const [pendingOpinions, setPendingOpinions] = useState<OpinionRecord[]>([]); // Registros temporários sendo processados
  const [searchTerm, setSearchTerm] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(10);
  const [sortField, setSortField] = useState<SortField>("created_at");
  const [sortOrder, setSortOrder] = useState<SortOrder>("desc");
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [selectedOpinion, setSelectedOpinion] = useState<OpinionRecord | null>(null);
  const [showSearch, setShowSearch] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [opinionToDelete, setOpinionToDelete] = useState<OpinionRecord | null>(null);
  const [isDeleting, setIsDeleting] = useState(false);
  const { toast } = useToast();

  // Carrega pareceres da API
  const loadOpinions = useCallback(async () => {
    setIsLoading(true);
    try {
      const data = await agentService.getOpinions({
        page: currentPage,
        per_page: itemsPerPage,
        search: searchTerm,
      });

      // Adiciona status aos pareceres da API
      const opinionsWithStatus = data.map(opinion => ({
        ...opinion,
        status: (opinion.file_url || opinion.file_url_melhoria) ? 'concluido' : 'processando' as const,
      }));

      setOpinions(opinionsWithStatus);

      // Remove registros temporários que agora estão na API
      setPendingOpinions(prev =>
        prev.filter(pending =>
          !opinionsWithStatus.some(opinion =>
            opinion.titulo === pending.titulo &&
            opinion.created_at.substring(0, 10) === pending.created_at.substring(0, 10)
          )
        )
      );
    } catch (error: any) {
      console.error('Erro ao carregar pareceres:', error);
      toast({
        title: "Erro ao carregar pareceres",
        description: error.message || "Não foi possível carregar a lista de pareceres.",
        variant: "destructive",
      });
    } finally {
      setIsLoading(false);
    }
  }, [currentPage, itemsPerPage, searchTerm, toast]);

  // Polling automático para atualizar status dos pareceres
  useEffect(() => {
    // Carrega imediatamente
    loadOpinions();

    // Configura polling a cada 10 segundos se houver pareceres pendentes
    const interval = setInterval(() => {
      if (pendingOpinions.length > 0) {
        console.log('Polling: Atualizando lista de pareceres...');
        loadOpinions();
      }
    }, 10000); // 10 segundos

    return () => clearInterval(interval);
  }, [currentPage, itemsPerPage, pendingOpinions.length, loadOpinions]);

  // Debounce para busca
  useEffect(() => {
    const timer = setTimeout(() => {
      if (currentPage === 1) {
        loadOpinions();
      } else {
        setCurrentPage(1); // Volta para a primeira página ao buscar
      }
    }, 500);

    return () => clearTimeout(timer);
  }, [searchTerm, loadOpinions]);

  const handleSort = (field: SortField) => {
    if (sortField === field) {
      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
    } else {
      setSortField(field);
      setSortOrder("asc");
    }
  };

  // Mescla pareceres da API com registros temporários
  const allOpinions = [...pendingOpinions, ...opinions];

  const sortedOpinions = [...allOpinions].sort((a, b) => {
    const multiplier = sortOrder === "asc" ? 1 : -1;

    if (sortField === "created_at") {
      return multiplier * (new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
    }

    const aValue = a[sortField] || "";
    const bValue = b[sortField] || "";
    return multiplier * aValue.toString().localeCompare(bValue.toString());
  });

  const totalPages = Math.ceil(sortedOpinions.length / itemsPerPage);

  // Callback quando um parecer está sendo criado (registro temporário)
  const handleOpinionCreating = (tempOpinion: OpinionRecord) => {
    setPendingOpinions(prev => [tempOpinion, ...prev]);
  };

  // Callback quando um parecer foi criado (recarrega da API)
  const handleOpinionCreated = () => {
    loadOpinions();
  };

  const handleViewOpinion = (opinion: OpinionRecord) => {
    setSelectedOpinion(opinion);
    setIsDialogOpen(true);
  };

  const handleNewOpinion = () => {
    setSelectedOpinion(null);
    setIsDialogOpen(true);
  };

  const handleSelectFromSearch = (opinion: OpinionRecord) => {
    setSelectedOpinion(opinion);
    setShowSearch(false);
    setIsDialogOpen(true);
  };

  const handleDownloadVersion = async (opinion: OpinionRecord, version: 'v1' | 'v2') => {
    const fileUrl = version === 'v1' ? opinion.file_url : opinion.file_url_melhoria;

    if (!fileUrl) {
      toast({
        title: "Arquivo não disponível",
        description: `A ${version === 'v1' ? 'versão 1' : 'versão melhorada'} ainda não está disponível.`,
        variant: "destructive",
      });
      return;
    }

    try {
      const fileName = `${opinion.titulo}_${version === 'v1' ? 'v1' : 'melhorada'}.docx`;
      await agentService.downloadOpinion(fileUrl, fileName);

      toast({
        title: "Download iniciado",
        description: "O parecer está sendo baixado.",
      });
    } catch (error: any) {
      toast({
        title: "Erro ao fazer download",
        description: error.message || "Não foi possível baixar o arquivo.",
        variant: "destructive",
      });
    }
  };

  const handleDeleteOpinion = async () => {
    if (!opinionToDelete) return;

    setIsDeleting(true);
    try {
      await agentService.deleteOpinion(opinionToDelete.id);

      toast({
        title: "Parecer excluído",
        description: "O parecer foi excluído com sucesso.",
      });

      // Recarrega a lista de pareceres
      await loadOpinions();

      // Fecha o diálogo de confirmação
      setOpinionToDelete(null);
    } catch (error: any) {
      toast({
        title: "Erro ao excluir parecer",
        description: error.message || "Não foi possível excluir o parecer.",
        variant: "destructive",
      });
    } finally {
      setIsDeleting(false);
    }
  };

  if (showSearch) {
    return (
      <div className="flex flex-col h-full">
        <div className="p-6 border-b border-border">
          <Button variant="outline" onClick={() => setShowSearch(false)}>
            Voltar para Pareceres
          </Button>
        </div>
        <AgentSearch onSelectOpinion={handleSelectFromSearch} />
      </div>
    );
  }

  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">Gerador de Modelos de Parecer Jurídico</h1>
          <div className="flex gap-2 w-full md:w-auto">
            <Button onClick={() => setShowSearch(true)} variant="outline" className="gap-1 md:gap-2 flex-1 md:flex-none text-xs md:text-sm">
              <Search className="w-3 h-3 md:w-4 md:h-4" />
              <span className="hidden sm:inline">Pesquisar Base</span>
              <span className="sm:hidden">Base</span>
            </Button>
            <Button onClick={handleNewOpinion} 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 Parecer</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 pareceres..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="w-full md:max-w-sm text-sm"
          />
          <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={(value) => {
                setItemsPerPage(Number(value));
                setCurrentPage(1);
              }}
            >
              <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">
        <div className="border rounded-lg overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="min-w-[200px]">
                  <Button
                    variant="ghost"
                    onClick={() => handleSort("titulo")}
                    className="flex items-center gap-1 font-semibold text-xs md:text-sm p-1 md:p-2"
                  >
                    Título
                    <ArrowUpDown className="w-3 h-3 md:w-4 md:h-4" />
                  </Button>
                </TableHead>
                <TableHead className="hidden md:table-cell">
                  <Button
                    variant="ghost"
                    onClick={() => handleSort("categoria")}
                    className="flex items-center gap-1 font-semibold text-sm"
                  >
                    Categoria
                    <ArrowUpDown className="w-4 h-4" />
                  </Button>
                </TableHead>
                <TableHead className="hidden lg:table-cell text-center">
                  <span className="font-semibold text-xs md:text-sm">Status</span>
                </TableHead>
                <TableHead className="hidden sm:table-cell">
                  <Button
                    variant="ghost"
                    onClick={() => handleSort("created_at")}
                    className="flex items-center gap-1 font-semibold text-xs md:text-sm p-1 md:p-2"
                  >
                    Data
                    <ArrowUpDown className="w-3 h-3 md:w-4 md:h-4" />
                  </Button>
                </TableHead>
                <TableHead className="text-center text-xs md:text-sm">Ações</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {isLoading ? (
                <TableRow>
                  <TableCell colSpan={5} className="text-center py-12 text-muted-foreground">
                    Carregando pareceres...
                  </TableCell>
                </TableRow>
              ) : sortedOpinions.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={5} className="text-center py-12 text-muted-foreground">
                    {searchTerm
                      ? "Nenhum parecer encontrado"
                      : "Nenhum parecer criado ainda. Clique em 'Novo Parecer' para começar."}
                  </TableCell>
                </TableRow>
              ) : (
                sortedOpinions.map((opinion) => (
                  <TableRow key={opinion.id}>
                    <TableCell className="font-medium text-xs md:text-sm">{opinion.titulo}</TableCell>
                    <TableCell className="hidden md:table-cell text-sm">{opinion.categoria || "-"}</TableCell>
                    <TableCell className="hidden lg:table-cell text-center">
                      {opinion.status === 'processando' && (
                        <Badge variant="secondary" className="gap-1 bg-yellow-100 text-yellow-800 hover:bg-yellow-100">
                          <Loader2 className="w-3 h-3 animate-spin" />
                          Gerando...
                        </Badge>
                      )}
                      {opinion.status === 'concluido' && (
                        <Badge variant="secondary" className="gap-1 bg-green-100 text-green-800 hover:bg-green-100">
                          <CheckCircle2 className="w-3 h-3" />
                          Concluído
                        </Badge>
                      )}
                      {opinion.status === 'erro' && (
                        <Badge variant="destructive" className="gap-1">
                          <XCircle className="w-3 h-3" />
                          Erro
                        </Badge>
                      )}
                    </TableCell>
                    <TableCell className="hidden sm:table-cell text-xs md:text-sm">
                      {new Date(opinion.created_at).toLocaleDateString("pt-BR")}
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center justify-center gap-1">
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => handleViewOpinion(opinion)}
                          title="Visualizar"
                          className="h-7 w-7 md:h-9 md:w-9"
                          disabled={opinion.isLocalPending || opinion.status === 'processando'}
                        >
                          <Eye className="w-3 h-3 md:w-4 md:h-4" />
                        </Button>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button
                              variant="ghost"
                              size="icon"
                              title="Baixar"
                              className="h-7 w-7 md:h-9 md:w-9"
                              disabled={opinion.isLocalPending || opinion.status === 'processando'}
                            >
                              <Download className="w-3 h-3 md:w-4 md:h-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem
                              onClick={() => handleDownloadVersion(opinion, 'v1')}
                              disabled={!opinion.file_url}
                            >
                              <Download className="w-4 h-4 mr-2" />
                              Versão 1
                            </DropdownMenuItem>
                            <DropdownMenuItem
                              onClick={() => handleDownloadVersion(opinion, 'v2')}
                              disabled={!opinion.file_url_melhoria}
                            >
                              <Download className="w-4 h-4 mr-2" />
                              Versão Melhorada
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => setOpinionToDelete(opinion)}
                          title="Excluir"
                          className="h-7 w-7 md:h-9 md:w-9 text-destructive hover:text-destructive"
                          disabled={opinion.isLocalPending}
                        >
                          <Trash2 className="w-3 h-3 md:w-4 md:h-4" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </div>

        {sortedOpinions.length > 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 {sortedOpinions.length} {sortedOpinions.length === 1 ? 'parecer' : 'pareceres'}
            </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;
                  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>

      <OpinionDialog
        open={isDialogOpen}
        onOpenChange={setIsDialogOpen}
        selectedOpinion={selectedOpinion}
        onOpinionCreated={handleOpinionCreated}
        onOpinionCreating={handleOpinionCreating}
      />

      <AlertDialog open={!!opinionToDelete} onOpenChange={(open) => !open && setOpinionToDelete(null)}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
            <AlertDialogDescription>
              Tem certeza que deseja excluir o parecer "{opinionToDelete?.titulo}"? Esta ação não pode ser desfeita.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel disabled={isDeleting}>Cancelar</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleDeleteOpinion}
              disabled={isDeleting}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
            >
              {isDeleting ? "Excluindo..." : "Excluir"}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
};