import { router, useForm } from '@inertiajs/react';
import { useState } from 'react';
import { StaffSearchSelect } from '@/components/attendance/staff-search-select';
import { ManualPunchDateTimeField } from '@/components/attendance/manual-punch-datetime-field';
import { defaultGregorianDateTimeNow } from '@/components/ui/app-datetime-input';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { preventDialogCloseOnDatePicker } from '@/lib/date-picker-dialog';
import { formatEmployeeJoiningDateOrDash } from '@/lib/dates';

/**
 * @param {object} props
 * @param {string} props.storeUrl
 * @param {Array<{staff_type: string, staff_id: number, label: string}>} props.staffOptions
 * @param {Array<{id: number, name: string}>} props.devices
 * @param {Record<string, string>} props.labels
 * @param {string} props.cancelLabel
 * @param {object} [props.filters] Current attendance index filters (preserve on redirect)
 */
export function ManualPunchDialog({
    storeUrl,
    staffOptions,
    devices,
    labels,
    cancelLabel,
    filters = {},
}) {
    const [open, setOpen] = useState(false);
    const [staffKey, setStaffKey] = useState('');
    const [submitting, setSubmitting] = useState(false);

    const form = useForm({
        punched_at: '',
        punch_type: 'in',
        attendance_device_id: '',
    });

    function submit() {
        const [staffType, staffId] = staffKey.split(':');

        if (!staffType || !staffId || !form.data.punched_at) {
            return;
        }

        setSubmitting(true);
        form.clearErrors();

        router.post(
            storeUrl,
            {
                staff_type: staffType,
                staff_id: Number(staffId),
                punched_at: form.data.punched_at,
                punch_type: form.data.punch_type,
                attendance_device_id: form.data.attendance_device_id
                    ? Number(form.data.attendance_device_id)
                    : null,
                date_from: filters.date_from ?? '',
                date_to: filters.date_to ?? '',
                salary_month: filters.salary_month ?? '',
                per_page: filters.per_page ?? '',
            },
            {
                preserveScroll: true,
                onSuccess: () => {
                    setOpen(false);
                    form.reset();
                    setStaffKey('');
                    setSubmitting(false);
                },
                onError: (errors) => {
                    setSubmitting(false);
                    Object.entries(errors).forEach(([key, message]) => {
                        const text = Array.isArray(message) ? message[0] : message;
                        form.setError(key, text);
                    });
                },
                onFinish: () => {
                    setSubmitting(false);
                },
            },
        );
    }

    return (
        <>
            <Button
                type="button"
                onClick={() => {
                    form.setData('punched_at', defaultGregorianDateTimeNow());
                    form.clearErrors();
                    setOpen(true);
                }}
            >
                {labels.addManualPunch}
            </Button>
            <Dialog open={open} onOpenChange={setOpen}>
                <DialogContent
                    className="overflow-visible"
                    onPointerDownOutside={preventDialogCloseOnDatePicker}
                    onInteractOutside={preventDialogCloseOnDatePicker}
                    onFocusOutside={preventDialogCloseOnDatePicker}
                >
                    <DialogHeader>
                        <DialogTitle>{labels.addManualPunch}</DialogTitle>
                    </DialogHeader>
                    <div className="space-y-4">
                        <div className="space-y-2">
                            <Label htmlFor="manual-punch-staff">{labels.selectStaff}</Label>
                            <StaffSearchSelect
                                id="manual-punch-staff"
                                value={staffKey}
                                onValueChange={setStaffKey}
                                options={staffOptions}
                                placeholder={labels.selectStaff}
                                searchPlaceholder={labels.searchStaffPlaceholder}
                                emptyLabel={labels.searchStaffEmpty}
                            />
                            {form.errors.staff_id || form.errors.staff_type ? (
                                <p className="text-destructive text-sm">
                                    {form.errors.staff_id ?? form.errors.staff_type}
                                </p>
                            ) : null}
                        </div>
                        <div className="space-y-2">
                            <Label htmlFor="manual-punch-at">{labels.colPunchedAt}</Label>
                            <ManualPunchDateTimeField
                                id="manual-punch-at"
                                value={form.data.punched_at}
                                onChange={(value) => form.setData('punched_at', value)}
                                invalid={Boolean(form.errors.punched_at)}
                            />
                            {labels.dateHint ? (
                                <p className="text-muted-foreground text-xs">{labels.dateHint}</p>
                            ) : null}
                            {form.data.punched_at ? (
                                <p className="text-muted-foreground text-xs">
                                    {formatEmployeeJoiningDateOrDash(
                                        form.data.punched_at.split(/\s|T/)[0],
                                    )}
                                </p>
                            ) : null}
                            {form.errors.punched_at ? (
                                <p className="text-destructive text-sm">{form.errors.punched_at}</p>
                            ) : null}
                        </div>
                        <div className="space-y-2">
                            <Label>{labels.colPunchType}</Label>
                            <Select
                                value={form.data.punch_type}
                                onValueChange={(v) => form.setData('punch_type', v)}
                            >
                                <SelectTrigger>
                                    <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="in">{labels.punchIn}</SelectItem>
                                    <SelectItem value="out">{labels.punchOut}</SelectItem>
                                </SelectContent>
                            </Select>
                            {form.errors.punch_type ? (
                                <p className="text-destructive text-sm">{form.errors.punch_type}</p>
                            ) : null}
                        </div>
                        <div className="space-y-2">
                            <Label>{labels.device}</Label>
                            <Select
                                value={form.data.attendance_device_id || 'none'}
                                onValueChange={(v) =>
                                    form.setData('attendance_device_id', v === 'none' ? '' : v)
                                }
                            >
                                <SelectTrigger>
                                    <SelectValue placeholder="—" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="none">—</SelectItem>
                                    {devices.map((d) => (
                                        <SelectItem key={d.id} value={String(d.id)}>
                                            {d.name}
                                        </SelectItem>
                                    ))}
                                </SelectContent>
                            </Select>
                            {form.errors.attendance_device_id ? (
                                <p className="text-destructive text-sm">
                                    {form.errors.attendance_device_id}
                                </p>
                            ) : null}
                        </div>
                    </div>
                    <DialogFooter>
                        <Button type="button" variant="outline" onClick={() => setOpen(false)}>
                            {cancelLabel}
                        </Button>
                        <Button
                            type="button"
                            disabled={!staffKey || !form.data.punched_at || submitting}
                            onClick={submit}
                        >
                            {labels.addManualPunch}
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </>
    );
}