import { Head, Link, usePage } from '@inertiajs/react';
import { Vote, Users, CheckCircle2, Eye, ChevronRight, MessageSquare } from 'lucide-react';
import StudentLayout from '@/layouts/StudentLayout';
import { cn } from '@/lib/utils';
import type { PageProps } from '@/types';

interface VotingSession {
    id: number;
    title: string;
    type: 'class_election' | 'quick_poll';
    mode: 'open_nomination' | 'teacher_assigned';
    current_phase: 'nomination' | 'review' | 'final_vote' | 'completed';
    results_visible: boolean;
    created_at: string;
    positions: Array<{ id: number; name: string }>;
    has_submitted?: boolean;
}

interface Props extends PageProps {
    activeSessions: VotingSession[];
    completedSessions: VotingSession[];
    student: { id: number; full_name: string };
}

export default function StudentVotingIndex() {
    const { activeSessions, completedSessions } = usePage<Props>().props;

    const renderActionLink = (session: VotingSession) => {
        const isQuickPoll = session.type === 'quick_poll';

        if (session.has_submitted) {
            return (
                <button
                    disabled
                    className="mt-4 w-full inline-flex items-center justify-center gap-2 rounded-xl bg-emerald-500/10 px-4 py-2 md:py-2.5 text-[11px] md:text-sm font-semibold text-emerald-400 border border-emerald-500/20"
                >
                    <CheckCircle2 className="h-3.5 w-3.5 md:h-4 md:w-4" />
                    {session.current_phase === 'nomination' 
                        ? (isQuickPoll ? 'Usulan Terkirim' : 'Nominasi Terkirim') 
                        : 'Suara Terkirim'}
                </button>
            );
        }

        if (session.current_phase === 'nomination') {
            return (
                <Link
                    href={`/student/voting/${session.id}/nominate`}
                    className="mt-4 w-full inline-flex items-center justify-center gap-2 rounded-xl bg-amber-500 px-4 py-2 md:py-2.5 text-[11px] md:text-sm font-semibold text-white shadow-lg shadow-amber-500/25 transition-all hover:bg-amber-600 hover:shadow-amber-500/40"
                >
                    {isQuickPoll ? <MessageSquare className="h-3.5 w-3.5 md:h-4 md:w-4" /> : <Users className="h-3.5 w-3.5 md:h-4 md:w-4" />}
                    {isQuickPoll ? 'Beri Usulan' : 'Beri Nominasi'}
                </Link>
            );
        }
        
        if (session.current_phase === 'review') {
            return (
                <button
                    disabled
                    className="mt-4 w-full inline-flex items-center justify-center gap-2 rounded-xl bg-surface-hover px-4 py-2 md:py-2.5 text-[11px] md:text-sm font-semibold text-text-muted cursor-not-allowed"
                >
                    <Eye className="h-3.5 w-3.5 md:h-4 md:w-4" />
                    Sedang Direview Wali Kelas
                </button>
            );
        }

        if (session.current_phase === 'final_vote') {
            return (
                <Link
                    href={`/student/voting/${session.id}/vote`}
                    className="mt-4 w-full inline-flex items-center justify-center gap-2 rounded-xl bg-emerald-500 px-4 py-2 md:py-2.5 text-[11px] md:text-sm font-semibold text-white shadow-lg shadow-emerald-500/25 transition-all hover:bg-emerald-600 hover:shadow-emerald-500/40"
                >
                    <Vote className="h-3.5 w-3.5 md:h-4 md:w-4" />
                    Pilih Sekarang
                </Link>
            );
        }

        return null;
    };

    return (
        <>
            <div className="max-w-4xl mx-auto space-y-5 md:space-y-8 px-2 sm:px-0">
                {/* Header */}
                <div className="flex items-center gap-3 md:gap-4 border-b border-border/50 pb-4 md:pb-6">
                    <div className="w-8 h-8 md:w-12 md:h-12 shrink-0 rounded-xl md:rounded-2xl bg-linear-to-br from-primary-500/20 to-primary-500/5 flex items-center justify-center border border-primary-500/10 shadow-inner">
                        <Vote className="h-4 w-4 md:h-6 md:w-6 text-primary-400" />
                    </div>
                    <div>
                        <h1 className="text-base md:text-2xl font-bold bg-clip-text text-transparent bg-linear-to-r from-text to-text-muted/80">Voting & Polling Kelas</h1>
                        <p className="text-[11px] md:text-base text-text-muted mt-0.5 md:mt-1">Pilih teman terbaikmu atau ikuti polling kelas.</p>
                    </div>
                </div>

                {/* Active Sessions */}
                <div>
                    <h2 className="text-sm md:text-lg font-semibold mb-3 md:mb-4 flex items-center gap-2">
                        <div className="w-1.5 h-1.5 md:w-2 md:h-2 rounded-full bg-emerald-500 animate-pulse" />
                        Sesi Berlangsung
                    </h2>
                    
                    {activeSessions.length === 0 ? (
                        <div className="rounded-xl md:rounded-2xl border border-border/50 bg-surface/60 backdrop-blur-sm p-6 md:p-8 text-center">
                            <Vote className="w-8 h-8 md:w-10 md:h-10 text-text-muted mx-auto mb-2 md:mb-3" />
                            <p className="text-[11px] md:text-base text-text-muted">Tidak ada sesi voting atau polling yang sedang aktif saat ini.</p>
                        </div>
                    ) : (
                        <div className="grid sm:grid-cols-2 gap-3 md:gap-5">
                            {activeSessions.map(session => {
                                const isQuickPoll = session.type === 'quick_poll';
                                return (
                                    <div key={session.id} className="rounded-xl md:rounded-2xl border border-border/50 bg-linear-to-br from-surface/80 to-surface/40 backdrop-blur-md p-4 md:p-5 hover:-translate-y-1 hover:shadow-xl hover:shadow-primary-500/10 hover:border-primary-500/40 transition-all duration-300 group flex flex-col">
                                        <div className="flex items-start justify-between mb-2.5 md:mb-3">
                                            <h3 className="font-semibold text-sm md:text-lg text-text group-hover:text-primary-400 transition-colors flex items-center gap-2">
                                                {isQuickPoll ? <MessageSquare className="h-4 w-4 text-primary-500" /> : null}
                                                {session.title}
                                            </h3>
                                            <span className="text-[9px] md:text-xs font-medium text-text-muted bg-surface-hover/80 px-1.5 md:px-2 py-0.5 md:py-1 rounded md:rounded-md whitespace-nowrap ml-2 border border-border/30">
                                                {new Date(session.created_at).toLocaleDateString('id-ID', { day: 'numeric', month: 'short' })}
                                            </span>
                                        </div>
                                        <div className="flex flex-wrap gap-1.5 mb-4 md:mb-5 flex-1">
                                            {isQuickPoll ? (
                                                <span className="text-[9px] md:text-xs font-medium bg-primary-500/10 text-primary-400 px-2 md:px-2.5 py-0.5 md:py-1 rounded-md md:rounded-lg border border-primary-500/20">
                                                    Quick Poll
                                                </span>
                                            ) : (
                                                session.positions.map(pos => (
                                                    <span key={pos.id} className="text-[9px] md:text-xs font-medium bg-surface text-text-muted px-2 md:px-2.5 py-0.5 md:py-1 rounded-md md:rounded-lg border border-border/50">
                                                        {pos.name}
                                                    </span>
                                                ))
                                            )}
                                        </div>
                                        
                                        <div className="border-t border-border/50 pt-3 md:pt-4 mt-auto">
                                            {renderActionLink(session)}
                                        </div>
                                    </div>
                                );
                            })}
                        </div>
                    )}
                </div>

                {/* Completed Sessions */}
                {completedSessions.length > 0 && (
                    <div className="pt-4 md:pt-6">
                        <h2 className="text-sm md:text-lg font-semibold mb-3 md:mb-4 flex items-center gap-2">
                            <CheckCircle2 className="w-4 h-4 md:w-5 md:h-5 text-text-muted" />
                            Sesi Selesai (Hasil)
                        </h2>
                        <div className="space-y-2.5 md:space-y-4">
                            {completedSessions.map(session => {
                                const isQuickPoll = session.type === 'quick_poll';
                                return (
                                    <Link 
                                        key={session.id}
                                        href={`/student/voting/${session.id}/results`}
                                        className="flex items-center justify-between p-3 md:p-5 rounded-xl md:rounded-2xl border border-border/50 bg-linear-to-r from-surface/80 to-surface/40 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-primary-500/5 hover:border-primary-500/30 transition-all duration-300 group"
                                    >
                                        <div>
                                            <h4 className="font-semibold text-sm md:text-lg group-hover:text-primary-400 transition-colors flex items-center gap-2">
                                                {isQuickPoll ? <MessageSquare className="h-4 w-4 text-primary-500" /> : null}
                                                {session.title}
                                            </h4>
                                            <p className="text-[10px] md:text-sm text-text-muted mt-1 flex items-center gap-1.5 md:gap-2">
                                                <span className="bg-surface-hover px-1.5 md:px-2 py-0.5 rounded text-[9px] md:text-xs font-medium">
                                                    {isQuickPoll ? 'Quick Poll' : `${session.positions.length} Posisi`}
                                                </span>
                                                <span>•</span>
                                                <span>{new Date(session.created_at).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' })}</span>
                                            </p>
                                        </div>
                                        <div className="w-7 h-7 md:w-10 md:h-10 rounded-full bg-surface-hover/50 flex items-center justify-center group-hover:bg-primary-500/10 transition-colors ml-2 md:ml-3 shrink-0">
                                            <ChevronRight className="w-3.5 h-3.5 md:w-5 md:h-5 text-text-muted group-hover:text-primary-400 transition-colors" />
                                        </div>
                                    </Link>
                                );
                            })}
                        </div>
                    </div>
                )}
            </div>
        </>
    );
}

StudentVotingIndex.layout = (page: any) => <StudentLayout title="Voting & Polling Kelas">{page}</StudentLayout>;