import { Form, FormField } from '@/components/form';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import AppLayout from '@/layouts/app-layout';
import { router, usePage } from '@inertiajs/react';
import {
    ArrowLeft,
    Briefcase,
    Lock,
    Plus,
    ShieldCheck,
    Trash2,
    User,
} from 'lucide-react';
import { ReactNode, useEffect, useState } from 'react';
import { SubmitHandler, useFormContext } from 'react-hook-form';
import { toast } from 'sonner';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';

declare const route: (...args: any[]) => string;

// ─── Types ───────────────────────────────────────────────────────────────────

interface Role {
    id: number;
    name: string;
    slug: string;
    primary_access_level: number;
    access_level_label: string;
    access_level_scope: string;
}

interface Branch {
    id: number;
    title: string;
}

interface StatusOption {
    label: string;
    value: number;
}

interface UserData {
    id: number;
    uid: string;
    staff_id: string;
    name: string;
    email: string;
    phone?: string;
    address?: string;
    status: number;
    type: number;
    is_admin: boolean;
    role_assignments: { role_id: string; branch_ids: string[] }[];
}

interface RoleAssignment {
    role_id: string;
    branch_ids: string[];
}

// ─── Access level badge colours ───────────────────────────────────────────────

const ACCESS_LEVEL_COLORS: Record<number, string> = {
    1: 'bg-blue-100 text-blue-800 border-blue-300',
    2: 'bg-amber-100 text-amber-800 border-amber-300',
    3: 'bg-purple-100 text-purple-800 border-purple-300',
};

// ─── Roles & Access Section ───────────────────────────────────────────────────

