'use client';

import React, { useMemo, useState, useEffect } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useToast } from '@/hooks/use-toast';
import { Save, Upload } from 'lucide-react';
import { Skeleton } from '../ui/skeleton';
import Image from 'next/image';
import { Separator } from '../ui/separator';
import { uploadService } from '@/servicios/upload-service';
import { apiClient } from '@/servicios/api-client';

function HeroImageSettings() {
    const { toast } = useToast();
    const [isSaving, setIsSaving] = useState(false);
    const [isUploading, setIsUploading] = useState(false);
    const fileInputRef = React.useRef<HTMLInputElement>(null);
    
    const [imageUrl, setImageUrl] = useState('https://scontent.ftru2-3.fna.fbcdn.net/v/t39.30808-6/595383582_1447588327372975_7898502215296034737_n.jpg?_nc_cat=100&ccb=1-7&_nc_sid=6ee11a&_nc_eui2=AeHPFdUEilDSJtmwqHvylf3jLp0r5tR8VgcunSvm1HxWB3xTtt_s96VWJrmVE_4UzYL4ssF__4HGRh03RClmnqCf&_nc_ohc=yw7R4deCNHUQ7kNvwGOFsxd&_nc_oc=AdmCXvEpW9AU9XLHunIyUIbFVDHmd71cxkWePHdVSBajqJ7Aaif6TGeQUlmHvjjKfdqqaWs056C4fnTsWzBUanoD&_nc_zt=23&_nc_ht=scontent.ftru2-3.fna&_nc_gid=jYBM0OVuaY0Bxz3YCEA82g&oh=00_Aflj7MK9pI45c_kwu0URZZml7UWrp-bVKKEZjBcl35HOUQ&oe=694F5066');
    const [imageHint, setImageHint] = useState('dark gamer background');
    const isLoading = false;

    // Cargar configuración al montar el componente
    useEffect(() => {
        const loadConfiguration = async () => {
            try {
                const response = await apiClient.get('/api/configuracion/general') as any;
                if (response?.imagen_fondo_url) {
                    setImageUrl(response.imagen_fondo_url);
                }
                if (response?.imagen_fondo_hint) {
                    setImageHint(response.imagen_fondo_hint);
                }
            } catch (error) {
                console.log('Usando configuración por defecto:', error);
            }
        };
        loadConfiguration();
    }, []);

    const handleSave = async () => {
        setIsSaving(true);
        try {
            await apiClient.put('/api/configuracion/general', {
                imagen_fondo_url: imageUrl,
                imagen_fondo_hint: imageHint,
            });
            toast({
                title: '¡Guardado!',
                description: 'La imagen de fondo ha sido actualizada exitosamente.',
            });
        } catch (error: any) {
            console.error("Error saving configuration:", error);
            toast({
                title: 'Error',
                description: error.message || 'No se pudo guardar la configuración.',
                variant: 'destructive',
            });
        } finally {
            setIsSaving(false);
        }
    }
    
    const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (file) {
            setIsUploading(true);
            try {
                const uploadResponse = await uploadService.uploadImage(file);
                setImageUrl(uploadResponse.url);
                toast({
                    title: '¡Imagen subida!',
                    description: 'La imagen de portada se ha guardado correctamente.',
                });
            } catch (error: any) {
                console.error("Error uploading image:", error);
                toast({
                    title: 'Error',
                    description: error.message || 'No se pudo subir la imagen.',
                    variant: 'destructive',
                });
            } finally {
                setIsUploading(false);
            }
        }
    };

    return (
        <div className="space-y-6">
            <div>
                <h3 className="text-lg font-medium">Imagen de Portada</h3>
                <p className="text-sm text-muted-foreground">Personaliza la imagen principal de la página de inicio.</p>
            </div>
            <div className="space-y-2">
                <Label htmlFor="hero-image-url">URL o subida de la Imagen de Fondo</Label>
                <div className="flex items-center gap-2">
                    <Input 
                        id="hero-image-url" 
                        placeholder="https://example.com/background.jpg"
                        value={imageUrl}
                        onChange={(e) => setImageUrl(e.target.value)}
                        disabled={isLoading}
                    />
                     <input
                        type="file"
                        ref={fileInputRef}
                        onChange={handleFileChange}
                        accept="image/*"
                        className="hidden"
                    />
                    <Button 
                        variant="outline" 
                        onClick={() => fileInputRef.current?.click()} 
                        disabled={isLoading || isUploading}
                    >
                        <Upload className="mr-2 h-4 w-4" /> 
                        {isUploading ? 'Subiendo...' : 'Subir'}
                    </Button>
                </div>
            </div>
            <div className="space-y-2">
                <Label htmlFor="hero-image-hint">Pista de la Imagen (para IA)</Label>
                <Input 
                    id="hero-image-hint" 
                    placeholder="dark gamer background"
                    value={imageHint}
                    onChange={(e) => setImageHint(e.target.value)}
                    disabled={isLoading}
                />
            </div>
                {isLoading && (
                <div className="space-y-2">
                    <Label>Vista Previa</Label>
                    <Skeleton className="w-full h-48 rounded-md" />
                </div>
            )}
            {imageUrl && !isLoading && (
                <div className="space-y-2">
                    <Label>Vista Previa</Label>
                    <div className="relative w-full h-48 rounded-md overflow-hidden border">
                        <Image src={imageUrl} alt="Vista previa de la imagen de fondo" fill className="object-cover" unoptimized/>
                    </div>
                </div>
            )}
            <Button onClick={handleSave} disabled={isSaving || isLoading}>
                <Save className="mr-2 h-4 w-4" />
                {isSaving ? 'Guardando...' : 'Guardar Imagen de Portada'}
            </Button>
        </div>
    )
}

