'use client';

import { useEffect, useState } from 'react';
import api from '@/lib/api';
import EditUserModal from '@/components/edit-user-modal';
import ResetPasswordModal from '@/components/reset-password-modal';

interface User {
  id: string;
  email: string;
  firstName: string;
  lastName: string;
  isActive: boolean;
  createdAt: string;
  tenant: { id: string; name: string; slug: string } | null;
  roles: { role: string }[];
  tenantRoles: { tenantRole: { name: string; slug: string } }[];
}

interface TenantOption {
  id: string;
  name: string;
  slug: string;
}

export default function UsersPage() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [tenantId, setTenantId] = useState('');
  const [tenants, setTenants] = useState<TenantOption[]>([]);
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(0);
  const limit = 20;

  const [editingUser, setEditingUser] = useState<User | null>(null);
  const [resettingUser, setResettingUser] = useState<User | null>(null);

  useEffect(() => { loadTenants(); }, []);
  useEffect(() => { loadUsers(); }, [search, tenantId, page]);

  async function loadTenants() {
    try {
      const res = await api.get('/tenants?limit=100');
      setTenants(res.data.data.items || []);
    } catch {}
  }

  async function loadUsers() {
    setLoading(true);
    try {
      const params = new URLSearchParams({ page: String(page), limit: String(limit) });
      if (search) params.set('search', search);
      if (tenantId) params.set('tenantId', tenantId);
      const res = await api.get(`/users?${params}`);
      setUsers(res.data.data.items);
      setTotal(res.data.data.total);
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-xl font-semibold text-surface-900">Users</h2>
        <p className="text-sm text-surface-500">{total} total users across all tenants</p>
      </div>

      <div className="flex items-center gap-3 flex-wrap">
        <input
          type="text"
          placeholder="Search users..."
          value={search}
          onChange={(e) => { setSearch(e.target.value); setPage(1); }}
          className="px-3 py-2 border border-surface-300 rounded-lg text-sm flex-1 min-w-[200px] max-w-xs"
        />
        <select
          value={tenantId}
          onChange={(e) => { setTenantId(e.target.value); setPage(1); }}
          className="px-3 py-2 border border-surface-300 rounded-lg text-sm"
        >
          <option value="">All Tenants</option>
          {tenants.map((t) => (
            <option key={t.id} value={t.id}>{t.name}</option>
          ))}
        </select>
      </div>

      <div className="bg-white rounded-xl border border-surface-200">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-surface-200 bg-surface-50">
              <th className="text-left px-4 py-3 font-medium text-surface-600">Name</th>
              <th className="text-left px-4 py-3 font-medium text-surface-600">Email</th>
              <th className="text-left px-4 py-3 font-medium text-surface-600">Tenant</th>
              <th className="text-left px-4 py-3 font-medium text-surface-600">Roles</th>
              <th className="text-center px-4 py-3 font-medium text-surface-600">Status</th>
              <th className="text-center px-4 py-3 font-medium text-surface-600">Actions</th>
            </tr>
          </thead>
          <tbody>
            {loading ? (
              <tr><td colSpan={6} className="text-center py-8 text-surface-400">Loading...</td></tr>
            ) : users.length === 0 ? (
              <tr><td colSpan={6} className="text-center py-8 text-surface-400">No users found</td></tr>
            ) : (
              users.map((u) => (
                <tr key={u.id} className="border-b border-surface-100 hover:bg-surface-50">
                  <td className="px-4 py-3 font-medium">{u.firstName} {u.lastName}</td>
                  <td className="px-4 py-3 text-surface-500">{u.email}</td>
                  <td className="px-4 py-3 text-surface-500">{u.tenant?.name || '—'}</td>
                  <td className="px-4 py-3">
                    <div className="flex flex-wrap gap-1">
                      {u.roles.map((r, i) => (
                        <span key={i} className="text-xs px-1.5 py-0.5 bg-surface-100 rounded">{r.role}</span>
                      ))}
                      {u.tenantRoles.map((tr, i) => (
                        <span key={i} className="text-xs px-1.5 py-0.5 bg-primary-50 text-primary-700 rounded">
                          {tr.tenantRole.name}
                        </span>
                      ))}
                    </div>
                  </td>
                  <td className="px-4 py-3 text-center">
                    <span className={`inline-block px-2 py-0.5 rounded-full text-xs font-medium ${
                      u.isActive ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'
                    }`}>
                      {u.isActive ? 'Active' : 'Inactive'}
                    </span>
                  </td>
                  <td className="px-4 py-3">
                    <div className="flex items-center justify-center gap-1">
                      <button
                        onClick={() => setEditingUser(u)}
                        title="Edit user"
                        className="p-1.5 text-surface-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg"
                      >
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
                          <path d="M11.5 1.5l3 3L5 14H2v-3z" />
                        </svg>
                      </button>
                      <button
                        onClick={() => setResettingUser(u)}
                        title="Reset password"
                        className="p-1.5 text-surface-400 hover:text-orange-600 hover:bg-orange-50 rounded-lg"
                      >
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
                          <rect x="3" y="6" width="10" height="7" rx="1.5" />
                          <path d="M5 6V4.5a3 3 0 016 0V6" />
                          <circle cx="8" cy="9.5" r="1" />
                        </svg>
                      </button>
                    </div>
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>

      {/* Pagination */}
      {total > limit && (
        <div className="flex items-center justify-between text-sm text-surface-500">
          <span>Showing {(page - 1) * limit + 1}-{Math.min(page * limit, total)} of {total}</span>
          <div className="flex gap-2">
            <button
              onClick={() => setPage(page - 1)} disabled={page === 1}
              className="px-3 py-1.5 border border-surface-300 rounded-lg disabled:opacity-50"
            >Previous</button>
            <button
              onClick={() => setPage(page + 1)} disabled={page * limit >= total}
              className="px-3 py-1.5 border border-surface-300 rounded-lg disabled:opacity-50"
            >Next</button>
          </div>
        </div>
      )}

      {/* Modals */}
      {editingUser && (
        <EditUserModal
          user={editingUser}
          onClose={() => setEditingUser(null)}
          onSuccess={loadUsers}
        />
      )}
      {resettingUser && (
        <ResetPasswordModal
          user={resettingUser}
          onClose={() => setResettingUser(null)}
          onSuccess={loadUsers}
        />
      )}
    </div>
  );
}