import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { TextInputField } from '@/components/form';
import FileUploadReal from '@/components/file-upload';
import { useForm } from '@inertiajs/react';
import { LoaderCircle } from 'lucide-react';
import { FormEventHandler, useEffect } from 'react';
import type { Team } from '@/types';
import { store, update } from '@/routes/teams';
import { Flash, showFlash } from '@/components/use-flash-toasts';

interface EditTeamProps {
    open: boolean;
    setOpen: (value: boolean) => void;
    team?: Team;
}

export interface TeamForm {
    name: string;
    description: string;
    status: string;
    social_networks?: Record<string, string>;
    affix?: string;
    homologated: boolean;
    banner_url?: string;
    shield_url?: string;
    logo_url?: string;
    general?: string; // Para errores generales
}

export default function EditTeam({ open, setOpen, team }: EditTeamProps) {
    const isEdit = Boolean(team && team.id);

    const { data, setData, post, put, processing, errors, reset } = useForm<TeamForm>({
        name: team?.name || '',
        description: team?.description || '',
        status: team?.status || '',
        social_networks: team?.social_networks || {},
        affix: team?.affix || '',
        homologated: team?.homologated || false,
        banner_url: team?.banner_url || '',
        shield_url: team?.shield_url || '',
        logo_url: team?.logo_url || '',
    });

    useEffect(() => {
        if (open && team) {
            setData({
                name: team.name || '',
                description: team.description || '',
                status: team.status || '',
                social_networks: team.social_networks || {},
                affix: team.affix || '',
                homologated: team.homologated || false,
                banner_url: team.banner_url || '',
                shield_url: team.shield_url || '',
                logo_url: team.logo_url || '',
            });
        } else if (open && !team) {
            reset();
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [open, team]);

    const isFormValid =
        Boolean(data.name) &&
        Boolean(data.status);

    const submit: FormEventHandler = (e) => {
        e.preventDefault();
        if (!isFormValid) return;

        if (isEdit && team?.id) {
            post(update(team.id).url, {
                onSuccess: (page) => {
                    const flash = page.props.flash as Flash;
                    showFlash(flash);
                    setOpen(false);
                },
                onError: (errors) => {
                    console.error('Error al actualizar equipo:', errors);
                },
            });
        } else {
            post(store().url, {
                onSuccess: (page) => {
                    const flash = page.props.flash as Flash;
                    showFlash(flash);
                    reset();
                    setOpen(false);
                },
                onError: (errors) => {
                    console.error('Error al crear equipo:', errors);
                },
            });
        }
    };    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogContent className="w-full max-w-[98vw] pb-4 sm:max-w-2xl">
                <DialogHeader>
                    <DialogTitle>
                        {isEdit ? 'Actualizar equipo' : 'Registrar equipo'}
                    </DialogTitle>
                    <DialogDescription>
                        {isEdit
                            ? 'Actualiza los datos de tu equipo.'
                            : 'Completa los campos para registrar tu equipo.'}
                    </DialogDescription>
                </DialogHeader>
                <form id="team-form" onSubmit={submit}>
                    {errors.general && (
                        <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
                            <div className="flex items-center">
                                <div className="flex-shrink-0">
                                    <svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                                        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
                                    </svg>
                                </div>
                                <div className="ml-3">
                                    <div className="text-sm text-red-800">
                                        {errors.general}
                                    </div>
                                </div>
                            </div>
                        </div>
                    )}
                    <div className="grid grid-cols-1 gap-4 max-h-[70vh] overflow-y-auto pr-2">
                        <div>
                            <label className="mb-1 block text-sm font-medium">
                                Banner
                            </label>
                            <FileUploadReal
                                onUpload={(urls) =>
                                    setData('banner_url', urls[0] || '')
                                }
                                single={true}
                                accept="image/*"
                                maxSizeMB={5}
                                defaultUrls={data.banner_url ? [data.banner_url] : []}
                            />
                        </div>
                        <TextInputField
                            id="name"
                            label="Nombre del equipo"
                            required
                            value={data.name}
                            onChange={(v) => setData('name', v)}
                            error={errors.name}
                        />
                        <TextInputField
                            id="description"
                            label="Descripción"
                            value={data.description}
                            onChange={(v) => setData('description', v)}
                            error={errors.description}
                        />
                        <TextInputField
                            id="status"
                            label="Estatus"
                            required
                            value={data.status}
                            onChange={(v) => setData('status', v)}
                            error={errors.status}
                        />
                        <TextInputField
                            id="affix"
                            label="Afijo"
                            value={data.affix || ''}
                            onChange={(v) => setData('affix', v)}
                            error={errors.affix}
                        />
                        <div>
                            <label className="mb-1 block text-sm font-medium">
                                Escudo
                            </label>
                            <FileUploadReal
                                onUpload={(urls) =>
                                    setData('shield_url', urls[0] || '')
                                }
                                single={true}
                                accept="image/*"
                                maxSizeMB={5}
                                defaultUrls={data.shield_url ? [data.shield_url] : []}
                            />
                        </div>
                        <div>
                            <label className="mb-1 block text-sm font-medium">
                                Logo
                            </label>
                            <FileUploadReal
                                onUpload={(urls) =>
                                    setData('logo_url', urls[0] || '')
                                }
                                single={true}
                                accept="image/*"
                                maxSizeMB={5}
                                defaultUrls={data.logo_url ? [data.logo_url] : []}
                            />
                        </div>
                        {/* Puedes agregar campos para social_networks si lo deseas */}
                    </div>
                </form>
                <DialogFooter>
                    <DialogClose asChild>
                        <Button variant="outline" type="button">
                            Cancelar
                        </Button>
                    </DialogClose>
                    <Button
                        type="submit"
                        form="team-form"
                        disabled={processing || !isFormValid}
                    >
                        {processing && (
                            <LoaderCircle className="h-4 w-4 animate-spin" />
                        )}
                        {isEdit ? 'Actualizar' : 'Guardar'}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}