"use client";

import { useEffect, useState } from "react";

type User = { id: string; name: string; email: string; role: string; status: string; tenant_name?: string }; type Tenant = { id: string; name: string };
const roles: Record<string, string> = { capital_admin: "Administrador Capital", capital_operator: "Operador Capital", analyst: "Analista", client_admin: "Administrador cliente", client_manager: "Gestor cliente", integration_user: "Integração" };

export default function AdminPage() {
  const [users, setUsers] = useState<User[]>([]);
  const [tenants, setTenants] = useState<Tenant[]>([]); const [form, setForm] = useState({ name: "", email: "", password: "", role: "analyst", tenantId: "" });
  const [message, setMessage] = useState("");
  const loadUsers = async () => { const response = await fetch("/api/admin/users"); const body = await response.json(); setUsers(body.users ?? []); setTenants(body.tenants ?? []); };
  useEffect(() => { void loadUsers(); }, []);
  async function createUser(event: React.FormEvent<HTMLFormElement>) { event.preventDefault(); setMessage("Criando..."); const response = await fetch("/api/admin/users", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(form) }); const body = await response.json(); setMessage(response.ok ? "Usuário criado." : body.error); if (response.ok) { setForm({ name: "", email: "", password: "", role: "analyst", tenantId: "" }); await loadUsers(); } }
  return <main className="admin-hub"><header><a href="/">← Dashboard Capital</a><div><a href="/admin/clientes">Clientes</a><a href="/admin/acessos">Permissões do cliente</a><a href="/admin/releases">Versão e implantações</a><a href="/perfil">Meu perfil</a></div></header><p className="eyebrow">ADMINISTRAÇÃO</p><h1>Usuários e acessos</h1><p className="admin-lead">Escolha sempre a empresa vinculada. A opção Capital Vistorias identifica os usuários internos.</p><div className="admin-hub-grid"><section><h2>Novo usuário</h2><form onSubmit={createUser}><label>Nome<input value={form.name} onChange={(event) => setForm({ ...form, name: event.target.value })} required /></label><label>E-mail<input type="email" value={form.email} onChange={(event) => setForm({ ...form, email: event.target.value })} required /></label><label>Senha inicial<input type="password" value={form.password} onChange={(event) => setForm({ ...form, password: event.target.value })} required /></label><label>Tipo de acesso<select value={form.role} onChange={(event) => setForm({ ...form, role: event.target.value })}>{Object.entries(roles).map(([value, label]) => <option key={value} value={value}>{label}</option>)}</select></label><label>Empresa vinculada<select value={form.tenantId} onChange={(event) => setForm({ ...form, tenantId: event.target.value })} required={form.role.startsWith("client_")}><option value="">Capital Vistorias (padrão)</option>{tenants.map((tenant) => <option key={tenant.id} value={tenant.id}>{tenant.name}</option>)}</select></label><small>{message}</small><button>Criar usuário</button></form></section><section className="admin-users"><h2>Usuários cadastrados</h2>{users.map((user) => <article key={user.id}><span>{user.name.split(" ").map((part) => part[0]).slice(0, 2).join("")}</span><div><b>{user.name}</b><small>{user.email} · {roles[user.role] ?? user.role}{user.tenant_name ? ` · ${user.tenant_name}` : ""}</small></div><em>{user.status === "active" ? "Ativo" : "Inativo"}</em></article>)}</section></div></main>;
}