import { Head, router, useForm, usePage } from '@inertiajs/react';
import { CheckCircle2, Edit2, Plus, Search, Shield, ShieldCheck, Trash2, User2, Users, XCircle } from 'lucide-react';
import { useEffect, useState } from 'react';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Pagination, PaginationSummary } from '@/components/ui/pagination';
import { cn } from '@/lib/utils';

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import AppLayout from '@/layouts/app-layout';
import type { BreadcrumbItem, PaginatedData, User } from '@/types';

const breadcrumbs: BreadcrumbItem[] = [
    { title: 'Dashboard', href: '/dashboard' },
    { title: 'User Management', href: '/admin/users' },
];

const roleConfig: Record<string, { label: string; icon: typeof Shield; className: string }> = {
    admin: {
        label: 'Admin',
        icon: ShieldCheck,
        className: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400 border-red-200 dark:border-red-800',
    },
    technician: {
        label: 'Technician',
        icon: Shield,
        className: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400 border-blue-200 dark:border-blue-800',
    },
    user: {
        label: 'User',
        icon: User2,
        className: 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400 border-gray-200 dark:border-gray-800',
    },
};

type UserData = {
    id: number;
    name: string;
    role: 'admin' | 'technician' | 'user';
    department: string | null;
    phone: string | null;
    created_at: string;
    active_tickets_count?: number;
};

type Props = {
    users: PaginatedData<UserData>;
    filters: {
        search?: string;
        role?: string;
    };
};

