import { useEffect, useState, useMemo } from 'react';
import { useNavigate, useParams } from 'react-router-dom';

import { useAdminTask } from '@/contexts/AdminTaskContext';
import GroupMultiSelect from '@/components/generic/GroupMultiSelect';

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { Card, CardContent } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { ArrowLeft } from 'lucide-react';

export default function EditTaskList() {
    const navigate = useNavigate();
    const { taskListId } = useParams();
    const { fetchTaskList, updateTaskList, syncGroups, loading } = useAdminTask();

    const [form, setForm] = useState(null);
    const [errors, setErrors] = useState({});

    // ── Original values to diff against ──────────────────────────────────────
    const [original, setOriginal] = useState(null);
    const [originalGroupIds, setOriginalGroupIds] = useState([]);
    const [selectedGroupIds, setSelectedGroupIds] = useState([]);

    useEffect(() => {
        fetchTaskList(taskListId).then((data) => {
            if (!data) return;

            const initialForm = {
                name: data.name ?? '',
                description: data.description ?? '',
            };

            setForm(initialForm);
            setOriginal(initialForm);

            const ids = (data.groups ?? []).map((g) => g.group_id);
            setOriginalGroupIds(ids);
            setSelectedGroupIds(ids);
        });
    }, [taskListId]);

    // ── Dirty check — true only when something actually changed ───────────────
    const isDirty = useMemo(() => {
        if (!form || !original) return false;

        const formChanged =
            form.name.trim() !== original.name.trim() ||
            (form.description.trim() || null) !== (original.description.trim() || null);

        const groupsChanged =
            selectedGroupIds.length !== originalGroupIds.length ||
            selectedGroupIds.some((id) => !originalGroupIds.includes(id));

        return formChanged || groupsChanged;
    }, [form, original, selectedGroupIds, originalGroupIds]);

    const validate = () => {
        const e = {};
        if (!form?.name?.trim()) e.name = 'Task list name is required.';
        setErrors(e);
        return Object.keys(e).length === 0;
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        if (!validate()) return;

        // ── 1. Update name / description ──────────────────────────────────────
        const updated = await updateTaskList(taskListId, {
            name: form.name.trim(),
            description: form.description.trim() || null,
        });

        if (!updated) return;

        // ── 2. Sync groups (single call — avoids burning two sensitive-op hits) ──
        const groupsChanged =
            selectedGroupIds.length !== originalGroupIds.length ||
            selectedGroupIds.some((id) => !originalGroupIds.includes(id));

        if (groupsChanged) {
            await syncGroups(taskListId, selectedGroupIds);
        }

        navigate(`/admin/taskList`);
    };

    // ── Loading skeleton ──────────────────────────────────────────────────────
    if (!form) return (
        <div className="max-w-xl mx-auto py-8 px-4 space-y-4">
            <Skeleton className="h-8 w-48" />
            <Skeleton className="h-10 w-full" />
            <Skeleton className="h-24 w-full" />
            <Skeleton className="h-10 w-full" />
        </div>
    );

    return (
        <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
            <div className="mx-auto">
                <div className="flex gap-2 items-center mb-4">
                    <Button
                        variant="ghost"
                        onClick={() => navigate(`/admin/taskList`)}
                    >
                        <ArrowLeft className="size-4" />
                    </Button>
                    <div className="space-y-1">
                        <h1 className="text-xl font-semibold">Edit Task List</h1>
                        <p className="text-sm text-muted-foreground">Update task list.</p>
                    </div>
                </div>

                <Card className="lg:w-2xl">
                    <CardContent>
                        <form onSubmit={handleSubmit} className="space-y-4">

                            {/* Name */}
                            <div className="space-y-1">
                                <Label htmlFor="name">Name *</Label>
                                <Input
                                    id="name"
                                    value={form.name}
                                    onChange={(e) => setForm({ ...form, name: e.target.value })}
                                />
                                {errors.name && (
                                    <p className="text-xs text-destructive">{errors.name}</p>
                                )}
                            </div>

                            {/* Description */}
                            <div className="space-y-1">
                                <Label htmlFor="description">Description</Label>
                                <Textarea
                                    id="description"
                                    value={form.description}
                                    onChange={(e) => setForm({ ...form, description: e.target.value })}
                                    rows={3}
                                />
                            </div>

                            {/* Groups */}
                            <div className="space-y-1">
                                <Label>
                                    Assigned Groups
                                    <span className="ml-1.5 text-xs text-muted-foreground font-normal">
                                        (optional)
                                    </span>
                                </Label>
                                <GroupMultiSelect
                                    value={selectedGroupIds}
                                    onChange={setSelectedGroupIds}
                                    disabled={loading}
                                    placeholder="Select groups to assign…"
                                />
                                <p className="text-xs text-muted-foreground">
                                    Members of selected groups will be able to see and complete this task list.
                                </p>
                            </div>

                            {/* Actions */}
                            <div className="flex gap-2 justify-end pt-2">
                                <Button
                                    type="button"
                                    variant="outline"
                                    onClick={() => navigate(`/admin/taskList`)}
                                >
                                    Cancel
                                </Button>
                                <Button
                                    type="submit"
                                    disabled={loading || !isDirty}
                                >
                                    {loading ? 'Saving…' : 'Save Changes'}
                                </Button>
                            </div>

                        </form>
                    </CardContent>
                </Card>
            </div>
        </div>
    );
}