'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { Plus, Search, Shield, ChevronRight, Filter, Settings2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { PermissionGuard } from '@/features/auth/guards';
import { PERMISSIONS } from '@/constants/permissions';
import { DataTable, Column } from '@/components/ui/data-table';
import { TableSkeleton } from '@/components/ui/tableSkeleton';
import { useUsersWithRoles } from '@/services/roles/queries';
import { UserRecord } from '@/services/users/types';
import UserRoleManagementDrawer from './_components/UserRoleManagementDrawer';

export default function UsersRoleManagementPage() {
  const [search, setSearch] = useState('');
  const [roleFilter, setRoleFilter] = useState('');
  const [page, setPage] = useState(1);

  // Drawer State
  const [selectedUserForDrawer, setSelectedUserForDrawer] = useState<UserRecord | null>(null);

  const { data, isLoading } = useUsersWithRoles(page, search, roleFilter);

  const columns: Column<UserRecord>[] = [
    {
      header: 'System Username / ID',
      className: 'w-44 font-mono font-bold text-primary tracking-tight text-xs',
      cell: (user) => (
        <div className="flex flex-col">
          <span className="font-mono text-xs text-primary font-bold">
            {user.username || user.uuid.slice(0, 8).toUpperCase()}
          </span>
          <span className="text-[10px] text-muted-foreground/60 font-mono">
            ID: {user.id.slice(0, 8)}
          </span>
        </div>
      ),
    },
    {
      header: 'User Identity & Contact',
      className: 'min-w-[220px]',
      cell: (user) => (
        <div className="flex items-center gap-2.5 text-left">
          <div className="h-7 w-7 rounded-lg bg-primary/10 border border-primary/20 flex items-center justify-center text-xs font-bold text-primary shrink-0">
            {user.firstName?.[0] || 'U'}
            {user.lastName?.[0] || ''}
          </div>
          <div className="flex flex-col">
            <span className="text-foreground font-semibold tracking-tight text-xs">
              {user.firstName} {user.lastName}
            </span>
            <span className="text-[10px] text-muted-foreground/70 font-medium">
              {user.email} {user.phone ? `• ${user.phone}` : ''}
            </span>
          </div>
        </div>
      ),
    },
    {
      header: 'Assigned Role Tier',
      className: 'w-44',
      cell: (user) => (
        <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-muted/40 border border-border/40 text-[10px] font-bold tracking-wider text-foreground uppercase">
          <Shield className="h-3 w-3 text-primary" />
          <span>{user.role.replace(/_/g, ' ')}</span>
        </span>
      ),
    },
    {
      header: 'Account Status',
      className: 'w-28',
      cell: (user) => (
        <span
          className={`inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-bold rounded-full ${
            user.isActive
              ? 'bg-emerald-500/10 text-emerald-500 border border-emerald-500/20'
              : 'bg-rose-500/10 text-rose-500 border border-rose-500/20'
          }`}
        >
          <span
            className={`h-1.5 w-1.5 rounded-full ${
              user.isActive ? 'bg-emerald-500' : 'bg-rose-500'
            }`}
          />
          <span>{user.isActive ? 'Active' : 'Inactive'}</span>
        </span>
      ),
    },
    {
      header: 'Actions',
      className: 'w-36 text-right',
      cell: (user) => (
        <div className="flex items-center justify-end gap-1">
          <Button
            variant="outline"
            size="sm"
            onClick={() => setSelectedUserForDrawer(user)}
            className="h-7 px-2 text-[10px] font-bold gap-1 rounded-lg hover:bg-primary/10 hover:text-primary cursor-pointer"
          >
            <Settings2 className="h-3 w-3" />
            <span>Manage Role</span>
          </Button>
          {/* <Link href={`/superadmin/users/${user.id}`}>
            <Button variant="ghost" size="sm" className="h-7 px-1.5 text-muted-foreground hover:text-foreground">
              <ChevronRight className="h-3 w-3" />
            </Button>
          </Link> */}
        </div>
      ),
    },
  ];

  if (isLoading) return <TableSkeleton />;

  return (
    <div className="space-y-4 max-w-7xl mx-auto animate-in fade-in duration-300 select-none">
      {/* View Header */}
      <div className="flex items-center justify-between border-b border-border/10 pb-4">
        <div className="space-y-0.5">
          <h1 className="text-sm font-black tracking-widest text-foreground uppercase">
            System User Accounts
          </h1>
          <p className="text-[11px] font-medium text-muted-foreground/70">
            Manage provisioned users, monitor KYC verifications, and enforce RBAC access.
          </p>
        </div>

        <PermissionGuard permission={PERMISSIONS.ROLES_CREATE}>
          <Link href="/roles/new">
            <Button className="h-8 rounded-md px-3 text-[11px] font-bold tracking-wider uppercase shadow-sm gap-1.5 transition-all bg-foreground text-background hover:bg-foreground/90 cursor-pointer">
              <Plus className="h-3.5 w-3.5 stroke-[2.5]" /> Provision New User
            </Button>
          </Link>
        </PermissionGuard>
      </div>

      {/* Filter Bar */}
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div className="flex items-center max-w-xs w-full relative group">
          <Search className="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-muted-foreground/60 transition-colors group-focus-within:text-primary" />
          <input
            type="text"
            placeholder="Search by name, email, or system code..."
            value={search}
            onChange={(e) => {
              setSearch(e.target.value);
              setPage(1);
            }}
            className="w-full text-xs font-medium pl-8 pr-3 py-2 border border-border/40 bg-surface rounded-lg text-foreground focus:outline-none focus:border-primary"
          />
        </div>

        <div className="flex items-center gap-2">
          <Filter className="h-3.5 w-3.5 text-muted-foreground/60" />
          <select
            value={roleFilter}
            onChange={(e) => {
              setRoleFilter(e.target.value);
              setPage(1);
            }}
            className="text-xs font-medium px-3 py-2 border border-border/40 bg-surface rounded-lg text-foreground focus:outline-none focus:border-primary cursor-pointer"
          >
            <option value="">All Role Tiers</option>
            <option value="ADMIN">System Admin</option>
            <option value="HR">HR Department</option>
            <option value="BDM">BDM Manager</option>
            <option value="KYC_OFFICER">KYC Officer</option>
          </select>
        </div>
      </div>

      {/* Data Table */}
      <DataTable
        data={data?.items}
        columns={columns}
        emptyMessage="No system users found matching current filters."
        pagination={
          data
            ? {
                page: data.page,
                pages: data.pages,
                total: data.total,
                onPageChange: setPage,
              }
            : undefined
        }
      />

      {/* Role Management Drawer */}
      <UserRoleManagementDrawer
        user={selectedUserForDrawer}
        onClose={() => setSelectedUserForDrawer(null)}
      />
    </div>
  );
}