import { Head, Link, useForm, usePage } from '@inertiajs/react';
import { ArrowLeft, CheckCircle2, ClipboardList, Clock, FileText, XCircle } from 'lucide-react';
import { useState } from 'react';
import InputError from '@/components/input-error';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Spinner } from '@/components/ui/spinner';
import AppLayout from '@/layouts/app-layout';
import type { BreadcrumbItem } from '@/types';

type EssayAnswer = {
    id: number;
    answer: string;
    points_earned: number | null;
    instructor_feedback: string | null;
    is_correct: boolean | null;
    question: { id: number; question: string; points: number };
};

type Attempt = {
    id: number;
    user: { id: number; name: string; email: string };
    status: 'submitted' | 'graded';
    score: number | null;
    passed: boolean | null;
    submitted_at: string | null;
    essay_answers: EssayAnswer[];
};

type Quiz = { id: number; title: string; passing_score: number };
type Course = { id: number; title: string; slug: string };

type Props = {
    course: Course;
    quiz: Quiz;
    attempts: Attempt[];
    hasEssay: boolean;
};

function fmt(date: string) {
    return new Intl.DateTimeFormat('id-ID', {
        day: 'numeric', month: 'short', year: 'numeric',
        hour: '2-digit', minute: '2-digit',
    }).format(new Date(date));
}

function GradeForm({ courseSlug, quizId, attempt }: { courseSlug: string; quizId: number; attempt: Attempt }) {
    const [open, setOpen] = useState(attempt.status === 'submitted');

    const initialData: Record<string, { points_earned: string; feedback: string }> = {};
    for (const ans of attempt.essay_answers) {
        initialData[ans.id] = {
            points_earned: ans.points_earned !== null ? String(ans.points_earned) : '',
            feedback: ans.instructor_feedback ?? '',
        };
    }

    const form = useForm<{ answers: Record<string, { points_earned: string; feedback: string }> }>({
        answers: initialData,
    });

    function submit(e: React.FormEvent) {
        e.preventDefault();
        form.patch(`/instructor/courses/${courseSlug}/quizzes/${quizId}/attempts/${attempt.id}/grade`, {
            onSuccess: () => setOpen(false),
        });
    }

    if (attempt.status === 'graded' && !open) {
        return (
            <div className="mt-4 flex items-center gap-3">
                <span className="text-sm font-semibold text-emerald-600 dark:text-emerald-400">
                    Nilai: {attempt.score}/100
                </span>
                <button
                    onClick={() => setOpen(true)}
                    className="text-xs text-blue-600 dark:text-blue-400 underline hover:text-blue-700"
                >
                    Edit nilai
                </button>
            </div>
        );
    }

    if (!open) {
        return (
            <div className="mt-4">
                <button
                    onClick={() => setOpen(true)}
                    className="rounded-md bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-700 transition-colors shadow-xs"
                >
                    Beri Nilai
                </button>
            </div>
        );
    }

    return (
        <form onSubmit={submit} className="mt-4 flex flex-col gap-4 rounded-lg border border-blue-100 bg-blue-50/10 dark:border-blue-900/30 p-4">
            {attempt.essay_answers.map((ans) => (
                <div key={ans.id} className="flex flex-col gap-3 rounded-lg bg-white dark:bg-card border border-zinc-100 dark:border-zinc-800 p-3.5">
                    <div>
                        <p className="text-xs font-semibold text-zinc-500 dark:text-zinc-400 mb-1">Pertanyaan:</p>
                        <p className="text-sm font-medium text-zinc-800 dark:text-zinc-100">{ans.question.question}</p>
                    </div>
                    <div>
                        <p className="text-xs font-semibold text-zinc-500 dark:text-zinc-400 mb-1">Jawaban Siswa:</p>
                        <p className="text-sm leading-relaxed text-zinc-700 dark:text-zinc-300 whitespace-pre-wrap bg-zinc-50 dark:bg-zinc-800/50 rounded-md p-3">
                            {ans.answer || <span className="italic text-zinc-400">Tidak dijawab</span>}
                        </p>
                    </div>
                    <div className="grid grid-cols-2 gap-3">
                        <div className="flex flex-col gap-1">
                            <Label className="text-xs">Nilai (maks {ans.question.points})</Label>
                            <Input
                                type="number"
                                min="0"
                                max={ans.question.points}
                                value={form.data.answers[ans.id]?.points_earned ?? ''}
                                onChange={(e) =>
                                    form.setData('answers', {
                                        ...form.data.answers,
                                        [ans.id]: { ...form.data.answers[ans.id], points_earned: e.target.value },
                                    })
                                }
                                className="h-8 text-sm"
                                required
                            />
                            <InputError message={(form.errors as Record<string, string>)[`answers.${ans.id}.points_earned`]} />
                        </div>
                        <div className="flex flex-col gap-1">
                            <Label className="text-xs">Feedback (opsional)</Label>
                            <Input
                                value={form.data.answers[ans.id]?.feedback ?? ''}
                                onChange={(e) =>
                                    form.setData('answers', {
                                        ...form.data.answers,
                                        [ans.id]: { ...form.data.answers[ans.id], feedback: e.target.value },
                                    })
                                }
                                className="h-8 text-sm"
                                placeholder="Catatan untuk siswa..."
                            />
                        </div>
                    </div>
                </div>
            ))}

            <div className="flex gap-2">
                <Button type="submit" size="sm" disabled={form.processing} className="bg-blue-600 hover:bg-blue-700">
                    {form.processing && <Spinner />} Simpan Nilai
                </Button>
                {attempt.status === 'graded' && (
                    <Button type="button" size="sm" variant="outline" onClick={() => setOpen(false)}>
                        Batal
                    </Button>
                )}
            </div>
        </form>
    );
}

