import { Head, router } from '@inertiajs/react';
import type { ColumnDef } from '@tanstack/react-table';
import { format } from 'date-fns';
import { ArrowLeft, Pencil, Plus, Trash2 } from 'lucide-react';
import { useState } from 'react';
import { DataTable } from '@/components/data-table';
import { DateTimeField } from '@/components/datetime-field';
import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
import { FileUploadField } from '@/components/file-upload-field';
import { FormDialog } from '@/components/form-dialog';
import InputError from '@/components/input-error';
import { PageHeader } from '@/components/page-header';
import { RowActions } from '@/components/row-actions';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { index as assignmentIndex } from '@/routes/admin/academic-classes/assignments';
import {
    destroy,
    store,
    update,
} from '@/routes/admin/academic-classes/assignments/submissions';
import type { Assignment } from '@/types/assignment';
import type { Submission, SubmissionStudent } from '@/types/submission';
import { SubmissionStatusLabels, SubmissionStatuses } from '@/types/submission';

type Props = {
    assignment: Assignment;
    submissions: Submission[];
    availableStudents: SubmissionStudent[];
};

export default function SubmissionIndex({
    assignment,
    submissions,
    availableStudents,
}: Props) {
    const [createOpen, setCreateOpen] = useState(false);
    const [editing, setEditing] = useState<Submission | null>(null);
    const [deleting, setDeleting] = useState<Submission | null>(null);

    function handleDelete() {
        if (!deleting) {
            return;
        }

        router.delete(destroy([assignment.id, deleting.id]), {
            onSuccess: () => setDeleting(null),
        });
    }

    const columns: ColumnDef<Submission>[] = [
        {
            accessorKey: 'student.student_number',
            header: () => <span>NIM</span>,
            cell: ({ row }) => row.original.student?.student_number ?? '-',
        },
        {
            accessorKey: 'student.user.profile.full_name',
            header: () => <span>Nama Mahasiswa</span>,
            cell: ({ row }) =>
                row.original.student?.user?.profile?.full_name ?? '-',
        },
        {
            accessorKey: 'status',
            header: () => <span className="block text-center">Status</span>,
            meta: {
                className: 'w-[160px] text-center',
                headerClassName: 'w-[160px] text-center',
            },
            cell: ({ row }) => {
                const status = row.getValue('status') as
                    keyof typeof SubmissionStatusLabels | null;

                return (
                    <div className="flex justify-center">
                        {status ? (
                            <Badge
                                variant={
                                    status === 'submitted'
                                        ? 'default'
                                        : 'secondary'
                                }
                            >
                                {SubmissionStatusLabels[status]}
                            </Badge>
                        ) : (
                            <span className="text-muted-foreground">-</span>
                        )}
                    </div>
                );
            },
        },
        {
            accessorKey: 'submitted_at',
            header: () => <span>Waktu Kumpul</span>,
            cell: ({ row }) => {
                const submittedAt = row.getValue('submitted_at') as
                    string | null;

                return submittedAt
                    ? format(new Date(submittedAt), 'd MMM yyyy, HH:mm')
                    : '-';
            },
        },
        {
            accessorKey: 'score',
            header: () => <span className="block text-center">Nilai</span>,
            meta: {
                className: 'w-[90px] text-center',
                headerClassName: 'w-[90px] text-center',
            },
            cell: ({ row }) => (
                <div className="text-center">{row.original.score ?? '-'}</div>
            ),
        },
        {
            id: 'actions',
            header: () => <span className="block text-center">Aksi</span>,
            meta: {
                className: 'w-[100px] text-center',
                headerClassName: 'w-[100px] text-center',
            },
            cell: ({ row }) => (
                <RowActions
                    actions={[
                        {
                            label: 'Edit',
                            icon: <Pencil className="h-4 w-4" />,
                            onClick: () => setEditing(row.original),
                        },
                        {
                            label: 'Hapus',
                            icon: (
                                <Trash2 className="h-4 w-4 text-destructive" />
                            ),
                            onClick: () => setDeleting(row.original),
                        },
                    ]}
                />
            ),
        },
    ];

    return (
        <>
            <Head title="Pengumpulan Tugas" />

            <div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4 md:p-6">
                <PageHeader
                    title="Pengumpulan Tugas"
                    actions={
                        <Button variant="outline" asChild>
                            <a href={assignmentIndex.url()}>
                                <ArrowLeft className="h-4 w-4" />
                                Kembali
                            </a>
                        </Button>
                    }
                />

                <Card>
                    <CardHeader>
                        <CardTitle>{assignment.title}</CardTitle>
                    </CardHeader>
                    <CardContent className="grid gap-1 text-sm text-muted-foreground">
                        <p>
                            Kelas: {assignment.course_class?.course?.code}{' '}
                            {assignment.course_class?.course?.name}
                        </p>
                        <p>
                            Batas Waktu:{' '}
                            {format(
                                new Date(assignment.deadline),
                                'd MMM yyyy, HH:mm',
                            )}
                        </p>
                        <p>Jumlah Pengumpulan: {submissions.length}</p>
                    </CardContent>
                </Card>

                <div className="flex items-center justify-between">
                    <h2 className="text-lg font-semibold">
                        Daftar Pengumpulan
                    </h2>
                    <Button
                        onClick={() => setCreateOpen(true)}
                        disabled={availableStudents.length === 0}
                    >
                        <Plus className="h-4 w-4" />
                        Tambah Pengumpulan
                    </Button>
                </div>

                <DataTable
                    columns={columns}
                    data={submissions}
                    emptyText="Belum ada pengumpulan untuk tugas ini."
                />

                <CreateForm
                    open={createOpen}
                    onOpenChange={setCreateOpen}
                    assignmentId={assignment.id}
                    availableStudents={availableStudents}
                />

                <EditForm
                    key={editing?.id}
                    open={editing !== null}
                    onOpenChange={(open) => {
                        if (!open) {
                            setEditing(null);
                        }
                    }}
                    assignmentId={assignment.id}
                    editing={editing}
                />

                <DeleteConfirmDialog
                    target={deleting}
                    onOpenChange={(open) => {
                        if (!open) {
                            setDeleting(null);
                        }
                    }}
                    title="Hapus Pengumpulan"
                    description={(submission) =>
                        `Apakah Anda yakin ingin menghapus pengumpulan "${submission.student?.user?.profile?.full_name ?? 'mahasiswa ini'}"? Tindakan ini tidak dapat dibatalkan.`
                    }
                    onConfirm={handleDelete}
                />
            </div>
        </>
    );
}

