import { Form, Head, Link, useForm, usePage } from '@inertiajs/react';
import { ArrowLeft, CheckCircle2, Clock, Download, FileText, GraduationCap, Pencil } 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 { Dialog, DialogContent, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import AppLayout from '@/layouts/app-layout';
import type { BreadcrumbItem } from '@/types';

type User = { id: number; name: string; email: string };

type Submission = {
    id: number;
    user: User;
    status: 'submitted' | 'graded' | 'late';
    score: number | null;
    feedback: string | null;
    note: string | null;
    grader: { id: number; name: string } | null;
    file_path: string | null;
    submission_text: string | null;
    graded_at: string | null;
    created_at: string;
};

type Assignment = {
    id: number;
    title: string;
    deadline: string | null;
    max_score: number;
    instructions: string | null;
    late_policy?: string;
    description?: string | null;
    submission_type?: 'file' | 'text' | 'both';
};

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

type Props = {
    course: Course;
    assignment: Assignment;
    submissions: Submission[];
};

const STATUS_CONFIG: Record<string, { label: string; badge: string }> = {
    submitted: { label: 'Dikumpulkan',          badge: 'bg-blue-50 text-blue-700 border border-blue-100 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800/40' },
    late:      { label: 'Terlambat',            badge: 'bg-amber-50 text-amber-700 border border-amber-100 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-800/40' },
    graded:    { label: 'Sudah Dinilai',        badge: 'bg-emerald-50 text-emerald-700 border border-emerald-100 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800/40' },
};

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));
}

const textareaCls = 'border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 w-full rounded-md border px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] placeholder:text-muted-foreground';

