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

interface CandidateResult {
    id: number;
    student_name: string;
    student_gender: 'L' | 'P' | null;
    votes: number;
    percentage: number;
    is_winner: boolean;
}

interface Props extends PageProps {
    session: {
        id: number;
        title: string;
        type: 'class_election' | 'quick_poll';
        synced_class: { name: string };
    };
    results: Array<{
        position: { id: number; name: string };
        candidates: CandidateResult[];
        total_votes: number;
    }>;
    totalStudents: number;
    voterCount: number;
}

export default function StudentVotingResults() {
    const { session, results, voterCount, totalStudents } = usePage<Props>().props;
    const isQuickPoll = session.type === 'quick_poll';

    return (
        <StudentLayout title={`Hasil: ${session.title}`}>
            <div className="max-w-7xl mx-auto space-y-6 md:space-y-8 px-2 sm:px-0">
                {/* Header */}
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 md:gap-4">
                    <div>
                        <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-1 md:mb-2">
                            <ArrowLeft className="h-3 w-3 md:h-4 md:w-4" />
                            Kembali ke Daftar
                        </Link>
                        <h1 className="text-base md:text-2xl font-bold bg-clip-text text-transparent bg-linear-to-r from-text to-text-muted/80">Hasil Akhir {isQuickPoll ? 'Polling' : 'Voting'}</h1>
                        <p className="text-[11px] md:text-base text-text-muted mt-0.5 md:mt-1">{session.title}</p>
                    </div>
                    <div className="bg-linear-to-br from-surface/80 to-surface/40 backdrop-blur-sm px-3 md:px-5 py-2 md:py-3 rounded-xl md:rounded-2xl text-sm border border-border/50 flex flex-col sm:items-end shadow-sm">
                        <span className="text-[9px] md:text-sm text-text-muted">Partisipasi Pemilih</span>
                        <span className="text-[11px] md:text-base font-semibold text-emerald-400">
                            {voterCount} dari {totalStudents} Siswa
                        </span>
                    </div>
                </div>

                <div className={cn(
                    "grid gap-6 md:gap-8",
                    results.length === 1 ? "grid-cols-1" : "grid-cols-1 lg:grid-cols-2"
                )}>
                    {results.map((result) => (
                        <div key={result.position.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-6 shadow-lg shadow-black/5 flex flex-col h-full">
                            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 md:gap-3 mb-5 md:mb-6 pb-3 md:pb-4 border-b border-border/50">
                                {isQuickPoll ? (
                                    <h3 className="text-sm md:text-lg font-bold flex items-center gap-1.5 md:gap-2 text-primary-400">
                                        <MessageSquare className="h-4.5 w-4.5 md:h-5.5 md:w-5.5 text-amber-400 drop-shadow-[0_0_8px_rgba(251,191,36,0.3)]" />
                                        Daftar Pilihan
                                    </h3>
                                ) : (
                                    <h3 className="text-sm md:text-lg font-bold flex items-center gap-1.5 md:gap-2 text-primary-400">
                                        <Crown className="h-4.5 w-4.5 md:h-5.5 md:w-5.5 text-amber-400 drop-shadow-[0_0_8px_rgba(251,191,36,0.3)]" />
                                        {result.position.name}
                                    </h3>
                                )}
                                <span className="text-[10px] md:text-xs font-medium text-text-muted bg-surface/50 px-2 md:px-2.5 py-0.5 md:py-1 rounded-full border border-border/50 shadow-inner">
                                    Total: {result.total_votes} Suara
                                </span>
                            </div>

                            <div className="flex-1">
                                {result.candidates.length === 0 ? (
                                    <p className="text-[11px] md:text-base text-text-muted italic text-center py-6 md:py-8 bg-surface/30 rounded-lg md:rounded-xl border border-border/30">Tidak ada data {isQuickPoll ? 'pilihan' : 'kandidat'}</p>
                                ) : (
                                    <div className={cn(
                                        "grid gap-4",
                                        results.length === 1 
                                            ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3" 
                                            : "grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2"
                                    )}>
                                        {result.candidates.map((candidate, idx) => (
                                            <div 
                                                key={candidate.id}
                                                className={cn(
                                                    'relative overflow-hidden rounded-lg md:rounded-xl border p-4 md:p-5 transition-all duration-300 flex flex-col justify-between min-h-[140px] shadow-sm',
                                                    candidate.is_winner 
                                                        ? 'border-emerald-500/40 bg-surface/60 shadow-md shadow-emerald-950/20' 
                                                        : 'border-border/40 bg-surface/30 hover:bg-surface/50 hover:border-border/80'
                                                )}
                                            >
                                                {/* Left indicator border for winner */}
                                                {candidate.is_winner && (
                                                    <div className="absolute left-0 top-0 bottom-0 w-1 bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.8)]" />
                                                )}

                                                <div className="relative z-10 space-y-4">
                                                    {/* Top Details */}
                                                    <div className="flex items-start justify-between gap-3">
                                                        <div className="flex items-start gap-3">
                                                            <div className={cn(
                                                                'w-8 h-8 rounded-full flex items-center justify-center font-bold text-xs shadow-inner shrink-0',
                                                                candidate.is_winner 
                                                                    ? 'bg-emerald-500 text-white shadow-emerald-500/40' 
                                                                    : 'bg-surface-hover text-text border border-border/50'
                                                            )}>
                                                                {idx + 1}
                                                            </div>
                                                            <div>
                                                                <p className={cn('font-bold text-sm md:text-base leading-snug line-clamp-2 capitalize', candidate.is_winner ? 'text-emerald-400' : 'text-text')}>
                                                                    {candidate.student_name}
                                                                </p>
                                                                {candidate.is_winner && (
                                                                    <span className="inline-flex items-center gap-1 text-[9px] text-emerald-400 bg-emerald-500/10 px-1.5 py-0.5 rounded border border-emerald-500/20 font-medium mt-1">
                                                                        <CheckCircle2 className="w-2.5 h-2.5" /> Terpilih
                                                                    </span>
                                                                )}
                                                            </div>
                                                        </div>
                                                        
                                                        {/* Votes info */}
                                                        <div className="text-right shrink-0">
                                                            <p className={cn('text-base md:text-xl font-black tracking-tight leading-none', candidate.is_winner ? 'text-emerald-400' : 'text-text')}>
                                                                {candidate.votes} <span className="text-[10px] md:text-xs font-normal text-text-muted">suara</span>
                                                            </p>
                                                            <p className="text-[10px] text-text-muted mt-0.5 font-medium">{candidate.percentage}%</p>
                                                        </div>
                                                    </div>

                                                    {/* Bottom Progress Bar */}
                                                    <div className="space-y-1 mt-auto pt-2">
                                                        <div className="flex items-center justify-between text-[10px] text-text-muted">
                                                            <span>Persentase Suara</span>
                                                            <span className="font-semibold">{candidate.percentage}%</span>
                                                        </div>
                                                        <div className="h-1.5 w-full bg-surface-hover rounded-full overflow-hidden border border-border/30">
                                                            <div 
                                                                className={cn(
                                                                    'h-full rounded-full transition-all duration-1000',
                                                                    candidate.is_winner 
                                                                        ? 'bg-linear-to-r from-emerald-500 to-teal-500 shadow-[0_0_8px_rgba(16,185,129,0.4)]' 
                                                                        : 'bg-linear-to-r from-primary-500 to-primary-600'
                                                                )}
                                                                style={{ width: `${candidate.percentage}%` }}
                                                            />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                )}
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </StudentLayout>
    );
}