import { router } from '@inertiajs/react';
import { CalendarClock, CheckCircle2, XCircle } from 'lucide-react';
import { useState } from 'react';
import { toast } from 'sonner';

import { Button } from '@/components/ui/button';
import { DateTimePicker } from '@/components/ui/datetime-picker';
import { Textarea } from '@/components/ui/textarea';
import { formatDateTime } from '@/lib/utils';
import type { Task, TaskDeadlineRequest } from '@/types/task';

interface TaskDeadlineSectionProps {
    task: Task;
    /** Pelaksana task — boleh mengajukan permintaan. */
    canRequest?: boolean;
    /** Atasan — boleh menyetujui/menolak. */
    canDecide?: boolean;
}

const firstErrorMessage = (errors: Record<string, string>) =>
    Object.values(errors)[0] || 'Failed to process the deadline request';

const statusLabel: Record<TaskDeadlineRequest['status'], string> = {
    pending: 'Awaiting decision',
    approved: 'Disetujui',
    rejected: 'Rejected',
};

export function TaskDeadlineSection({
    task,
    canRequest = false,
    canDecide = false,
}: TaskDeadlineSectionProps) {
    const requests = task.deadlineRequests || [];
    const pending = requests.find((request) => request.status === 'pending');

    const [requestedDate, setRequestedDate] = useState('');
    const [reason, setReason] = useState('');
    const [decisionReason, setDecisionReason] = useState('');
    const [processing, setProcessing] = useState(false);

    const lockedStatuses = ['review', 'completed', 'cancelled'];
    const canOpenRequestForm =
        canRequest && !pending && !lockedStatuses.includes(task.status);

    const submitRequest = () => {
        if (!requestedDate) {
            toast.error('Select the new deadline you want');

            return;
        }

        if (!reason.trim()) {
            toast.error('A reason for the request is required');

            return;
        }

        router.post(
            `/tasks/${task.code}/deadline-requests`,
            {
                requested_due_date: requestedDate,
                reason: reason.trim(),
            },
            {
                preserveScroll: true,
                onBefore: () => setProcessing(true),
                onSuccess: () => {
                    setRequestedDate('');
                    setReason('');
                    toast.success('Deadline extension request sent');
                },
                onError: (errors) => toast.error(firstErrorMessage(errors)),
                onFinish: () => setProcessing(false),
            },
        );
    };

    const submitDecision = (decision: 'approved' | 'rejected') => {
        if (!pending) {
            return;
        }

        if (decision === 'rejected' && !decisionReason.trim()) {
            toast.error('A rejection reason is required');

            return;
        }

        router.patch(
            `/tasks/${task.code}/deadline-requests/${pending.id}`,
            {
                decision,
                decision_reason:
                    decision === 'rejected' ? decisionReason.trim() : null,
            },
            {
                preserveScroll: true,
                onBefore: () => setProcessing(true),
                onSuccess: () => {
                    setDecisionReason('');
                    toast.success(
                        decision === 'approved'
                            ? 'Deadline diperpanjang'
                            : 'Deadline request rejected',
                    );
                },
                onError: (errors) => toast.error(firstErrorMessage(errors)),
                onFinish: () => setProcessing(false),
            },
        );
    };

    // Sembunyikan seluruh section jika tidak ada yang relevan untuk ditampilkan.
    if (!canOpenRequestForm && !pending && requests.length === 0) {
        return null;
    }

    return (
        <section className="space-y-3">
            <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                    <CalendarClock className="h-4 w-4 text-muted-foreground" />
                    <h4 className="text-sm font-semibold tracking-tight">
                        Permintaan Deadline
                    </h4>
                </div>
                {requests.length > 0 && (
                    <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-bold text-muted-foreground">
                        {requests.length}
                    </span>
                )}
            </div>

            {/* Form pengajuan untuk pelaksana */}
            {canOpenRequestForm && (
                <div className="space-y-3 rounded-lg border bg-muted/20 p-3">
                    <p className="text-xs text-muted-foreground">
                        Ajukan perpanjangan deadline ke atasan. Deadline hanya
                        berubah setelah permintaan disetujui.
                    </p>
                    <DateTimePicker
                        value={requestedDate}
                        onChange={setRequestedDate}
                        placeholder="Requested new deadline"
                    />
                    <Textarea
                        value={reason}
                        onChange={(event) => setReason(event.target.value)}
                        placeholder="Alasan mengapa deadline perlu diperpanjang..."
                        className="min-h-20 resize-none bg-background"
                        disabled={processing}
                    />
                    <div className="flex justify-end">
                        <Button
                            type="button"
                            size="sm"
                            className="h-8 gap-1.5 text-xs"
                            disabled={processing}
                            onClick={submitRequest}
                        >
                            <CalendarClock className="h-3.5 w-3.5" />
                            {processing ? 'Sending...' : 'Ajukan Perpanjangan'}
                        </Button>
                    </div>
                </div>
            )}

            {/* Panel keputusan untuk atasan */}
            {canDecide && pending && (
                <div className="space-y-3 rounded-lg border border-amber-200 bg-amber-50/50 p-3 dark:border-amber-900/30 dark:bg-amber-900/10">
                    <div className="space-y-1 text-xs">
                        <p className="text-muted-foreground">
                            {pending.requester?.name || 'Assignee'} requested a
                            deadline extension:
                        </p>
                        <p className="font-medium text-foreground">
                            {formatDateTime(pending.current_due_date) ||
                                'No deadline'}{' '}
                            → {formatDateTime(pending.requested_due_date)}
                        </p>
                        {pending.reason && (
                            <p className="mt-1 whitespace-pre-wrap text-foreground/90">
                                {pending.reason}
                            </p>
                        )}
                    </div>
                    <Textarea
                        value={decisionReason}
                        onChange={(event) =>
                            setDecisionReason(event.target.value)
                        }
                        placeholder="Reason if the request is rejected..."
                        className="min-h-16 resize-none bg-background"
                        disabled={processing}
                    />
                    <div className="flex justify-end gap-2">
                        <Button
                            type="button"
                            variant="outline"
                            size="sm"
                            className="h-8 gap-1.5 text-xs"
                            disabled={processing}
                            onClick={() => submitDecision('rejected')}
                        >
                            <XCircle className="h-3.5 w-3.5" />
                            Tolak
                        </Button>
                        <Button
                            type="button"
                            size="sm"
                            className="h-8 gap-1.5 text-xs"
                            disabled={processing}
                            onClick={() => submitDecision('approved')}
                        >
                            <CheckCircle2 className="h-3.5 w-3.5" />
                            Setujui
                        </Button>
                    </div>
                </div>
            )}

            {/* Riwayat permintaan */}
            {requests.length > 0 && (
                <div className="space-y-2">
                    {requests.map((request) => (
                        <div
                            key={request.id}
                            className="rounded-lg border bg-background px-3 py-2"
                        >
                            <div className="flex items-center justify-between gap-3">
                                <span className="text-xs font-semibold">
                                    {statusLabel[request.status]}
                                </span>
                                <span className="shrink-0 text-[10px] text-muted-foreground">
                                    {formatDateTime(request.created_at)}
                                </span>
                            </div>
                            <p className="mt-1 text-[11px] text-muted-foreground">
                                {formatDateTime(request.current_due_date) ||
                                    'No deadline'}{' '}
                                → {formatDateTime(request.requested_due_date)}
                                {request.requester?.name &&
                                    ` · oleh ${request.requester.name}`}
                            </p>
                            {request.reason && (
                                <p className="mt-2 text-xs leading-relaxed whitespace-pre-wrap">
                                    {request.reason}
                                </p>
                            )}
                            {request.status === 'rejected' &&
                                request.decision_reason && (
                                    <p className="mt-2 text-xs leading-relaxed whitespace-pre-wrap text-red-600 dark:text-red-400">
                                        Alasan penolakan:{' '}
                                        {request.decision_reason}
                                    </p>
                                )}
                        </div>
                    ))}
                </div>
            )}
        </section>
    );
}