function EditAssignmentModal({ courseSlug, assignment }: { courseSlug: string; assignment: Assignment }) {
    const [open, setOpen] = useState(false);
    const form = useForm({
        title: assignment.title ?? '',
        description: assignment.description ?? '',
        instructions: assignment.instructions ?? '',
        deadline: assignment.deadline ?? '',
        late_policy: assignment.late_policy ?? 'closed',
        max_score: assignment.max_score ?? 100,
        submission_type: assignment.submission_type ?? 'file',
    });

    const submit = (e: React.FormEvent) => {
        e.preventDefault();
        form.patch(`/instructor/courses/${courseSlug}/assignments/${assignment.id}`, {
            onSuccess: () => setOpen(false),
        });
    };

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild>
                <Button variant="outline" size="sm" className="gap-1.5 text-blue-600 border-blue-200 hover:bg-blue-50 hover:text-blue-700 shadow-sm dark:border-blue-900/50 dark:text-blue-400 dark:hover:bg-blue-950/40">
                    <Pencil className="h-3.5 w-3.5" /> Edit Tugas
                </Button>
            </DialogTrigger>
            <DialogContent className="max-w-md max-h-[90vh] overflow-y-auto">
                <DialogTitle className="text-lg font-bold text-blue-900 dark:text-blue-100">Edit Tugas</DialogTitle>
                <form onSubmit={submit} className="mt-4 flex flex-col gap-4">
                    <div className="grid gap-1.5">
                        <Label htmlFor="title" className="text-xs font-semibold">Judul Tugas</Label>
                        <Input
                            id="title"
                            value={form.data.title}
                            onChange={e => form.setData('title', e.target.value)}
                            required
                        />
                        <InputError message={form.errors.title} />
                    </div>
                    <div className="grid gap-1.5">
                        <Label htmlFor="description" className="text-xs font-semibold">Deskripsi</Label>
                        <textarea
                            id="description"
                            rows={3}
                            value={form.data.description}
                            onChange={e => form.setData('description', e.target.value)}
                            className={textareaCls}
                            placeholder="Deskripsi tugas..."
                        />
                        <InputError message={form.errors.description} />
                    </div>
                    <div className="grid gap-1.5">
                        <Label htmlFor="instructions" className="text-xs font-semibold">Petunjuk Pengerjaan</Label>
                        <textarea
                            id="instructions"
                            rows={4}
                            value={form.data.instructions}
                            onChange={e => form.setData('instructions', e.target.value)}
                            className={textareaCls}
                            placeholder="Tulis petunjuk untuk siswa di sini (HTML diperbolehkan)..."
                        />
                        <InputError message={form.errors.instructions} />
                    </div>
                    <div className="grid gap-1.5">
                        <Label htmlFor="submission_type" className="text-xs font-semibold">Tipe Pengumpulan</Label>
                        <select
                            id="submission_type"
                            value={form.data.submission_type}
                            onChange={e => form.setData('submission_type', e.target.value as 'file' | 'text' | 'both')}
                            className="h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
                        >
                            <option value="file">Hanya File</option>
                            <option value="text">Hanya Teks / Rich Editor</option>
                            <option value="both">File & Teks (Keduanya)</option>
                        </select>
                        <InputError message={form.errors.submission_type} />
                    </div>
                    <div className="grid grid-cols-2 gap-4">
                        <div className="grid gap-1.5">
                            <Label htmlFor="max_score" className="text-xs font-semibold">Nilai Maksimal</Label>
                            <Input
                                id="max_score"
                                type="number"
                                min="1"
                                value={form.data.max_score}
                                onChange={e => form.setData('max_score', parseInt(e.target.value) || 0)}
                                required
                            />
                            <InputError message={form.errors.max_score} />
                        </div>
                        <div className="grid gap-1.5">
                            <Label htmlFor="late_policy" className="text-xs font-semibold">Kebijakan Terlambat</Label>
                            <select
                                id="late_policy"
                                value={form.data.late_policy}
                                onChange={e => form.setData('late_policy', e.target.value)}
                                className="h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
                            >
                                <option value="closed">Tolak Pengumpulan</option>
                                <option value="allowed">Izinkan Pengumpulan</option>
                            </select>
                            <InputError message={form.errors.late_policy} />
                        </div>
                    </div>
                    <div className="grid gap-1.5">
                        <Label htmlFor="deadline" className="text-xs font-semibold">Tenggat Waktu (Hari setelah mendaftar)</Label>
                        <Input
                            id="deadline"
                            type="number"
                            min="0"
                            placeholder="Contoh: 7"
                            value={form.data.deadline}
                            onChange={e => form.setData('deadline', e.target.value)}
                        />
                        <InputError message={form.errors.deadline} />
                    </div>
                    <div className="mt-2 flex justify-end gap-2">
                        <Button type="button" variant="outline" onClick={() => setOpen(false)}>
                            Batal
                        </Button>
                        <Button type="submit" disabled={form.processing} className="bg-blue-600 hover:bg-blue-700 text-white">
                            {form.processing && <Spinner />} Simpan Perubahan
                        </Button>
                    </div>
                </form>
            </DialogContent>
        </Dialog>
    );
}