function UserFormDialog({
    user,
    trigger,
    open,
    onOpenChange
}: {
    user?: UserData;
    trigger?: React.ReactNode;
    open: boolean;
    onOpenChange: (open: boolean) => void;
}) {
    const { data, setData, post, put, processing, errors, reset, clearErrors } = useForm({
        name: user?.name || '',
        password: '',
        role: user?.role || 'user',
        department: user?.department || '',
        phone: user?.phone || '',
    });

    const isEdit = !!user;

    function handleSubmit(e: React.FormEvent) {
        e.preventDefault();
        if (isEdit) {
            put(`/admin/users/${user.id}`, {
                onSuccess: () => {
                    onOpenChange(false);
                    reset();
                },
            });
        } else {
            post('/admin/users', {
                onSuccess: () => {
                    onOpenChange(false);
                    reset();
                },
            });
        }
    }

    return (
        <Dialog open={open} onOpenChange={(o) => {
            if (!o) {
                reset();
                clearErrors();
            }
            onOpenChange(o);
        }}>
            {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
            <DialogContent className="sm:max-w-[425px]">
                <form onSubmit={handleSubmit}>
                    <DialogHeader>
                        <DialogTitle>{isEdit ? 'Edit User' : 'Add New User'}</DialogTitle>
                        <DialogDescription>
                            {isEdit ? 'Update user details below.' : 'Create a new user account.'}
                        </DialogDescription>
                    </DialogHeader>
                    <div className="grid gap-4 py-4">
                        <div className="grid gap-2">
                            <Label htmlFor="name">Username</Label>
                            <Input
                                id="name"
                                value={data.name}
                                onChange={(e) => setData('name', e.target.value)}
                                placeholder="jdoe"
                            />
                            {errors.name && <p className="text-xs text-destructive">{errors.name}</p>}
                        </div>
                        <div className="grid gap-2">
                            <Label htmlFor="password">{isEdit ? 'Password (leave blank to keep current)' : 'Password'}</Label>
                            <Input
                                id="password"
                                type="password"
                                value={data.password}
                                onChange={(e) => setData('password', e.target.value)}
                                placeholder="••••••••"
                            />
                            {errors.password && <p className="text-xs text-destructive">{errors.password}</p>}
                        </div>
                        <div className="grid gap-2">
                            <Label htmlFor="role">Role</Label>
                            <Select value={data.role} onValueChange={(v) => setData('role', v as any)}>
                                <SelectTrigger>
                                    <SelectValue placeholder="Select role" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="user">User</SelectItem>
                                    <SelectItem value="technician">Technician</SelectItem>
                                    <SelectItem value="admin">Admin</SelectItem>
                                </SelectContent>
                            </Select>
                            {errors.role && <p className="text-xs text-destructive">{errors.role}</p>}
                        </div>
                        <div className="grid gap-2">
                            <Label htmlFor="department">Department</Label>
                            <Input
                                id="department"
                                value={data.department}
                                onChange={(e) => setData('department', e.target.value)}
                                placeholder="IT Department"
                            />
                            {errors.department && <p className="text-xs text-destructive">{errors.department}</p>}
                        </div>
                        <div className="grid gap-2">
                            <Label htmlFor="phone">Phone</Label>
                            <Input
                                id="phone"
                                value={data.phone}
                                onChange={(e) => setData('phone', e.target.value)}
                                placeholder="09123456789"
                            />
                            {errors.phone && <p className="text-xs text-destructive">{errors.phone}</p>}
                        </div>
                    </div>
                    <DialogFooter>
                        <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
                            Cancel
                        </Button>
                        <Button type="submit" disabled={processing}>
                            {isEdit ? 'Save Changes' : 'Create User'}
                        </Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    );
}

export default function AdminUsers({ users, filters }: Props) {
    const { auth, flash } = usePage<{ auth: { user: User }; flash: { success?: string; error?: string } }>().props;
    const [isAddOpen, setIsAddOpen] = useState(false);
    const [editingUser, setEditingUser] = useState<UserData | null>(null);

    function handleDelete(user: UserData) {
        if (confirm(`Are you sure you want to delete ${user.name}? This action cannot be undone.`)) {
            router.delete(`/admin/users/${user.id}`, {
                preserveScroll: true,
            });
        }
    }

    // Search and Filter Logic
    const [search, setSearch] = useState(filters?.search || '');
    const [role, setRole] = useState(filters?.role || 'all');

    useEffect(() => {
        const timer = setTimeout(() => {
            router.get(
                '/admin/users',
                { search, role: role === 'all' ? undefined : role },
                { preserveState: true, preserveScroll: true, replace: true }
            );
        }, 300);

        return () => clearTimeout(timer);
    }, [search, role]);

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="User Management" />
            <div className="flex h-full flex-1 flex-col gap-6 p-4 md:p-6">
                {flash.success && (
                    <Alert className="border-emerald-500/50 bg-emerald-50 text-emerald-900 dark:bg-emerald-950/20 dark:text-emerald-400">
                        <CheckCircle2 className="h-4 w-4" />
                        <AlertTitle>Success</AlertTitle>
                        <AlertDescription>{flash.success}</AlertDescription>
                    </Alert>
                )}

                {flash.error && (
                    <Alert variant="destructive">
                        <XCircle className="h-4 w-4" />
                        <AlertTitle>Error</AlertTitle>
                        <AlertDescription>{flash.error}</AlertDescription>
                    </Alert>
                )}
                <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <h1 className="text-2xl font-bold tracking-tight text-foreground">User Management</h1>
                        <p className="text-sm text-muted-foreground">
                            Manage system users, roles, and access. {users.total} registered users.
                        </p>
                    </div>
                    <div className="flex items-center gap-2">
                        <div className="relative">
                            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                            <Input
                                placeholder="Search users..."
                                value={search}
                                onChange={(e) => setSearch(e.target.value)}
                                className="w-full bg-background pl-8 sm:w-[200px] lg:w-[300px]"
                            />
                        </div>
                        <Select value={role} onValueChange={setRole}>
                            <SelectTrigger className="w-[150px]">
                                <SelectValue placeholder="All Roles" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="all">
                                    <div className="flex items-center gap-2">
                                        <Users className="h-4 w-4" />
                                        <span>All Roles</span>
                                    </div>
                                </SelectItem>
                                <SelectItem value="admin">
                                    <div className="flex items-center gap-2 text-red-600 dark:text-red-400">
                                        <ShieldCheck className="h-4 w-4" />
                                        <span>Admin</span>
                                    </div>
                                </SelectItem>
                                <SelectItem value="technician">
                                    <div className="flex items-center gap-2 text-blue-600 dark:text-blue-400">
                                        <Shield className="h-4 w-4" />
                                        <span>Technician</span>
                                    </div>
                                </SelectItem>
                                <SelectItem value="user">
                                    <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                                        <User2 className="h-4 w-4" />
                                        <span>User</span>
                                    </div>
                                </SelectItem>
                            </SelectContent>
                        </Select>
                        <Button onClick={() => setIsAddOpen(true)}>
                            <Plus className="mr-2 h-4 w-4" />
                            Add User
                        </Button>
                    </div>
                </div>

                <UserFormDialog
                    open={isAddOpen}
                    onOpenChange={setIsAddOpen}
                />

                <UserFormDialog
                    user={editingUser || undefined}
                    open={!!editingUser}
                    onOpenChange={(o) => !o && setEditingUser(null)}
                />

                <Card className="overflow-hidden border-none bg-card/50 shadow-sm ring-1 ring-border/50">
                    <CardContent className="p-0">
                        <Table>
                            <TableHeader>
                                <TableRow>
                                    <TableHead className="w-[300px]">User</TableHead>
                                    <TableHead>Role</TableHead>
                                    <TableHead>Department</TableHead>
                                    <TableHead>Phone</TableHead>
                                    <TableHead>Workload</TableHead>
                                    <TableHead className="text-right">Actions</TableHead>
                                </TableRow>
                            </TableHeader>
                            <TableBody>
                                {users.data.length === 0 ? (
                                    <TableRow>
                                        <TableCell colSpan={5} className="h-24 text-center">
                                            No users found.
                                        </TableCell>
                                    </TableRow>
                                ) : (
                                    users.data.map((user) => {
                                        const config = roleConfig[user.role];
                                        const Icon = config.icon;
                                        return (
                                            <TableRow key={user.id} className="group">
                                                <TableCell>
                                                    <div className="flex items-center gap-4">
                                                        <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-primary/10 text-sm font-bold text-primary ring-1 ring-primary/20">
                                                            {user.name[0].toUpperCase()}
                                                        </div>
                                                        <div className="flex flex-col">
                                                            <span className="text-sm font-semibold text-foreground">
                                                                {user.name}
                                                                {user.id === auth.user.id && (
                                                                    <Badge variant="outline" className="ml-2 py-0 text-[10px] font-normal">You</Badge>
                                                                )}
                                                            </span>
                                                            <span className="text-[11px] text-muted-foreground">
                                                                Joined {new Date(user.created_at).toLocaleDateString()}
                                                            </span>
                                                        </div>
                                                    </div>
                                                </TableCell>
                                                <TableCell>
                                                    <Badge className={`flex w-fit items-center gap-1.5 px-2 py-0.5 text-[11px] font-medium shadow-none ${config.className}`}>
                                                        <Icon className="h-3 w-3" />
                                                        {config.label}
                                                    </Badge>
                                                </TableCell>
                                                <TableCell className="text-foreground/80">
                                                    {user.department || <span className="text-muted-foreground/50">—</span>}
                                                </TableCell>
                                                <TableCell className="text-foreground/80">
                                                    {user.phone || <span className="text-muted-foreground/50">—</span>}
                                                </TableCell>
                                                <TableCell>
                                                    {user.role !== 'user' ? (
                                                        <div className="flex items-center gap-2">
                                                            <div className="h-2 w-24 overflow-hidden rounded-full bg-muted">
                                                                <div
                                                                    className={cn(
                                                                        "h-full transition-all",
                                                                        (user.active_tickets_count || 0) > 5 ? "bg-red-500" :
                                                                            (user.active_tickets_count || 0) > 2 ? "bg-amber-500" :
                                                                                "bg-emerald-500"
                                                                    )}
                                                                    style={{ width: `${Math.min(((user.active_tickets_count || 0) / 10) * 100, 100)}%` }}
                                                                />
                                                            </div>
                                                            <span className="text-xs font-medium text-foreground/70">
                                                                {user.active_tickets_count || 0} active
                                                            </span>
                                                        </div>
                                                    ) : (
                                                        <span className="text-muted-foreground/30">—</span>
                                                    )}
                                                </TableCell>
                                                <TableCell className="text-right">
                                                    <div className="flex justify-end gap-2 opacity-0 transition-opacity group-hover:opacity-100">
                                                        <Button
                                                            variant="ghost"
                                                            size="icon"
                                                            className="h-8 w-8 text-muted-foreground hover:bg-primary/10 hover:text-primary"
                                                            onClick={() => setEditingUser(user)}
                                                        >
                                                            <Edit2 className="h-4 w-4" />
                                                        </Button>
                                                        <Button
                                                            variant="ghost"
                                                            size="icon"
                                                            className="h-8 w-8 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
                                                            disabled={user.id === auth.user.id}
                                                            onClick={() => handleDelete(user)}
                                                        >
                                                            <Trash2 className="h-4 w-4" />
                                                        </Button>
                                                    </div>
                                                </TableCell>
                                            </TableRow>
                                        );
                                    })
                                )}
                            </TableBody>
                        </Table>

                        <div className="flex flex-col items-center justify-between gap-4 border-t border-border/50 p-4 sm:flex-row">
                            <PaginationSummary from={users.from} to={users.to} total={users.total} />
                            <Pagination links={users.links} />
                        </div>
                    </CardContent>
                </Card>
            </div>
        </AppLayout>
    );
}