"use client";

import { useEffect, useState } from "react";

type Company = { id: string; name: string; legal_name?: string | null; cnpj?: string | null; email?: string | null; phone?: string | null; postal_code?: string | null; address_street?: string | null; address_number?: string | null; address_complement?: string | null; address_district?: string | null; address_city?: string | null; address_state?: string | null; slug: string; client_can_view_photos: number; client_can_manual_review: number };
type User = { id: string; name: string; email: string; role: string };
type CompanyForm = { name: string; legalName: string; cnpj: string; email: string; phone: string; postalCode: string; addressStreet: string; addressNumber: string; addressComplement: string; addressDistrict: string; addressCity: string; addressState: string };
const emptyCompany: CompanyForm = { name: "", legalName: "", cnpj: "", email: "", phone: "", postalCode: "", addressStreet: "", addressNumber: "", addressComplement: "", addressDistrict: "", addressCity: "", addressState: "" };
const formFor = (client: Company): CompanyForm => ({ name: client.name, legalName: client.legal_name || "", cnpj: client.cnpj || "", email: client.email || "", phone: client.phone || "", postalCode: client.postal_code || "", addressStreet: client.address_street || "", addressNumber: client.address_number || "", addressComplement: client.address_complement || "", addressDistrict: client.address_district || "", addressCity: client.address_city || "", addressState: client.address_state || "" });

function CompanyFields({ value, onChange, create = false }: { value: CompanyForm; onChange: (field: keyof CompanyForm, value: string) => void; create?: boolean }) {
  return <div className="company-fields"><label>Nome exibido no sistema<input value={value.name} onChange={e => onChange("name", e.target.value)} required /></label>{create && <label>Identificador interno<input value={(value as CompanyForm & { slug?: string }).slug || ""} onChange={e => onChange("slug" as keyof CompanyForm, e.target.value)} placeholder="empresa-exemplo" /></label>}<label>Razão social<input value={value.legalName} onChange={e => onChange("legalName", e.target.value)} /></label><label>CNPJ<input value={value.cnpj} onChange={e => onChange("cnpj", e.target.value)} placeholder="00.000.000/0001-00" inputMode="numeric" /></label><label>E-mail corporativo<input type="email" value={value.email} onChange={e => onChange("email", e.target.value)} /></label><label>Telefone<input value={value.phone} onChange={e => onChange("phone", e.target.value)} inputMode="tel" /></label><label>CEP<input value={value.postalCode} onChange={e => onChange("postalCode", e.target.value)} inputMode="numeric" /></label><label className="company-wide">Logradouro<input value={value.addressStreet} onChange={e => onChange("addressStreet", e.target.value)} /></label><label>Número<input value={value.addressNumber} onChange={e => onChange("addressNumber", e.target.value)} /></label><label>Complemento<input value={value.addressComplement} onChange={e => onChange("addressComplement", e.target.value)} /></label><label>Bairro<input value={value.addressDistrict} onChange={e => onChange("addressDistrict", e.target.value)} /></label><label>Cidade<input value={value.addressCity} onChange={e => onChange("addressCity", e.target.value)} /></label><label>UF<input value={value.addressState} onChange={e => onChange("addressState", e.target.value.toUpperCase())} maxLength={2} /></label></div>;
}