function GradeForm({ courseSlug, assignmentId, submission, maxScore }: {
    courseSlug: string;
    assignmentId: number;
    submission: Submission;
    maxScore: number;
}) {
    const [open, setOpen] = useState(false);

    if (submission.status === 'graded' && !open) {
        return (
            <div className="mt-3 space-y-2">
                <div className="flex items-center gap-2">
                    <span className="text-sm font-semibold text-emerald-600 dark:text-emerald-400">
                        Nilai: {submission.score}/{maxScore}
                    </span>
                    <button onClick={() => setOpen(true)} className="text-xs text-blue-600 dark:text-blue-400 underline hover:text-blue-700">
                        Edit nilai
                    </button>
                </div>
                {submission.feedback && (
                    <div className="rounded-lg bg-blue-50/50 dark:bg-blue-950/20 border border-blue-100/50 p-2.5">
                        <p className="text-xs text-blue-800 dark:text-blue-200">{submission.feedback}</p>
                    </div>
                )}
            </div>
        );
    }

    return (
        <div className="mt-3">
            {!open && (
                <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>
            )}
            {open && (
                <Form
                    action={`/courses/${courseSlug}/assignment/${assignmentId}/submissions/${submission.id}/grade`}
                    method="patch"
                    onSuccess={() => setOpen(false)}
                    className="flex flex-col gap-3 rounded-lg border border-blue-100 bg-blue-50/10 dark:border-blue-900/30 p-3"
                >
                    {({ errors, processing }) => (
                        <>
                            <div className="grid gap-1.5">
                                <Label className="text-xs">Nilai (maks {maxScore})</Label>
                                <Input
                                    name="score"
                                    type="number"
                                    min="0"
                                    max={maxScore}
                                    defaultValue={submission.score ?? ''}
                                    className="h-8 text-sm"
                                    required
                                />
                                <InputError message={errors.score} />
                            </div>
                            <div className="grid gap-1.5">
                                <Label className="text-xs">Feedback (opsional)</Label>
                                <textarea
                                    name="feedback"
                                    rows={2}
                                    defaultValue={submission.feedback ?? ''}
                                    className={textareaCls}
                                    placeholder="Catatan untuk siswa..."
                                />
                                <InputError message={errors.feedback} />
                            </div>
                            <div className="flex gap-2">
                                <Button type="submit" size="sm" disabled={processing} className="bg-blue-600 hover:bg-blue-700">
                                    {processing && <Spinner />} Simpan Nilai
                                </Button>
                                <Button type="button" size="sm" variant="outline" onClick={() => setOpen(false)}>
                                    Batal
                                </Button>
                            </div>
                        </>
                    )}
                </Form>
            )}
        </div>
    );
}

