'use client';

import { useCallback, useEffect, useState } from 'react';
import { DashboardLayout } from '@/components/layout/DashboardLayout';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { api } from '@/lib/api';
import {
  AdminEmpty,
  AdminError,
  AdminLoading,
  AdminTable,
  AdminTd,
  AdminTh,
  PaginationBar,
  PaginationMeta,
  StatusBadge,
  formatDate,
} from '@/components/admin/admin-ui';

interface UserRow {
  id: string;
  email: string | null;
  phone: string | null;
  firstName: string;
  lastName: string;
  role: string;
  status: string;
  createdAt: string;
  lastLoginAt: string | null;
}

export default function AdminUsersPage() {
  const [users, setUsers] = useState<UserRow[]>([]);
  const [meta, setMeta] = useState<PaginationMeta>({ page: 1, limit: 20, total: 0, totalPages: 0 });
  const [search, setSearch] = useState('');
  const [role, setRole] = useState('');
  const [status, setStatus] = useState('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [updating, setUpdating] = useState<string | null>(null);

  const load = useCallback(async (page = 1) => {
    setLoading(true);
    setError('');
    try {
      const params = new URLSearchParams({ page: String(page), limit: '20' });
      if (search) params.set('search', search);
      if (role) params.set('role', role);
      if (status) params.set('status', status);
      const res = await api<{ data: UserRow[]; meta: PaginationMeta }>(`/users?${params}`);
      setUsers(res.data);
      setMeta(res.meta!);
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Failed to load users');
    } finally {
      setLoading(false);
    }
  }, [search, role, status]);

  useEffect(() => {
    load(1);
  }, [load]);

  async function toggleStatus(user: UserRow) {
    const next = user.status === 'ACTIVE' ? 'SUSPENDED' : 'ACTIVE';
    setUpdating(user.id);
    try {
      await api(`/users/${user.id}/status`, {
        method: 'PATCH',
        body: JSON.stringify({ status: next }),
      });
      setUsers((prev) => prev.map((u) => (u.id === user.id ? { ...u, status: next } : u)));
    } catch (e) {
      alert(e instanceof Error ? e.message : 'Update failed');
    } finally {
      setUpdating(null);
    }
  }

  return (
    <DashboardLayout role="admin" title="Users">
      <div className="flex flex-col sm:flex-row gap-3 mb-6">
        <Input
          placeholder="Search name, email, phone…"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="flex-1"
        />
        <select
          value={role}
          onChange={(e) => setRole(e.target.value)}
          className="search-input h-11 px-3 rounded-md border border-border"
        >
          <option value="">All roles</option>
          <option value="CUSTOMER">Customer</option>
          <option value="WORKER">Worker</option>
          <option value="ADMIN">Admin</option>
        </select>
        <select
          value={status}
          onChange={(e) => setStatus(e.target.value)}
          className="search-input h-11 px-3 rounded-md border border-border"
        >
          <option value="">All statuses</option>
          <option value="ACTIVE">Active</option>
          <option value="SUSPENDED">Suspended</option>
        </select>
        <Button onClick={() => load(1)}>Search</Button>
      </div>

      {loading && <AdminLoading />}
      {!loading && error && <AdminError message={error} />}
      {!loading && !error && users.length === 0 && <AdminEmpty message="No users found." />}
      {!loading && !error && users.length > 0 && (
        <>
          <AdminTable>
            <thead>
              <tr>
                <AdminTh>Name</AdminTh>
                <AdminTh>Contact</AdminTh>
                <AdminTh>Role</AdminTh>
                <AdminTh>Status</AdminTh>
                <AdminTh>Joined</AdminTh>
                <AdminTh>Actions</AdminTh>
              </tr>
            </thead>
            <tbody>
              {users.map((user) => (
                <tr key={user.id} className="hover:bg-slate-50/50">
                  <AdminTd>
                    <p className="font-medium text-slate-900">
                      {user.firstName} {user.lastName}
                    </p>
                  </AdminTd>
                  <AdminTd>
                    <p className="text-slate-700">{user.email || '—'}</p>
                    <p className="text-xs text-muted">{user.phone || '—'}</p>
                  </AdminTd>
                  <AdminTd>
                    <StatusBadge status={user.role} />
                  </AdminTd>
                  <AdminTd>
                    <StatusBadge status={user.status} />
                  </AdminTd>
                  <AdminTd>{formatDate(user.createdAt)}</AdminTd>
                  <AdminTd>
                    {user.role !== 'ADMIN' && (
                      <Button
                        size="sm"
                        variant={user.status === 'ACTIVE' ? 'outline' : 'accent'}
                        disabled={updating === user.id}
                        onClick={() => toggleStatus(user)}
                      >
                        {user.status === 'ACTIVE' ? 'Suspend' : 'Activate'}
                      </Button>
                    )}
                  </AdminTd>
                </tr>
              ))}
            </tbody>
          </AdminTable>
          <PaginationBar meta={meta} onPageChange={load} />
        </>
      )}
    </DashboardLayout>
  );
}