import { Loader2, RefreshCcw } from 'lucide-react';
import React from 'react';
import { toast } from 'sonner';

import { RequiredProofField } from '@/components/tasks/RequiredProofField';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import {
    Sheet,
    SheetContent,
    SheetDescription,
    SheetFooter,
    SheetHeader,
    SheetTitle,
} from '@/components/ui/sheet';
import { Textarea } from '@/components/ui/textarea';
import { useYupForm } from '@/hooks/use-yup-form';
import { recurringTaskSchema } from '@/lib/validation/task';
import { store as storeRecurringTask } from '@/routes/recurring-tasks';
import { DailyDaysSelect, WEEKDAYS } from './DailyDaysSelect';

interface CreateRecurringTaskSheetProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    divisions: { id: string; name: string }[];
    members?: { id: string; name: string }[];
    defaultDivisionId?: string;
}

export function CreateRecurringTaskSheet({
    open,
    onOpenChange,
    divisions,
    members = [],
    defaultDivisionId,
}: CreateRecurringTaskSheetProps) {
    const { data, setData, processing, reset, errors, validateField, submit } =
        useYupForm(recurringTaskSchema, {
            name: '',
            description: '',
            division_id: defaultDivisionId || '',
            frequency: 'Weekly',
            schedule_day: 'Monday' as string,
            schedule_days: [] as string[],
            due_time: '17:00' as string,
            priority: 'Medium',
            required_proof_type: 'file',
            assignee_ids: [] as string[],
        });

    const MONTH_DAYS = Array.from({ length: 28 }, (_, i) => i + 1);

    // Sheet ini tidak pernah di-unmount oleh pemanggilnya, jadi menutupnya
    // lewat Cancel/Escape/overlay meninggalkan isian lama utuh. Dikembalikan ke
    // nilai awal tiap kali dibuka; penjaga transisi mencegah reset terpicu lagi
    // oleh re-render halaman induk di tengah pengisian.
    const wasOpenRef = React.useRef(false);

    React.useEffect(() => {
        if (open && !wasOpenRef.current) {
            reset();

            if (defaultDivisionId) {
                setData('division_id', defaultDivisionId);
            }
        }

        wasOpenRef.current = open;
    }, [open, defaultDivisionId, setData, reset]);

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();

        submit((form) =>
            form.post(storeRecurringTask().url, {
                onSuccess: () => {
                    toast.success('Automation created successfully');
                    onOpenChange(false);
                    reset();
                },
                onError: (err) => {
                    console.error(err);
                    // Aturan template recurring cukup spesifik (`assignee_ids`
                    // tepat satu, `schedule_day` wajib untuk frekuensi
                    // tertentu, `due_time` berformat HH:MM) dan pesannya sudah
                    // ditulis di server; menelannya dengan kalimat generik
                    // membuat user menebak kolom mana yang salah.
                    toast.error(
                        Object.values(err)[0] || 'Failed to create automation',
                    );
                },
            }),
        );
    };

    return (
        <Sheet open={open} onOpenChange={onOpenChange}>
            <SheetContent
                className="flex h-full w-full flex-col gap-0 overflow-hidden bg-background p-0 sm:max-w-3xl"
                hideClose
            >
                <form
                    onSubmit={handleSubmit}
                    className="flex h-full flex-col space-y-0"
                    noValidate
                >
                    <SheetHeader className="border-b p-6 text-left">
                        <SheetTitle className="flex items-center gap-2">
                            <RefreshCcw className="h-4 w-4" />
                            Create Automation
                        </SheetTitle>
                        <SheetDescription>
                            Set up a new recurring task to automate your
                            workflow.
                        </SheetDescription>
                    </SheetHeader>

                    <div className="flex-1 space-y-4 overflow-y-auto p-6">
                        {/* Division Selection (Only shown if no default is provided) */}
                        {!defaultDivisionId && (
                            <div className="space-y-2">
                                <Label>Division</Label>
                                <Select
                                    value={data.division_id}
                                    onValueChange={(val) =>
                                        setData('division_id', val)
                                    }
                                    required
                                >
                                    <SelectTrigger className="w-full rounded-xl">
                                        <SelectValue placeholder="Select division" />
                                    </SelectTrigger>
                                    <SelectContent className="rounded-xl">
                                        {divisions.map((d) => (
                                            <SelectItem key={d.id} value={d.id}>
                                                {d.name}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                                {errors.division_id && (
                                    <p className="text-xs text-destructive">
                                        {errors.division_id}
                                    </p>
                                )}
                            </div>
                        )}

                        {/* Assignee Selection */}
                        <div className="space-y-2">
                            <Label>Assign To</Label>
                            <Select
                                value={data.assignee_ids[0] ?? ''}
                                onValueChange={(value) =>
                                    setData('assignee_ids', [value])
                                }
                                disabled={members.length === 0}
                            >
                                <SelectTrigger className="w-full rounded-xl">
                                    <SelectValue placeholder="Select a division member" />
                                </SelectTrigger>
                                <SelectContent className="rounded-xl">
                                    {members.map((member) => (
                                        <SelectItem
                                            key={member.id}
                                            value={member.id}
                                        >
                                            {member.name}
                                        </SelectItem>
                                    ))}
                                </SelectContent>
                            </Select>
                            {errors.assignee_ids && (
                                <p className="text-xs text-destructive">
                                    {errors.assignee_ids}
                                </p>
                            )}
                        </div>

                        {/* Title */}
                        <div className="space-y-2">
                            <Label htmlFor="name">Automation Name</Label>
                            <Input
                                id="name"
                                placeholder="Name the recurring work, e.g. Send weekly report"
                                value={data.name}
                                onChange={(e) =>
                                    setData('name', e.target.value)
                                }
                                onBlur={() => validateField('name')}
                                className="rounded-xl"
                                required
                            />
                            {errors.name && (
                                <p className="text-xs text-destructive">
                                    {errors.name}
                                </p>
                            )}
                        </div>

                        {/* Description */}
                        <div className="space-y-2">
                            <Label htmlFor="description">Description</Label>
                            <Textarea
                                id="description"
                                placeholder="Describe what needs to be done each time this work recurs, including the steps and any important notes"
                                value={data.description}
                                onChange={(e) =>
                                    setData('description', e.target.value)
                                }
                                className="min-h-25 resize-none rounded-xl"
                            />
                        </div>

                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                            {/* Frequency */}
                            <div className="space-y-2">
                                <Label>Frequency</Label>
                                <Select
                                    value={data.frequency}
                                    onValueChange={(val) => {
                                        setData('frequency', val);

                                        if (
                                            val === 'Weekly' ||
                                            val === 'Bi-weekly'
                                        ) {
                                            setData('schedule_day', 'Monday');
                                        } else if (val === 'Monthly') {
                                            setData('schedule_day', '1');
                                        } else {
                                            setData('schedule_day', '');
                                        }

                                        // Pilihan hari hanya milik Daily —
                                        // server pun mengosongkannya untuk
                                        // frekuensi lain.
                                        if (val !== 'Daily') {
                                            setData('schedule_days', []);
                                        }
                                    }}
                                >
                                    <SelectTrigger className="w-full rounded-xl">
                                        <SelectValue placeholder="Select frequency" />
                                    </SelectTrigger>
                                    <SelectContent className="rounded-xl">
                                        <SelectItem value="Daily">
                                            Daily
                                        </SelectItem>
                                        <SelectItem value="Weekly">
                                            Weekly
                                        </SelectItem>
                                        <SelectItem value="Bi-weekly">
                                            Bi-weekly
                                        </SelectItem>
                                        <SelectItem value="Monthly">
                                            Monthly
                                        </SelectItem>
                                    </SelectContent>
                                </Select>
                                {errors.frequency && (
                                    <p className="text-xs text-destructive">
                                        {errors.frequency}
                                    </p>
                                )}
                            </div>

                            {/* Schedule Day */}
                            <div className="space-y-2">
                                <Label>
                                    {data.frequency === 'Monthly'
                                        ? 'Date'
                                        : data.frequency === 'Daily'
                                          ? 'Hari terbit'
                                          : 'Day'}
                                </Label>
                                {data.frequency === 'Monthly' ? (
                                    <Select
                                        value={data.schedule_day}
                                        onValueChange={(val) =>
                                            setData('schedule_day', val)
                                        }
                                    >
                                        <SelectTrigger className="w-full rounded-xl">
                                            <SelectValue placeholder="Select a date" />
                                        </SelectTrigger>
                                        <SelectContent className="rounded-xl">
                                            {MONTH_DAYS.map((d) => (
                                                <SelectItem
                                                    key={d}
                                                    value={String(d)}
                                                >
                                                    {d}
                                                </SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                ) : data.frequency === 'Weekly' ||
                                  data.frequency === 'Bi-weekly' ? (
                                    <Select
                                        value={data.schedule_day}
                                        onValueChange={(val) =>
                                            setData('schedule_day', val)
                                        }
                                    >
                                        <SelectTrigger className="w-full rounded-xl">
                                            <SelectValue placeholder="Select a day" />
                                        </SelectTrigger>
                                        <SelectContent className="rounded-xl">
                                            {WEEKDAYS.map((day) => (
                                                <SelectItem
                                                    key={day}
                                                    value={day}
                                                >
                                                    {day}
                                                </SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                ) : (
                                    <DailyDaysSelect
                                        value={data.schedule_days}
                                        onChange={(days) =>
                                            setData('schedule_days', days)
                                        }
                                    />
                                )}
                                {errors.schedule_day && (
                                    <p className="text-xs text-destructive">
                                        {errors.schedule_day}
                                    </p>
                                )}
                                {data.frequency === 'Daily' && (
                                    <p className="text-xs text-muted-foreground">
                                        Task terbit pada hari yang dipilih saja.
                                        Kosongkan untuk setiap hari, termasuk
                                        Sabtu dan Minggu.
                                    </p>
                                )}
                            </div>

                            {/* Jam Deadline */}
                            <div className="space-y-2">
                                <Label htmlFor="due_time_inline">
                                    Jam Deadline
                                </Label>
                                <Input
                                    id="due_time_inline"
                                    type="time"
                                    value={data.due_time}
                                    onChange={(e) =>
                                        setData('due_time', e.target.value)
                                    }
                                    onBlur={() => validateField('due_time')}
                                    className="rounded-xl"
                                />
                                {errors.due_time && (
                                    <p className="text-xs text-destructive">
                                        {errors.due_time}
                                    </p>
                                )}
                            </div>

                            {/* Priority */}
                            <div className="space-y-2">
                                <Label>Priority</Label>
                                <Select
                                    value={data.priority}
                                    onValueChange={(val) =>
                                        setData('priority', val)
                                    }
                                >
                                    <SelectTrigger className="w-full rounded-xl">
                                        <SelectValue placeholder="Select priority" />
                                    </SelectTrigger>
                                    <SelectContent className="rounded-xl">
                                        <SelectItem value="Low">Low</SelectItem>
                                        <SelectItem value="Medium">
                                            Medium
                                        </SelectItem>
                                        <SelectItem value="High">
                                            High
                                        </SelectItem>
                                        <SelectItem value="Urgent">
                                            Urgent
                                        </SelectItem>
                                    </SelectContent>
                                </Select>
                                {errors.priority && (
                                    <p className="text-xs text-destructive">
                                        {errors.priority}
                                    </p>
                                )}
                            </div>
                        </div>

                        <RequiredProofField
                            value={data.required_proof_type}
                            onChange={(value) =>
                                setData('required_proof_type', value)
                            }
                            error={errors.required_proof_type}
                            hint="Bukti ini akan diwariskan ke setiap task yang dibuat dari automation ini."
                        />
                    </div>

                    <SheetFooter className="border-t p-6">
                        <div className="flex w-full gap-3 sm:justify-end">
                            <Button
                                type="button"
                                variant="outline"
                                onClick={() => onOpenChange(false)}
                                className="flex-1 rounded-xl sm:flex-none"
                                disabled={processing}
                            >
                                Cancel
                            </Button>
                            <Button
                                type="submit"
                                disabled={processing}
                                className="flex-1 rounded-xl sm:flex-none"
                            >
                                {processing ? (
                                    <>
                                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                        Creating...
                                    </>
                                ) : (
                                    'Create Automation'
                                )}
                            </Button>
                        </div>
                    </SheetFooter>
                </form>
            </SheetContent>
        </Sheet>
    );
}