import { confirmAction } from '@/lib/confirm-action';
import { Head, Link, useForm, usePage } from '@inertiajs/react';
import { ArrowLeft, Users, Search, AlertCircle, ShieldAlert, CheckCircle2, MessageSquare, Plus, Trash2 } from 'lucide-react';
import StudentLayout from '@/layouts/StudentLayout';
import { cn } from '@/lib/utils';
import type { PageProps } from '@/types';
import { useState } from 'react';
import { toast } from 'sonner';

interface Student {
    id: number;
    full_name: string;
    gender: 'L' | 'P' | null;
}

interface Position {
    id: number;
    name: string;
}

interface Props extends PageProps {
    session: {
        id: number;
        title: string;
        type: 'class_election' | 'quick_poll';
        positions: Position[];
        max_suggestions?: number | null;
    };
    classmates: Student[];
    studentId: number;
    existingNominations: Record<number, number | string[]>; // position_id => nominee_student_id or nominee_labels
}

export default function NominationForm() {
    const { session, classmates, studentId, existingNominations } = usePage<Props>().props;
    
    // Determine if student has already submitted (if existingNominations has keys)
    const hasSubmitted = Object.keys(existingNominations).length > 0;
    const isQuickPoll = session.type === 'quick_poll';
    const [isEditing, setIsEditing] = useState(!hasSubmitted);

    const initialNominations = () => {
        if (hasSubmitted) return existingNominations;
        
        const initial: Record<number, any> = {};
        session.positions.forEach(pos => {
            initial[pos.id] = isQuickPoll ? [''] : '';
        });
        return initial;
    };

    const { data, setData, post, processing } = useForm({
        nominations: initialNominations(),
    });

    const [searchQuery, setSearchQuery] = useState('');
    const [selectingForPosition, setSelectingForPosition] = useState<number | null>(null);

    const filteredClassmates = classmates.filter(c => 
        c.full_name.toLowerCase().includes(searchQuery.toLowerCase())
    );

    const handleSelectNominee = (studentId: number) => {
        if (!selectingForPosition) return;
        setData('nominations', {
            ...data.nominations,
            [selectingForPosition]: studentId
        });
        setSelectingForPosition(null);
        setSearchQuery('');
    };

    const handleUpdateQuickPollNomination = (positionId: number, index: number, value: string) => {
        const current = [...(data.nominations[positionId] as string[] || [''])];
        current[index] = value;
        setData('nominations', {
            ...data.nominations,
            [positionId]: current
        });
    };

    const handleAddQuickPollNomination = (positionId: number) => {
        const current = [...(data.nominations[positionId] as string[] || [''])];
        const max = session.max_suggestions || 1;
        if (current.length >= max) {
            toast.error(`Maksimal ${max} usulan.`);
            return;
        }
        current.push('');
        setData('nominations', {
            ...data.nominations,
            [positionId]: current
        });
    };

    const handleRemoveQuickPollNomination = (positionId: number, index: number) => {
        const current = [...(data.nominations[positionId] as string[] || [''])];
        if (current.length <= 1) {
            current[0] = '';
        } else {
            current.splice(index, 1);
        }
        setData('nominations', {
            ...data.nominations,
            [positionId]: current
        });
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        
        // Ensure all positions have a nomination
        const missing = session.positions.some(p => {
            const val = data.nominations[p.id];
            if (isQuickPoll) {
                return !Array.isArray(val) || val.filter(v => v.trim() !== '').length === 0;
            }
            return !val;
        });

        if (missing) {
            toast.error(isQuickPoll ? 'Mohon isi semua usulan sebelum mengirim.' : 'Mohon isi semua posisi sebelum mengirim.');
            return;
        }

        if ((await confirmAction(isQuickPoll ? 'Kirim usulan ini?' : 'Kirim nominasi ini?'))) {
            post(`/student/voting/${session.id}/nominate`, {
                onSuccess: () => {
                    toast.success(isQuickPoll ? 'Usulan berhasil dikirim!' : 'Nominasi berhasil dikirim!');
                }
            });
        }
    };

    return (
        <StudentLayout title={`${isQuickPoll ? 'Usulan' : 'Nominasi'}: ${session.title}`}>
            <div className="max-w-2xl mx-auto px-2 sm:px-0">
                <Link href="/student/voting" className="inline-flex items-center gap-1.5 md:gap-2 text-[10px] md:text-sm text-text-muted hover:text-text transition-colors mb-4 md:mb-6">
                    <ArrowLeft className="h-3 w-3 md:h-4 md:w-4" />
                    Kembali
                </Link>

                <div className="rounded-xl md:rounded-2xl border border-border/50 bg-linear-to-br from-surface/80 to-surface/40 backdrop-blur-md overflow-hidden shadow-lg shadow-black/5">
                    <div className="p-4 md:p-6 border-b border-border/50 bg-linear-to-r from-amber-500/10 to-transparent">
                        <div className="flex items-center gap-2.5 md:gap-4 mb-2 md:mb-3">
                            <div className="w-8 h-8 md:w-12 md:h-12 shrink-0 rounded-xl md:rounded-2xl bg-linear-to-br from-amber-500/20 to-amber-500/5 flex items-center justify-center border border-amber-500/20 shadow-inner">
                                {isQuickPoll ? <MessageSquare className="h-4 w-4 md:h-6 md:w-6 text-amber-400" /> : <Users className="h-4 w-4 md:h-6 md:w-6 text-amber-400" />}
                            </div>
                            <div>
                                <h1 className="text-sm md:text-xl font-bold bg-clip-text text-transparent bg-linear-to-r from-text to-text-muted/80">
                                    Sesi 1: {isQuickPoll ? 'Kumpulkan Usulan' : 'Nominasi Terbuka'}
                                </h1>
                                <p className="text-[10px] md:text-sm text-text-muted mt-0.5">{session.title}</p>
                            </div>
                        </div>
                        <div className="text-[9px] md:text-sm text-amber-400/90 bg-amber-500/10 border border-amber-500/20 p-2.5 md:p-4 rounded-lg md:rounded-xl flex items-start gap-2 mt-3 md:mt-4 shadow-sm">
                            <ShieldAlert className="w-3.5 h-3.5 md:w-5 md:h-5 shrink-0 mt-0.5 md:mt-0.5" />
                            <p className="leading-relaxed">
                                {isQuickPoll 
                                    ? 'Berikan usulan terbaikmu. Pilihanmu dijamin rahasia.'
                                    : 'Pilih teman kelasmu (atau dirimu sendiri) yang paling cocok untuk setiap posisi. Pilihanmu dijamin rahasia.'}
                            </p>
                        </div>
                    </div>

                    <form onSubmit={handleSubmit} className="p-4 md:p-6 space-y-4 md:space-y-6">
                        {session.positions.map(pos => {
                            const selectedValue = data.nominations[pos.id];
                            
                            // For Election
                            let selectedStudent = null;
                            if (!isQuickPoll && selectedValue) {
                                selectedStudent = classmates.find(c => c.id === selectedValue);
                            }

                            const isSelecting = selectingForPosition === pos.id;

                            return (
                                <div key={pos.id} className="rounded-xl md:rounded-2xl border border-border/50 p-3.5 md:p-5 bg-surface/40 hover:bg-surface/60 transition-colors">
                                    {!isQuickPoll && <h3 className="font-semibold text-xs md:text-lg mb-2.5 md:mb-4">{pos.name}</h3>}
                                    {isQuickPoll && session.positions.length > 1 && <h3 className="font-semibold text-xs md:text-lg mb-2.5 md:mb-4">{pos.name}</h3>}
                                    
                                    {isQuickPoll ? (
                                        !isEditing ? (
                                            <div className="space-y-2">
                                                {Array.isArray(selectedValue) && (selectedValue as string[]).map((val, idx) => (
                                                    <div key={idx} className="p-3 md:p-4 rounded-lg border border-border/50 bg-surface/80">
                                                        <p className="font-medium text-[11px] md:text-sm capitalize">{val}</p>
                                                    </div>
                                                ))}
                                            </div>
                                        ) : (
                                            <div className="space-y-2">
                                                {(selectedValue as string[] || ['']).map((val, idx) => (
                                                    <div key={idx} className="flex items-center gap-2">
                                                        <input
                                                            type="text"
                                                            placeholder={`Tulis usulan ${idx + 1}...`}
                                                            value={val}
                                                            onChange={(e) => handleUpdateQuickPollNomination(pos.id, idx, e.target.value)}
                                                            className="flex-1 rounded-lg md:rounded-xl border border-amber-500/30 bg-surface/80 px-3 md:px-4 py-2 md:py-3 text-[11px] md:text-sm focus:border-amber-500 focus:ring-1 focus:ring-amber-500 shadow-sm"
                                                        />
                                                        {((selectedValue as string[] || ['']).length > 1 || val !== '') && (
                                                            <button
                                                                type="button"
                                                                onClick={() => handleRemoveQuickPollNomination(pos.id, idx)}
                                                                className="p-2 text-text-muted hover:text-rose-400 hover:bg-rose-500/10 rounded-lg transition-colors"
                                                            >
                                                                <Trash2 className="h-4 w-4" />
                                                            </button>
                                                        )}
                                                    </div>
                                                ))}
                                                {(selectedValue as string[] || []).length < (session.max_suggestions || 1) && (
                                                    <button
                                                        type="button"
                                                        onClick={() => handleAddQuickPollNomination(pos.id)}
                                                        className="mt-2 inline-flex items-center gap-1.5 text-xs font-semibold text-amber-500 hover:text-amber-400 transition-colors"
                                                    >
                                                        <Plus className="h-3.5 w-3.5" />
                                                        Tambah Usulan
                                                    </button>
                                                )}
                                            </div>
                                        )
                                    ) : (
                                        // Class Election Flow
                                        selectedStudent && !isSelecting ? (
                                            <div className="flex items-center justify-between p-2.5 md:p-4 rounded-lg md:rounded-xl bg-linear-to-r from-surface-hover to-surface/40 border border-amber-500/30 shadow-sm shadow-amber-500/5 ring-1 ring-amber-500/10">
                                                <div className="flex items-center gap-2.5 md:gap-4">
                                                    <div className="w-8 h-8 md:w-10 md:h-10 rounded-full bg-linear-to-br from-primary-500/20 to-primary-500/5 border border-primary-500/20 flex items-center justify-center text-primary-400 font-bold text-[10px] md:text-sm shadow-inner">
                                                        {selectedStudent.full_name.charAt(0)}
                                                    </div>
                                                    <span className="font-semibold text-[11px] md:text-base">{selectedStudent.full_name}</span>
                                                </div>
                                                {isEditing && (
                                                    <button
                                                        type="button"
                                                        onClick={() => setSelectingForPosition(pos.id)}
                                                        className="text-[9px] md:text-sm font-medium text-amber-500 hover:text-amber-400 bg-amber-500/10 hover:bg-amber-500/20 px-2 md:px-3 py-1 md:py-1.5 rounded-md md:rounded-lg transition-colors"
                                                    >
                                                        Ganti
                                                    </button>
                                                )}
                                            </div>
                                        ) : (
                                            isEditing && (
                                                <div>
                                                    {!isSelecting ? (
                                                        <button
                                                            type="button"
                                                            onClick={() => setSelectingForPosition(pos.id)}
                                                            className="w-full flex items-center justify-center gap-1.5 md:gap-2 p-3 md:p-4 rounded-lg md:rounded-xl border-2 border-dashed border-border hover:border-amber-500/50 hover:bg-amber-500/5 transition-all duration-200 text-text-muted hover:text-amber-400 text-[11px] md:text-base font-medium group"
                                                        >
                                                            <Search className="w-3.5 h-3.5 md:w-4 md:h-4 group-hover:scale-110 transition-transform" />
                                                            Pilih Kandidat {pos.name}
                                                        </button>
                                                    ) : (
                                                        <div className="space-y-2.5 md:space-y-4 animate-in fade-in slide-in-from-top-2 duration-200">
                                                            <div className="relative">
                                                                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 md:w-4.5 md:h-4.5 text-text-muted" />
                                                                <input
                                                                    type="text"
                                                                    placeholder="Ketik nama teman..."
                                                                    autoFocus
                                                                    value={searchQuery}
                                                                    onChange={(e) => setSearchQuery(e.target.value)}
                                                                    className="w-full rounded-lg md:rounded-xl border border-amber-500/30 bg-surface/80 pl-8 md:pl-10 pr-3 md:pr-4 py-2 md:py-3 text-[11px] md:text-sm focus:border-amber-500 focus:ring-1 focus:ring-amber-500 shadow-sm"
                                                                />
                                                            </div>
                                                            <div className="max-h-48 md:max-h-64 overflow-y-auto rounded-lg md:rounded-xl border border-border bg-surface custom-scrollbar shadow-inner">
                                                                {filteredClassmates.length === 0 ? (
                                                                    <p className="p-3 md:p-4 text-center text-[10px] md:text-sm text-text-muted italic">Siswa tidak ditemukan</p>
                                                                ) : (
                                                                    filteredClassmates.map(c => (
                                                                        <button
                                                                            key={c.id}
                                                                            type="button"
                                                                            onClick={() => handleSelectNominee(c.id)}
                                                                            className="w-full text-left px-3 md:px-4 py-2 md:py-3 text-[11px] md:text-sm font-medium hover:bg-amber-500/10 border-b border-border/50 last:border-0 transition-colors flex items-center justify-between group"
                                                                        >
                                                                            {c.full_name}
                                                                            <div className="w-1.5 h-1.5 md:w-2 md:h-2 rounded-full bg-amber-500 opacity-0 group-hover:opacity-100 transition-opacity" />
                                                                        </button>
                                                                    ))
                                                                )}
                                                            </div>
                                                            <button
                                                                type="button"
                                                                onClick={() => {
                                                                    setSelectingForPosition(null);
                                                                    setSearchQuery('');
                                                                }}
                                                                className="w-full text-[10px] md:text-sm font-medium text-text-muted hover:text-text bg-surface-hover/50 hover:bg-surface-hover py-2 md:py-2.5 rounded-lg md:rounded-xl transition-colors"
                                                            >
                                                                Batal
                                                            </button>
                                                        </div>
                                                    )}
                                                </div>
                                            )
                                        )
                                    )}
                                </div>
                            );
                        })}

                        {!isEditing ? (
                            <div className="p-3 md:p-4 rounded-lg md:rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-center flex flex-col items-center gap-3">
                                <div className="flex flex-col items-center">
                                    <CheckCircle2 className="w-6 h-6 md:w-8 md:h-8 mb-1.5 md:mb-2" />
                                    <p className="font-medium text-[11px] md:text-base">Kamu sudah mengirimkan {isQuickPoll ? 'usulan' : 'nominasi'}.</p>
                                    <p className="text-[9px] md:text-sm mt-0.5 md:mt-1 opacity-80">Kamu bisa mengubahnya selama sesi masih terbuka.</p>
                                </div>
                                <button
                                    type="button"
                                    onClick={() => setIsEditing(true)}
                                    className="rounded-lg md:rounded-xl bg-amber-500/20 border border-amber-500/30 px-4 md:px-6 py-2 md:py-2.5 text-[11px] md:text-sm font-semibold text-amber-400 hover:bg-amber-500/30 transition-colors"
                                >
                                    Ubah {isQuickPoll ? 'Usulan' : 'Nominasi'}
                                </button>
                            </div>
                        ) : (
                            <button
                                type="submit"
                                disabled={processing || session.positions.some(p => {
                                    const val = data.nominations[p.id];
                                    if (isQuickPoll) {
                                        return !Array.isArray(val) || val.filter(v => v.trim() !== '').length === 0;
                                    }
                                    return !val;
                                })}
                                className="w-full rounded-lg md:rounded-xl bg-amber-500 px-4 md:px-6 py-2.5 md:py-3 text-[11px] md:text-sm font-semibold text-white shadow-lg shadow-amber-500/25 transition-all hover:bg-amber-600 disabled:opacity-50 disabled:cursor-not-allowed"
                            >
                                {processing ? 'Mengirim...' : (hasSubmitted
                                    ? (isQuickPoll ? 'Perbarui Usulan Saya' : 'Perbarui Nominasi Saya')
                                    : (isQuickPoll ? 'Kirim Usulan Saya' : 'Kirim Nominasi Saya'))}
                            </button>
                        )}
                    </form>
                </div>
            </div>
        </StudentLayout>
    );
}