import { Head, Link, router, useForm } from '@inertiajs/react';
import { ArrowLeft, Check, X } from 'lucide-react';
import { useState } from 'react';
import type { FormEvent } from 'react';
import LeaveRequestController from '@/actions/App/Http/Controllers/Admin/LeaveRequestController';
import { ConfirmDialog } from '@/components/confirm-dialog';
import Heading from '@/components/heading';
import InputError from '@/components/input-error';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { formatDate } from '@/lib/utils';
import { dashboard } from '@/routes';
import { index } from '@/routes/admin/leave-requests';
import { LeaveStatusBadge } from './status-badge';

type LeaveRequestShow = {
    id: number;
    code: string;
    start_date: string;
    end_date: string;
    days: number;
    reason: string | null;
    status: string;
    status_label: string;
    rejection_reason: string | null;
    validated_at: string | null;
    employee: { id: number; code: string; full_name: string };
    leave_type: {
        id: number;
        name: string;
        code: string;
        deducts_balance: boolean;
    };
    validator: { id: number; name: string } | null;
    creator: { id: number; name: string } | null;
    created_at: string | null;
};

type Can = {
    validate: boolean;
    reject: boolean;
    cancel: boolean;
};

export default function LeaveRequestsShow({
    leaveRequest,
    can,
}: {
    leaveRequest: LeaveRequestShow;
    can: Can;
}) {
    const [rejectOpen, setRejectOpen] = useState(false);
    const [isSubmitting, setIsSubmitting] = useState(false);
    const rejectForm = useForm({ rejection_reason: '' });

    function action(url: string) {
        if (isSubmitting) {
            return;
        }

        setIsSubmitting(true);
        router.post(
            url,
            {},
            {
                preserveScroll: true,
                onFinish: () => setIsSubmitting(false),
            },
        );
    }

    function submitReject(event: FormEvent) {
        event.preventDefault();
        rejectForm.post(LeaveRequestController.reject.url(leaveRequest.id), {
            preserveScroll: true,
            onSuccess: () => {
                setRejectOpen(false);
                rejectForm.reset();
            },
        });
    }

    return (
        <>
            <Head title={leaveRequest.code} />
            <div className="flex h-full flex-1 flex-col gap-6 p-4 md:p-6">
                <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                    <Heading
                        title={leaveRequest.code}
                        description={`${leaveRequest.employee.full_name} · ${leaveRequest.leave_type.name}`}
                    />
                    <div className="flex flex-wrap gap-2">
                        <Button variant="outline" asChild>
                            <Link href={index()}>
                                <ArrowLeft />
                                Retour
                            </Link>
                        </Button>
                        {can.validate && (
                            <ConfirmDialog
                                trigger={
                                    <Button disabled={isSubmitting}>
                                        <Check />
                                        Approuver
                                    </Button>
                                }
                                title="Approuver cette demande ?"
                                description="Le solde sera décrémenté si le type le prévoit."
                                confirmLabel="Approuver"
                                variant="default"
                                onConfirm={() =>
                                    action(
                                        LeaveRequestController.approve.url(
                                            leaveRequest.id,
                                        ),
                                    )
                                }
                            />
                        )}
                        {can.reject && (
                            <Button
                                variant="destructive"
                                disabled={isSubmitting}
                                onClick={() => setRejectOpen(true)}
                            >
                                <X />
                                Refuser
                            </Button>
                        )}
                        {can.cancel && (
                            <ConfirmDialog
                                trigger={
                                    <Button
                                        variant="outline"
                                        disabled={isSubmitting}
                                    >
                                        Annuler
                                    </Button>
                                }
                                title="Annuler cette demande ?"
                                description={
                                    leaveRequest.status === 'approved'
                                        ? 'Le solde sera restauré.'
                                        : undefined
                                }
                                confirmLabel="Annuler la demande"
                                onConfirm={() =>
                                    action(
                                        LeaveRequestController.cancel.url(
                                            leaveRequest.id,
                                        ),
                                    )
                                }
                            />
                        )}
                    </div>
                </div>

                <Card>
                    <CardHeader className="flex flex-row items-center justify-between">
                        <CardTitle>Détails</CardTitle>
                        <LeaveStatusBadge
                            status={leaveRequest.status}
                            label={leaveRequest.status_label}
                        />
                    </CardHeader>
                    <CardContent className="grid gap-4 sm:grid-cols-2">
                        <div>
                            <p className="text-muted-foreground text-sm">Période</p>
                            <p>
                                {formatDate(leaveRequest.start_date)} →{' '}
                                {formatDate(leaveRequest.end_date)}
                            </p>
                        </div>
                        <div>
                            <p className="text-muted-foreground text-sm">Jours</p>
                            <p>{leaveRequest.days}</p>
                        </div>
                        <div>
                            <p className="text-muted-foreground text-sm">Motif</p>
                            <p>{leaveRequest.reason || '—'}</p>
                        </div>
                        <div>
                            <p className="text-muted-foreground text-sm">Créée par</p>
                            <p>{leaveRequest.creator?.name || '—'}</p>
                        </div>
                        {leaveRequest.validator && (
                            <div>
                                <p className="text-muted-foreground text-sm">
                                    Validée par
                                </p>
                                <p>
                                    {leaveRequest.validator.name}
                                    {leaveRequest.validated_at
                                        ? ` · ${formatDate(leaveRequest.validated_at)}`
                                        : ''}
                                </p>
                            </div>
                        )}
                        {leaveRequest.rejection_reason && (
                            <div className="sm:col-span-2">
                                <p className="text-muted-foreground text-sm">
                                    Motif de refus
                                </p>
                                <p>{leaveRequest.rejection_reason}</p>
                            </div>
                        )}
                    </CardContent>
                </Card>
            </div>

            <Dialog open={rejectOpen} onOpenChange={setRejectOpen}>
                <DialogContent>
                    <DialogHeader>
                        <DialogTitle>Refuser la demande</DialogTitle>
                        <DialogDescription>
                            Indiquez le motif du refus.
                        </DialogDescription>
                    </DialogHeader>
                    <form onSubmit={submitReject} className="space-y-4">
                        <div className="grid gap-2">
                            <Label>Motif</Label>
                            <Textarea
                                value={rejectForm.data.rejection_reason}
                                onChange={(e) =>
                                    rejectForm.setData(
                                        'rejection_reason',
                                        e.target.value,
                                    )
                                }
                            />
                            <InputError
                                message={rejectForm.errors.rejection_reason}
                            />
                        </div>
                        <DialogFooter>
                            <Button
                                type="button"
                                variant="outline"
                                onClick={() => setRejectOpen(false)}
                            >
                                Fermer
                            </Button>
                            <Button
                                type="submit"
                                variant="destructive"
                                disabled={rejectForm.processing}
                            >
                                Refuser
                            </Button>
                        </DialogFooter>
                    </form>
                </DialogContent>
            </Dialog>
        </>
    );
}

LeaveRequestsShow.layout = {
    breadcrumbs: [
        { title: 'Tableau de bord', href: dashboard() },
        { title: 'Congés & absences', href: index() },
        { title: 'Détail', href: '#' },
    ],
};