function RolesAccessSection({ roles, branches }: { roles: Role[]; branches: Branch[] }) {
    const { setValue, getValues } = useFormContext();

    const [assignments, setAssignments] = useState<RoleAssignment[]>(() => {
        const existing: RoleAssignment[] = getValues('role_assignments') ?? [];
        return existing.length > 0 ? existing : [{ role_id: '', branch_ids: [] }];
    });

    useEffect(() => {
        setValue('role_assignments', assignments, { shouldDirty: true });
    }, [assignments, setValue]);

    const addRow = () =>
        setAssignments((prev) => [...prev, { role_id: '', branch_ids: [] }]);

    const removeRow = (idx: number) =>
        setAssignments((prev) => prev.filter((_, i) => i !== idx));

    const updateRoleId = (idx: number, val: string) =>
        setAssignments((prev) =>
            prev.map((a, i) => (i === idx ? { role_id: val, branch_ids: [] } : a)),
        );

    const toggleBranch = (idx: number, branchId: string) =>
        setAssignments((prev) =>
            prev.map((a, i) => {
                if (i !== idx) return a;
                const next = a.branch_ids.includes(branchId)
                    ? a.branch_ids.filter((b) => b !== branchId)
                    : [...a.branch_ids, branchId];
                return { ...a, branch_ids: next };
            }),
        );

    // Roles already picked in other rows (to avoid duplicates)
    const pickedIds = (currentIdx: number) =>
        assignments.filter((_, i) => i !== currentIdx).map((a) => a.role_id).filter(Boolean);

    return (
        <div className="rounded-lg border border-input p-5 ">
            <div className="mb-5 flex items-center justify-between">
                <div className="flex items-center gap-3">
                    <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-input">
                        <ShieldCheck className="h-5 w-5 " />
                    </div>
                    <div>
                        <h3 className="text-lg font-semibold  ">Roles & Access</h3>
                        <p className="text-sm text-gray-600">Assign roles and configure access levels per role</p>
                    </div>
                </div>
                <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    onClick={addRow}
                    className="flex items-center gap-1 border-primary text-primary-foreground! hover:bg-primary"
                >
                    <Plus className="h-4 w-4" />
                    Add Role
                </Button>
            </div>

            <div className="space-y-3">
                {assignments.map((assignment, idx) => {
                    const selectedRole = roles.find((r) => String(r.id) === String(assignment.role_id));
                    const accessLevel = selectedRole?.primary_access_level ?? null;
                    const isBranch = accessLevel === 2;
                    const availableRoles = roles.filter(
                        (r) => !pickedIds(idx).includes(String(r.id)),
                    );

                    return (
                        <div
                            key={idx}
                            className="rounded-lg border border-input p-4 "
                        >
                            {/* Role select + access level badge */}
                            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                                <div className="space-y-1.5">
                                    <label className="block text-sm font-medium text-gray-700">
                                        Role
                                    </label>
                                    <Select
                                        value={assignment.role_id}
                                        onValueChange={(val) => updateRoleId(idx, val)}
                                    >
                                        <SelectTrigger className="h-9 w-full">
                                            <SelectValue placeholder="Select a role" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            {availableRoles.map((r) => (
                                                <SelectItem key={r.id} value={String(r.id)}>
                                                    {r.name}
                                                </SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                </div>

                                <div className="space-y-1.5">
                                    <label className="block text-sm font-medium text-gray-700">
                                        Role Access Level
                                    </label>
                                    <div className="flex h-10 items-center">
                                        {accessLevel ? (
                                            <Badge
                                                className={`border h-9 w-44 px-3 py-1 text-sm font-medium ${ACCESS_LEVEL_COLORS[accessLevel] ?? ''}`}
                                            >
                                                {selectedRole?.access_level_label}
                                            </Badge>
                                        ) : (
                                            <span className="text-sm text-gray-400">
                                                — select a role —
                                            </span>
                                        )}
                                    </div>
                                </div>
                            </div>

                            {/* Branch picker — shown only when access level is Branch */}
                            {isBranch && branches.length > 0 && (
                                <div className="mt-4 space-y-2">
                                    <label className="block text-sm font-medium text-gray-700">
                                        Branches
                                    </label>
                                    <div className="flex flex-wrap gap-3">
                                        {branches.map((b) => {
                                            const checked = assignment.branch_ids.includes(String(b.id));
                                            return (
                                                <label
                                                    key={b.id}
                                                    className={`flex cursor-pointer items-center gap-2 rounded-lg border px-3 py-2 text-sm transition-colors ${checked
                                                        ? 'border-amber-400 bg-amber-50 text-amber-800'
                                                        : 'border-gray-200 bg-gray-50 text-gray-700 hover:border-gray-300 hover:bg-gray-100'
                                                        }`}
                                                >
                                                    <input
                                                        type="checkbox"
                                                        className="h-4 w-4 rounded border-gray-300 text-amber-600 focus:ring-amber-500"
                                                        checked={checked}
                                                        onChange={() => toggleBranch(idx, String(b.id))}
                                                    />
                                                    {b.title}
                                                </label>
                                            );
                                        })}
                                    </div>
                                </div>
                            )}

                            {/* Remove row button */}
                            {assignments.length > 1 && (
                                <div className="mt-3 flex justify-end">
                                    <Button
                                        type="button"
                                        variant="ghost"
                                        size="sm"
                                        onClick={() => removeRow(idx)}
                                        className="h-8 text-red-500 hover:bg-red-50 hover:text-red-600"
                                    >
                                        <Trash2 className="mr-1 h-4 w-4" />
                                        Remove
                                    </Button>
                                </div>
                            )}
                        </div>
                    );
                })}
            </div>
        </div>
    );
}

// ─── Main Edit Component ──────────────────────────────────────────────────────

function Edit() {
    const { user, roles = [], branches = [], statuses = [] } = usePage<{
        user: UserData;
        roles: Role[];
        branches: Branch[];
        statuses: StatusOption[];
    }>().props;

    const [isSubmitting, setIsSubmitting] = useState(false);

    const statusOptions = statuses.map((s) => ({
        label: s.label,
        value: String(s.value),
    }));

    const nameParts = (user.name ?? '').split(' ');
    const defaultFirstName = nameParts[0] ?? '';
    const defaultLastName = nameParts.slice(1).join(' ') ?? '';

    const handleSubmit: SubmitHandler<any> = (data) => {
        setIsSubmitting(true);

        const payload: any = {
            _method: 'PUT',
            first_name: data.first_name,
            last_name: data.last_name,
            email: data.email,
            phone: data.phone ?? '',
            address: data.address ?? '',
            status: data.status ? Number(data.status) : user.status,
            role_assignments: (data.role_assignments ?? [])
                .filter((a: RoleAssignment) => a.role_id)
                .map((a: RoleAssignment) => ({
                    role_id: Number(a.role_id),
                    branch_ids: (a.branch_ids ?? []).map(Number).filter(Boolean),
                })),
        };

        if (data.password) {
            payload.password = data.password;
            payload.password_confirmation = data.password_confirmation;
        }

        router.post(route('users.update', user.uid), payload, {
            onSuccess: () => {
                toast.success('Employee updated successfully!');
                router.visit(route('users.index'));
            },
            onError: (errors) => {
                const first = Object.values(errors)[0];
                toast.error(typeof first === 'string' ? first : 'Something went wrong.');
            },
            onFinish: () => setIsSubmitting(false),
        });
    };

    const handleCancel = () => router.visit(route('users.index'));

    return (
        <div className="no-scrollbar rounded-xl  p-2 sm:p-4">
            {/* Page header */}
            <div className="mb-6 flex items-start gap-4">
                <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    onClick={handleCancel}
                    className="flex items-center gap-2 mt-1 border-input text-black"
                >
                    <ArrowLeft className="h-4 w-4" />
                </Button>
                <div>
                    <h1 className="text-xl font-bold sm:text-2xl">Edit Employee</h1>
                    <p className="text-sm text-gray-500">
                        Update account details for{' '}
                        <span className="font-medium">{user.name}</span>
                    </p>
                </div>
            </div>

            <Form
                submitHandler={handleSubmit}
                defaultValues={{
                    first_name: defaultFirstName,
                    last_name: defaultLastName,
                    email: user.email ?? '',
                    phone: user.phone ?? '',
                    address: user.address ?? '',
                    status: String(user.status),
                    password: '',
                    password_confirmation: '',
                    role_assignments: user.role_assignments?.length
                        ? user.role_assignments
                        : [{ role_id: '', branch_ids: [] }],
                }}
                formClassNames="space-y-5"
            >
                <div className="space-y-4 ">
                    <div className=" col-span-2">
                        {/* ── Personal Information ─────────────────────────────── */}
                        <div className="rounded-lg border border-input p-5">
                            <div className="mb-5 flex items-center gap-3">
                                <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-input">
                                    <User className="h-5 w-5" />
                                </div>
                                <div>
                                    <h3 className="text-lg font-semibold  ">Personal Information</h3>
                                    <p className="text-sm text-gray-600">Basic identity and contact details</p>
                                </div>
                            </div>

                            <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
                                <FormField type="text" name="first_name" label="First Name" placeholder="John" required />
                                <FormField type="text" name="last_name" label="Last Name" placeholder="Doe" required />
                                <FormField
                                    type="email"
                                    name="email"
                                    label="Email"
                                    placeholder="john.doe@example.com"
                                    required
                                />
                                <FormField type="text" name="phone" label="Phone" placeholder="+1 555 000 0000" />
                                <FormField
                                    type="select"
                                    name="status"
                                    label="Status"
                                    options={statusOptions}
                                    placeholder="Select status"
                                />
                                <FormField type="text" name="address" label="Address" placeholder="Street, City, Country" />
                            </div>
                        </div>

                    </div>
                    {/* ── Roles & Access ───────────────────────────────────── */}
                    {!user.is_admin && <RolesAccessSection roles={roles} branches={branches} />}
                    <div className="">
                        {/* ── Password ─────────────────────────────────────────── */}
                        <div className="rounded-lg border border-input p-5 ">
                            <Accordion type="single" collapsible >
                                <AccordionItem value="password" className="border-none">
                                    <AccordionTrigger className="hover:no-underline py-0">
                                        <div className="flex items-center gap-3">
                                            <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-input">
                                                <Lock className="h-5 w-5 " />
                                            </div>
                                            <div className="text-left">
                                                <p className="text-base font-semibold  ">Change Password</p>
                                                <p className="text-sm font-normal text-gray-500">
                                                    Leave blank to keep the current password
                                                </p>
                                            </div>
                                        </div>
                                    </AccordionTrigger>
                                    <AccordionContent className="pt-4">
                                        <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
                                            <FormField
                                                type="password"
                                                name="password"
                                                label="New Password"
                                                placeholder="Enter new password"
                                                required={false}
                                            />
                                            <FormField
                                                type="password"
                                                name="password_confirmation"
                                                label="Confirm Password"
                                                placeholder="Repeat new password"
                                                required={false}
                                            />
                                        </div>
                                    </AccordionContent>
                                </AccordionItem>
                            </Accordion>
                        </div>

                        {/* ── Action buttons ───────────────────────────────────── */}
                        <div className="flex justify-end gap-3 pt-5">
                            <Button
                                type="button"
                                variant="outline"
                                onClick={handleCancel}
                                disabled={isSubmitting}
                                className="min-w-[120px] border-input text-black"
                            >
                                Cancel
                            </Button>
                            <Button
                                type="submit"
                                disabled={isSubmitting}
                                className="min-w-[120px] bg-blue-600 hover:bg-blue-700"
                            >
                                {isSubmitting ? 'Saving…' : 'Save Changes'}
                            </Button>
                        </div>
                    </div>
                </div>
            </Form>
        </div>
    );
}

// ─── Layout & Export ──────────────────────────────────────────────────────────

Edit.layout = (page: ReactNode & { props: { user: UserData } }) => {
    const user = (page as any).props.user as UserData;
    return (
        <AppLayout
            title="Edit Employee"
            breadcrumbs={[
                { title: 'Home', href: '/' },
                { title: 'Employees', href: route('users.index') },
                { title: user?.name ?? 'Edit', href: '#' },
            ]}
        >
            {page}
        </AppLayout>
    );
};

export default Edit;