'use client';

import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { toast } from 'sonner';
import { KabinetSchema } from '@/lib/validations';
import { upsertKabinet } from '@/lib/admin-actions';
import { uploadImage } from '@/lib/upload';
import { z } from 'zod';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';

type KabinetFormValues = z.infer<typeof KabinetSchema>;

export default function KabinetForm({ initialData, pengurusList = [] }: { initialData?: any, pengurusList?: any[] }) {
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [logoFile, setLogoFile] = useState<File | null>(null);
    const [lambangFile, setLambangFile] = useState<File | null>(null);
    const [hero1File, setHero1File] = useState<File | null>(null);
    const [hero2File, setHero2File] = useState<File | null>(null);
    const [hero3File, setHero3File] = useState<File | null>(null);
    const [hero4File, setHero4File] = useState<File | null>(null);
    const [organigramFile, setOrganigramFile] = useState<File | null>(null);

    const form = useForm<KabinetFormValues>({
        resolver: zodResolver(KabinetSchema),
        defaultValues: initialData || {
            namaKabinet: '',
            periode: `${new Date().getFullYear()}/${new Date().getFullYear() + 1}`,
            visi: '',
            misi: '',
            lambangUrl: '',
            filosofiLambang: '',
            heroPhoto1: '',
            heroPhoto2: '',
            heroPhoto3: '',
            heroPhoto4: '',
            organigramUrl: '',
            penanggungJawabWebId: '',
        },
    });

    const watchPeriode = form.watch('periode') || `${new Date().getFullYear()}/${new Date().getFullYear() + 1}`;

    const formatDriveLink = (url?: string) => {
        if (!url) return url;
        // Pattern 1: Tautan sharing langsung (file/d/ID)
        const matchFile = url.match(/\/file\/d\/([a-zA-Z0-9_-]+)/);
        if (matchFile && matchFile[1]) {
            return `https://lh3.googleusercontent.com/d/${matchFile[1]}`;
        }
        // Pattern 2: URL uc legacy yang terlanjur tersimpan di Database
        const matchUc = url.match(/id=([a-zA-Z0-9_-]+)/);
        if (matchUc && matchUc[1] && url.includes('drive.google.com/uc')) {
            return `https://lh3.googleusercontent.com/d/${matchUc[1]}`;
        }
        return url;
    };

    const watchLogoUrl = logoFile ? URL.createObjectURL(logoFile) : formatDriveLink(form.watch('logoUrl'));
    const watchLambangUrl = lambangFile ? URL.createObjectURL(lambangFile) : formatDriveLink(form.watch('lambangUrl'));
    const watchHero1 = hero1File ? URL.createObjectURL(hero1File) : formatDriveLink(form.watch('heroPhoto1'));
    const watchHero2 = hero2File ? URL.createObjectURL(hero2File) : formatDriveLink(form.watch('heroPhoto2'));
    const watchHero3 = hero3File ? URL.createObjectURL(hero3File) : formatDriveLink(form.watch('heroPhoto3'));
    const watchHero4 = hero4File ? URL.createObjectURL(hero4File) : formatDriveLink(form.watch('heroPhoto4'));
    const watchOrganigramUrl = organigramFile ? URL.createObjectURL(organigramFile) : formatDriveLink(form.watch('organigramUrl'));

    // Pecah jadi 2 bagian
    const [startYearStr, endYearStr] = watchPeriode.split('/');
    const currentYear = new Date().getFullYear();
    const yearOptions = Array.from({ length: 10 }, (_, i) => currentYear - 3 + i);

    const onSubmit = async (values: KabinetFormValues) => {
        setIsSubmitting(true);
        try {
            let logoUrl = values.logoUrl || '';
            let lambangUrl = values.lambangUrl || '';
            let heroPhoto1 = values.heroPhoto1 || '';
            let heroPhoto2 = values.heroPhoto2 || '';
            let heroPhoto3 = values.heroPhoto3 || '';
            let heroPhoto4 = values.heroPhoto4 || '';
            let organigramUrl = values.organigramUrl || '';

            if (logoFile) logoUrl = await uploadImage(logoFile);
            if (lambangFile) lambangUrl = await uploadImage(lambangFile);
            if (hero1File) heroPhoto1 = await uploadImage(hero1File);
            if (hero2File) heroPhoto2 = await uploadImage(hero2File);
            if (hero3File) heroPhoto3 = await uploadImage(hero3File);
            if (hero4File) heroPhoto4 = await uploadImage(hero4File);
            if (organigramFile) organigramUrl = await uploadImage(organigramFile);

            const processedValues = {
                ...values,
                logoUrl,
                lambangUrl,
                heroPhoto1,
                heroPhoto2,
                heroPhoto3,
                heroPhoto4,
                organigramUrl,
            };

            const result = await upsertKabinet(processedValues);
            if (result.success) {
                toast.success(result.message);
                setLogoFile(null);
                setLambangFile(null);
                setHero1File(null);
                setHero2File(null);
                setHero3File(null);
                setHero4File(null);
                setOrganigramFile(null);
            } else {
                toast.error(result.message);
            }
        } catch (e: any) {
            toast.error('Gagal menyimpan data kabinet', { description: e.message });
        } finally {
            setIsSubmitting(false);
        }
    };

    return (
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-2">
                    <Label htmlFor="namaKabinet">Nama Kabinet</Label>
                    <Input
                        id="namaKabinet"
                        {...form.register('namaKabinet')}
                        placeholder="Niskala Cakra Murni"
                    />
                    {form.formState.errors.namaKabinet && (
                        <p className="text-sm text-red-500">{form.formState.errors.namaKabinet.message}</p>
                    )}
                </div>

                <div className="space-y-4">
                    <Label htmlFor="periode">Periode Kepengurusan</Label>
                    <div className="flex items-center gap-3">
                        <Select
                            value={startYearStr}
                            onValueChange={(val) => {
                                form.setValue('periode', `${val}/${endYearStr}`);
                            }}
                        >
                            <SelectTrigger className="w-full">
                                <SelectValue placeholder="Tahun Awal" />
                            </SelectTrigger>
                            <SelectContent>
                                {yearOptions.map(y => (
                                    <SelectItem key={y} value={y.toString()}>{y}</SelectItem>
                                ))}
                            </SelectContent>
                        </Select>

                        <span className="text-muted-foreground font-bold">/</span>

                        <Select
                            value={endYearStr}
                            onValueChange={(val) => {
                                form.setValue('periode', `${startYearStr}/${val}`);
                            }}
                        >
                            <SelectTrigger className="w-full">
                                <SelectValue placeholder="Tahun Akhir" />
                            </SelectTrigger>
                            <SelectContent>
                                {yearOptions.map(y => (
                                    <SelectItem key={y} value={y.toString()}>{y}</SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                    </div>
                    {form.formState.errors.periode && (
                        <p className="text-sm text-red-500">{form.formState.errors.periode.message}</p>
                    )}
                </div>
            </div>

            <div className="space-y-4">
                <Label htmlFor="logoUrl">Logo Kabinet</Label>
                <div className="flex flex-col md:flex-row gap-6 items-start">
                    <div className="flex-1 w-full space-y-2">
                        <Input
                            id="logoUrl"
                            type="file"
                            accept="image/*"
                            onChange={(e) => setLogoFile(e.target.files?.[0] || null)}
                        />
                        <p className="text-xs text-muted-foreground">
                            Unggah logo resmi kabinet (PNG/JPG).
                        </p>
                        {form.formState.errors.logoUrl && (
                            <p className="text-sm text-red-500">{form.formState.errors.logoUrl.message}</p>
                        )}
                    </div>

                    {/* Live Preview Box */}
                    <div className="w-full md:w-32 aspect-square rounded-2xl border-2 border-dashed border-gray-200 bg-gray-50 flex flex-col items-center justify-center p-2 text-center text-xs text-muted-foreground overflow-hidden shrink-0 group">
                        {watchLogoUrl ? (
                            // eslint-disable-next-line @next/next/no-img-element
                            <img src={watchLogoUrl} alt="Preview Logo" className="w-full h-full object-contain mix-blend-multiply group-hover:scale-110 transition-transform duration-300" onError={(e) => { e.currentTarget.style.display = 'none'; e.currentTarget.parentElement!.innerHTML = 'Image tidak<br/>valid' }} />
                        ) : (
                            <span>Pratinjau<br />Logo</span>
                        )}
                    </div>
                </div>
            </div>

            <div className="space-y-2">
                <Label htmlFor="visi">Visi Kabinet</Label>
                <Textarea
                    id="visi"
                    {...form.register('visi')}
                    rows={3}
                    placeholder="Tuliskan visi kabinet..."
                />
                {form.formState.errors.visi && (
                    <p className="text-sm text-red-500">{form.formState.errors.visi.message}</p>
                )}
            </div>

            <div className="space-y-2">
                <Label htmlFor="misi">Misi Kabinet</Label>
                <Textarea
                    id="misi"
                    {...form.register('misi')}
                    rows={5}
                    placeholder="Tuliskan misi kabinet (pisahkan tiap poin dengan enter baru)..."
                />
                <p className="text-xs text-muted-foreground">
                    Tips: pisahkan setiap poin misi dengan baris baru
                </p>
                {form.formState.errors.misi && (
                    <p className="text-sm text-red-500">{form.formState.errors.misi.message}</p>
                )}
            </div>

            <div className="space-y-4 pt-4 border-t">
                <div>
                    <Label className="text-lg font-bold">Logo & Filosofi Lambang</Label>
                    <p className="text-xs text-muted-foreground mt-1">
                        Logo utuh kabinet beserta makna khusus atau filosofi yang ada di belakangnya.
                    </p>
                </div>

                    <div className="space-y-2 pt-2">
                        <Label htmlFor="filosofiLambang">Filosofi / Makna Lambang</Label>
                        <Textarea
                            id="filosofiLambang"
                            {...form.register('filosofiLambang')}
                            rows={6}
                            placeholder="Uraikan filosofi setiap bentuk desain dari logo / lambang kabinet di sini..."
                        />
                        {form.formState.errors.filosofiLambang && (
                            <p className="text-sm text-red-500">{form.formState.errors.filosofiLambang.message}</p>
                        )}
                    </div>
            </div>

            {/* FOTO LANDING PAGE */}
            <div className="space-y-4 pt-8 border-t">
                <div>
                    <Label className="text-lg font-bold">Foto Pahlawan (Landing Page)</Label>
                    <p className="text-xs text-muted-foreground mt-1">
                        4 Ekstra foto horizontal/lanskap yang akan muncul di layar utama (berjejer ke samping). Gunakan link gambar eksternal (termasuk link Google Drive) atau gambar lokal.
                    </p>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                    {[1, 2].map((num) => {
                        const formKey = `heroPhoto${num}` as keyof KabinetFormValues;
                        // Pilih watch variabel
                        const previewVal = num === 1 ? watchHero1 : num === 2 ? watchHero2 : num === 3 ? watchHero3 : watchHero4;
                        const setFileFunc = num === 1 ? setHero1File : num === 2 ? setHero2File : num === 3 ? setHero3File : setHero4File;

                        return (
                            <div key={num} className="space-y-4 border rounded-xl p-4 bg-gray-50/50">
                                <Label htmlFor={formKey}>Foto Nomor Ke-{num}</Label>
                                <div className="flex flex-col xl:flex-row gap-4 items-start">
                                    <div className="flex-1 w-full space-y-2">
                                        <Input
                                            id={formKey}
                                            type="file"
                                            accept="image/*"
                                            onChange={(e) => setFileFunc(e.target.files?.[0] || null)}
                                        />
                                        {form.formState.errors[formKey] && (
                                            <p className="text-sm text-red-500">{form.formState.errors[formKey]?.message}</p>
                                        )}
                                    </div>
                                    <div className="w-full xl:w-32 aspect-[4/3] rounded-lg border-2 border-dashed border-gray-300 bg-white flex flex-col items-center justify-center p-1 text-center text-[10px] text-muted-foreground overflow-hidden shrink-0 group">
                                        {previewVal ? (
                                            // eslint-disable-next-line @next/next/no-img-element
                                            <img src={previewVal as string} alt={`Hero ${num}`} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300" onError={(e) => { e.currentTarget.style.display = 'none'; e.currentTarget.parentElement!.innerHTML = 'Image tidak<br/>valid' }} />
                                        ) : (
                                            <span>Belum Ada<br />Foto</span>
                                        )}
                                    </div>
                                </div>
                            </div>
                        )
                    })}
                </div>
            </div>

            {/* ORGANIGRAM */}
            <div className="space-y-4 pt-8 border-t">
                <div>
                    <Label className="text-lg font-bold">Organigram Kabinet (PH)</Label>
                    <p className="text-xs text-muted-foreground mt-1">
                        Unggah bagan struktur organisasi kabinet (Pengurus Harian). Akan ditampilkan penuh di halaman publik.
                    </p>
                </div>

                <div className="flex flex-col md:flex-row gap-6 items-start border rounded-xl p-4 bg-gray-50/50">
                    <div className="flex-1 w-full space-y-2">
                        <Input
                            id="organigramUrl"
                            type="file"
                            accept="image/*"
                            onChange={(e) => setOrganigramFile(e.target.files?.[0] || null)}
                        />
                        {form.formState.errors.organigramUrl && (
                            <p className="text-sm text-red-500">{form.formState.errors.organigramUrl.message}</p>
                        )}
                    </div>
                    <div className="w-full md:w-48 aspect-video rounded-lg border-2 border-dashed border-gray-300 bg-white flex flex-col items-center justify-center p-1 text-center text-xs text-muted-foreground overflow-hidden shrink-0 group">
                        {watchOrganigramUrl ? (
                            // eslint-disable-next-line @next/next/no-img-element
                            <img src={watchOrganigramUrl as string} alt="Preview Organigram" className="w-full h-full object-contain mix-blend-multiply group-hover:scale-110 transition-transform duration-300" onError={(e) => { e.currentTarget.style.display = 'none'; e.currentTarget.parentElement!.innerHTML = 'Image tidak<br/>valid' }} />
                        ) : (
                            <span>Belum Ada<br />Bagan</span>
                        )}
                    </div>
                </div>
            </div>

            <div className="space-y-4 pt-8 border-t">
                <div>
                    <Label className="text-lg font-bold">Penanggung Jawab Website</Label>
                    <p className="text-xs text-muted-foreground mt-1">
                        Pilih salah satu pengurus yang akan ditampilkan sebagai penanggung jawab pengembangan web di halaman beranda.
                    </p>
                </div>
                <div className="max-w-md">
                    <Select
                        onValueChange={(val) => form.setValue('penanggungJawabWebId', val)}
                        defaultValue={form.getValues('penanggungJawabWebId') || undefined}
                    >
                        <SelectTrigger className="w-full">
                            <SelectValue placeholder="-- Pilih Pengurus --" />
                        </SelectTrigger>
                        <SelectContent>
                            {pengurusList.map((p) => (
                                <SelectItem key={p.id} value={p.id}>
                                    {p.nama} ({p.jabatan})
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                </div>
            </div>

            <Button type="submit" className="w-full md:w-auto" disabled={isSubmitting}>
                {isSubmitting ? 'Menyimpan...' : 'Simpan Data Kabinet'}
            </Button>
        </form>
    );
}