import { Head, Link, router, useForm } from '@inertiajs/react';
import { Eye, Pencil, ShieldCheck, Trash2, User, UserCog, Users } from 'lucide-react';
import { useState } from 'react';
import { DataTable, type Column, type TableFilter } from '@/components/data-table';
import AppLayout from '@/layouts/app-layout';
import type { BreadcrumbItem } from '@/types';
import { Button } from '@/components/ui/button';
import { DeleteConfirmModal } from '@/components/delete-confirm-modal';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

type UserItem = {
    id: number;
    name: string;
    email: string;
    role: 'student' | 'instructor' | 'admin';
    ui_theme: string;
    enrollments_count: number;
    created_at: string;
    bio: string | null;
    phone: string | null;
    gender: 'male' | 'female' | null;
    birth_date: string | null;
};

type Props = { users: UserItem[] };

const breadcrumbs: BreadcrumbItem[] = [
    { title: 'Admin', href: '/admin' },
    { title: 'Pengguna', href: '/admin/users' },
];

const ROLE_CONFIG: Record<string, { label: string; badge: string; avatarGradient: string; icon: React.ElementType }> = {
    student:    { label: 'Siswa',      badge: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',   avatarGradient: 'from-blue-100 to-sky-100 text-blue-700 dark:from-blue-950/40 dark:to-sky-950/30 dark:text-blue-300',   icon: User },
    instructor: { label: 'Instruktur', badge: 'bg-teal-100 text-teal-700 dark:bg-teal-900/40 dark:text-teal-300',   avatarGradient: 'from-teal-100 to-cyan-100 text-teal-700 dark:from-teal-950/40 dark:to-cyan-950/30 dark:text-teal-300',     icon: UserCog },
    admin:      { label: 'Admin',      badge: 'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300',   avatarGradient: 'from-rose-100 to-pink-100 text-rose-700 dark:from-rose-950/40 dark:to-pink-950/30 dark:text-rose-300',     icon: ShieldCheck },
};

function getInitials(name: string) {
    return name.split(' ').slice(0, 2).map((n) => n[0]).join('').toUpperCase();
}

export default function AdminUsersIndex({ users }: Props) {
    const [selectedUserForDelete, setSelectedUserForDelete] = useState<UserItem | null>(null);
    const [selectedUserForEdit, setSelectedUserForEdit] = useState<UserItem | null>(null);

    const editForm = useForm({
        name: '',
        email: '',
        role: 'student',
        bio: '',
        phone: '',
        gender: '',
        birth_date: '',
    });

    function openEditModal(u: UserItem) {
        editForm.setData({
            name: u.name,
            email: u.email,
            role: u.role,
            bio: u.bio ?? '',
            phone: u.phone ?? '',
            gender: u.gender ?? '',
            birth_date: u.birth_date ?? '',
        });
        setSelectedUserForEdit(u);
    }

    function submitEdit(e: React.FormEvent) {
        e.preventDefault();
        if (!selectedUserForEdit) return;
        editForm.patch(`/admin/users/${selectedUserForEdit.id}`, {
            preserveScroll: true,
            onSuccess: () => setSelectedUserForEdit(null),
        });
    }

    function confirmDeleteUser() {
        if (!selectedUserForDelete) return;
        router.delete(`/admin/users/${selectedUserForDelete.id}`, {
            preserveScroll: true,
            onSuccess: () => setSelectedUserForDelete(null),
        });
    }

    const columns: Column<UserItem>[] = [
        {
            key: 'name',
            header: 'Pengguna',
            searchable: true,
            render: (u) => {
                const cfg = ROLE_CONFIG[u.role] ?? ROLE_CONFIG.student;
                return (
                    <Link href={`/admin/users/${u.id}`} className="flex items-center gap-3 hover:opacity-85 transition-opacity group">
                        <div className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-gradient-to-br ${cfg.avatarGradient} text-xs font-bold`}>
                            {getInitials(u.name)}
                        </div>
                        <div>
                            <p className="font-medium group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">{u.name}</p>
                            <p className="text-xs text-muted-foreground">{u.email}</p>
                        </div>
                    </Link>
                );
            },
        },
        {
            key: 'email',
            header: 'Email',
            searchable: true,
            headerClass: 'hidden',
            cellClass: 'hidden',
        },
        {
            key: 'ui_theme',
            header: 'Tema',
            render: (u) => <span className="capitalize text-muted-foreground">{u.ui_theme}</span>,
        },
        {
            key: 'enrollments_count',
            header: 'Kelas',
            render: (u) => (
                <span className="inline-flex h-6 min-w-6 items-center justify-center rounded-full bg-blue-100 px-2 text-xs font-semibold text-blue-700 dark:bg-blue-900/40 dark:text-blue-300">
                    {u.enrollments_count}
                </span>
            ),
        },
        {
            key: 'role',
            header: 'Role',
            render: (u) => {
                const cfg = ROLE_CONFIG[u.role] ?? ROLE_CONFIG.student;
                const RoleIcon = cfg.icon;
                return (
                    <span className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium ${cfg.badge}`}>
                        <RoleIcon className="h-3 w-3" />
                        {cfg.label}
                    </span>
                );
            },
        },
        {
            key: 'id',
            header: 'Aksi',
            sortable: false,
            render: (u) => (
                <div className="flex items-center gap-1.5">
                    <Link href={`/admin/users/${u.id}`}>
                        <button
                            type="button"
                            className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-100 text-blue-700 transition-colors hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-400"
                            title="Detail"
                        >
                            <Eye className="h-4 w-4" />
                        </button>
                    </Link>
                    <button
                        type="button"
                        className="flex h-8 w-8 items-center justify-center rounded-lg bg-amber-100 text-amber-700 transition-colors hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-400"
                        title="Edit"
                        onClick={() => openEditModal(u)}
                    >
                        <Pencil className="h-4 w-4" />
                    </button>
                    <button
                        type="button"
                        className="flex h-8 w-8 items-center justify-center rounded-lg bg-red-100 text-red-700 transition-colors hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400"
                        title="Hapus"
                        onClick={() => setSelectedUserForDelete(u)}
                    >
                        <Trash2 className="h-4 w-4" />
                    </button>
                </div>
            ),
        },
    ];

    const filters: TableFilter[] = [
        {
            key: 'role',
            label: 'Role',
            options: [
                { label: 'Siswa', value: 'student' },
                { label: 'Instruktur', value: 'instructor' },
                { label: 'Admin', value: 'admin' },
            ],
        },
    ];

    return (
        <>
            <Head title="Manajemen Pengguna" />

            <div className="flex flex-col gap-6 p-4 md:p-6">
                {/* Header */}
                <div className="relative overflow-hidden rounded-2xl border border-blue-100 bg-gradient-to-br from-blue-50 via-white to-indigo-50 p-5 shadow-sm dark:border-blue-800/30 dark:from-blue-950/40 dark:via-card dark:to-indigo-950/30">
                    <div className="relative z-10 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 bg-blue-100 dark:bg-blue-800/60">
                                <Users className="h-5 w-5 text-blue-600 dark:text-blue-300" />
                            </div>
                            <div>
                                <h1 className="text-xl font-bold text-blue-900 dark:text-blue-100">Manajemen Pengguna</h1>
                                <p className="text-sm text-blue-600 dark:text-blue-400">
                                    <span className="font-semibold">{users.length}</span> pengguna terdaftar
                                </p>
                            </div>
                        </div>
                    </div>
                    <div className="absolute -right-4 -top-4 h-20 w-20 rounded-full bg-blue-100/40 dark:bg-blue-700/10" />
                    <div className="absolute right-10 -bottom-6 h-28 w-28 rounded-full bg-indigo-100/30 dark:bg-indigo-700/10" />
                </div>

                <DataTable
                    data={users}
                    columns={columns}
                    filters={filters}
                    searchPlaceholder="Cari nama atau email..."
                    defaultPageSize={25}
                    emptyIcon={Users}
                    emptyMessage="Tidak ada pengguna"
                    emptyDescription="Belum ada pengguna yang terdaftar."
                />
            </div>

            {/* Edit User Modal */}
            <Dialog open={!!selectedUserForEdit} onOpenChange={(v) => { if (!v) setSelectedUserForEdit(null); }}>
                <DialogContent className="max-w-md">
                    <DialogHeader>
                        <DialogTitle>Edit Pengguna</DialogTitle>
                        <DialogDescription>
                            Ubah informasi lengkap dari profil pengguna ini.
                        </DialogDescription>
                    </DialogHeader>
                    <form onSubmit={submitEdit} className="mt-3 flex flex-col gap-4">
                        <div className="grid grid-cols-2 gap-3">
                            <div className="grid gap-1.5 col-span-2 sm:col-span-1">
                                <Label htmlFor="edit-name">Nama *</Label>
                                <Input
                                    id="edit-name"
                                    required
                                    value={editForm.data.name}
                                    onChange={(e) => editForm.setData('name', e.target.value)}
                                />
                            </div>
                            <div className="grid gap-1.5 col-span-2 sm:col-span-1">
                                <Label htmlFor="edit-email">Email *</Label>
                                <Input
                                    id="edit-email"
                                    type="email"
                                    required
                                    value={editForm.data.email}
                                    onChange={(e) => editForm.setData('email', e.target.value)}
                                />
                            </div>
                        </div>
                        <div className="grid grid-cols-2 gap-3">
                            <div className="grid gap-1.5 col-span-2 sm:col-span-1">
                                <Label htmlFor="edit-role">Peran (Role) *</Label>
                                <select
                                    id="edit-role"
                                    value={editForm.data.role}
                                    onChange={(e) => editForm.setData('role', e.target.value as any)}
                                    className="rounded-md border border-zinc-200 bg-background px-3 h-9 text-sm focus:border-blue-400 focus:outline-none dark:border-zinc-800"
                                >
                                    <option value="student">Siswa</option>
                                    <option value="instructor">Instruktur</option>
                                    <option value="admin">Admin</option>
                                </select>
                            </div>
                            <div className="grid gap-1.5 col-span-2 sm:col-span-1">
                                <Label htmlFor="edit-phone">Nomor Telepon</Label>
                                <Input
                                    id="edit-phone"
                                    value={editForm.data.phone}
                                    onChange={(e) => editForm.setData('phone', e.target.value)}
                                    placeholder="Mis: 0812345678"
                                />
                            </div>
                        </div>
                        <div className="grid grid-cols-2 gap-3">
                            <div className="grid gap-1.5 col-span-2 sm:col-span-1">
                                <Label htmlFor="edit-gender">Jenis Kelamin</Label>
                                <select
                                    id="edit-gender"
                                    value={editForm.data.gender}
                                    onChange={(e) => editForm.setData('gender', e.target.value as any)}
                                    className="rounded-md border border-zinc-200 bg-background px-3 h-9 text-sm focus:border-blue-400 focus:outline-none dark:border-zinc-800"
                                >
                                    <option value="">Pilih...</option>
                                    <option value="male">Laki-laki</option>
                                    <option value="female">Perempuan</option>
                                </select>
                            </div>
                            <div className="grid gap-1.5 col-span-2 sm:col-span-1">
                                <Label htmlFor="edit-birthdate">Tanggal Lahir</Label>
                                <Input
                                    id="edit-birthdate"
                                    type="date"
                                    value={editForm.data.birth_date}
                                    onChange={(e) => editForm.setData('birth_date', e.target.value)}
                                />
                            </div>
                        </div>
                        <div className="grid gap-1.5">
                            <Label htmlFor="edit-bio">Biografi</Label>
                            <textarea
                                id="edit-bio"
                                value={editForm.data.bio}
                                onChange={(e) => editForm.setData('bio', e.target.value)}
                                rows={3}
                                placeholder="Biografi singkat pengguna..."
                                className="rounded-md border border-zinc-200 bg-background px-3 py-2 text-sm focus:border-blue-400 focus:outline-none dark:border-zinc-800"
                            />
                        </div>
                        <DialogFooter className="gap-2">
                            <Button type="button" variant="outline" onClick={() => setSelectedUserForEdit(null)}>
                                Batal
                            </Button>
                            <Button type="submit" disabled={editForm.processing}>
                                Simpan
                            </Button>
                        </DialogFooter>
                    </form>
                </DialogContent>
            </Dialog>

            {/* Delete User Modal */}
            <DeleteConfirmModal
                open={!!selectedUserForDelete}
                onClose={() => setSelectedUserForDelete(null)}
                onConfirm={confirmDeleteUser}
                title={`Hapus pengguna "${selectedUserForDelete?.name}"?`}
                description="Tindakan ini tidak dapat dibatalkan dan akan menghapus seluruh data pendaftaran kelas serta progres belajarnya."
            />
        </>
    );
}

AdminUsersIndex.layout = (page: React.ReactNode) => <AppLayout breadcrumbs={breadcrumbs}>{page}</AppLayout>;