import BulkBar from '@/Components/admin/BulkBar';
import ConfirmDialog from '@/Components/admin/ConfirmDialog';
import DataTable, { Col, Pager } from '@/Components/admin/DataTable';
import { SearchInput, selectClass } from '@/Components/admin/fields';
import { PageHeader, Tabs } from '@/Components/admin/primitives';
import { useAdminList } from '@/Components/admin/useAdminList';
import Avatar from '@/Components/shared/Avatar';
import EmptyState from '@/Components/shared/EmptyState';
import { Badge } from '@/Components/ui/badge';
import { Button } from '@/Components/ui/button';
import AdminLayout from '@/Layouts/AdminLayout';
import { LPage } from '@/types/admin';
import { Head, router } from '@inertiajs/react';
import { BadgeCheck, RotateCcw, UserX, Users } from 'lucide-react';
import { useState } from 'react';

type Row = { id: number; name: string; username: string | null; email: string; role: string; avatar: string | null; verified: boolean; suspended: boolean; reviews_count: number; ratings_count: number; joined: string; is_me: boolean };
type Props = { users: LPage<Row>; filters: { q?: string; role?: string; trashed?: string }; counts: { all: number; admins: number; suspended: number } };

export default function Index({ users, filters, counts }: Props) {
    const { q, setQ } = useAdminList('admin.users.index', filters);
    const [selected, setSelected] = useState<number[]>([]);
    const [confirm, setConfirm] = useState<{ ids: number[] } | null>(null);
    const [busy, setBusy] = useState(false);
    const suspendedView = filters.trashed === 'only';

    const patch = (id: number, data: Record<string, string | number>) => router.patch(route('admin.users.update', id), data, { preserveScroll: true });
    const bulk = (action: string, ids = selected, done?: () => void) => router.post(route('admin.users.bulk'), { action, ids }, { preserveScroll: true, onStart: () => setBusy(true), onSuccess: () => { setSelected([]); done?.(); }, onFinish: () => setBusy(false) });
    const qs = filters.q ? { q: filters.q } : {};

    const columns: Col<Row>[] = [
        { key: 'user', header: 'User', cell: (u) => (
            <div className="flex items-center gap-3">
                <Avatar name={u.name} src={u.avatar} className="size-9" />
                <div className="min-w-0">
                    <p className="flex items-center gap-1.5 font-medium">{u.name}{u.is_me && <Badge variant="outline">You</Badge>}</p>
                    <p className="text-caption truncate">@{u.username} · {u.email}</p>
                </div>
            </div>
        ) },
        { key: 'role', header: 'Role', cell: (u) => (
            <select aria-label={`Role for ${u.name}`} value={u.role} disabled={u.is_me || u.suspended} onChange={(e) => patch(u.id, { role: e.target.value })} className={`${selectClass} !h-8 !w-28 capitalize disabled:opacity-60`}>
                <option value="user">User</option><option value="admin">Admin</option>
            </select>
        ) },
        { key: 'verified', header: 'Email', cell: (u) => (u.verified ? <Badge variant="success"><BadgeCheck className="size-3" />Verified</Badge> : <button onClick={() => patch(u.id, { verified: 1 })} className="text-xs text-muted-foreground underline-offset-4 hover:text-foreground hover:underline">Unverified · verify</button>) },
        { key: 'activity', header: 'Activity', className: 'whitespace-nowrap text-muted-foreground tabular-nums', cell: (u) => `${u.ratings_count} ratings · ${u.reviews_count} reviews` },
        { key: 'joined', header: 'Joined', className: 'whitespace-nowrap text-muted-foreground', cell: (u) => u.joined },
        { key: 'act', header: '', className: 'w-28 text-right', cell: (u) => u.is_me ? null : u.suspended
            ? <Button size="sm" variant="secondary" onClick={() => bulk('restore', [u.id])}><RotateCcw />Restore</Button>
            : <Button size="sm" variant="ghost" className="text-muted-foreground hover:text-destructive" onClick={() => setConfirm({ ids: [u.id] })}><UserX />Suspend</Button> },
    ];

    return (
        <AdminLayout>
            <Head title="Users · Admin" />
            <PageHeader title="Users" description={`${counts.all} accounts`} />
            <Tabs items={[
                { label: 'All', count: counts.all, active: !filters.role && !suspendedView, href: route('admin.users.index', qs) },
                { label: 'Admins', count: counts.admins, active: filters.role === 'admin', href: route('admin.users.index', { role: 'admin', ...qs }) },
                { label: 'Suspended', count: counts.suspended, active: suspendedView, href: route('admin.users.index', { trashed: 'only', ...qs }) },
            ]} />
            <div className="mb-4"><SearchInput value={q} onChange={setQ} placeholder="Search name, username or email…" /></div>

            <DataTable rows={users.data} columns={columns} selected={selected} onSelect={setSelected} rowClass={(u) => (u.suspended ? 'opacity-60' : undefined)} empty={<EmptyState icon={Users} title="No users found" description="Try a different search or filter." />} />
            <Pager page={users} />

            <BulkBar count={selected.length} onClear={() => setSelected([])} actions={suspendedView
                ? [{ label: 'Restore', icon: RotateCcw, run: () => bulk('restore') }]
                : [{ label: 'Suspend', icon: UserX, danger: true, run: () => setConfirm({ ids: selected }) }]} />
            <ConfirmDialog open={!!confirm} danger loading={busy} title={`Suspend ${confirm?.ids.length} ${confirm?.ids.length === 1 ? 'user' : 'users'}?`} description="They can no longer log in. Their ratings and reviews stay. You can restore them any time." confirmLabel="Suspend" onClose={() => setConfirm(null)} onConfirm={() => bulk('suspend', confirm!.ids, () => setConfirm(null))} />
        </AdminLayout>
    );
}