export default function Clients() {
  const [clients, setClients] = useState<Company[]>([]); const [create, setCreate] = useState({ ...emptyCompany, slug: "", photos: true, manual: false, report: true }); const [message, setMessage] = useState("");
  const [selected, setSelected] = useState<Company | null>(null); const [edit, setEdit] = useState<CompanyForm>(emptyCompany); const [users, setUsers] = useState<User[]>([]); const [userForm, setUserForm] = useState({ name: "", email: "", password: "", role: "client_manager" }); const [manageMessage, setManageMessage] = useState(""); const [busy, setBusy] = useState(false);
  async function load() { const response = await fetch("/api/admin/clients"), body = await response.json(); setClients(body.clients || []); }
  useEffect(() => { void load(); }, []);
  const updateCreate = (field: string, value: string | boolean) => setCreate(current => ({ ...current, [field]: value })); const updateEdit = (field: keyof CompanyForm, value: string) => setEdit(current => ({ ...current, [field]: value }));
  async function saveCompany(event: React.FormEvent) { event.preventDefault(); setMessage("Salvando..."); const response = await fetch("/api/admin/clients", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(create) }); const body = await response.json(); setMessage(response.ok ? "Cliente cadastrado." : body.error); if (response.ok) { setCreate({ ...emptyCompany, slug: "", photos: true, manual: false, report: true }); await load(); } }
  async function manage(client: Company) { setSelected(client); setEdit(formFor(client)); setManageMessage("Carregando usuários..."); const response = await fetch(`/api/admin/users?tenantId=${encodeURIComponent(client.id)}`), body = await response.json(); setUsers(body.users || []); setManageMessage(""); }
  async function saveEdit(event: React.FormEvent) { event.preventDefault(); if (!selected) return; setBusy(true); setManageMessage(""); const response = await fetch(`/api/admin/clients/${selected.id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(edit) }); const body = await response.json(); setManageMessage(response.ok ? body.message : body.error || "Não foi possível atualizar."); if (response.ok) { const updated = { ...selected, ...edit, legal_name: edit.legalName, postal_code: edit.postalCode, address_street: edit.addressStreet, address_number: edit.addressNumber, address_complement: edit.addressComplement, address_district: edit.addressDistrict, address_city: edit.addressCity, address_state: edit.addressState }; setSelected(updated); await load(); } setBusy(false); }
  async function openPortal() { if (!selected) return; setBusy(true); const response = await fetch(`/api/admin/clients/${selected.id}/support`, { method: "POST" }), body = await response.json(); if (response.ok) window.location.assign(body.portalPath); else { setManageMessage(body.error || "Não foi possível abrir o portal."); setBusy(false); } }
  async function createUser(event: React.FormEvent) { event.preventDefault(); if (!selected) return; setBusy(true); const response = await fetch("/api/admin/users", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ ...userForm, tenantId: selected.id }) }), body = await response.json(); if (response.ok) { setUserForm({ name: "", email: "", password: "", role: "client_manager" }); await manage(selected); setManageMessage("Usuário criado e vinculado ao cliente."); } else setManageMessage(body.error || "Não foi possível criar o usuário."); setBusy(false); }
  async function resetPassword(user: User) { const password = window.prompt(`Nova senha para ${user.name} (mínimo de 8 caracteres):`); if (!password) return; setBusy(true); const response = await fetch("/api/admin/users", { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: user.id, password }) }), body = await response.json(); setManageMessage(response.ok ? `Senha de ${user.name} redefinida.` : body.error || "Não foi possível redefinir a senha."); setBusy(false); }
  return <main className="admin-hub"><header><a href="/">← Dashboard Capital</a><div><a href="/admin">Usuários</a><a href="/admin/acessos">Permissões</a></div></header><p className="eyebrow">CLIENTES</p><h1>Empresas contratantes</h1><p className="admin-lead">Mantenha o cadastro empresarial, usuários, permissões e suporte operacional de cada cliente.</p><div className="admin-hub-grid client-register-grid"><section><h2>Novo cliente</h2><form onSubmit={saveCompany}><CompanyFields value={create} onChange={updateCreate} create /><fieldset><legend>Acesso inicial</legend><label className="check"><input type="checkbox" checked={create.photos} onChange={e => updateCreate("photos", e.target.checked)} /> Pode ver fotos</label><label className="check"><input type="checkbox" checked={create.manual} onChange={e => updateCreate("manual", e.target.checked)} /> Pode fazer análise manual</label><label className="check"><input type="checkbox" checked={create.report} onChange={e => updateCreate("report", e.target.checked)} /> Pode baixar laudos</label></fieldset><small>{message}</small><button>Cadastrar cliente</button></form></section><section className="admin-users"><h2>Clientes cadastrados</h2>{clients.map(client => <article key={client.id}><span>{client.name.slice(0, 2).toUpperCase()}</span><div><b>{client.name}</b><small>{client.cnpj || client.slug} · {client.email || "Sem e-mail cadastrado"}</small></div><button className="client-view-link" onClick={() => manage(client)}>Gerenciar →</button></article>)}</section></div>{selected && <section className="client-management"><header><div><p className="eyebrow">GESTÃO DO CLIENTE</p><h2>{selected.name}</h2><small>{selected.cnpj || selected.slug}</small></div><button className="client-management-close" onClick={() => setSelected(null)}>Fechar ×</button></header><div className="client-management-actions"><button onClick={openPortal} disabled={busy}>Abrir portal em modo de suporte →</button><a href={`/admin/acessos?tenantId=${encodeURIComponent(selected.id)}`}>Configurar permissões</a></div><p className="client-management-help">O modo de suporte dura 1 hora, fica identificado no portal e não exige a senha do cliente.</p><div className="client-management-grid client-management-grid-wide"><form onSubmit={saveEdit}><h3>Dados da empresa</h3><CompanyFields value={edit} onChange={updateEdit} /><button disabled={busy}>Salvar dados da empresa</button></form><div className="client-users-stack"><form onSubmit={createUser}><h3>Adicionar usuário</h3><label>Nome<input value={userForm.name} onChange={e => setUserForm({ ...userForm, name: e.target.value })} required /></label><label>E-mail<input type="email" value={userForm.email} onChange={e => setUserForm({ ...userForm, email: e.target.value })} required /></label><label>Senha inicial<input type="password" minLength={8} value={userForm.password} onChange={e => setUserForm({ ...userForm, password: e.target.value })} required /></label><label>Tipo de usuário<select value={userForm.role} onChange={e => setUserForm({ ...userForm, role: e.target.value })}><option value="client_manager">Gestor do cliente</option><option value="client_admin">Administrador do cliente</option></select></label><button disabled={busy}>Criar usuário</button></form><section className="client-managed-users"><h3>Usuários vinculados</h3>{users.length ? users.map(user => <article key={user.id}><div><b>{user.name}</b><small>{user.email} · {user.role === "client_admin" ? "Administrador" : "Gestor"}</small></div><button onClick={() => resetPassword(user)} disabled={busy}>Redefinir senha</button></article>) : <p>Nenhum usuário vinculado ainda.</p>}</section></div></div>{manageMessage && <p className="client-management-message">{manageMessage}</p>}</section>}</main>;
}