import { Head, router } from '@inertiajs/react';
import { Shield, UserRound } from 'lucide-react';
import { AdminSurface, AdminSurfaceBar } from '@/components/admin-surface';
import { TablePagination } from '@/components/table-pagination';
import type { PaginationMeta } from '@/components/table-pagination';
import { TableSearch } from '@/components/table-search';
import { Button } from '@/components/ui/button';
import AdminLayout from '@/layouts/admin-layout';
import { useT } from '@/lib/i18n';
import { relativeTime } from '@/lib/relative-time';
import { dashboard as adminDashboard } from '@/routes/admin';
import { start as adminImpersonateStart } from '@/routes/admin/impersonate';
import {
    index as adminUsersIndex,
    updateRole as adminUsersUpdateRole,
} from '@/routes/admin/users';

type UserRow = {
    id: number;
    name: string;
    email: string;
    role: 'customer' | 'super_admin';
    workspaces_count: number;
    owned_count: number;
    created_at: string | null;
};

type Props = {
    users: UserRow[];
    pagination: PaginationMeta;
    filters: { q: string };
};

const USERS_ONLY = ['users', 'pagination', 'filters'];

export default function AdminUsers({ users, pagination, filters }: Props) {
    const { t } = useT();

    const promote = (id: number, to: 'customer' | 'super_admin') => {
        router.patch(
            adminUsersUpdateRole.url(id),
            { role: to },
            { preserveScroll: true },
        );
    };

    return (
        <AdminLayout
            breadcrumbs={[
                { title: t('Dashboard'), href: adminDashboard() },
                { title: t('Users'), href: adminUsersIndex() },
            ]}
        >
            <Head title={t('Users · Admin')} />
            <AdminSurface>
                <AdminSurfaceBar>
                    <span className="inline-flex h-7 items-center rounded-md border bg-card px-2.5 text-xs font-normal text-foreground">
                        {t('All users')}
                    </span>
                    <span className="inline-flex h-7 items-center rounded-md border bg-card px-2.5 text-xs font-normal text-muted-foreground">
                        {t(':count users', {
                            count: pagination.total.toLocaleString(),
                        })}
                    </span>
                    <div className="ms-auto w-full sm:w-auto">
                        <TableSearch
                            placeholder={t('Search by name or email...')}
                            initialValue={filters.q}
                            only={USERS_ONLY}
                        />
                    </div>
                </AdminSurfaceBar>

                <div className="min-h-0 flex-1 overflow-auto">
                    <table className="w-full min-w-[1080px] border-separate border-spacing-0 text-start text-sm">
                        <thead className="sticky top-0 z-10 bg-card text-xs font-medium text-muted-foreground">
                            <tr>
                                <th className="w-9 border-b px-3 py-2">
                                    <input
                                        type="checkbox"
                                        aria-label={t('Select all users')}
                                        disabled
                                        className="size-3.5 rounded border-input"
                                    />
                                </th>
                                <th className="border-e border-b px-3 py-2">
                                    {t('User')}
                                </th>
                                <th className="border-e border-b px-3 py-2">
                                    {t('Role')}
                                </th>
                                <th className="border-e border-b px-3 py-2">
                                    {t('Workspace access')}
                                </th>
                                <th className="border-e border-b px-3 py-2">
                                    {t('Joined')}
                                </th>
                                <th className="border-b px-3 py-2 text-end">
                                    {t('Actions')}
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            {users.length === 0 ? (
                                <tr>
                                    <td
                                        colSpan={6}
                                        className="h-72 border-b px-4 text-center"
                                    >
                                        <div className="mx-auto flex max-w-sm flex-col items-center gap-2 text-muted-foreground">
                                            <UserRound className="size-8" />
                                            <p className="text-sm font-medium text-foreground">
                                                {t('No matching users')}
                                            </p>
                                            <p className="text-xs">
                                                {t(
                                                    'No users match the current admin search.',
                                                )}
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                            ) : (
                                users.map((user) => (
                                    <tr
                                        key={user.id}
                                        className="group hover:bg-muted/35"
                                    >
                                        <td className="border-b px-3 py-2">
                                            <input
                                                type="checkbox"
                                                aria-label={t('Select :email', {
                                                    email: user.email,
                                                })}
                                                disabled
                                                className="size-3.5 rounded border-input"
                                            />
                                        </td>
                                        <td className="border-e border-b px-3 py-2">
                                            <div className="flex min-w-0 items-center gap-2 text-foreground">
                                                <span className="flex size-5 shrink-0 items-center justify-center rounded bg-muted text-muted-foreground">
                                                    <UserRound className="size-3.5" />
                                                </span>
                                                <div className="min-w-0">
                                                    <p className="truncate font-medium">
                                                        {user.name}
                                                    </p>
                                                    <p className="truncate text-xs text-muted-foreground">
                                                        {user.email}
                                                    </p>
                                                </div>
                                            </div>
                                        </td>
                                        <td className="border-e border-b px-3 py-2">
                                            <span
                                                className={`inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-medium ${
                                                    user.role === 'super_admin'
                                                        ? 'border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-500/30 dark:bg-rose-500/10 dark:text-rose-300'
                                                        : 'border-border bg-muted/40 text-muted-foreground'
                                                }`}
                                            >
                                                {user.role === 'super_admin' ? (
                                                    <Shield className="size-3.5" />
                                                ) : null}
                                                {user.role === 'super_admin'
                                                    ? t('super admin')
                                                    : t('customer')}
                                            </span>
                                        </td>
                                        <td className="border-e border-b px-3 py-2 text-muted-foreground">
                                            <p>
                                                {user.workspaces_count === 1
                                                    ? t(
                                                          ':count total workspace',
                                                          {
                                                              count: user.workspaces_count.toLocaleString(),
                                                          },
                                                      )
                                                    : t(
                                                          ':count total workspaces',
                                                          {
                                                              count: user.workspaces_count.toLocaleString(),
                                                          },
                                                      )}
                                            </p>
                                            <p className="text-xs">
                                                {t(':count owned', {
                                                    count: user.owned_count.toLocaleString(),
                                                })}
                                            </p>
                                        </td>
                                        <td className="border-e border-b px-3 py-2 text-muted-foreground">
                                            {relativeTime(user.created_at, '—')}
                                        </td>
                                        <td className="border-b px-3 py-2">
                                            <div className="flex justify-end gap-2">
                                                {user.role === 'customer' ? (
                                                    <>
                                                        <Button
                                                            size="sm"
                                                            variant="outline"
                                                            onClick={() =>
                                                                router.post(
                                                                    adminImpersonateStart.url(
                                                                        user.id,
                                                                    ),
                                                                )
                                                            }
                                                        >
                                                            {t('Impersonate')}
                                                        </Button>
                                                        <Button
                                                            size="sm"
                                                            variant="ghost"
                                                            onClick={() => {
                                                                if (
                                                                    confirm(
                                                                        t(
                                                                            'Promote :email to super_admin?',
                                                                            {
                                                                                email: user.email,
                                                                            },
                                                                        ),
                                                                    )
                                                                ) {
                                                                    promote(
                                                                        user.id,
                                                                        'super_admin',
                                                                    );
                                                                }
                                                            }}
                                                        >
                                                            {t('Promote')}
                                                        </Button>
                                                    </>
                                                ) : (
                                                    <Button
                                                        size="sm"
                                                        variant="ghost"
                                                        onClick={() => {
                                                            if (
                                                                confirm(
                                                                    t(
                                                                        'Demote :email to customer?',
                                                                        {
                                                                            email: user.email,
                                                                        },
                                                                    ),
                                                                )
                                                            ) {
                                                                promote(
                                                                    user.id,
                                                                    'customer',
                                                                );
                                                            }
                                                        }}
                                                    >
                                                        {t('Demote')}
                                                    </Button>
                                                )}
                                            </div>
                                        </td>
                                    </tr>
                                ))
                            )}
                        </tbody>
                    </table>
                </div>

                <TablePagination pagination={pagination} only={USERS_ONLY} />
            </AdminSurface>
        </AdminLayout>
    );
}