export default function AssignmentSubmissions({ course, assignment, submissions }: Props) {
    const { auth } = usePage().props as { auth: { user: { role: string } } };
    const isAdmin = auth?.user?.role === 'admin';
    const courseBackUrl = isAdmin ? `/admin/courses/${course.id}` : `/instructor/courses/${course.slug}`;
    const isDeadlinePassed = false;

    const gradedCount = submissions.filter(s => s.status === 'graded').length;
    const pendingCount = submissions.filter(s => s.status !== 'graded').length;

    return (
        <>
            <Head title={`Submission: ${assignment.title}`} />

            <div className="px-4 py-6 md:px-8">
                <Link
                    href={courseBackUrl}
                    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_300px]">
                    {/* Left Column: Details & Submissions List */}
                    <div className="flex flex-col gap-4">
                        <div>
                            <h1 className="text-xl font-bold">{assignment.title}</h1>
                            <p className="text-sm text-muted-foreground">
                                Kelas: {course.title} · {submissions.length} siswa mengumpulkan
                            </p>
                        </div>

                        {/* Settings / Assignment Details Card (Centered/Main Column) */}
                        <div className="rounded-xl border border-blue-100 bg-white p-5 shadow-sm dark:border-blue-900/30 dark:bg-card">
                            <div className="flex items-center justify-between mb-3 border-b border-blue-50 pb-2 dark:border-blue-950">
                                <h3 className="text-sm font-semibold text-blue-900 dark:text-blue-100">Pengaturan Tugas</h3>
                                <EditAssignmentModal courseSlug={course.slug} assignment={assignment} />
                            </div>
                            <div className="space-y-3 text-sm text-muted-foreground">
                                <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 text-xs">
                                    <div>
                                        <p className="font-semibold text-blue-950 dark:text-blue-100">Nilai Maksimal</p>
                                        <p className="mt-0.5 text-foreground">{assignment.max_score}</p>
                                    </div>
                                    <div>
                                        <p className="font-semibold text-blue-950 dark:text-blue-100">Tipe Pengumpulan</p>
                                        <p className="mt-0.5 text-foreground">{
                                            assignment.submission_type === 'both' ? 'File & Teks' :
                                            assignment.submission_type === 'text' ? 'Hanya Teks' : 'Hanya File'
                                        }</p>
                                    </div>
                                    <div>
                                        <p className="mt-0.5 text-foreground">{assignment.deadline ? `${assignment.deadline} hari setelah mendaftar` : 'Tidak ada'}</p>
                                    </div>
                                    <div>
                                        <p className="font-semibold text-blue-950 dark:text-blue-100">Keterlambatan</p>
                                        <p className="mt-0.5 text-foreground">{assignment.late_policy === 'allowed' ? 'Diizinkan' : 'Ditolak'}</p>
                                    </div>
                                </div>
                                
                                {assignment.description && (
                                    <div className="mt-3 pt-3 border-t border-blue-50 dark:border-blue-950">
                                        <p className="font-semibold text-blue-950 dark:text-blue-100 mb-1 text-xs">Deskripsi:</p>
                                        <p className="leading-relaxed text-xs">{assignment.description}</p>
                                    </div>
                                )}

                                {assignment.instructions && (
                                    <div className="mt-3 pt-3 border-t border-blue-50 dark:border-blue-950">
                                        <p className="font-semibold text-blue-950 dark:text-blue-100 mb-1.5 text-xs">Petunjuk Pengerjaan:</p>
                                        <div 
                                            className="leading-relaxed text-xs text-muted-foreground prose prose-sm dark:prose-invert max-w-none text-blue-800/90 dark:text-blue-200/90"
                                            dangerouslySetInnerHTML={{ __html: assignment.instructions }}
                                        />
                                    </div>
                                )}
                            </div>
                        </div>

                        {submissions.length === 0 ? (
                            <div className="rounded-xl border border-dashed border-blue-200 bg-blue-50/5 p-14 text-center dark:border-blue-900/20">
                                <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-blue-50 dark:bg-blue-950/40">
                                    <FileText className="h-6 w-6 text-blue-600 dark:text-blue-400" />
                                </div>
                                <p className="text-sm font-medium text-muted-foreground">Belum ada siswa yang mengumpulkan</p>
                            </div>
                        ) : (
                            <div className="flex flex-col gap-3">
                                {submissions.map(sub => {
                                    const cfg = STATUS_CONFIG[sub.status] ?? STATUS_CONFIG.submitted;
                                    return (
                                        <div key={sub.id} className="rounded-xl border border-blue-100 bg-white p-5 shadow-xs hover:shadow-md transition-all duration-200 dark:border-blue-900/30 dark:bg-card">
                                            <div className="flex items-start justify-between gap-3">
                                                <div className="min-w-0 flex-1">
                                                    <div className="flex items-center gap-2">
                                                        <p className="font-semibold text-sm text-blue-950 dark:text-blue-100">{sub.user.name}</p>
                                                        <span className={`rounded-full px-2 py-0.5 text-[10px] font-semibold ${cfg.badge}`}>
                                                            {cfg.label}
                                                        </span>
                                                    </div>
                                                    <p className="text-xs text-muted-foreground">{sub.user.email}</p>
                                                    <p className="mt-1 text-xs text-muted-foreground flex items-center flex-wrap gap-2">
                                                        <span className="flex items-center gap-1">
                                                            <CheckCircle2 className="h-3 w-3 text-emerald-500" />
                                                            Dikumpulkan {fmt(sub.created_at)}
                                                        </span>
                                                        {sub.updated_at && new Date(sub.updated_at).getTime() - new Date(sub.created_at).getTime() > 1000 && (
                                                            <span className="text-[10px] font-semibold text-blue-700 bg-blue-50 border border-blue-100 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800/40 rounded-full px-2 py-0.5">
                                                                Diedit pada {fmt(sub.updated_at)}
                                                            </span>
                                                        )}
                                                    </p>
                                                    
                                                    {/* Text Submission Display for Instructors */}
                                                    {sub.submission_text && (
                                                        <div className="mt-3 rounded-lg border border-blue-100/50 bg-blue-50/5 p-3.5 dark:border-blue-900/20">
                                                            <h4 className="text-xs font-bold text-blue-900 dark:text-blue-100 mb-1.5">Jawaban Teks:</h4>
                                                            <div 
                                                                className="prose prose-sm dark:prose-invert max-w-none text-xs text-muted-foreground leading-relaxed"
                                                                dangerouslySetInnerHTML={{ __html: sub.submission_text }}
                                                            />
                                                        </div>
                                                    )}

                                                    {sub.note && (
                                                        <div className="mt-2 rounded-lg bg-blue-50/30 dark:bg-blue-950/20 border border-blue-50/50 px-3 py-2">
                                                            <p className="text-xs text-blue-800 dark:text-blue-200 italic">"{sub.note}"</p>
                                                        </div>
                                                    )}
                                                </div>
                                                {sub.file_path && (
                                                    <a
                                                        href={`/courses/${course.slug}/assignment/${assignment.id}/submissions/${sub.id}/download`}
                                                        className="shrink-0 inline-flex items-center gap-1.5 rounded-md border border-blue-100 bg-blue-50 text-blue-600 px-3 py-1.5 text-xs font-semibold hover:bg-blue-100 hover:text-blue-700 transition-colors dark:bg-blue-950/40 dark:text-blue-400 dark:border-blue-900/50 dark:hover:bg-blue-900/30"
                                                    >
                                                        <Download className="h-3.5 w-3.5" /> Unduh File
                                                    </a>
                                                )}
                                            </div>

                                            <GradeForm
                                                courseSlug={course.slug}
                                                assignmentId={assignment.id}
                                                submission={sub}
                                                maxScore={assignment.max_score}
                                            />
                                        </div>
                                    );
                                })}
                            </div>
                        )}
                    </div>

                    {/* Right Column: Sidebar (Stats) */}
                    <div className="flex flex-col gap-4">
                        <div className="rounded-xl border border-blue-100 bg-white p-4 shadow-sm dark:border-blue-900/30 dark:bg-card">
                            <h3 className="text-sm font-semibold text-blue-900 dark:text-blue-100 mb-3 border-b border-blue-50 pb-2 dark:border-blue-950">Statistik Pengumpulan</h3>
                            <div className="flex flex-col gap-3">
                                {[
                                    { label: 'Total Submission', value: submissions.length, bg: 'bg-blue-50/70 border-blue-100 text-blue-950 dark:bg-blue-950/20 dark:border-blue-900/50 shadow-2xs' },
                                    { label: 'Sudah Dinilai', value: gradedCount, bg: 'bg-emerald-50/70 border-emerald-100 text-emerald-950 dark:bg-emerald-950/20 dark:border-emerald-900/50 shadow-2xs' },
                                    { label: 'Belum Dinilai', value: pendingCount, bg: 'bg-amber-50/70 border-amber-100 text-amber-950 dark:bg-amber-950/20 dark:border-amber-900/50 shadow-2xs' },
                                ].map(s => (
                                    <div key={s.label} className={`rounded-xl border ${s.bg} p-4 shadow-2xs text-center`}>
                                        <p className="text-2xl font-bold">{s.value}</p>
                                        <p className="text-xs font-semibold opacity-90 mt-0.5">{s.label}</p>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}

AssignmentSubmissions.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: 'Submission Tugas', href: '#' },
              ]
            : [
                  { title: 'Kelas Saya', href: '/instructor/courses' },
                  { title: props.course.title, href: `/instructor/courses/${props.course.slug}` },
                  { title: 'Submission Tugas', href: '#' },
              ]
        : [];
    return <AppLayout breadcrumbs={breadcrumbs}>{page}</AppLayout>;
};