import { Loader2, RefreshCcw } from 'lucide-react';
import React, { useEffect } 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 { update as updateRecurringTask } from '@/routes/recurring-tasks';
import { DailyDaysSelect, WEEKDAYS } from './DailyDaysSelect';

interface RecurringTask {
    id: number;
    title: string;
    description?: string;
    division: string;
    divisionId?: string;
    frequency: string;
    scheduleDay?: string;
    scheduleDays?: string[];
    dueTime?: string;
    priority: string;
    requiredProofType: string;
    status: string;
    assigneeIds: string[];
}

interface EditRecurringTaskSheetProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    task: RecurringTask | null;
    divisions: { id: string; name: string }[];
    members?: { id: string; name: string }[];
    disableDivisionSelect?: boolean;
}

export function EditRecurringTaskSheet({
    open,
    onOpenChange,
    task,
    divisions,
    members = [],
    disableDivisionSelect = false,
}: EditRecurringTaskSheetProps) {
    const { data, setData, processing, errors, validateField, submit } =
        useYupForm(recurringTaskSchema, {
            name: '',
            description: '',
            division_id: '',
            frequency: '',
            schedule_day: '' as string,
            schedule_days: [] as string[],
            due_time: '' as string,
            priority: '',
            required_proof_type: 'file',
            status: '',
            assignee_ids: [] as string[],
        });

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

    useEffect(() => {
        if (task) {
            setData({
                name: task.title,
                description: task.description || '',
                division_id: task.divisionId || '',
                frequency: task.frequency,
                schedule_day: task.scheduleDay || '',
                schedule_days: task.scheduleDays || [],
                due_time: task.dueTime || '',
                priority: task.priority,
                required_proof_type: task.requiredProofType || 'file',
                status: task.status,
                assignee_ids: task.assigneeIds || [],
            });
        }
    }, [task, setData]);

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

        if (!task) {
            return;
        }

        submit((form) =>
            form.put(updateRecurringTask(task.id).url, {
                onSuccess: () => {
                    toast.success('Automation updated successfully');
                    onOpenChange(false);
                },
                onError: (err) => {
                    console.error(err);
                    toast.error('Failed to update 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" />
                            Edit Automation
                        </SheetTitle>
                        <SheetDescription>
                            Update your automation schedule and settings.
                        </SheetDescription>
                    </SheetHeader>

                    <div className="flex-1 space-y-4 overflow-y-auto p-6">
                        {/* Division Selection */}
                        {!disableDivisionSelect && (
                            <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>

                        {/* Status */}
                        <div className="space-y-2">
                            <Label>Status</Label>
                            <Select
                                value={data.status}
                                onValueChange={(val) => setData('status', val)}
                            >
                                <SelectTrigger className="w-full rounded-xl">
                                    <SelectValue placeholder="Select status" />
                                </SelectTrigger>
                                <SelectContent className="rounded-xl">
                                    <SelectItem value="Active">
                                        Active
                                    </SelectItem>
                                    <SelectItem value="Paused">
                                        Paused
                                    </SelectItem>
                                </SelectContent>
                            </Select>
                            {errors.status && (
                                <p className="text-xs text-destructive">
                                    {errors.status}
                                </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', '');
                                        }
                                    }}
                                >
                                    <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>

                            {/* 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>

                        {/* Schedule Day — conditional based on frequency */}
                        {(data.frequency === 'Weekly' ||
                            data.frequency === 'Bi-weekly') && (
                            <div className="space-y-2">
                                <Label>Day of Week</Label>
                                <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>
                                {errors.schedule_day && (
                                    <p className="text-xs text-destructive">
                                        {errors.schedule_day}
                                    </p>
                                )}
                                <p className="text-[10px] text-muted-foreground">
                                    A task will be created every{' '}
                                    {data.schedule_day}{' '}
                                    {data.frequency === 'Bi-weekly'
                                        ? 'every two weeks'
                                        : 'every week'}
                                    .
                                </p>
                            </div>
                        )}

                        {data.frequency === 'Daily' && (
                            <div className="space-y-2">
                                <Label>Hari terbit</Label>
                                <DailyDaysSelect
                                    value={data.schedule_days}
                                    onChange={(days) =>
                                        setData('schedule_days', days)
                                    }
                                />
                                <p className="text-[10px] text-muted-foreground">
                                    Task terbit pada hari yang dipilih saja.
                                    Kosongkan untuk setiap hari, termasuk Sabtu
                                    dan Minggu.
                                </p>
                            </div>
                        )}

                        {data.frequency === 'Monthly' && (
                            <div className="space-y-2">
                                <Label>Day of Month</Label>
                                <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)}
                                            >
                                                Tanggal {d}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                                {errors.schedule_day && (
                                    <p className="text-xs text-destructive">
                                        {errors.schedule_day}
                                    </p>
                                )}
                                <p className="text-[10px] text-muted-foreground">
                                    Task akan dibuat setiap tanggal{' '}
                                    {data.schedule_day} setiap bulan.
                                </p>
                            </div>
                        )}

                        {/* Deadline Time */}
                        <div className="space-y-2">
                            <Label htmlFor="due_time">Deadline Time</Label>
                            <input
                                id="due_time"
                                type="time"
                                value={data.due_time}
                                onChange={(e) =>
                                    setData('due_time', e.target.value)
                                }
                                onBlur={() => validateField('due_time')}
                                className="flex h-10 w-full rounded-xl border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none"
                            />
                            {errors.due_time && (
                                <p className="text-xs text-destructive">
                                    {errors.due_time}
                                </p>
                            )}
                            <p className="text-[10px] text-muted-foreground">
                                Task yang di-generate akan memiliki deadline
                                pada jam ini.
                            </p>
                        </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" />
                                        Updating...
                                    </>
                                ) : (
                                    'Update Automation'
                                )}
                            </Button>
                        </div>
                    </SheetFooter>
                </form>
            </SheetContent>
        </Sheet>
    );
}