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

import { useAdminTask } from '@/contexts/AdminTaskContext';
import GroupMultiSelect from '@/components/generic/GroupMultiSelect';
import api from '@/utils/api.util';
import { cn } from '@/lib/utils';

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 { Badge } from '@/components/ui/badge';
import { ArrowLeft, ChevronRight, ChevronLeft, Check, FileText, Users, ClipboardList } from 'lucide-react';

// ─── Steps ────────────────────────────────────────────────────────────────────
const STEPS = [
    { id: 0, label: 'Details',       icon: FileText },
    { id: 1, label: 'Assign Groups', icon: Users },
    { id: 2, label: 'Review',        icon: ClipboardList },
];

// ─── Summary row ──────────────────────────────────────────────────────────────
function SummaryRow({ label, value }) {
    if (!value) return null;
    return (
        <div className="flex justify-between py-1.5 text-sm gap-4">
            <span className="text-muted-foreground min-w-[120px] shrink-0">{label}</span>
            <span className="text-foreground text-right">{value}</span>
        </div>
    );
}

export default function CreateTaskList() {
    const navigate = useNavigate();
    const { createTaskList, assignGroups, loading } = useAdminTask();

    const [step, setStep] = useState(0);
    const [form, setForm] = useState({ name: '', description: '' });
    const [selectedGroupIds, setSelectedGroupIds] = useState([]);
    const [allGroups, setAllGroups] = useState([]);
    const [errors, setErrors] = useState({});

    // Fetch groups for the review step's summary (names, not just ids)
    useEffect(() => {
        api.get('/admin/groups', { params: { limit: 500 } })
            .then((res) => setAllGroups(res.data?.data?.data ?? res.data?.data ?? []))
            .catch(() => {});
    }, []);

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

    const handleNext = () => {
        if (step === 0 && !validateDetails()) return;
        setStep((s) => s + 1);
    };

    const handleBack = () => {
        if (step === 0) navigate('/admin/taskList');
        else setStep((s) => s - 1);
    };

    const handleCreate = async () => {
        if (!validateDetails()) { setStep(0); return; }

        const created = await createTaskList({
            name: form.name.trim(),
            description: form.description.trim() || null,
        });

        if (!created) return; // createTaskList already toasts on error

        // Assign selected groups if any — non-blocking: navigate regardless
        if (selectedGroupIds.length > 0) {
            await assignGroups(created.task_list_id, selectedGroupIds);
        }

        navigate(`/admin/taskList/${created.task_list_id}/view`);
    };

    const selectedGroupNames = allGroups
        .filter((g) => selectedGroupIds.includes(g.group_id))
        .map((g) => g.name);

    return (
        // ← plain div, no <form> — prevents any accidental submit on button clicks
        <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
            <div className="mx-auto w-full lg:w-2xl space-y-6">

                {/* Header */}
                <div className="flex items-center gap-3">
                    <Button type="button" variant="ghost" size="icon" onClick={() => navigate('/admin/taskList')}>
                        <ArrowLeft className="h-4 w-4" />
                    </Button>
                    <div>
                        <h1 className="text-xl font-semibold">Create Task List</h1>
                        <p className="text-sm text-muted-foreground">View course information.</p>
                    </div>
                </div>

                {/* Stepper */}
                <div className="flex items-center gap-0">
                    {STEPS.map((s, i) => {
                        const Icon     = s.icon;
                        const isActive = step === i;
                        const isDone   = step > i;

                        return (
                            <div key={s.id} className="flex items-center flex-1 last:flex-none">
                                <div className="flex flex-col items-center gap-1">
                                    <div className={cn(
                                        'h-8 w-8 rounded-full flex items-center justify-center border transition-colors',
                                        isDone   && 'bg-emerald-600 border-emerald-600 text-white',
                                        isActive && 'border-primary bg-primary text-primary-foreground',
                                        !isActive && !isDone && 'border-border bg-background text-muted-foreground'
                                    )}>
                                        {isDone ? <Check className="h-4 w-4" /> : <Icon className="h-4 w-4" />}
                                    </div>
                                    <span className={cn(
                                        'text-[11px] font-medium whitespace-nowrap hidden sm:block',
                                        isActive ? 'text-foreground'  : 'text-muted-foreground',
                                        isDone   ? 'text-emerald-600' : ''
                                    )}>
                                        {s.label}
                                    </span>
                                </div>
                                {i < STEPS.length - 1 && (
                                    <div className={cn(
                                        'flex-1 h-px mx-2 mb-4 transition-colors',
                                        step > i ? 'bg-emerald-600' : 'bg-border'
                                    )} />
                                )}
                            </div>
                        );
                    })}
                </div>

                {/* Step content */}
                <Card>
                    <CardContent className="space-y-4 min-h-[280px]">
                        <h2 className="text-base font-medium">{STEPS[step].label}</h2>

                        {/* ── Step 1: Details ── */}
                        {step === 0 && (
                            <div className="space-y-4">
                                <div className="space-y-3">
                                    <Label htmlFor="name">Name *</Label>
                                    <Input
                                        id="name"
                                        value={form.name}
                                        onChange={(e) => setForm({ ...form, name: e.target.value })}
                                        placeholder="e.g. Onboarding Tasks"
                                    />
                                    {errors.name && (
                                        <p className="text-xs text-destructive">{errors.name}</p>
                                    )}
                                </div>

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

                        {/* ── Step 2: Assign Groups ── */}
                        {step === 1 && (
                            <div className="space-y-3">
                                <Label>
                                    Assign to 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>
                        )}

                        {/* ── Step 3: Review ── */}
                        {step === 2 && (
                            <div className="space-y-4">
                                <div className="border border-border rounded-lg p-4 space-y-1">
                                    <div className="flex items-center gap-2 mb-2">
                                        <FileText className="h-4 w-4 text-muted-foreground" />
                                        <span className="text-sm font-medium">Task List Details</span>
                                    </div>
                                    <SummaryRow label="Name"        value={form.name || '—'} />
                                    <SummaryRow label="Description" value={form.description || '—'} />
                                </div>

                                <div className="border border-border rounded-lg p-4 space-y-2">
                                    <div className="flex items-center gap-2">
                                        <Users className="h-4 w-4 text-muted-foreground" />
                                        <span className="text-sm font-medium">Assigned Groups</span>
                                    </div>
                                    {selectedGroupNames.length > 0 ? (
                                        <div className="flex flex-wrap gap-1.5 pt-1">
                                            {selectedGroupNames.map((name) => (
                                                <Badge key={name} variant="secondary" className="text-xs">{name}</Badge>
                                            ))}
                                        </div>
                                    ) : (
                                        <p className="text-sm text-muted-foreground">No groups assigned — task list will not be visible to any users yet.</p>
                                    )}
                                </div>
                            </div>
                        )}
                    </CardContent>
                </Card>

                {/* Navigation */}
                <div className="flex items-center justify-between">
                    <Button type="button" variant="outline" onClick={handleBack}>
                        <ChevronLeft className="h-4 w-4 mr-1" />
                        {step === 0 ? 'Cancel' : 'Back'}
                    </Button>

                    {step < STEPS.length - 1 ? (
                        <Button type="button" onClick={handleNext}>
                            Next
                            <ChevronRight className="h-4 w-4 ml-1" />
                        </Button>
                    ) : (
                        <Button
                            type="button"          // ← type="button", not "submit"
                            disabled={loading}
                            onClick={handleCreate} // ← called manually
                        >
                            {loading ? 'Creating…' : 'Create Task List'}
                        </Button>
                    )}
                </div>

            </div>
        </div>
    );
}