export default function QuizAttempts({ course, quiz, attempts, hasEssay }: Props) {
    const { auth } = usePage().props as { auth: { user: { role: string } } };
    const isAdmin = auth?.user?.role === 'admin';
    const backUrl = isAdmin ? `/admin/courses/${course.id}` : `/instructor/courses/${course.slug}`;

    const pending = attempts.filter((a) => a.status === 'submitted').length;
    const graded = attempts.filter((a) => a.status === 'graded').length;

    return (
        <>
            <Head title={`Jawaban Essay — ${quiz.title}`} />

            <div className="px-4 py-6 md:px-8">
                <Link href={backUrl} className="mb-4 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground">
                    <ArrowLeft className="h-4 w-4" /> Kembali ke kelas
                </Link>

                <div className="grid gap-6 lg:grid-cols-[1fr_280px]">
                    <div className="flex flex-col gap-4">
                        <div>
                            <h1 className="text-xl font-bold">{quiz.title}</h1>
                            <p className="text-sm text-muted-foreground">Kelas: {course.title} · {attempts.length} percobaan dengan essay</p>
                        </div>

                        {!hasEssay ? (
                            <div className="rounded-xl border border-dashed border-zinc-200 bg-white dark:border-zinc-800 dark:bg-card p-14 text-center">
                                <ClipboardList className="mx-auto mb-3 h-10 w-10 text-zinc-300 dark:text-zinc-600" />
                                <p className="text-sm font-medium text-muted-foreground">Kuis ini tidak memiliki soal essay.</p>
                            </div>
                        ) : attempts.length === 0 ? (
                            <div className="rounded-xl border border-dashed border-zinc-200 bg-white dark:border-zinc-800 dark:bg-card p-14 text-center">
                                <FileText className="mx-auto mb-3 h-10 w-10 text-zinc-300 dark:text-zinc-600" />
                                <p className="text-sm font-medium text-muted-foreground">Belum ada siswa yang mengerjakan kuis ini.</p>
                            </div>
                        ) : (
                            <div className="flex flex-col gap-4">
                                {attempts.map((attempt) => (
                                    <div key={attempt.id} className="rounded-xl border border-blue-100 bg-white dark:border-blue-900/30 dark:bg-card p-5 shadow-xs">
                                        <div className="flex items-start justify-between gap-3">
                                            <div>
                                                <div className="flex items-center gap-2 flex-wrap">
                                                    <p className="font-semibold text-sm">{attempt.user.name}</p>
                                                    {attempt.status === 'submitted' ? (
                                                        <span className="rounded-full bg-amber-50 border border-amber-100 px-2 py-0.5 text-[10px] font-semibold text-amber-700 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-800/40">
                                                            Menunggu Penilaian
                                                        </span>
                                                    ) : (
                                                        <span className="rounded-full bg-emerald-50 border border-emerald-100 px-2 py-0.5 text-[10px] font-semibold text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800/40">
                                                            Sudah Dinilai
                                                        </span>
                                                    )}
                                                    {attempt.status === 'graded' && attempt.passed !== null && (
                                                        attempt.passed ? (
                                                            <CheckCircle2 className="h-4 w-4 text-emerald-500" />
                                                        ) : (
                                                            <XCircle className="h-4 w-4 text-red-500" />
                                                        )
                                                    )}
                                                </div>
                                                <p className="text-xs text-muted-foreground">{attempt.user.email}</p>
                                                {attempt.submitted_at && (
                                                    <p className="mt-1 flex items-center gap-1 text-xs text-muted-foreground">
                                                        <Clock className="h-3 w-3" />
                                                        Dikumpulkan {fmt(attempt.submitted_at)}
                                                    </p>
                                                )}
                                            </div>
                                            {attempt.status === 'graded' && attempt.score !== null && (
                                                <div className="shrink-0 text-right">
                                                    <p className="text-2xl font-bold text-emerald-600 dark:text-emerald-400">{attempt.score}</p>
                                                    <p className="text-xs text-muted-foreground">/ 100</p>
                                                </div>
                                            )}
                                        </div>

                                        {attempt.essay_answers.length > 0 && (
                                            <GradeForm courseSlug={course.slug} quizId={quiz.id} attempt={attempt} />
                                        )}

                                        {attempt.essay_answers.length === 0 && (
                                            <p className="mt-3 text-xs text-muted-foreground italic">Tidak ada soal essay di percobaan ini.</p>
                                        )}
                                    </div>
                                ))}
                            </div>
                        )}
                    </div>

                    <div className="flex flex-col gap-4">
                        <div className="rounded-xl border border-blue-100 bg-white dark:border-blue-900/30 dark:bg-card p-4 shadow-sm">
                            <h3 className="mb-3 border-b border-blue-50 dark:border-blue-950 pb-2 text-sm font-semibold text-blue-900 dark:text-blue-100">
                                Statistik
                            </h3>
                            <div className="flex flex-col gap-3">
                                {[
                                    { label: 'Total Percobaan', value: attempts.length, cls: 'bg-blue-50/70 border-blue-100 text-blue-950 dark:bg-blue-950/20 dark:border-blue-900/50' },
                                    { label: 'Menunggu Penilaian', value: pending, cls: 'bg-amber-50/70 border-amber-100 text-amber-950 dark:bg-amber-950/20 dark:border-amber-900/50' },
                                    { label: 'Sudah Dinilai', value: graded, cls: 'bg-emerald-50/70 border-emerald-100 text-emerald-950 dark:bg-emerald-950/20 dark:border-emerald-900/50' },
                                ].map((s) => (
                                    <div key={s.label} className={`rounded-xl border ${s.cls} p-4 text-center shadow-2xs`}>
                                        <p className="text-2xl font-bold">{s.value}</p>
                                        <p className="mt-0.5 text-xs font-semibold opacity-90">{s.label}</p>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}

QuizAttempts.layout = (page: React.ReactNode) => {
    const props = (page as React.ReactElement)?.props as (Props & { auth?: { user: { role: string } } }) | undefined;
    const isAdmin = props?.auth?.user?.role === 'admin';
    const breadcrumbs: BreadcrumbItem[] = props?.course
        ? isAdmin
            ? [
                  { title: 'Admin', href: '/admin' },
                  { title: 'Kelas', href: '/admin/courses' },
                  { title: props.course.title, href: `/admin/courses/${props.course.id}` },
                  { title: 'Jawaban Essay', href: '#' },
              ]
            : [
                  { title: 'Kelas Saya', href: '/instructor/courses' },
                  { title: props.course.title, href: `/instructor/courses/${props.course.slug}` },
                  { title: 'Jawaban Essay', href: '#' },
              ]
        : [];
    return <AppLayout breadcrumbs={breadcrumbs}>{page}</AppLayout>;
};