import { Head, useForm, usePage } from '@inertiajs/react';
import { useState } from 'react';
import { Vote, Plus, Trash2, Sparkles, MessageSquare } from 'lucide-react';
import AuthenticatedLayout from '@/layouts/AuthenticatedLayout';
import { cn } from '@/lib/utils';
import type { PageProps } from '@/types';

interface HomeroomClass {
    id: number;
    name: string;
    students_count: number;
}

interface Props extends PageProps {
    homeroomClasses: HomeroomClass[];
}

const DEFAULT_POSITIONS = [
    { name: 'Ketua Kelas' },
    { name: 'Wakil Ketua Kelas' },
    { name: 'Sekretaris' },
    { name: 'Bendahara' },
];

export default function VotingCreate() {
    const { homeroomClasses } = usePage<Props>().props;

    const { data, setData, post, processing, errors, transform } = useForm({
        class_id: homeroomClasses[0]?.id || '',
        title: '',
        type: 'class_election' as 'class_election' | 'quick_poll',
        mode: 'open_nomination' as 'open_nomination' | 'teacher_assigned',
        min_votes_threshold: 2,
        max_suggestions: 2,
        positions: DEFAULT_POSITIONS as Array<{ name: string }>,
        options: [{ label: '' }, { label: '' }] as Array<{ label: string }>,
        schedule_type: 'draft' as 'now' | 'draft' | 'scheduled',
        started_at: '',
        end_at: '',
    });

    const [autoTitle, setAutoTitle] = useState(true);

    const selectedClass = homeroomClasses.find(c => c.id === Number(data.class_id));

    // Auto-generate title
    const generateTitle = () => {
        if (data.type === 'quick_poll') return '';
        if (!selectedClass) return '';
        return `Pemilihan Pengurus Kelas ${selectedClass.name}`;
    };

    const handleClassChange = (classId: string) => {
        setData('class_id', classId as any);
        if (autoTitle && data.type === 'class_election') {
            const cls = homeroomClasses.find(c => c.id === Number(classId));
            if (cls) setData(prev => ({ ...prev, class_id: classId as any, title: `Pemilihan Pengurus Kelas ${cls.name}` }));
        }
    };

    const handleTypeChange = (type: 'class_election' | 'quick_poll') => {
        setData('type', type);
        if (type === 'quick_poll') {
            setAutoTitle(false);
            setData(prev => ({ ...prev, type, title: '' }));
        } else {
            setAutoTitle(true);
            const cls = homeroomClasses.find(c => c.id === Number(data.class_id));
            setData(prev => ({ ...prev, type, title: cls ? `Pemilihan Pengurus Kelas ${cls.name}` : '' }));
        }
    };

    const addPosition = () => {
        setData('positions', [...data.positions, { name: '' }]);
    };

    const removePosition = (index: number) => {
        if (data.positions.length <= 1) return;
        setData('positions', data.positions.filter((_, i) => i !== index));
    };

    const updatePosition = (index: number, name: string) => {
        const updated = [...data.positions];
        updated[index] = { name };
        setData('positions', updated);
    };

    const addOption = () => {
        setData('options', [...data.options, { label: '' }]);
    };

    const removeOption = (index: number) => {
        if (data.options.length <= 2) return;
        setData('options', data.options.filter((_, i) => i !== index));
    };

    const updateOption = (index: number, label: string) => {
        const updated = [...data.options];
        updated[index] = { label };
        setData('options', updated);
    };

    transform((data) => {
        const finalData = { ...data };
        const cls = homeroomClasses.find(c => c.id === Number(data.class_id));
        if (autoTitle && cls && data.type === 'class_election') {
            finalData.title = `Pemilihan Pengurus Kelas ${cls.name}`;
        }

        // Clean up data based on type and mode
        if (finalData.type === 'class_election') {
            // Options are only for quick_poll
            delete (finalData as any).options;
        } else {
            // Positions are only for class_election
            delete (finalData as any).positions;
            // Options are only required for quick_poll + teacher_assigned
            if (finalData.mode !== 'teacher_assigned') {
                delete (finalData as any).options;
            }
        }

        // Clean up schedule times if not scheduled
        if (finalData.schedule_type !== 'scheduled') {
            delete (finalData as any).started_at;
            delete (finalData as any).end_at;
        }
        return finalData;
    });

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        post('/voting');
    };

    return (
        <>
            <div className="max-w-2xl mx-auto">
                <div className="rounded-2xl border border-border/50 bg-surface/60 backdrop-blur-sm overflow-hidden">
                    {/* Header */}
                    <div className="p-6 border-b border-border/50">
                        <div className="flex items-center gap-3">
                            <div className="w-10 h-10 rounded-xl bg-primary-500/15 flex items-center justify-center">
                                <Vote className="h-5 w-5 text-primary-400" />
                            </div>
                            <div>
                                <p className="text-sm text-text-muted">Atur pemilihan pengurus atau polling cepat</p>
                            </div>
                        </div>
                    </div>

                    <form onSubmit={handleSubmit} className="p-6 space-y-6">
                        {/* Pilih Kelas */}
                        <div>
                            <label className="block text-sm font-medium mb-2">Kelas</label>
                            <select
                                value={data.class_id}
                                onChange={(e) => handleClassChange(e.target.value)}
                                className="w-full rounded-xl border border-border bg-surface px-4 py-2.5 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 transition-colors"
                            >
                                {homeroomClasses.map(c => (
                                    <option key={c.id} value={c.id}>
                                        {c.name} ({c.students_count} siswa)
                                    </option>
                                ))}
                            </select>
                            {errors.class_id && <p className="mt-1 text-xs text-rose-400">{errors.class_id}</p>}
                        </div>

                        {/* Tipe Sesi */}
                        <div>
                            <label className="block text-sm font-medium mb-2">Tipe Sesi</label>
                            <div className="grid grid-cols-2 gap-3">
                                <button
                                    type="button"
                                    onClick={() => handleTypeChange('class_election')}
                                    className={cn(
                                        'rounded-xl border-2 p-4 text-left transition-all',
                                        data.type === 'class_election'
                                            ? 'border-primary-500 bg-primary-500/10 shadow-sm'
                                            : 'border-border hover:border-border/80 hover:bg-surface-hover'
                                    )}
                                >
                                    <div className="flex items-center gap-2 mb-1">
                                        <Vote className="h-4 w-4" />
                                        <p className="text-sm font-semibold">Pemilihan Pengurus</p>
                                    </div>
                                    <p className="text-xs text-text-muted">Pemilihan struktur kelas resmi (Ketua, Wakil, dll)</p>
                                </button>
                                <button
                                    type="button"
                                    onClick={() => handleTypeChange('quick_poll')}
                                    className={cn(
                                        'rounded-xl border-2 p-4 text-left transition-all',
                                        data.type === 'quick_poll'
                                            ? 'border-primary-500 bg-primary-500/10 shadow-sm'
                                            : 'border-border hover:border-border/80 hover:bg-surface-hover'
                                    )}
                                >
                                    <div className="flex items-center gap-2 mb-1">
                                        <MessageSquare className="h-4 w-4" />
                                        <p className="text-sm font-semibold">Polling Cepat (Quick Poll)</p>
                                    </div>
                                    <p className="text-xs text-text-muted">Pemungutan suara bebas (Warna cat, dll)</p>
                                </button>
                            </div>
                        </div>

                        {/* Judul / Pertanyaan */}
                        <div>
                            <label className="block text-sm font-medium mb-2">
                                {data.type === 'quick_poll' ? 'Pertanyaan Polling' : 'Judul Sesi'}
                            </label>
                            <input
                                type="text"
                                value={(autoTitle && data.type === 'class_election') ? generateTitle() : data.title}
                                onChange={(e) => {
                                    setAutoTitle(false);
                                    setData('title', e.target.value);
                                }}
                                placeholder={data.type === 'quick_poll' ? 'Pilih warna cat kelas...' : 'Pemilihan Pengurus Kelas IX-A'}
                                className="w-full rounded-xl border border-border bg-surface px-4 py-2.5 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 transition-colors"
                            />
                            {autoTitle && data.type === 'class_election' && (
                                <p className="mt-1 text-xs text-text-muted flex items-center gap-1">
                                    <Sparkles className="h-3 w-3" /> Judul otomatis dari nama kelas
                                </p>
                            )}
                            {errors.title && <p className="mt-1 text-xs text-rose-400">{errors.title}</p>}
                        </div>

                        {/* Mode */}
                        <div>
                            <label className="block text-sm font-medium mb-2">Mode Pemilihan</label>
                            <div className="grid grid-cols-2 gap-3">
                                <button
                                    type="button"
                                    onClick={() => setData('mode', 'open_nomination')}
                                    className={cn(
                                        'rounded-xl border-2 p-4 text-left transition-all',
                                        data.mode === 'open_nomination'
                                            ? 'border-primary-500 bg-primary-500/10 shadow-sm'
                                            : 'border-border hover:border-border/80 hover:bg-surface-hover'
                                    )}
                                >
                                    <p className="text-sm font-semibold">
                                        {data.type === 'quick_poll' ? 'Siswa Menambahkan Pilihan' : 'Nominasi Terbuka'}
                                    </p>
                                    <p className="text-xs text-text-muted mt-1">
                                        {data.type === 'quick_poll' ? 'Siswa dapat mengetik pilihan mereka sendiri' : 'Siswa bebas menominasikan teman sekelas'}
                                    </p>
                                </button>
                                <button
                                    type="button"
                                    onClick={() => setData('mode', 'teacher_assigned')}
                                    className={cn(
                                        'rounded-xl border-2 p-4 text-left transition-all',
                                        data.mode === 'teacher_assigned'
                                            ? 'border-primary-500 bg-primary-500/10 shadow-sm'
                                            : 'border-border hover:border-border/80 hover:bg-surface-hover'
                                    )}
                                >
                                    <p className="text-sm font-semibold">
                                        {data.type === 'quick_poll' ? 'Pilihan Ditentukan Guru' : 'Guru Menentukan'}
                                    </p>
                                    <p className="text-xs text-text-muted mt-1">
                                        {data.type === 'quick_poll' ? 'Guru langsung memberikan daftar pilihan (misal: Merah, Biru)' : 'Guru langsung assign kandidat per posisi'}
                                    </p>
                                </button>
                            </div>
                        </div>

                        {/* Pengaturan Tambahan (Open Nomination) */}
                        {data.mode === 'open_nomination' && (
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label className="block text-sm font-medium mb-2">
                                        Minimum Suara (Threshold)
                                    </label>
                                    <div className="flex items-center gap-3">
                                        <input
                                            type="number"
                                            min={1}
                                            max={20}
                                            value={data.min_votes_threshold}
                                            onChange={(e) => setData('min_votes_threshold', parseInt(e.target.value) || 1)}
                                            className="w-full rounded-xl border border-border bg-surface px-4 py-2.5 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 transition-colors"
                                        />
                                    </div>
                                    <p className="text-xs text-text-muted mt-1">
                                        Syarat suara minimal untuk maju ke tahap voting.
                                    </p>
                                    {errors.min_votes_threshold && <p className="mt-1 text-xs text-rose-400">{errors.min_votes_threshold}</p>}
                                </div>
                                {data.type === 'quick_poll' && (
                                    <div>
                                        <label className="block text-sm font-medium mb-2">
                                            Batas Maksimal Usulan
                                        </label>
                                        <div className="flex items-center gap-3">
                                            <input
                                                type="number"
                                                min={1}
                                                max={10}
                                                value={data.max_suggestions}
                                                onChange={(e) => setData('max_suggestions', parseInt(e.target.value) || 1)}
                                                className="w-full rounded-xl border border-border bg-surface px-4 py-2.5 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 transition-colors"
                                            />
                                        </div>
                                        <p className="text-xs text-text-muted mt-1">
                                            Berapa pilihan yang bisa dikirim tiap siswa (maks {data.max_suggestions}).
                                        </p>
                                        {errors.max_suggestions && <p className="mt-1 text-xs text-rose-400">{errors.max_suggestions}</p>}
                                    </div>
                                )}
                            </div>
                        )}

                        {/* Posisi (hanya untuk class_election) */}
                        {data.type === 'class_election' && (
                            <div>
                                <label className="block text-sm font-medium mb-2">Posisi yang Dipilih</label>
                                <div className="space-y-2">
                                    {data.positions.map((pos, i) => (
                                        <div key={i} className="flex items-center gap-2">
                                            <span className="w-8 h-8 rounded-lg bg-surface-hover flex items-center justify-center text-xs font-bold text-text-muted shrink-0">
                                                {i + 1}
                                            </span>
                                            <input
                                                type="text"
                                                value={pos.name}
                                                onChange={(e) => updatePosition(i, e.target.value)}
                                                placeholder={`Posisi ${i + 1}`}
                                                className="flex-1 rounded-xl border border-border bg-surface px-4 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 transition-colors"
                                            />
                                            {data.positions.length > 1 && (
                                                <button
                                                    type="button"
                                                    onClick={() => removePosition(i)}
                                                    className="p-2 rounded-lg text-text-muted hover:text-rose-400 hover:bg-rose-500/10 transition-colors"
                                                >
                                                    <Trash2 className="h-4 w-4" />
                                                </button>
                                            )}
                                        </div>
                                    ))}
                                    {errors.positions && <p className="mt-1 text-xs text-rose-400">{errors.positions}</p>}
                                </div>
                                <button
                                    type="button"
                                    onClick={addPosition}
                                    className="mt-2 inline-flex items-center gap-1.5 text-sm text-primary-400 hover:text-primary-300 transition-colors"
                                >
                                    <Plus className="h-3.5 w-3.5" />
                                    Tambah Posisi
                                </button>
                            </div>
                        )}

                        {/* Opsi (hanya untuk quick_poll + teacher_assigned) */}
                        {data.type === 'quick_poll' && data.mode === 'teacher_assigned' && (
                            <div>
                                <label className="block text-sm font-medium mb-2">Daftar Pilihan Polling</label>
                                <div className="space-y-2">
                                    {data.options.map((opt, i) => (
                                        <div key={i} className="flex items-center gap-2">
                                            <span className="w-8 h-8 rounded-lg bg-surface-hover flex items-center justify-center text-xs font-bold text-text-muted shrink-0">
                                                {i + 1}
                                            </span>
                                            <input
                                                type="text"
                                                value={opt.label}
                                                onChange={(e) => updateOption(i, e.target.value)}
                                                placeholder={`Pilihan ${i + 1}`}
                                                className="flex-1 rounded-xl border border-border bg-surface px-4 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 transition-colors"
                                            />
                                            {data.options.length > 2 && (
                                                <button
                                                    type="button"
                                                    onClick={() => removeOption(i)}
                                                    className="p-2 rounded-lg text-text-muted hover:text-rose-400 hover:bg-rose-500/10 transition-colors"
                                                >
                                                    <Trash2 className="h-4 w-4" />
                                                </button>
                                            )}
                                        </div>
                                    ))}
                                    {errors.options && <p className="mt-1 text-xs text-rose-400">{errors.options}</p>}
                                </div>
                                <button
                                    type="button"
                                    onClick={addOption}
                                    className="mt-2 inline-flex items-center gap-1.5 text-sm text-primary-400 hover:text-primary-300 transition-colors"
                                >
                                    <Plus className="h-3.5 w-3.5" />
                                    Tambah Pilihan
                                </button>
                            </div>
                        )}

                        {/* Status Mulai / Penjadwalan */}
                        <div className="pt-4 border-t border-border/30">
                            <label className="block text-sm font-medium mb-2">Jadwal Sesi Voting</label>
                            <div className="grid grid-cols-3 gap-3">
                                <button
                                    type="button"
                                    onClick={() => setData('schedule_type', 'draft')}
                                    className={cn(
                                        'rounded-xl border-2 p-3 text-left transition-all flex flex-col justify-between h-20',
                                        data.schedule_type === 'draft'
                                            ? 'border-primary-500 bg-primary-500/10 shadow-sm'
                                            : 'border-border hover:border-border/80 hover:bg-surface-hover'
                                    )}
                                >
                                    <p className="text-xs font-semibold">Draft (Mulai Manual)</p>
                                    <p className="text-[10px] text-text-muted mt-0.5">Sesi dibuat non-aktif</p>
                                </button>
                                <button
                                    type="button"
                                    onClick={() => setData('schedule_type', 'now')}
                                    className={cn(
                                        'rounded-xl border-2 p-3 text-left transition-all flex flex-col justify-between h-20',
                                        data.schedule_type === 'now'
                                            ? 'border-primary-500 bg-primary-500/10 shadow-sm'
                                            : 'border-border hover:border-border/80 hover:bg-surface-hover'
                                    )}
                                >
                                    <p className="text-xs font-semibold">Mulai Sekarang</p>
                                    <p className="text-[10px] text-text-muted mt-0.5">Sesi langsung aktif/live</p>
                                </button>
                                <button
                                    type="button"
                                    onClick={() => setData('schedule_type', 'scheduled')}
                                    className={cn(
                                        'rounded-xl border-2 p-3 text-left transition-all flex flex-col justify-between h-20',
                                        data.schedule_type === 'scheduled'
                                            ? 'border-primary-500 bg-primary-500/10 shadow-sm'
                                            : 'border-border hover:border-border/80 hover:bg-surface-hover'
                                    )}
                                >
                                    <p className="text-xs font-semibold">Terjadwal</p>
                                    <p className="text-[10px] text-text-muted mt-0.5">Berdasarkan waktu pilihan</p>
                                </button>
                            </div>
                        </div>

                        {/* Waktu Mulai & Berakhir (Jika Terjadwal) */}
                        {data.schedule_type === 'scheduled' && (
                            <div className="grid grid-cols-2 gap-4">
                                <div>
                                    <label className="block text-sm font-medium mb-2">Waktu Mulai</label>
                                    <input
                                        type="datetime-local"
                                        value={data.started_at}
                                        onChange={(e) => setData('started_at', e.target.value)}
                                        className="w-full rounded-xl border border-border bg-surface px-4 py-2.5 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 transition-colors"
                                    />
                                    {errors.started_at && <p className="mt-1 text-xs text-rose-400">{errors.started_at}</p>}
                                </div>
                                <div>
                                    <label className="block text-sm font-medium mb-2">Waktu Berakhir (Opsional)</label>
                                    <input
                                        type="datetime-local"
                                        value={data.end_at}
                                        onChange={(e) => setData('end_at', e.target.value)}
                                        className="w-full rounded-xl border border-border bg-surface px-4 py-2.5 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 transition-colors"
                                    />
                                    {errors.end_at && <p className="mt-1 text-xs text-rose-400">{errors.end_at}</p>}
                                </div>
                            </div>
                        )}

                        {/* Submit */}
                        <div className="pt-4 border-t border-border/50">
                            <button
                                type="submit"
                                disabled={processing}
                                className="w-full rounded-xl bg-primary-500 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-primary-500/25 transition-all hover:bg-primary-600 hover:shadow-primary-500/40 disabled:opacity-50 disabled:cursor-not-allowed"
                            >
                                {processing ? 'Membuat...' : 'Buat Sesi Voting'}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </>
    );
}

VotingCreate.layout = (page: any) => (
    <AuthenticatedLayout title="Buat Sesi Voting" backHref="/voting">
        {page}
    </AuthenticatedLayout>
);