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("1024x1024"); const [searchQuery, setSearchQuery] = useState(""); const [images, setImages] = useState([]); const [lastGeneratedImage, setLastGeneratedImage] = useState(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 (
{/* Main Content */}
Gerar Imagem Histórico Hist. {/* Generate Tab */}