function LogoSettings() {
    const { toast } = useToast();
    const [isSaving, setIsSaving] = useState(false);
    const [isUploading, setIsUploading] = useState(false);
    
    const [logoUrl, setLogoUrl] = useState('');
    const [logoPreview, setLogoPreview] = useState<string | null>(null);
    const isLoading = false;
    const fileInputRef = React.useRef<HTMLInputElement>(null);

    // Cargar configuración al montar el componente
    useEffect(() => {
        const loadConfiguration = async () => {
            try {
                const response = await apiClient.get('/api/configuracion/general') as any;
                if (response?.logo_url) {
                    setLogoUrl(response.logo_url);
                    setLogoPreview(response.logo_url);
                }
            } catch (error) {
                console.log('Usando configuración por defecto:', error);
            }
        };
        loadConfiguration();
    }, []);

    const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (file) {
            setIsUploading(true);
            try {
                const uploadResponse = await uploadService.uploadImage(file);
                setLogoPreview(uploadResponse.url);
                setLogoUrl(uploadResponse.url); 
                toast({
                    title: '¡Logo subido!',
                    description: 'El logo se ha guardado correctamente.',
                });
            } catch (error: any) {
                console.error("Error uploading logo:", error);
                toast({
                    title: 'Error',
                    description: error.message || 'No se pudo subir el logo.',
                    variant: 'destructive',
                });
            } finally {
                setIsUploading(false);
            }
        }
    };

    const handleSave = async () => {
        setIsSaving(true);
        try {
            await apiClient.put('/api/configuracion/general', {
                logo_url: logoUrl,
            });
            toast({
                title: '¡Guardado!',
                description: 'El logo ha sido actualizado exitosamente.',
            });
        } catch (error: any) {
            console.error("Error saving logo:", error);
            toast({
                title: 'Error',
                description: error.message || 'No se pudo guardar el logo.',
                variant: 'destructive',
            });
        } finally {
            setIsSaving(false);
        }
    }
    
    return (
        <div className="space-y-6">
            <div>
                <h3 className="text-lg font-medium">Gestionar Logo</h3>
                <p className="text-sm text-muted-foreground">Cambia el logo de la empresa.</p>
            </div>
            <div className="space-y-2">
                <Label>Logo Actual</Label>
                <div className="flex items-center gap-4">
                    {isLoading && <Skeleton className="w-16 h-16 rounded-md" />}
                    {logoPreview && !isLoading && (
                        <div className="relative w-16 h-16 rounded-md overflow-hidden border p-1">
                            <Image src={logoPreview} alt="Vista previa del logo" fill className="object-contain" unoptimized/>
                        </div>
                    )}
                    <div className="flex-grow">
                        <Input 
                            id="logo-url" 
                            placeholder="URL del logo"
                            value={logoUrl}
                            onChange={(e) => {
                                setLogoUrl(e.target.value);
                                setLogoPreview(e.target.value);
                            }}
                            disabled={isLoading}
                        />
                         <input
                            type="file"
                            ref={fileInputRef}
                            onChange={handleFileChange}
                            accept="image/*"
                            className="hidden"
                        />
                    </div>
                    <Button 
                        variant="outline" 
                        onClick={() => fileInputRef.current?.click()} 
                        disabled={isLoading || isUploading}
                    >
                        <Upload className="mr-2 h-4 w-4" /> 
                        {isUploading ? 'Subiendo...' : 'Subir'}
                    </Button>
                </div>
            </div>

            <Button onClick={handleSave} disabled={isSaving || isLoading}>
                <Save className="mr-2 h-4 w-4" />
                {isSaving ? 'Guardando...' : 'Guardar Logo'}
            </Button>
        </div>
    )
}

export function GeneralAdminTab() {
    return (
        <Card>
            <CardHeader>
                <CardTitle>Configuración General</CardTitle>
                <CardDescription>Ajusta la configuración global de la página.</CardDescription>
            </CardHeader>
            <CardContent className="space-y-8">
                <HeroImageSettings />
                <Separator />
                <LogoSettings />
            </CardContent>
        </Card>
    );
}