function CreateForm({
    open,
    onOpenChange,
    assignmentId,
    availableStudents,
}: {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    assignmentId: number;
    availableStudents: SubmissionStudent[];
}) {
    return (
        <FormDialog
            open={open}
            onOpenChange={onOpenChange}
            title="Tambah Pengumpulan"
            action={store(assignmentId)}
            resetOnSuccess
            onSuccess={() => onOpenChange(false)}
        >
            {({ errors }) => (
                <div className="grid gap-4">
                    <div className="grid gap-2">
                        <Label>
                            Mahasiswa{' '}
                            <span className="text-destructive">*</span>
                        </Label>
                        <input type="hidden" name="student_id" />
                        <Select name="student_id">
                            <SelectTrigger className="w-full">
                                <SelectValue placeholder="Pilih mahasiswa" />
                            </SelectTrigger>
                            <SelectContent>
                                {availableStudents.map((student) => (
                                    <SelectItem
                                        key={student.id}
                                        value={String(student.id)}
                                    >
                                        {student.user?.profile?.full_name ??
                                            'N/A'}{' '}
                                        - {student.student_number}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                        <InputError message={errors.student_id} />
                    </div>
                    <SubmissionFields
                        errors={errors}
                        resetKey={open ? 'open' : 'closed'}
                    />
                </div>
            )}
        </FormDialog>
    );
}

function EditForm({
    open,
    onOpenChange,
    assignmentId,
    editing,
}: {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    assignmentId: number;
    editing: Submission | null;
}) {
    return (
        <FormDialog
            open={open}
            onOpenChange={onOpenChange}
            title="Edit Pengumpulan"
            action={editing ? update([assignmentId, editing.id]) : ''}
            resetOnSuccess
            onSuccess={() => onOpenChange(false)}
        >
            {({ errors }) =>
                editing && (
                    <div className="grid gap-4">
                        <div className="grid gap-2">
                            <Label>Mahasiswa</Label>
                            <p className="text-sm font-medium">
                                {editing.student?.user?.profile?.full_name ??
                                    'N/A'}{' '}
                                - {editing.student?.student_number}
                            </p>
                        </div>
                        <SubmissionFields errors={errors} editing={editing} />
                    </div>
                )
            }
        </FormDialog>
    );
}

function SubmissionFields({
    errors,
    editing,
    resetKey,
}: {
    errors: Record<string, string>;
    editing?: Submission;
    resetKey?: string;
}) {
    return (
        <>
            <div className="grid gap-2">
                <Label htmlFor="notes">Catatan</Label>
                <Textarea
                    id="notes"
                    name="notes"
                    placeholder="Catatan dari mahasiswa"
                    defaultValue={editing?.notes ?? ''}
                />
                <InputError message={errors.notes} />
            </div>
            <div className="grid gap-2">
                <Label>
                    Status <span className="text-destructive">*</span>
                </Label>
                <input type="hidden" name="status" />
                <Select
                    name="status"
                    defaultValue={editing?.status ?? 'not_submitted'}
                >
                    <SelectTrigger className="w-full">
                        <SelectValue placeholder="Pilih status" />
                    </SelectTrigger>
                    <SelectContent>
                        {SubmissionStatuses.map((status) => (
                            <SelectItem key={status} value={status}>
                                {SubmissionStatusLabels[status]}
                            </SelectItem>
                        ))}
                    </SelectContent>
                </Select>
                <InputError message={errors.status} />
            </div>
            <DateTimeField
                label="Waktu Kumpul"
                name="submitted_at"
                defaultValue={editing?.submitted_at}
                placeholder="Pilih waktu kumpul"
                error={errors.submitted_at}
            />
            <div className="grid gap-2">
                <Label htmlFor="score">Nilai</Label>
                <Input
                    id="score"
                    name="score"
                    type="number"
                    min={0}
                    max={100}
                    step="0.01"
                    placeholder="0 - 100"
                    defaultValue={editing?.score ?? undefined}
                />
                <InputError message={errors.score} />
            </div>
            <div className="grid gap-2">
                <Label htmlFor="lecturer_feedback">Feedback Dosen</Label>
                <Textarea
                    id="lecturer_feedback"
                    name="lecturer_feedback"
                    placeholder="Masukkan feedback untuk mahasiswa"
                    defaultValue={editing?.lecturer_feedback ?? ''}
                />
                <InputError message={errors.lecturer_feedback} />
            </div>
            <FileUploadField
                key={resetKey}
                label="File Pengumpulan"
                existingFileName={editing?.file_name}
                existingFileUrl={editing?.file_url}
                error={errors.file}
            />
        </>
    );
}