import { useState, useEffect } from "react";
import { ChatHeader } from "@/components/ChatHeader";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Download, Trash2, Sparkles, Clock, Search, ChevronLeft, ChevronRight } from "lucide-react";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useToast } from "@/hooks/use-toast";
import {
  imageGenerationService,
  IMAGE_SIZE_OPTIONS,
  ImageSize,
  ImageRecord
} from "@/services/imageGeneration";
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
} from "@/components/ui/pagination";

export const ImageView = () => {
  const [prompt, setPrompt] = useState("");
  const [isGenerating, setIsGenerating] = useState(false);
  const [selectedSize, setSelectedSize] = useState<ImageSize>("1024x1024");
  const [searchQuery, setSearchQuery] = useState("");
  const [images, setImages] = useState<ImageRecord[]>([]);
  const [lastGeneratedImage, setLastGeneratedImage] = useState<ImageRecord | null>(null);
  const [isLoadingImages, setIsLoadingImages] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [perPage, setPerPage] = useState(10);
  const { toast } = useToast();

  // Carrega imagens do banco de dados ao montar o componente
  const loadImages = async (page: number = currentPage, limit: number = perPage) => {
    setIsLoadingImages(true);
    try {
      const fetchedImages = await imageGenerationService.getImages(undefined, page, limit);

      // Garante que sempre seja um array
      if (Array.isArray(fetchedImages)) {
        setImages(fetchedImages);
      } else {
        console.warn('Resposta da API não é um array:', fetchedImages);
        setImages([]);
      }
    } catch (error: any) {
      console.error('Erro ao carregar imagens:', error);
      toast({
        title: "Erro ao carregar histórico",
        description: error.message || "Não foi possível carregar o histórico de imagens.",
        variant: "destructive",
      });
      setImages([]);
    } finally {
      setIsLoadingImages(false);
    }
  };

  // Carrega imagens ao montar e quando a paginação mudar
  useEffect(() => {
    loadImages();
  }, [currentPage, perPage]);

  const handleGenerate = async () => {
    // Valida a descrição antes de enviar
    const validation = imageGenerationService.validateDescription(prompt);
    if (!validation.valid) {
      toast({
        title: "Descrição inválida",
        description: validation.error,
        variant: "destructive",
      });
      return;
    }

    setIsGenerating(true);

    try {
      // Chama o serviço de geração de imagem
      const response = await imageGenerationService.generateImage({
        description: prompt,
        size: selectedSize,
      });

      // Verifica se a geração foi bem-sucedida
      if (response.success) {
        toast({
          title: "Imagem gerada com sucesso",
          description: `Tamanho: ${IMAGE_SIZE_OPTIONS[selectedSize].label}`,
        });

        // Cria objeto da imagem recém-gerada para exibição imediata
        const newGeneratedImage: ImageRecord = {
          id: response.image_generation_id,
          user_email: '', // Será preenchido pelo backend
          estabelecimento_id: 0, // Será preenchido pelo backend
          description: response.message, // Descrição original
          model: 'dall-e-3', // Modelo padrão
          image_url: response.image_url,
          size: selectedSize,
          cost_usd: '0',
          total_tokens: 0,
          input_tokens: 0,
          output_tokens: 0,
          created_at: new Date().toISOString(),
        };

        // Salva a última imagem gerada para exibição
        setLastGeneratedImage(newGeneratedImage);

        // Limpa o campo de descrição após sucesso
        setPrompt("");

        // Recarrega a lista de imagens (sem aguardar para não bloquear a UI)
        loadImages(1, perPage);
        setCurrentPage(1);
      } else {
        throw new Error('Erro ao gerar imagem');
      }
    } catch (error: any) {
      console.error('Erro na geração de imagem:', error);

      toast({
        title: "Erro na geração",
        description: error.message || "Não foi possível gerar a imagem. Tente novamente.",
        variant: "destructive",
      });
    } finally {
      setIsGenerating(false);
    }
  };

  const handleDelete = async (id: string) => {
    try {
      const result = await imageGenerationService.deleteImage(id);

      if (result.success) {
        toast({
          title: "Imagem removida",
          description: "A imagem foi removida com sucesso.",
        });

        // Se a imagem deletada for a última gerada, limpa o preview
        if (lastGeneratedImage && lastGeneratedImage.id === id) {
          setLastGeneratedImage(null);
        }

        // Recarrega a lista de imagens
        await loadImages();
      } else {
        throw new Error(result.message || 'Erro ao deletar imagem');
      }
    } catch (error: any) {
      console.error('Erro ao deletar imagem:', error);
      toast({
        title: "Erro ao remover",
        description: error.message || "Não foi possível remover a imagem.",
        variant: "destructive",
      });
    }
  };

  const handleDownload = async (image: ImageRecord) => {
    try {
      await imageGenerationService.downloadImage(
        image.image_url,
        `${image.description.substring(0, 30)}_${image.size}.png`
      );

      toast({
        title: "Download iniciado",
        description: "A imagem está sendo baixada.",
      });
    } catch (error) {
      toast({
        title: "Erro no download",
        description: "Não foi possível baixar a imagem.",
        variant: "destructive",
      });
    }
  };

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };

  const handlePerPageChange = (value: string) => {
    setPerPage(parseInt(value));
    setCurrentPage(1); // Reset para primeira página ao mudar itens por página
  };

  const filteredImages = Array.isArray(images)
    ? images.filter((img) =>
        img.description.toLowerCase().includes(searchQuery.toLowerCase())
      )
    : [];

  return (
    <div className="flex flex-col h-full pb-16 md:pb-0">
      <ChatHeader />

      <div className="flex-1 flex overflow-hidden">
        {/* Main Content */}
        <ScrollArea className="flex-1">
          <div className="max-w-5xl mx-auto p-3 md:p-6">
            <Tabs defaultValue="generate" className="space-y-4 md:space-y-6">
              <TabsList className="grid w-full grid-cols-2 glass-effect">
                <TabsTrigger value="generate" className="text-xs md:text-sm">Gerar Imagem</TabsTrigger>
                <TabsTrigger value="history" className="text-xs md:text-sm">
                  <Clock className="w-3 h-3 md:w-4 md:h-4 mr-1 md:mr-2" />
                  <span className="hidden md:inline">Histórico</span>
                  <span className="md:hidden">Hist.</span>
                </TabsTrigger>
              </TabsList>

              {/* Generate Tab */}
              <TabsContent value="generate" className="space-y-4 md:space-y-6">
                <div className="glass-effect rounded-xl p-4 md:p-6 space-y-3 md:space-y-4">
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-foreground">
                      Descreva a imagem
                    </label>
                    <Textarea
                      value={prompt}
                      onChange={(e) => setPrompt(e.target.value)}
                      placeholder="Descreva a imagem que deseja criar..."
                      className="min-h-[100px] resize-none"
                    />
                  </div>

                  <div className="flex flex-col md:flex-row gap-3 md:gap-4 md:items-end">
                    <div className="flex-1 space-y-2">
                      <label className="text-sm font-medium text-foreground">
                        Tamanho
                      </label>
                      <Select value={selectedSize} onValueChange={(value) => setSelectedSize(value as ImageSize)}>
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent className="glass-effect bg-popover border-border z-50">
                          <SelectItem value="1024x1024">1024x1024 (Quadrado)</SelectItem>
                          <SelectItem value="1024x1792">1024x1792 (Retrato)</SelectItem>
                          <SelectItem value="1792x1024">1792x1024 (Paisagem)</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    <Button
                      onClick={handleGenerate}
                      disabled={!prompt.trim() || isGenerating}
                      className="gap-2 cyber-glow"
                      size="lg"
                    >
                      <Sparkles className="w-4 h-4" />
                      {isGenerating ? "Gerando..." : "Gerar Imagem"}
                    </Button>
                  </div>
                </div>

                {/* Loading State */}
                {isGenerating && (
                  <div className="glass-effect rounded-xl p-12 flex flex-col items-center justify-center space-y-4 animate-fade-in">
                    <div className="relative">
                      <div className="w-24 h-24 rounded-full border-4 border-primary/20 border-t-primary animate-spin" />
                      <div className="absolute inset-0 flex items-center justify-center">
                        <Sparkles className="w-8 h-8 text-primary animate-pulse-glow" />
                      </div>
                    </div>
                    <p className="text-lg font-medium gradient-text">
                      Gerando sua imagem...
                    </p>
                    <p className="text-sm text-muted-foreground">
                      Isso pode levar alguns segundos
                    </p>
                  </div>
                )}

                {/* Recent Images Preview */}
                {!isGenerating && lastGeneratedImage && (
                  <div>
                    <h3 className="text-lg font-semibold mb-4">Última Geração</h3>
                    <ImageCard
                      image={lastGeneratedImage}
                      onDelete={handleDelete}
                      onDownload={handleDownload}
                    />
                  </div>
                )}
              </TabsContent>

              {/* History Tab */}
              <TabsContent value="history" className="space-y-4">
                {/* Search and Filters */}
                <div className="flex flex-col md:flex-row gap-3">
                  <div className="relative flex-1">
                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
                    <Input
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}
                      placeholder="Buscar por descrição..."
                      className="pl-9"
                    />
                  </div>
                  <Select value={perPage.toString()} onValueChange={handlePerPageChange}>
                    <SelectTrigger className="w-full md:w-[180px]">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent className="glass-effect bg-popover border-border z-50">
                      <SelectItem value="5">5 por página</SelectItem>
                      <SelectItem value="10">10 por página</SelectItem>
                      <SelectItem value="20">20 por página</SelectItem>
                      <SelectItem value="50">50 por página</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                {/* Loading State */}
                {isLoadingImages ? (
                  <div className="glass-effect rounded-xl p-12 flex flex-col items-center justify-center space-y-4">
                    <div className="w-12 h-12 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
                    <p className="text-muted-foreground">Carregando imagens...</p>
                  </div>
                ) : (
                  <>
                    {/* Images Grid */}
                    {filteredImages.length > 0 ? (
                      <>
                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                          {filteredImages.map((image) => (
                            <ImageCard
                              key={image.id}
                              image={image}
                              onDelete={handleDelete}
                              onDownload={handleDownload}
                            />
                          ))}
                        </div>

                        {/* Pagination */}
                        {!searchQuery && images.length >= perPage && (
                          <div className="flex items-center justify-center gap-4 mt-6">
                            <Pagination>
                              <PaginationContent>
                                <PaginationItem>
                                  <Button
                                    variant="outline"
                                    size="sm"
                                    onClick={() => handlePageChange(currentPage - 1)}
                                    disabled={currentPage === 1}
                                    className="gap-1"
                                  >
                                    <ChevronLeft className="h-4 w-4" />
                                    <span className="hidden md:inline">Anterior</span>
                                  </Button>
                                </PaginationItem>

                                <PaginationItem>
                                  <span className="text-sm text-muted-foreground px-4">
                                    Página {currentPage}
                                  </span>
                                </PaginationItem>

                                <PaginationItem>
                                  <Button
                                    variant="outline"
                                    size="sm"
                                    onClick={() => handlePageChange(currentPage + 1)}
                                    disabled={images.length < perPage}
                                    className="gap-1"
                                  >
                                    <span className="hidden md:inline">Próxima</span>
                                    <ChevronRight className="h-4 w-4" />
                                  </Button>
                                </PaginationItem>
                              </PaginationContent>
                            </Pagination>
                          </div>
                        )}
                      </>
                    ) : (
                      <div className="glass-effect rounded-xl p-12 text-center">
                        <Clock className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
                        <p className="text-muted-foreground">
                          {searchQuery ? "Nenhuma imagem encontrada" : "Nenhuma imagem gerada ainda"}
                        </p>
                      </div>
                    )}
                  </>
                )}
              </TabsContent>
            </Tabs>
          </div>
        </ScrollArea>
      </div>
    </div>
  );
};

