import { Head, Link } from '@inertiajs/react';
import { format } from 'date-fns';
import { ArrowLeft, Paperclip } from 'lucide-react';
import { PageHeader } from '@/components/page-header';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { index } from '@/routes/student/letter-requests';
import type { LetterRequest, LetterStatus } from '@/types/letter-request';
import { LetterStatusLabels } from '@/types/letter-request';

type Props = {
    letterRequest: LetterRequest;
};

export default function LetterRequestShow({ letterRequest }: Props) {
    const status = letterRequest.status as LetterStatus | null;

    const variant =
        status === 'completed'
            ? 'default'
            : status === 'rejected'
              ? 'destructive'
              : status === 'in_process'
                ? 'secondary'
                : 'outline';

    return (
        <>
            <Head title="Detail Surat Permohonan" />

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

                <Card>
                    <CardHeader className="flex flex-row items-start justify-between gap-4">
                        <div>
                            <CardTitle>{letterRequest.letter_type}</CardTitle>
                            {letterRequest.submitted_at && (
                                <p className="mt-1 text-sm text-muted-foreground">
                                    Diajukan pada{' '}
                                    {format(
                                        new Date(letterRequest.submitted_at),
                                        'd MMM yyyy, HH:mm',
                                    )}
                                </p>
                            )}
                        </div>
                        {status && (
                            <Badge variant={variant}>
                                {LetterStatusLabels[status]}
                            </Badge>
                        )}
                    </CardHeader>
                    <CardContent className="grid gap-4 border-t pt-4 text-sm">
                        <div>
                            <p className="font-medium text-muted-foreground">
                                Keperluan
                            </p>
                            <p className="mt-1">
                                {letterRequest.purpose || '-'}
                            </p>
                        </div>
                        {letterRequest.processor && (
                            <div>
                                <p className="font-medium text-muted-foreground">
                                    Diproses Oleh
                                </p>
                                <p className="mt-1">
                                    {letterRequest.processor.profile
                                        ?.full_name ?? '-'}
                                </p>
                            </div>
                        )}
                        {letterRequest.completed_at && (
                            <div>
                                <p className="font-medium text-muted-foreground">
                                    Selesai Pada
                                </p>
                                <p className="mt-1">
                                    {format(
                                        new Date(letterRequest.completed_at),
                                        'd MMM yyyy, HH:mm',
                                    )}
                                </p>
                            </div>
                        )}
                        <div>
                            <p className="font-medium text-muted-foreground">
                                Dokumen
                            </p>
                            {letterRequest.result_url ? (
                                <a
                                    href={letterRequest.result_url}
                                    target="_blank"
                                    rel="noreferrer"
                                    className="mt-1 inline-flex items-center gap-1 text-primary underline underline-offset-4 hover:text-primary/80"
                                >
                                    <Paperclip className="h-3.5 w-3.5" />
                                    {letterRequest.result_name}
                                </a>
                            ) : (
                                <p className="mt-1 text-muted-foreground">
                                    Belum tersedia.
                                </p>
                            )}
                        </div>
                    </CardContent>
                </Card>
            </div>
        </>
    );
}