interface ImageCardProps {
  image: ImageRecord;
  onDelete: (id: string) => void;
  onDownload: (image: ImageRecord) => void;
}

const ImageCard = ({ image, onDelete, onDownload }: ImageCardProps) => {
  const [imageError, setImageError] = useState(false);
  const [imageLoading, setImageLoading] = useState(true);

  // Calcula tempo relativo
  const getRelativeTime = (timestamp: string) => {
    const now = new Date();
    const date = new Date(timestamp);
    const diff = now.getTime() - date.getTime();
    const minutes = Math.floor(diff / 60000);
    const hours = Math.floor(diff / 3600000);
    const days = Math.floor(diff / 86400000);

    if (minutes < 1) return 'Agora';
    if (minutes < 60) return `Há ${minutes} ${minutes === 1 ? 'minuto' : 'minutos'}`;
    if (hours < 24) return `Há ${hours} ${hours === 1 ? 'hora' : 'horas'}`;
    return `Há ${days} ${days === 1 ? 'dia' : 'dias'}`;
  };

  const handleImageError = () => {
    console.warn('Erro CORS ao carregar imagem:', image.image_url);
    setImageError(true);
    setImageLoading(false);
  };

  const handleImageLoad = () => {
    console.log('Imagem carregada com sucesso:', image.image_url);
    setImageLoading(false);
    setImageError(false);
  };

  return (
    <div className="group glass-effect rounded-xl overflow-hidden animate-fade-in">
      <div className="relative aspect-square">
        {imageLoading && !imageError && (
          <div className="absolute inset-0 flex items-center justify-center bg-muted">
            <div className="w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
          </div>
        )}
        {imageError ? (
          <div className="absolute inset-0 flex flex-col items-center justify-center bg-muted text-muted-foreground p-4">
            <Sparkles className="w-12 h-12 mb-2 opacity-50" />
            <p className="text-sm text-center font-medium mb-1">Erro ao carregar</p>
            <p className="text-xs text-center mb-2">A imagem foi gerada, mas não pode ser exibida aqui</p>
            <div className="flex flex-col gap-2 w-full">
              <a
                href={image.image_url}
                target="_blank"
                rel="noopener noreferrer"
                className="text-xs text-center bg-primary text-primary-foreground px-3 py-2 rounded-md hover:bg-primary/90 transition-colors"
              >
                Abrir imagem em nova aba
              </a>
              <button
                onClick={() => navigator.clipboard.writeText(image.image_url)}
                className="text-xs text-center bg-secondary text-secondary-foreground px-3 py-1 rounded-md hover:bg-secondary/80 transition-colors"
              >
                Copiar URL
              </button>
            </div>
          </div>
        ) : (
          <img
            src={image.image_url}
            alt={image.description}
            className="w-full h-full object-cover"
            onError={handleImageError}
            onLoad={handleImageLoad}
            loading="lazy"
            referrerPolicy="no-referrer"
          />
        )}
        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/0 to-black/0 opacity-0 group-hover:opacity-100 transition-opacity">
          <div className="absolute bottom-0 left-0 right-0 p-4 space-y-2">
            <p className="text-sm text-white line-clamp-2">{image.description}</p>
            <div className="flex items-center justify-between text-xs text-white/70">
              <span>{IMAGE_SIZE_OPTIONS[image.size as ImageSize]?.label || image.size}</span>
              <span>{getRelativeTime(image.created_at)}</span>
            </div>
            <div className="flex gap-2">
              <Button
                size="sm"
                variant="secondary"
                className="flex-1 gap-1"
                onClick={() => onDownload(image)}
              >
                <Download className="w-3 h-3" />
                Baixar
              </Button>
              <Button
                size="sm"
                variant="destructive"
                className="gap-1"
                onClick={() => onDelete(image.id)}
              >
                <Trash2 className="w-3 h-3" />
                Excluir
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
