// ===========================================================
// DEAD SAILOR · PROJECT DOCK · ADMIN VIEWS
// ===========================================================

const Da = () => window.DS_DATA;
var API = window.API;

// =========================================================
// ADMIN DASHBOARD
// =========================================================
function AdminDashboard({ navigate }){
  const [stats, setStats] = React.useState(null);
  const [adminProjs, setAdminProjs] = React.useState([]);
  const [briefings, setBriefings] = React.useState([]);
  const [clients, setClients] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    async function load() {
      setLoading(true);
      try {
        await DATA.refreshAll();

        // Stats reais do banco
        let realStats;
        try {
          realStats = await API.getStats();
        } catch (e) {
          console.warn('Stats indisponíveis:', e);
          realStats = { projectsActive: 0, briefingsPending: 0, approvalsPending: 0, revisionsOpen: 0, deliveriesWeek: 0, overdue: 0 };
        }

        // Projetos reais
        let realProjects = [];
        try {
          realProjects = await API.getAdminProjects();
        } catch (e) {
          console.warn('Projetos indisponíveis:', e);
        }

        // Briefings reais
        let realBriefings = [];
        try {
          realBriefings = await API.getBriefings();
        } catch (e) {
          console.warn('Briefings indisponíveis:', e);
        }

        // Clientes reais
        let realClients = [];
        try {
          realClients = await API.getClients();
        } catch (e) {
          console.warn('Clientes indisponíveis:', e);
        }

        setStats(realStats);
        setAdminProjs(realProjects);
        setBriefings(realBriefings);
        setClients(realClients);
      } catch (e) {
        console.error('Erro ao carregar dashboard:', e);
      } finally {
        setLoading(false);
      }
    }
    load();
  }, []);

  const s = stats || { projectsActive: 0, briefingsPending: 0, approvalsPending: 0, revisionsOpen: 0, deliveriesWeek: 0, overdue: 0 };

  // Descrições dinâmicas baseadas nos dados reais
  const overdueDesc = s.overdue > 0 ? `${s.overdue} projeto(s) com atraso` : 'Nenhum atraso';
  const briefingDesc = s.briefingsPending > 0 ? `${s.briefingsPending} aguardando análise` : 'Nenhum na fila';
  const approvalDesc = s.approvalsPending > 0 ? `${s.approvalsPending} aguardando ação do cliente` : 'Tudo aprovado';
  const projectsDesc = s.overdue > 0 ? `${String(s.overdue).padStart(2,'0')} acima do prazo` : 'Dentro do prazo';
  const revisionsDesc = s.revisionsOpen > 0 ? `${s.revisionsOpen} ajustes solicitados` : 'Nenhuma revisão';
  const deliveriesDesc = s.deliveriesWeek > 0 ? `${s.deliveriesWeek} entregas planejadas` : 'Nenhuma esta semana';

  // Ações prioritárias dinâmicas dos briefings e projetos reais
  const prioActions = [];
  if (briefings.length > 0) {
    briefings.filter(b => b.status === 'pending' || b.status === 'in-analysis').slice(0, 2).forEach(b => {
      prioActions.push({
        pin: 'signal',
        ttl: React.createElement(React.Fragment, null, 'Analisar briefing — ', React.createElement('em', null, b.client_name || b.client || 'Cliente')),
        meta: `${b.service || 'Serviço'} · ${b.attachments || 0} anexos`,
        when: b.received_short || b.received || 'Recente',
        target: 'briefing-analysis'
      });
    });
  }
  if (adminProjs.length > 0) {
    adminProjs.filter(p => p.status === 'review' || p.status === 'delay').slice(0, 2).forEach(p => {
      prioActions.push({
        pin: p.status === 'delay' ? 'warn' : 'signal',
        ttl: React.createElement(React.Fragment, null, p.status === 'delay' ? 'Em atraso — ' : 'Revisão — ', React.createElement('em', null, p.name || p.title)),
        meta: `${p.client || p.client_name || 'Cliente'} · ${p.service || ''}`,
        when: p.deadline || '',
        target: 'projects'
      });
    });
  }
  if (prioActions.length === 0) {
    prioActions.push({
      pin: 'muted',
      ttl: React.createElement(React.Fragment, null, 'Nenhuma ação prioritária'),
      meta: 'Tudo em dia',
      when: 'Agora',
      target: 'projects'
    });
  }

  // Agenda dinâmica (semana atual)
  const now = new Date();
  const dayOfWeek = now.getDay();
  const monday = new Date(now);
  monday.setDate(now.getDate() - ((dayOfWeek === 0 ? 7 : dayOfWeek) - 1));
  const weekDays = ['SEG', 'TER', 'QUA', 'QUI', 'SEX'];
  const agendaDays = weekDays.map((wk, i) => {
    const day = new Date(monday);
    day.setDate(monday.getDate() + i);
    const dayNum = String(day.getDate()).padStart(2, '0');
    const isToday = day.toDateString() === now.toDateString();

    // Cruza com projetos que tem deadline nesta semana
    const dayEvents = [];
    adminProjs.forEach(p => {
      if (p.deadline) {
        const dlStr = String(p.deadline).toLowerCase().replace(/\s/g, '');
        const dayStr = String(day.getDate()).padStart(2, '0');
        const months = ['jan', 'fev', 'mar', 'abr', 'mai', 'jun', 'jul', 'ago', 'set', 'out', 'nov', 'dez'];
        const monthStr = months[day.getMonth()];
        if (dlStr.includes(dayStr + monthStr) || dlStr.includes(dayStr + '/' + String(day.getMonth() + 1).padStart(2, '0'))) {
          dayEvents.push({ time: '—', label: `${p.name || p.title} · ${p.client || p.client_name || ''}`, tone: 'on' });
        }
      }
    });

    return { wk, d: dayNum, today: isToday, events: dayEvents.length > 0 ? dayEvents : (isToday ? [{ time: '—', label: 'Sem eventos agendados', tone: 'muted' }] : []) };
  });

  const activeProjs = adminProjs.filter(p => p.status !== 'done' && p.status !== 'archived');

  // Cabeçalho da semana dinâmico
  const mondayDay = String(monday.getDate()).padStart(2, '0');
  const fridayDate = new Date(monday);
  fridayDate.setDate(monday.getDate() + 4);
  const fridayDay = String(fridayDate.getDate()).padStart(2, '0');
  const months = ['JAN', 'FEV', 'MAR', 'ABR', 'MAI', 'JUN', 'JUL', 'AGO', 'SET', 'OUT', 'NOV', 'DEZ'];
  const weekLabel = `${mondayDay} → ${fridayDay} ${months[monday.getMonth()]}`;

  return (
    <div className="page" data-screen-label="Admin · Dashboard">
      <div className="page-head">
        <div>
          <div className="kicker"><span>§ 00</span> OPERATIONS DOCK</div>
          <h1>Operations <em>Dock.</em></h1>
          <p className="sub">Visão geral dos projetos, aprovações, briefings e entregas em movimento. Todos os territórios da Dead Sailor em um único painel.</p>
        </div>
        <div className="right">
          <div className="stamp"><span className="dot"></span><span>{new Date().toLocaleString('pt-BR', {day:'numeric', month:'short', year:'numeric', hour:'2-digit', minute:'2-digit'}).toUpperCase().replace(',',' ·')}</span></div>
          <div className="actions">
            <Button kind="ghost" onClick={() => navigate('briefings')}>Briefings</Button>
            <Button kind="primary" arrow onClick={() => navigate('projects')}>Novo projeto</Button>
          </div>
        </div>
      </div>

      {loading ? (
        <div style={{textAlign: 'center', padding: '60px 0', color: 'var(--fog-2)'}}>
          <span className="spinner" style={{display:'inline-block',width:20,height:20,border:'2px solid var(--fog-3)',borderTopColor:'var(--lime)',borderRadius:'50%',animation:'spin .8s linear infinite',marginRight:12,verticalAlign:'middle'}}></span>
          Carregando dados reais…
        </div>
      ) : (
        <>
          <div className="stats-row" style={{gridTemplateColumns:'repeat(6, 1fr)'}}>
            {[
              { l: 'Projetos ativos', v: String(s.projectsActive), desc: projectsDesc },
              { l: 'Briefings na fila', v: String(s.briefingsPending), desc: briefingDesc },
              { l: 'Aprovações pendentes', v: String(s.approvalsPending), desc: approvalDesc },
              { l: 'Revisões em curso', v: String(s.revisionsOpen), desc: revisionsDesc },
              { l: 'Entregas nesta semana', v: String(s.deliveriesWeek), desc: deliveriesDesc },
              { l: 'Em atraso', v: String(s.overdue), desc: overdueDesc },
            ].map((st,i) => <Stat key={i} {...st} em={i===5} />)}
          </div>

          <div className="two-col">
            <div>
              <SectionHd title={<>Ações <em>prioritárias</em></>} n={`${String(prioActions.length).padStart(2,'0')} ${prioActions.length === 1 ? 'ITEM' : 'ITENS'}`} right={<Chip status="approved" live>HOJE</Chip>} />
              <div className="prio-list">
                {prioActions.map((p, i) => (
                  <div key={i} className="prio-row">
                    <span className={`pin ${p.pin==='muted'?'muted':p.pin==='warn'?'warn':''}`}></span>
                    <div className="info">
                      <div className="ttl">{p.ttl}</div>
                      <div className="meta">{p.meta}</div>
                    </div>
                    <span className="when">{p.when}</span>
                    <Button size="sm" kind={i===0?'signal':'default'} arrow onClick={() => navigate(p.target)}>{i===0 ? 'Abrir' : 'Ver'}</Button>
                  </div>
                ))}
              </div>
            </div>

            <div>
              <SectionHd title={<>Agenda da <em>semana</em></>} n={weekLabel} />
              <div className="agenda">
                {agendaDays.map((day, i) => (
                  <div key={i} className="day">
                    <div className={`stamp ${day.today?'today':''}`}>
                      <span className="wk">{day.wk}</span>
                      <span className="num">{day.d}</span>
                    </div>
                    <div className="events">
                      {day.events.length > 0 ? day.events.map((e, k) => (
                        <div key={k} className={`ev ${e.tone==='muted'?'muted':''}`}>
                          <span className="time">{e.time}</span>
                          <span className="dot"></span>
                          <span className="lbl">{e.label}</span>
                        </div>
                      )) : null}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <SectionHd title={<>Projetos <em>ativos</em></>} n={`${String(activeProjs.length).padStart(2,'0')} EM CURSO`} right={
            <Button size="sm" kind="ghost" arrow onClick={() => navigate('projects')}>Ver todos</Button>
          } />
          <div className="tbl-wrap">
            {activeProjs.length > 0 ? (
              <table className="tbl">
                <thead>
                  <tr>
                    <th>Projeto</th><th>Cliente</th><th>Serviço</th><th>Status</th><th>Próximo prazo</th><th>Responsável</th>
                  </tr>
                </thead>
                <tbody>
                  {activeProjs.slice(0,5).map(p => (
                    <tr key={p.id} onClick={() => navigate('admin-project-'+p.id)}>
                      <td className="tnm">{p.name || p.title}</td>
                      <td className="tclient">{p.client || p.client_name}</td>
                      <td className="tclient">{p.service}</td>
                      <td>{statusChip(p.status, p.statusLabel || p.status_label)}</td>
                      <td className="tdt">{p.deadline || p.next_deadline || '—'}</td>
                      <td className="tlead"><span className="avatar">{p.leadInitials || p.lead_initials || '—'}</span><span>{p.lead || '—'}</span></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            ) : (
              <div style={{textAlign: 'center', padding: '40px 0', color: 'var(--fog-2)'}}>
                Nenhum projeto ativo. <a style={{color: 'var(--lime)', cursor: 'pointer', textDecoration: 'underline'}} onClick={() => navigate('projects')}>Criar novo projeto</a>
              </div>
            )}
          </div>
        </>
      )}
    </div>
  );
}
window.AdminDashboard = AdminDashboard;


// =========================================================
// PROJECTS LIST (Table + Kanban)
// =========================================================
function AdminProjects({ navigate }){
  const [view, setView] = useState('table');
  const [search, setSearch] = useState('');
  const [statusFilter, setStatusFilter] = useState('all');
  const [leadFilter, setLeadFilter] = useState('all');
  const [projectsData, setProjectsData] = useState(null);
  const [showNewProject, setShowNewProject] = useState(false);
  const [npName, setNpName] = useState('');
  const [npClient, setNpClient] = useState('');
  const [npService, setNpService] = useState('branding');
  const [npLead, setNpLead] = useState('DP');
  const [npScope, setNpScope] = useState('');
  const [npStart, setNpStart] = useState('');
  const [npEnd, setNpEnd] = useState('');
  const [toast, setToast] = useToast();
  const d = Da();

  const [currentUser, setCurrentUser] = useState(null);

  React.useEffect(() => {
    API.me().then(setCurrentUser).catch(() => {});
    DATA.refreshAdminProjects().then(() => setProjectsData(DATA.adminProjects));
  }, []);

  const sourceProjects = projectsData || d.adminProjects;

  const canManage = !currentUser || currentUser.role === 'admin' || currentUser.role === 'leader';

  const projects = useMemo(() => sourceProjects.filter(p => {
    if(search && !(p.name?.toLowerCase().includes(search.toLowerCase()) || p.client?.toLowerCase().includes(search.toLowerCase()))) return false;
    if(statusFilter !== 'all' && p.status !== statusFilter) return false;
    if(leadFilter !== 'all' && p.leadInitials !== leadFilter) return false;
    return true;
  }), [search, statusFilter, leadFilter, sourceProjects]);

  return (
    <div className="page" data-screen-label="Admin · Projetos">
      <div className="page-head">
        <div>
          <div className="kicker"><span>§ 02</span> GESTÃO DE PROJETOS</div>
          <h1>Todos os <em>territórios.</em></h1>
          <p className="sub">Tabela ou Kanban. Filtre por cliente, status, responsável ou prazo.</p>
        </div>
        <div className="right">
          <div className="stamp"><span className="dot"></span><span>{projects.length} DE {sourceProjects.length} EXIBIDOS</span></div>
          <div className="actions">
            <Button kind="ghost">Exportar</Button>
            {canManage && <Button kind="primary" icon={Ico.plus()} onClick={() => setShowNewProject(true)}>Novo projeto</Button>}
          </div>
        </div>
      </div>

      <div className="filter-bar">
        <div className="left">
          <div className="search">
            <span style={{color:'var(--fog-2)'}}>{Ico.search()}</span>
            <input placeholder="Buscar projetos ou clientes…" value={search} onChange={e=>setSearch(e.target.value)} />
          </div>
          <select value={statusFilter} onChange={e=>setStatusFilter(e.target.value)}>
            <option value="all">// STATUS · TODOS</option>
            <option value="brief-received">Briefing recebido</option>
            <option value="planning">Em planejamento</option>
            <option value="production">Em produção</option>
            <option value="approval">Em aprovação</option>
            <option value="review">Em revisão</option>
            <option value="final">Entrega final</option>
          </select>
          <select value={leadFilter} onChange={e=>setLeadFilter(e.target.value)}>
            <option value="all">// RESP · TODOS</option>
            <option value="DP">Denis</option>
            <option value="MC">Marina</option>
          </select>
          <select>
            <option>// PRAZO · QUALQUER</option>
            <option>Esta semana</option>
            <option>Próximas 2 semanas</option>
            <option>Este mês</option>
          </select>
        </div>
        <div className="right">
          <div className="view-toggle">
            <button className={view==='table'?'on':''} onClick={()=>setView('table')}>{Ico.layers()} TABELA</button>
            <button className={view==='kanban'?'on':''} onClick={()=>setView('kanban')}>{Ico.grid()} KANBAN</button>
          </div>
        </div>
      </div>

      {view === 'table' && (
        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th>Projeto</th><th>Cliente</th><th>Serviço</th><th>Status</th><th>Próximo prazo</th><th>Responsável</th><th style={{width:80}}>Ação</th>
              </tr>
            </thead>
            <tbody>
              {projects.map(p => (
                <tr key={p.id} onClick={() => navigate('admin-project-'+p.id)}>
                  <td className="tnm">{p.name}</td>
                  <td className="tclient">{p.client}</td>
                  <td className="tclient">{p.service}</td>
                  <td>{statusChip(p.status, p.statusLabel)}</td>
                  <td className="tdt">{p.deadline}</td>
                  <td className="tlead"><span className="avatar">{p.leadInitials}</span><span>{p.lead}</span></td>
                  <td><Button size="sm" kind="ghost" arrow>Abrir</Button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {view === 'kanban' && (
        <div className="kanban">
          {(d.kanbanColumns || []).map(col => {
            const cards = projects.filter(p => col.filter.includes(p.status));
            return (
              <div key={col.key} className="kan-col">
                <div className="head"><span>{col.label}</span><span className="count">{cards.length}</span></div>
                <div className="body">
                  {cards.length === 0 && <div className="empty" style={{padding:'24px 12px'}}>// VAZIO</div>}
                  {cards.map(c => (
                    <div key={c.id} className="kan-card" onClick={() => navigate('admin-project-'+c.id)}>
                      <div className="top">
                        <span className="client-tag">{c.client}</span>
                        <span className={`priority-pin ${c.priority}`} title={c.priority}></span>
                      </div>
                      <h5>{c.name}</h5>
                      <div className="bot">
                        <span className="date">{c.deadline}</span>
                        <span className="avatar">{c.leadInitials}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      )}

      {showNewProject && (
        <Modal wide title="NOVO PROJETO" onClose={() => setShowNewProject(false)}
          footer={<>
            <Button kind="ghost" onClick={() => setShowNewProject(false)}>Cancelar</Button>
            <Button kind="primary" arrow onClick={async () => {
              if (!npName || !npClient || !npStart || !npEnd) {
                setToast('Preencha os campos obrigatórios');
                return;
              }
              setShowNewProject(false);
              try {
                const clientObj = d.clients.find(c => c.id === npClient) || {};
                const leadObj = d.team.find(t => t.initials === npLead) || {};
                await API.createProject({
                  title: npName,
                  client_id: npClient,
                  client_name: clientObj.name || npClient,
                  service: npService,
                  scope: npScope || 'Aguardando definição de escopo.',
                  start_date: npStart,
                  end_date: npEnd,
                  lead: leadObj.name || 'Denis Paganini',
                  lead_initials: npLead
                });
                setToast('Projeto criado com sucesso');
                setNpName('');
                setNpClient('');
                setNpService('branding');
                setNpLead('DP');
                setNpScope('');
                setNpStart('');
                setNpEnd('');
                DATA.refreshAdminProjects().then(() => setProjectsData(DATA.adminProjects));
              } catch (err) {
                setToast('Erro ao criar projeto: ' + err.message);
              }
            }}>Criar projeto</Button>
          </>}>
          <div style={{display:'flex', flexDirection:'column', gap:18}}>
            <Field label="Nome do projeto" required>
              <input value={npName} onChange={e => setNpName(e.target.value)} placeholder="Ex: Rebranding Aurora Studio" />
            </Field>
            <div className="form-grid-2">
              <Field label="Cliente" required>
                <select value={npClient} onChange={e => setNpClient(e.target.value)}>
                  <option value="">// SELECIONE UM CLIENTE</option>
                  {(d.clients || []).map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
                </select>
              </Field>
              <Field label="Tipo de serviço" required>
                <select value={npService} onChange={e => setNpService(e.target.value)}>
                  <option value="branding">Branding Estratégico</option>
                  <option value="campaign">Campanha</option>
                  <option value="website">Website</option>
                  <option value="editorial">Editorial</option>
                  <option value="naming">Naming</option>
                  <option value="social">Social Media</option>
                  <option value="direction">Direção Criativa</option>
                </select>
              </Field>
            </div>
            <Field label="Escopo do projeto">
              <textarea value={npScope} onChange={e => setNpScope(e.target.value)} placeholder="Descreva o escopo do projeto..." style={{minHeight: 110}} />
            </Field>
            <div className="form-grid-2">
              <Field label="Responsável" required>
                <select value={npLead} onChange={e => setNpLead(e.target.value)}>
                  {(d.team || []).map(t => <option key={t.id} value={t.initials}>{t.name} · {t.role}</option>)}
                </select>
              </Field>
              <Field label="Território" hint="Gerado automaticamente">
                <input value={'DS / TERRITORY ' + String(Math.floor(Math.random() * 900) + 100)} disabled />
              </Field>
            </div>
            <div className="form-grid-2">
              <Field label="Data de início" required>
                <input value={npStart} onChange={e => setNpStart(e.target.value)} placeholder="DD MMM AAAA" />
              </Field>
              <Field label="Data final estimada" required>
                <input value={npEnd} onChange={e => setNpEnd(e.target.value)} placeholder="DD MMM AAAA" />
              </Field>
            </div>
          </div>
        </Modal>
      )}
      {toast && <Toast>{toast}</Toast>}
    </div>
  );
}
window.AdminProjects = AdminProjects;


// =========================================================
// BRIEFINGS INBOX
// =========================================================
function AdminBriefings({ navigate }){
  const [briefings, setBriefings] = React.useState(null);
  React.useEffect(() => { DATA.refreshBriefings().then(() => setBriefings(DATA.briefings)); }, []);
  const rawBriefings = briefings || Da().briefingsInbox;
  const effective = (rawBriefings || []).map(rawBrief => ({
    id: rawBrief.id,
    client: rawBrief.client || rawBrief.client_name || 'Cliente',
    project: rawBrief.project || rawBrief.project_name || 'Novo Projeto',
    service: rawBrief.service || 'Serviço',
    receivedShort: rawBrief.received_short || rawBrief.receivedShort || 'Recente',
    attachments: rawBrief.attachments || 0,
    status: rawBrief.status || 'pending',
    statusLabel: rawBrief.status_label || rawBrief.statusLabel || 'Pendente',
    priority: rawBrief.priority || 'med'
  }));

  return (
    <div className="page" data-screen-label="Admin · Briefings">
      <div className="page-head">
        <div>
          <div className="kicker"><span>§ 01</span> BRIEFINGS RECEBIDOS</div>
          <h1>Cartas <em>no porto.</em></h1>
          <p className="sub">Briefings enviados pelos clientes. Analise cada um, aceite ou solicite complementos antes de traçar o cronograma.</p>
        </div>
        <div className="right">
          <div className="stamp"><span className="dot"></span><span>{effective.length} NA FILA · 01 COM COMPLEMENTO</span></div>
        </div>
      </div>

      <div className="brief-inbox">
        {effective.map(b => (
          <div key={b.id} className="brief-row" onClick={() => navigate('briefing-analysis-'+b.id)}>
            <span className={`pin ${b.priority==='med'?'idle':''}`}></span>
            <div className="info">
              <span className="client-tag">{b.client}</span>
              <h4>{b.project.split(' ').slice(0,2).join(' ')} <em>{b.project.split(' ').slice(2).join(' ')}</em></h4>
            </div>
            <div className="meta"><span className="l">// SERVIÇO</span><span>{b.service}</span></div>
            <div className="meta"><span className="l">// RECEBIDO</span><span>{b.receivedShort}</span></div>
            <div className="meta"><span className="l">// ANEXOS</span><span>{b.attachments}</span></div>
            <span>{statusChip(b.status, b.statusLabel)}</span>
            <Button size="sm" kind="signal" arrow>Analisar briefing</Button>
          </div>
        ))}
      </div>
    </div>
  );
}
window.AdminBriefings = AdminBriefings;


// =========================================================
// BRIEFING ANALYSIS (admin reading the brief)
// =========================================================
function BriefingAnalysis({ briefingId, navigate }){
  const [briefingData, setBriefingData] = React.useState(null);
  const [showAccept, setShowAccept] = useState(false);
  const [showDevolver, setShowDevolver] = useState(false);
  const [showSolicitar, setShowSolicitar] = useState(false);
  const [showDeletar, setShowDeletar] = useState(false);
  const [solicitarText, setSolicitarText] = useState('');
  const [toast, setToast] = useToast();

  const [scopeText, setScopeText] = useState('');
  const [leadCode, setLeadCode] = useState('DP');
  const [revisionsCount, setRevisionsCount] = useState(2);
  const [startDate, setStartDate] = useState('01/06/2026');
  const [endDate, setEndDate] = useState('04/08/2026');

  React.useEffect(() => {
    DATA.getBriefing(briefingId || 'b-lume').then(setBriefingData);
  }, [briefingId]);

  const rawBrief = briefingData || Da().briefingLume;
  const b = React.useMemo(() => {
    if (!rawBrief) return { id: '', client: '', project: '', service: '', received: '', status: '', statusLabel: '', blocks: [], files: [] };
    
    let parsedData = {};
    if (rawBrief.briefing_data) {
      try {
        parsedData = typeof rawBrief.briefing_data === 'string'
          ? JSON.parse(rawBrief.briefing_data)
          : rawBrief.briefing_data;
      } catch (e) {
        console.warn('Erro ao parsear briefing_data:', e);
      }
    }

    return {
      id: rawBrief.id || '',
      client: rawBrief.client || rawBrief.client_name || 'Cliente',
      client_id: rawBrief.client_id || '',
      project: rawBrief.project || rawBrief.project_name || 'Novo Projeto',
      service: rawBrief.service || 'Serviço',
      received: rawBrief.received || rawBrief.created_at || 'Recente',
      status: rawBrief.status || 'pending',
      statusLabel: rawBrief.status_label || rawBrief.statusLabel || 'Pendente',
      blocks: parsedData.blocks || rawBrief.blocks || [],
      files: parsedData.files || rawBrief.files || [],
      external_files_link: rawBrief.external_files_link || parsedData.external_files_link || ''
    };
  }, [rawBrief]);

  React.useEffect(() => {
    if (b) {
      setScopeText(`Redesign completo e desenvolvimento estratégico para o cliente "${b.client}": ${b.project}. Inclui arquitetura de informação, desenvolvimento conceitual de marca, desdobramentos digitais e entrega final organizada.`);
    }
  }, [b]);

  return (
    <div className="page" data-screen-label="Admin · Análise de briefing">
      <div className="proj-head">
        <div>
          <div className="crumb-line">
            <a onClick={() => navigate('briefings')}>Briefings</a>
            <span className="sep">/</span>
            <span>{b.project}</span>
          </div>
          <h1>{b.project.split(' ').slice(0,2).join(' ')} <em>{b.project.split(' ').slice(2).join(' ')}</em></h1>
          <div className="meta-row">
            <div className="m"><span className="l">// Cliente</span><span className="v">{b.client}</span></div>
            <div className="m"><span className="l">// Serviço</span><span className="v">{b.service}</span></div>
            <div className="m"><span className="l">// Enviado em</span><span className="v">{b.received}</span></div>
            <div className="m"><span className="l">// Status</span><span>{statusChip(b.status, b.statusLabel)}</span></div>
          </div>
        </div>
        <div className="right">
          <div className="stamp"><span className="dot"></span><span>DS / BRIEF {b.id.toUpperCase()}</span></div>
        </div>
      </div>

      <div className="briefing-analysis" style={{marginTop:36}}>
        <div className="bra-body">
          {b.blocks && b.blocks.length > 0 ? b.blocks.map(blk => (
            <div key={blk.n} className="bra-block">
              <div className="blk-head">
                <span className="n">// {blk.n}</span>
                <h3>{blk.title.split(' ')[0]} {blk.title.split(' ').length > 1 && <em>{blk.title.split(' ').slice(1).join(' ')}</em>}</h3>
              </div>
              <div className="qa">
                {blk.qa.map((qa,i) => (
                  <div key={i}>
                    <div className="q">{qa.q}</div>
                    <div className="a">{qa.a}</div>
                  </div>
                ))}
              </div>
              {blk.links && (
                <div style={{marginTop:18}}>
                  <div className="mono" style={{color:'var(--fog)', marginBottom:10, fontSize:9.5, letterSpacing:'.24em'}}>// LINKS</div>
                  <div className="links-list">
                    {blk.links.map((l,i) => (
                      <a key={i} href="#" onClick={e=>e.preventDefault()}>
                        <span className="ic">{Ico.link()}</span>
                        <span>{l.label} · {l.url}</span>
                        <span>{Ico.ext()}</span>
                      </a>
                    ))}
                  </div>
                </div>
              )}
            </div>
          )) : (
            <div className="bra-block">
              <div className="blk-head"><span className="n">// 01</span><h3>Dados do <em>Briefing</em></h3></div>
              <div className="qa">
                <div>
                  <div className="q">OBJETIVO DO PROJETO</div>
                  <div className="a">Nova solicitação enviada via chatbot/portal Dead Sailor. Mapeamento de escopo técnico inicial.</div>
                </div>
              </div>
            </div>
          )}

          {b.files && b.files.length > 0 && (
            <div className="bra-block">
              <div className="blk-head"><span className="n">// ANEXOS</span><h3>Arquivos <em>enviados</em></h3></div>
              <div className="file-list">
                {b.files.map((f,i) => (
                  <div key={i} className="file-row">
                    <span className="ic">{f.icon}</span>
                    <span className="nm">{f.name}</span>
                    <span className="sz">{f.size}</span>
                    <span className="dt">25 MAI</span>
                    <div className="act">
                      <button title="Visualizar">{Ico.view()}</button>
                      <button title="Baixar">{Ico.download()}</button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

        <aside className="bra-side">
          <div className="pane">
            <div className="l">// OBSERVAÇÕES INTERNAS</div>
            <textarea placeholder="Notas só visíveis para a equipe Dead Sailor."></textarea>
          </div>
          <div className="pane">
            <div className="l">// RESPONSÁVEL</div>
            <select value={leadCode} onChange={e => setLeadCode(e.target.value)}>
              <option value="DP">Denis Paganini · Direção</option>
              <option value="MC">Marina Costa · Produção</option>
            </select>
          </div>
          <div className="pane">
            <div className="l">// PRIORIDADE</div>
            <select defaultValue="med">
              <option value="high">Alta · entrega prioritária</option>
              <option value="med">Média · fluxo normal</option>
              <option value="low">Baixa · sem urgência</option>
            </select>
          </div>
          <div className="pane">
            <div className="l">// DATA SUGERIDA · INÍCIO</div>
            <input value={startDate} onChange={e => setStartDate(e.target.value)} />
          </div>
          <div className="pane">
            <div className="l">// DATA SUGERIDA · ENTREGA</div>
            <input value={endDate} onChange={e => setEndDate(e.target.value)} />
          </div>
          <div className="actions">
            <Button kind="primary" arrow onClick={() => setShowAccept(true)}>Aceitar briefing</Button>
            {b.status !== 'draft' && (
              <Button kind="default" onClick={() => setShowDevolver(true)}>Devolver para Edição</Button>
            )}
            <Button onClick={() => { setSolicitarText(''); setShowSolicitar(true); }}>Solicitar complemento</Button>
            <Button kind="ghost" style={{color:'var(--red)'}} onClick={() => setShowDeletar(true)}>Deletar solicitação</Button>
          </div>
        </aside>
      </div>

      {showAccept && (
        <Modal wide title="ACEITAR BRIEFING · DEFINIÇÃO INICIAL" onClose={() => setShowAccept(false)}
          footer={<>
            <Button kind="ghost" onClick={() => setShowAccept(false)}>Cancelar</Button>
            <Button kind="primary" arrow onClick={async () => {
              setShowAccept(false);
              try {
                const cleanClientId = b.client_id || b.client.toLowerCase().replace(/\s/g, '-');
                const proj = await API.createProject({
                  title: b.project,
                  client_id: cleanClientId,
                  client_name: b.client,
                  service: b.service,
                  scope: scopeText,
                  start_date: startDate,
                  end_date: endDate,
                  lead: leadCode === 'DP' ? 'Denis Paganini' : 'Marina Costa',
                  lead_initials: leadCode
                });

                await API.updateBriefing(b.id, { status: 'planning', status_label: 'Em planejamento' });

                setToast('Briefing aceito com sucesso! Criando cronograma...');
                setTimeout(() => {
                  navigate(`admin-project-${proj.id}`);
                }, 1000);
              } catch (err) {
                setToast('Erro ao criar projeto: ' + err.message);
              }
            }}>Criar cronograma e entregáveis</Button>
          </>}>
          <div style={{display:'flex', flexDirection:'column', gap:18}}>
            <Field label="Escopo validado" required>
              <textarea value={scopeText} onChange={e => setScopeText(e.target.value)} style={{minHeight: 110}} />
            </Field>
            <div className="form-grid-2">
              <Field label="Responsável" required>
                <select value={leadCode} onChange={e => setLeadCode(e.target.value)}>
                  <option value="DP">Denis Paganini</option>
                  <option value="MC">Marina Costa</option>
                </select>
              </Field>
              <Field label="Rodadas de revisão incluídas">
                <select value={revisionsCount} onChange={e => setRevisionsCount(+e.target.value)}>
                  <option value={1}>1</option>
                  <option value={2}>2</option>
                  <option value={3}>3</option>
                </select>
              </Field>
            </div>
            <div className="form-grid-2">
              <Field label="Data de início" required><input value={startDate} onChange={e => setStartDate(e.target.value)} /></Field>
              <Field label="Data final estimada" required><input value={endDate} onChange={e => setEndDate(e.target.value)} /></Field>
            </div>
          </div>
        </Modal>
      )}

      {showDevolver && (
        <Modal title="DEVOLVER BRIEFING PARA EDIÇÃO" onClose={() => setShowDevolver(false)}
          footer={<>
            <Button kind="ghost" onClick={() => setShowDevolver(false)}>Cancelar</Button>
            <Button kind="primary" arrow onClick={async () => {
              setShowDevolver(false);
              try {
                await API.updateBriefing(b.id, {
                  status: 'draft',
                  status_label: 'Rascunho'
                });

                let clientEmail = '';
                let clientName = b.client;
                try {
                  if (b.client_id) {
                    const clObj = await API.getClient(b.client_id);
                    clientEmail = clObj?.contact_email;
                    if (clObj?.contact_name) clientName = clObj.contact_name;
                  }
                } catch (clErr) {
                  console.warn('Erro ao obter email do cliente:', clErr);
                }

                if (clientEmail) {
                  try {
                    await API.sendBriefingStatusEmail({
                      email: clientEmail,
                      name: clientName,
                      company: b.client,
                      projectName: b.project,
                      status: 'draft',
                      statusLabel: 'Rascunho',
                      notes: 'Briefing devolvido pela agência para ajustes. Você já pode editá-lo diretamente no seu painel.'
                    });
                  } catch (mailErr) {
                    console.warn('Erro ao disparar email de status:', mailErr);
                  }
                }

                try {
                  await API.addNotification(b.client_id || 'client', 'Briefing Devolvido', `Seu briefing do projeto "${b.project}" foi devolvido para edição.`, '#/client/brief/form');
                } catch (notifErr) {}

                setToast('Briefing devolvido e cliente notificado!');
                DATA.getBriefing(b.id).then(setBriefingData);
              } catch (e) {
                setToast('Erro ao devolver briefing: ' + e.message);
              }
            }}>Devolver briefing</Button>
          </>}>
          <p style={{fontSize:13.5, color:'var(--bone-dim)', lineHeight:1.6}}>
            Deseja devolver o briefing de <strong>{b.project}</strong> para o cliente poder editá-lo novamente? O cliente receberá um e-mail premium e uma notificação no painel de controle dele.
          </p>
        </Modal>
      )}

      {showSolicitar && (
        <Modal wide title="SOLICITAR COMPLEMENTO DE BRIEFING" onClose={() => setShowSolicitar(false)}
          footer={<>
            <Button kind="ghost" onClick={() => setShowSolicitar(false)}>Cancelar</Button>
            <Button kind="primary" arrow onClick={async () => {
              if (!solicitarText.trim()) {
                setToast('Por favor, descreva as instruções do complemento.');
                return;
              }
              setShowSolicitar(false);
              try {
                await API.updateBriefing(b.id, {
                  status: 'addendum',
                  status_label: 'Complemento solicitado'
                });

                let clientEmail = '';
                let clientName = b.client;
                try {
                  if (b.client_id) {
                    const clObj = await API.getClient(b.client_id);
                    clientEmail = clObj?.contact_email;
                    if (clObj?.contact_name) clientName = clObj.contact_name;
                  }
                } catch (clErr) {
                  console.warn('Erro ao obter email do cliente:', clErr);
                }

                if (clientEmail) {
                  try {
                    await API.sendBriefingStatusEmail({
                      email: clientEmail,
                      name: clientName,
                      company: b.client,
                      projectName: b.project,
                      status: 'addendum',
                      statusLabel: 'Complemento solicitado',
                      notes: solicitarText
                    });
                  } catch (mailErr) {
                    console.warn('Erro ao disparar email de complemento:', mailErr);
                  }
                }

                try {
                  await API.addNotification(b.client_id || 'client', 'Complemento solicitado', `Solicitamos informações adicionais para o briefing de "${b.project}".`, '#/client/brief/form');
                } catch (notifErr) {}

                setToast('Complemento solicitado e cliente notificado!');
                DATA.getBriefing(b.id).then(setBriefingData);
              } catch (e) {
                setToast('Erro ao solicitar complemento: ' + e.message);
              }
            }}>Enviar solicitação</Button>
          </>}>
          <div style={{display:'flex', flexDirection:'column', gap:14}}>
            <p style={{fontSize:13.5, color:'var(--bone-dim)', lineHeight:1.6}}>
              Descreva em detalhes o que você precisa que o cliente complemente ou explique melhor no briefing:
            </p>
            <Field label="Instruções de complemento" required>
              <textarea 
                value={solicitarText} 
                onChange={e => setSolicitarText(e.target.value)} 
                placeholder="Ex: Por favor, forneça mais referências de marcas concorrentes e detalhe melhor os formatos finais necessários."
                style={{minHeight: 120}} 
              />
            </Field>
          </div>
        </Modal>
      )}

      {showDeletar && (
        <Modal title="DELETAR SOLICITAÇÃO DE BRIEFING" onClose={() => setShowDeletar(false)}
          footer={<>
            <Button kind="ghost" onClick={() => setShowDeletar(false)}>Cancelar</Button>
            <Button kind="danger" style={{background:'var(--red)', color:'#fff'}} onClick={async () => {
              setShowDeletar(false);
              try {
                await API.deleteBriefing(b.id);
                setToast('Briefing deletado com sucesso!');
                setTimeout(() => {
                  navigate('briefings');
                }, 1000);
              } catch (e) {
                setToast('Erro ao deletar briefing: ' + e.message);
              }
            }}>Excluir permanentemente</Button>
          </>}>
          <p style={{fontSize:13.5, color:'var(--red)', lineHeight:1.6, fontWeight: 500}}>
            Atenção: Esta ação é irreversível!
          </p>
          <p style={{fontSize:13.5, color:'var(--bone-dim)', lineHeight:1.6, marginTop: 8}}>
            Você está prestes a excluir permanentemente o briefing de <strong>{b.project}</strong> ({b.client}) do banco de dados do sistema. Todos os dados enviados serão perdidos.
          </p>
        </Modal>
      )}

      {toast && <Toast>{toast}</Toast>}
    </div>
  );
}
window.BriefingAnalysis = BriefingAnalysis;


// =========================================================
// PLANNING · Editable deliverables list
// =========================================================
function AdminPlanning({ navigate }){
  const [items, setItems] = useState(Da().lumePlan);
  const [toast, setToast] = useToast();

  function addItem(){
    setItems([...items, { id: 'p'+(items.length+1), name: '', deadline: '', revisions: 1 }]);
  }
  function removeItem(id){ setItems(items.filter(x => x.id !== id)); }
  function updateItem(id, k, v){ setItems(items.map(x => x.id === id ? {...x, [k]: v} : x)); }

  return (
    <div className="page" data-screen-label="Admin · Planejamento">
      <div className="proj-head">
        <div>
          <div className="crumb-line">
            <a onClick={() => navigate('projects')}>Projetos</a>
            <span className="sep">/</span>
            <span>Novo Website Institucional · Studio Lume</span>
          </div>
          <h1>Novo Website <em>Institucional</em></h1>
          <div className="meta-row">
            <div className="m"><span className="l">// Cliente</span><span className="v">Studio Lume</span></div>
            <div className="m"><span className="l">// Status</span><span>{statusChip('planning','Em planejamento')}</span></div>
            <div className="m"><span className="l">// Responsável</span><span className="v">Denis Paganini</span></div>
            <div className="m"><span className="l">// Início</span><span className="v">01 jun 2026</span></div>
            <div className="m"><span className="l">// Entrega final</span><span className="v">04 ago 2026</span></div>
          </div>
        </div>
        <div className="right">
          <div className="stamp"><span className="dot"></span><span>RASCUNHO · NÃO PUBLICADO</span></div>
        </div>
      </div>

      <div style={{marginTop:36}}>
        <SectionHd title={<>Entregáveis & <em>cronograma</em></>} n={items.length+' ITENS'} right={
          <Button size="sm" icon={Ico.plus()} onClick={addItem}>Adicionar entregável</Button>
        } />

        <div className="editable-list">
          {items.map((it, i) => (
            <div key={it.id} className="edit-row">
              <span className="drag">{Ico.drag()}</span>
              <div>
                <div className="mono" style={{marginBottom:6, color:'var(--fog-2)', fontSize:9, letterSpacing:'.24em'}}>// ENTREGÁVEL {String(i+1).padStart(2,'0')}</div>
                <input value={it.name} onChange={e => updateItem(it.id, 'name', e.target.value)} placeholder="Nome do entregável" />
              </div>
              <div>
                <div className="mono" style={{marginBottom:6, color:'var(--fog-2)', fontSize:9, letterSpacing:'.24em'}}>// PRAZO</div>
                <input className="dt" value={it.deadline} onChange={e => updateItem(it.id, 'deadline', e.target.value)} placeholder="DD MMM AAAA" />
              </div>
              <div className="rev">
                <div className="mono" style={{marginBottom:6, color:'var(--fog-2)', fontSize:9, letterSpacing:'.24em'}}>// REVISÕES</div>
                <select value={it.revisions} onChange={e => updateItem(it.id, 'revisions', +e.target.value)}>
                  <option value={0}>0 rodadas</option>
                  <option value={1}>1 rodada</option>
                  <option value={2}>2 rodadas</option>
                  <option value={3}>3 rodadas</option>
                </select>
              </div>
              <button className="rmv" onClick={() => removeItem(it.id)} title="Remover">{Ico.trash()}</button>
            </div>
          ))}
        </div>

        <div style={{marginTop:32, padding:24, border:'1px solid var(--steel)', background:'var(--hull-2)', display:'flex', justifyContent:'space-between', alignItems:'center', gap:18}}>
          <div>
            <div style={{fontFamily:'var(--mono)', fontSize:10, letterSpacing:'.24em', color:'var(--signal)', textTransform:'uppercase', marginBottom:6}}>// PRÓXIMO PASSO</div>
            <div style={{fontFamily:'var(--serif)', fontSize:22, fontStyle:'italic', letterSpacing:'-.005em'}}>Pronto para publicar o cronograma para o cliente?</div>
          </div>
          <div style={{display:'flex', gap:10}}>
            <Button kind="ghost" onClick={() => setToast('Rascunho salvo')}>Salvar rascunho</Button>
            <Button kind="primary" arrow onClick={() => { setToast('Cronograma publicado · cliente notificado'); }}>Publicar cronograma</Button>
          </div>
        </div>
      </div>

      {toast && <Toast>{toast}</Toast>}
    </div>
  );
}
window.AdminPlanning = AdminPlanning;


// =========================================================
// ADMIN PROJECT PAGE (internal management)
// =========================================================
function AdminProject({ projectId, navigate }){
  const [project, setProject] = React.useState(null);
  const [tab, setTab] = useState('overview');
  const [showUpload, setShowUpload] = useState(false);
  const [showCreateDeliv, setShowCreateDeliv] = useState(false);
  const [showRequestApproval, setShowRequestApproval] = useState(false);
  const [showPublishFile, setShowPublishFile] = useState(false);
  const [showFinishProject, setShowFinishProject] = useState(false);
  const [showStartProject, setShowStartProject] = useState(false);

  // Form states for Create Deliverable:
  const [delivName, setDelivName] = useState('');
  const [delivOrder, setDelivOrder] = useState('01');
  const [delivDeadline, setDelivDeadline] = useState('');
  const [delivPrimary, setDelivPrimary] = useState(false);

  // Form states for Edit Deliverable:
  const [showEditDeliv, setShowEditDeliv] = useState(false);
  const [editDelivId, setEditDelivId] = useState('');
  const [editDelivName, setEditDelivName] = useState('');
  const [editDelivOrder, setEditDelivOrder] = useState('01');
  const [editDelivDeadline, setEditDelivDeadline] = useState('');
  const [editDelivPrimary, setEditDelivPrimary] = useState(false);

  // Form states for Request Approval:
  const [selectedDelivId, setSelectedDelivId] = useState('');

  // Form states for Publish File:
  const [publishName, setPublishName] = useState('');
  const [publishKind, setPublishKind] = useState('PDF');
  const [publishSize, setPublishSize] = useState('');
  const [publishRelated, setPublishRelated] = useState('');

  const [toast, setToast] = useToast();

  const [newClientMsg, setNewClientMsg] = useState('');
  const [internalNote, setInternalNote] = useState('');

  const [uploadDelivId, setUploadDelivId] = useState('');
  const [uploadVersion, setUploadVersion] = useState('V02');
  const [uploadFile, setUploadFile] = useState('KV_AuroraStudio_V02.pdf');
  const [uploadNote, setUploadNote] = useState('');
  const [uploadDeadline, setUploadDeadline] = useState('28 mai 2026');

  React.useEffect(() => {
    DATA.getProject(projectId).then(setProject);
  }, [projectId]);

  const allProjects = Da().adminProjects;
  const projSummary = allProjects.find(x => x.id === projectId) || allProjects[0] || {};
  const richProj = project || Da().clientProjects.find(x => x.id === projectId) || Da().clientProjects[0] || {};
  const proj = project || { ...projSummary, ...richProj };

  React.useEffect(() => {
    if (proj && proj.deliverables && proj.deliverables.length > 0) {
      setUploadDelivId(proj.deliverables[0].id);
      setSelectedDelivId(proj.deliverables[0].id);
    }
  }, [project]);

  const tabs = [
    { key:'overview',  label:'Visão geral' },
    { key:'deliv',     label:'Entregáveis', count: (proj.deliverables || []).length },
    { key:'schedule',  label:'Cronograma' },
    { key:'files',     label:'Arquivos' },
    { key:'log',       label:'Log completo' },
    { key:'conv',      label:'CHAT',        count: (proj.conversation || []).length, highlight: true, icon: Ico.chat() },
  ];

  async function sendClientMsg() {
    if (!newClientMsg.trim()) return;
    try {
      await API.addConversation(proj.id, newClientMsg);
      setNewClientMsg('');
      DATA.getProject(proj.id).then(setProject);
      setToast('Mensagem enviada com sucesso');
    } catch (err) {
      setToast('Erro ao enviar mensagem: ' + err.message);
    }
  }

  async function addInternalNote() {
    if (!internalNote.trim()) return;
    try {
      await API.addActivity(projectId, { kind: 'note', txt: internalNote });
      setInternalNote('');
      DATA.getProject(projectId).then(setProject);
      setToast('Nota interna adicionada');
    } catch (err) {
      setToast('Erro ao adicionar nota: ' + err.message);
    }
  }

  async function triggerDeliverableEmail(delivName, statusLabel, version = '', note = '') {
    try {
      if (!proj || !proj.client_id) return;
      const client = await API.getClient(proj.client_id);
      if (client && client.contact_email) {
        await API.sendDeliverableUpdateEmail({
          email: client.contact_email,
          clientName: client.contact_name || client.name,
          company: client.name,
          projectName: proj.title,
          deliverableName: delivName,
          statusLabel: statusLabel,
          version: version,
          note: note
        });
      }
    } catch (e) {
      console.warn('Erro ao disparar e-mail de entregável:', e);
    }
  }

  function openEditModal(d) {
    setEditDelivId(d.id);
    setEditDelivName(d.name);
    setEditDelivOrder(d.n || '01');
    setEditDelivDeadline(d.deadline || '');
    setEditDelivPrimary(!!d.primary_deliverable || !!d.primary);
    setShowEditDeliv(true);
  }

  async function handleStatusChange(d, newStatus) {
    let statusLabel = 'Parado';
    if (newStatus === 'waiting') statusLabel = 'Aguardando';
    else if (newStatus === 'production') statusLabel = 'Iniciado';
    else if (newStatus === 'approved') statusLabel = 'Finalizado';

    try {
      await API.updateDeliverable(projectId, d.id, {
        status: newStatus,
        status_label: statusLabel,
        versions: d.versions,
        current_version: d.current_version || d.current || '—'
      });
      await API.addActivity(projectId, {
        kind: newStatus === 'approved' ? 'approve' : 'note',
        txt: `Status do entregável "${d.name}" alterado para ${statusLabel}.`
      });
      setToast(`Status atualizado para ${statusLabel}`);
      DATA.getProject(proj.id).then(setProject);
      triggerDeliverableEmail(d.name, statusLabel, d.current_version || d.current || '—');
    } catch(err) {
      setToast('Erro ao atualizar status: ' + err.message);
    }
  }

  return (
    <div className="page" data-screen-label="Admin · Projeto">
      <div className="proj-head">
        <div>
          <div className="crumb-line">
            <a onClick={() => navigate('projects')}>Projetos</a>
            <span className="sep">/</span>
            <span>{proj.client || proj.client_name}</span>
            <span className="sep">/</span>
            <span>{proj.name || proj.title}</span>
          </div>
          <h1>{(proj.name || proj.title || 'Rebranding').split(' ').slice(0,1).join(' ')} <em>{(proj.name || proj.title || 'Aurora').split(' ').slice(1).join(' ')}</em></h1>
          <div className="meta-row">
            <div className="m"><span className="l">// Cliente</span><span className="v">{proj.client || proj.client_name}</span></div>
            <div className="m"><span className="l">// Serviço</span><span className="v">{proj.service}</span></div>
            <div className="m"><span className="l">// Status</span><span>{statusChip(proj.status, proj.statusLabel || proj.status_label)}</span></div>
            <div className="m"><span className="l">// Prazo</span><span className="v">{proj.deadline || proj.next_deadline}</span></div>
            <div className="m"><span className="l">// Responsável</span><span className="v">{proj.lead}</span></div>
            <div className="m"><span className="l">// Território</span><span className="v">{proj.territory || 'DS / TERRITORY 014'}</span></div>
          </div>
        </div>
        <div className="right">
          <div className="progress-block">
            <div className="label-line"><span>// Progresso geral</span><span className="pct">{proj.progress || 65}%</span></div>
            <div className="bar"><div className="fill" style={{width: (proj.progress||65)+'%'}}></div></div>
          </div>
          <div className="actions">
            <Button kind="ghost">Atualizar status</Button>
            <Button kind="primary" icon={Ico.upload()} onClick={() => setShowUpload(true)}>Enviar versão</Button>
          </div>
        </div>
      </div>

      <div style={{marginTop:32}}>
        <Tabs tabs={tabs} active={tab} onChange={setTab} />

        {tab === 'overview' && (
          <div className="two-col" style={{marginBottom:0}}>
            <div>
              <SectionHd title={<>Escopo do <em>projeto</em></>} n="" />
              <div className="card" style={{marginBottom:24}}>
                <div className="pbody">
                  <p style={{fontSize:15, lineHeight:1.65, color:'var(--bone-dim)', fontWeight:300}}>{proj.scope}</p>
                </div>
              </div>

              <SectionHd title={<>Entregáveis <em>resumidos</em></>} n={(proj.deliverables || []).length + " ITENS"} />
              <div className="deliv-list">
                {(proj.deliverables || []).map(d => (
                  <div key={d.id} className="deliv-row">
                    <span className="num">{d.n}</span>
                    <div className="info">
                      <div className="nm">{d.name}</div>
                      <div className="meta"><span>{d.versions > 0 ? `Versão ${d.current_version || d.current}`:'Aguardando início'}</span></div>
                    </div>
                    <div className="deadline"><span className="l">// PRAZO</span><span>{d.deadline}</span></div>
                    <div></div>
                    <select
                      className={`status-selector ${d.status || 'idle'}`}
                      value={d.status || 'idle'}
                      onChange={(e) => handleStatusChange(d, e.target.value)}
                      style={{
                        display: 'inline-flex',
                        alignItems: 'center',
                        fontFamily: 'var(--mono)',
                        fontSize: '9px',
                        letterSpacing: '.18em',
                        textTransform: 'uppercase',
                        fontWeight: '500',
                        padding: '4px 6px',
                        border: '1px solid var(--steel)',
                        background: 'var(--abyss)',
                        cursor: 'pointer',
                        outline: 'none',
                        color: d.status === 'approved' ? 'var(--signal)' : d.status === 'waiting' ? 'var(--amber)' : d.status === 'production' ? 'var(--bone)' : 'var(--fog)',
                        borderColor: d.status === 'approved' ? 'rgba(0,255,102,.4)' : d.status === 'waiting' ? 'rgba(199,147,72,.35)' : d.status === 'production' ? 'var(--bone)' : 'var(--steel-3)'
                      }}
                    >
                      <option value="idle">Parado</option>
                      <option value="waiting">Aguardando</option>
                      <option value="production">Iniciado</option>
                      <option value="approved">Finalizado</option>
                    </select>
                    <div style={{display:'flex', gap:8}}>
                      <Button size="sm" kind="ghost" onClick={() => openEditModal(d)}>Editar</Button>
                      <Button size="sm" icon={Ico.upload()} onClick={() => { setUploadDelivId(d.id); setShowUpload(true); }}>Versão</Button>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div>
              <SectionHd title={<>Ações <em>rápidas</em></>} n="" />
              <div style={{display:'flex', flexDirection:'column', gap:8, marginBottom:32}}>
                {(proj.status === 'planning' || proj.status === 'pending' || proj.status === 'not-started') && (
                  <Button kind="signal" icon={Ico.check2()} arrow onClick={() => setShowStartProject(true)}>Iniciar projeto</Button>
                )}
                <Button kind="signal" icon={Ico.upload()} onClick={() => setShowUpload(true)}>Enviar nova versão</Button>
                <Button icon={Ico.plus()} onClick={() => {
                  setDelivName('');
                  setDelivDeadline('');
                  setDelivOrder(String((proj.deliverables || []).length + 1).padStart(2, '0'));
                  setDelivPrimary(false);
                  setShowCreateDeliv(true);
                }}>Criar entregável</Button>
                <Button icon={Ico.check()} onClick={() => {
                  const delivs = proj.deliverables || [];
                  if (delivs.length === 0) {
                    setToast('Crie pelo menos um entregável antes de solicitar aprovação.');
                    return;
                  }
                  setSelectedDelivId(delivs[0].id);
                  setShowRequestApproval(true);
                }}>Solicitar aprovação</Button>
                <Button icon={Ico.download()} onClick={() => {
                  setPublishName('');
                  setPublishSize('');
                  setPublishRelated('');
                  setPublishKind('PDF');
                  setShowPublishFile(true);
                }}>Publicar arquivo final</Button>
                {proj.status !== 'done' && (
                  <Button kind="ghost" icon={Ico.check2()} onClick={() => setShowFinishProject(true)}>Finalizar projeto</Button>
                )}
              </div>

              <SectionHd title={<>Cliente · <em>conversas</em></>} n={(proj.conversation || []).length+' MSG'} />
              <div className="card">
                <div className="pbody" style={{padding:'8px 0'}}>
                  {(proj.conversation || []).slice(0,2).map((m, i) => (
                    <div key={i} style={{padding:'12px 22px', borderBottom:'1px solid var(--steel)'}}>
                      <div style={{fontFamily:'var(--mono)', fontSize:9.5, letterSpacing:'.22em', color:'var(--fog)', textTransform:'uppercase', marginBottom:6}}>{m.name} <span style={{color:'var(--fog-2)'}}>· {m.when_text || m.when}</span></div>
                      <p style={{fontSize:13, lineHeight:1.5, color:'var(--bone-dim)', fontWeight:300}}>{m.body}</p>
                    </div>
                  ))}
                </div>
                <div className="pbot">
                  <span>// TODAS AS MENSAGENS</span>
                  <Button size="sm" kind="ghost" arrow onClick={() => setTab('conv')}>Abrir conversa</Button>
                </div>
              </div>
            </div>
          </div>
        )}

        {tab === 'deliv' && (
          <div>
            <SectionHd title={<>Entregáveis <em>do projeto</em></>} n={(proj.deliverables || []).length + " ITENS"} right={
              <Button size="sm" icon={Ico.plus()} onClick={() => { setDelivName(''); setDelivDeadline(''); setDelivOrder(String((proj.deliverables || []).length + 1).padStart(2, '0')); setDelivPrimary(false); setShowCreateDeliv(true); }}>Adicionar entregável</Button>
            } />
            <div className="deliv-list">
              {(proj.deliverables || []).map(d => (
                <div key={d.id} className="deliv-row">
                  <span className="num">{d.n}</span>
                  <div className="info">
                    <div className="nm">{d.name}</div>
                    <div className="meta"><span>{d.versions > 0 ? `Versão ${d.current_version || d.current}` : 'Aguardando início'}</span></div>
                  </div>
                  <div className="deadline"><span className="l">// PRAZO</span><span>{d.deadline}</span></div>
                  <div className="versions"><span className="l">// VERSÕES</span><span className="v">{d.versions || '—'}</span></div>
                  <select
                    className={`status-selector ${d.status || 'idle'}`}
                    value={d.status || 'idle'}
                    onChange={(e) => handleStatusChange(d, e.target.value)}
                    style={{
                      display: 'inline-flex',
                      alignItems: 'center',
                      fontFamily: 'var(--mono)',
                      fontSize: '9px',
                      letterSpacing: '.18em',
                      textTransform: 'uppercase',
                      fontWeight: '500',
                      padding: '4px 6px',
                      border: '1px solid var(--steel)',
                      background: 'var(--abyss)',
                      cursor: 'pointer',
                      outline: 'none',
                      color: d.status === 'approved' ? 'var(--signal)' : d.status === 'waiting' ? 'var(--amber)' : d.status === 'production' ? 'var(--bone)' : 'var(--fog)',
                      borderColor: d.status === 'approved' ? 'rgba(0,255,102,.4)' : d.status === 'waiting' ? 'rgba(199,147,72,.35)' : d.status === 'production' ? 'var(--bone)' : 'var(--steel-3)'
                    }}
                  >
                    <option value="idle">Parado</option>
                    <option value="waiting">Aguardando</option>
                    <option value="production">Iniciado</option>
                    <option value="approved">Finalizado</option>
                  </select>
                  <div style={{display:'flex', gap:8}}>
                    <Button size="sm" kind="ghost" icon={Ico.edit()} onClick={() => openEditModal(d)}>Editar</Button>
                    <Button size="sm" icon={Ico.upload()} onClick={() => { setUploadDelivId(d.id); setShowUpload(true); }}>Versão</Button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {tab === 'schedule' && (
          <div>
            <SectionHd title={<>Cronograma <em>interno</em></>} n={(proj.deliverables || []).length + " ENTREGÁVEIS"} />
            <div className="card">
              <div className="pbody">
                <div className="timeline">
                  {(proj.deliverables || []).map(d => (
                    <div key={d.id} className="tl-item">
                      <div className={`stamp ${d.status==='waiting'?'urgent':''}`}>
                        <span className="d">{d.deadline.split(' ')[0]}</span>
                        <span className="m">{(d.deadline.split(' ')[1] || '').toUpperCase()}</span>
                      </div>
                      <div className="body">
                        <div className="ttl">{d.name}</div>
                        <div className="meta">
                          <span>Entregável {d.n}</span><span className="sep">{d.status_label || d.statusLabel}</span>
                        </div>
                      </div>
                      <div>{statusChip(d.status, d.status_label || d.statusLabel)}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )}

        {tab === 'conv' && (
          <div>
            <SectionHd title={<>CHAT com <em>{proj.client || proj.client_name}</em></>} n={(proj.conversation || []).length+' MENSAGENS'} />
            <div className="conv">
              {(proj.conversation || []).map((m, i) => (
                <div key={i} className="msg">
                  <span className={`avatar ${m.who==='ds'?'ds':''}`}>{m.name ? m.name[0] : 'U'}</span>
                  <div className="body">
                    <div className="who-line"><span className="nm">{m.name}</span><span className="when">· {m.when_text || m.when}</span></div>
                    <p>{m.body}</p>
                  </div>
                </div>
              ))}
              <div className="composer">
                <input placeholder="Mensagem para o cliente…" value={newClientMsg} onChange={e => setNewClientMsg(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') sendClientMsg(); }} />
                <Button kind="signal" icon={Ico.send()} onClick={sendClientMsg}>Enviar</Button>
              </div>
            </div>
          </div>
        )}

        {tab === 'files' && (
          <div>
            <SectionHd title={<>Arquivos <em>do projeto</em></>} n={(proj.finalFiles || []).length+' MATERIAIS'} right={
              <Button size="sm" icon={Ico.upload()} onClick={() => { setPublishName(''); setPublishSize(''); setPublishRelated(''); setPublishKind('PDF'); setShowPublishFile(true); }}>Publicar arquivo final</Button>
            } />
            <div className="files-grid">
              {(proj.finalFiles || []).map((f, i) => (
                <div key={i} className="file-card">
                  <div className="head">
                    <span className="icon">{f.icon}</span>
                    <div className="info">
                      <div className="nm">{f.name.split('.')[0].replace(/_/g,' ')}</div>
                      <div className="sub">// {f.related} · {f.kind}</div>
                    </div>
                  </div>
                  <div className="meta">
                    <div className="m"><span className="l">// Tipo</span><span className="v">{f.kind}</span></div>
                    <div className="m"><span className="l">// Tamanho</span><span className="v">{f.size}</span></div>
                    <div className="m"><span className="l">// Enviado</span><span className="v">{f.date}</span></div>
                  </div>
                  <div className="foot">
                    <Chip status="approved">Publicado</Chip>
                    <div style={{display:'flex', gap:8}}>
                      <Button size="sm" kind="ghost" icon={Ico.edit()}>Editar</Button>
                      <Button size="sm" icon={Ico.download()}>Baixar</Button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {tab === 'log' && (
          <div>
            <SectionHd title={<>Log <em>completo</em></>} n={(proj.activity || []).length+' EVENTOS'} />
            <div className="card">
              <div className="pbody" style={{padding:'0 22px'}}>
                <div className="log">
                  {(proj.activity || []).map((a, i) => (
                    <div key={i} className="log-row">
                      <span className={`ic ${a.kind==='approve'?'signal':a.kind==='warn'?'warn':''}`}>{Ico.dot()}</span>
                      <span className="txt">{a.txt} <em>· {a.who}</em></span>
                      <span className="when">{a.when_text || a.when}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )}
      </div>

      {showUpload && (
        <Modal wide title="ENVIAR NOVA VERSÃO" onClose={() => setShowUpload(false)}
          footer={<>
            <Button kind="ghost" onClick={() => setShowUpload(false)}>Cancelar</Button>
            <Button kind="primary" arrow onClick={async () => {
              if (!uploadDelivId) return;
              setShowUpload(false);
              try {
                const targetD = (proj.deliverables || []).find(x => x.id === uploadDelivId) || {};
                await API.updateDeliverable(proj.id, uploadDelivId, {
                  status: 'waiting',
                  status_label: 'Aguardando aprovação',
                  note: uploadNote,
                  file: uploadFile,
                  current_version: uploadVersion,
                  versions: (targetD.versions || 0) + 1
                });
                await API.addActivity(proj.id, {
                  kind: 'send',
                  txt: `Versão ${uploadVersion} do entregável "${targetD.name}" enviada para aprovação.`
                });
                 await API.addConversation(proj.id, `[Nova Versão · ${targetD.name}]: ${uploadNote || 'Nova versão enviada para avaliação.'}`);
                setToast('Versão enviada · cliente notificado');
                DATA.getProject(proj.id).then(setProject);
                triggerDeliverableEmail(targetD.name, 'Aguardando aprovação', uploadVersion, uploadNote);
                setUploadNote('');
              } catch (err) {
                setToast('Erro ao enviar versão: ' + err.message);
              }
            }}>Enviar para aprovação</Button>
          </>}>
          <div style={{display:'flex', flexDirection:'column', gap:18}}>
            <div className="form-grid-2">
              <Field label="Entregável" required>
                <select value={uploadDelivId} onChange={e => setUploadDelivId(e.target.value)}>
                  {(proj.deliverables || []).map(d => <option key={d.id} value={d.id}>{d.n} · {d.name}</option>)}
                </select>
              </Field>
              <Field label="Versão" required><input value={uploadVersion} onChange={e => setUploadVersion(e.target.value)} /></Field>
            </div>
            <Field label="Link do arquivo no Drive" required>
              <input
                placeholder="Cole o link do Google Drive aqui (ex: https://drive.google.com/...)"
                value={uploadFile}
                onChange={e => setUploadFile(e.target.value)}
              />
            </Field>
            <Field label="Mensagem para o cliente">
              <textarea placeholder="Explique o que mudou nesta versão, decisões tomadas, pontos a observar." value={uploadNote} onChange={e => setUploadNote(e.target.value)} style={{minHeight:100}}></textarea>
            </Field>
            <div className="form-grid-2">
              <Field label="Prazo sugerido para retorno"><input value={uploadDeadline} onChange={e => setUploadDeadline(e.target.value)} /></Field>
              <Field label="Rodadas restantes" hint="Cálculo automático"><input defaultValue="1 de 2" disabled /></Field>
            </div>
            <Check checked={true} onChange={()=>{}}>Notificar cliente sobre esta aprovação pendente.</Check>
          </div>
        </Modal>
      )}

      {showStartProject && (
        <Modal title="INICIAR PROJETO" onClose={() => setShowStartProject(false)}
          footer={<>
            <Button kind="ghost" onClick={() => setShowStartProject(false)}>Cancelar</Button>
            <Button kind="primary" arrow onClick={async () => {
              setShowStartProject(false);
              try {
                await API.updateProject(proj.id, {
                  status: 'production',
                  status_label: 'Em produção',
                  progress: 10
                });
                await API.addActivity(projectId, {
                  kind: 'check',
                  txt: 'Projeto iniciado oficialmente pela equipe.'
                });
                setToast('Projeto iniciado com sucesso!');
                DATA.getProject(proj.id).then(setProject);
              } catch(e) {
                setToast('Erro ao iniciar projeto: ' + e.message);
              }
            }}>Iniciar agora</Button>
          </>}>
          <p style={{fontSize:13.5, color:'var(--bone-dim)', lineHeight:1.6}}>
            Deseja iniciar oficialmente o projeto <strong>{proj.name || proj.title}</strong>? O status do projeto será atualizado para <strong>Em produção</strong> e o progresso inicial será definido como 10%.
          </p>
        </Modal>
      )}

      {showCreateDeliv && (
        <Modal title="CRIAR ENTREGÁVEL" onClose={() => setShowCreateDeliv(false)}
          footer={<>
            <Button kind="ghost" onClick={() => setShowCreateDeliv(false)}>Cancelar</Button>
            <Button kind="primary" arrow onClick={async () => {
              if (!delivName.trim()) {
                setToast('Por favor, digite o nome do entregável.');
                return;
              }
              setShowCreateDeliv(false);
              try {
                await API.createDeliverable(proj.id, {
                  n: delivOrder,
                  name: delivName,
                  deadline: delivDeadline || 'A definir',
                  primary: delivPrimary,
                  status: 'idle',
                  status_label: 'Não iniciado'
                });
                await API.addActivity(projectId, {
                  kind: 'note',
                  txt: `Entregável "${delivName}" adicionado ao projeto.`
                });
                setToast('Entregável criado com sucesso!');
                DATA.getProject(proj.id).then(setProject);
              } catch (e) {
                setToast('Erro ao criar entregável: ' + e.message);
              }
            }}>Criar entregável</Button>
          </>}>
          <div style={{display:'flex', flexDirection:'column', gap:18}}>
            <div className="form-grid-2">
              <Field label="Ordem (N)" required>
                <input value={delivOrder} onChange={e => setDelivOrder(e.target.value)} placeholder="Ex: 01, 02" />
              </Field>
              <Field label="Prazo estimado" required>
                <input value={delivDeadline} onChange={e => setDelivDeadline(e.target.value)} placeholder="Ex: 28 mai 2026" />
              </Field>
            </div>
            <Field label="Nome do entregável" required>
              <input value={delivName} onChange={e => setDelivName(e.target.value)} placeholder="Ex: Identidade Visual Principal" />
            </Field>
            <Check checked={delivPrimary} onChange={setDelivPrimary}>Definir como entregável principal do projeto.</Check>
          </div>
        </Modal>
      )}

      {showEditDeliv && (
        <Modal title="EDITAR ENTREGÁVEL" onClose={() => setShowEditDeliv(false)}
          footer={<>
            <Button kind="ghost" onClick={() => setShowEditDeliv(false)}>Cancelar</Button>
            <Button kind="primary" arrow onClick={async () => {
              if (!editDelivName.trim()) {
                setToast('Por favor, digite o nome do entregável.');
                return;
              }
              setShowEditDeliv(false);
              try {
                const existing = (proj.deliverables || []).find(x => x.id === editDelivId) || {};
                await API.updateDeliverable(projectId, editDelivId, {
                  n: editDelivOrder,
                  name: editDelivName,
                  deadline: editDelivDeadline || 'A definir',
                  primary: editDelivPrimary,
                  status: existing.status || 'idle',
                  status_label: existing.status_label || existing.statusLabel || 'Não iniciado',
                  versions: existing.versions || 0,
                  current_version: existing.current_version || existing.current || '—'
                });
                await API.addActivity(projectId, {
                  kind: 'note',
                  txt: `Entregável "${editDelivName}" atualizado.`
                });
                setToast('Entregável editado com sucesso!');
                DATA.getProject(proj.id).then(setProject);
              } catch (e) {
                setToast('Erro ao editar entregável: ' + e.message);
              }
            }}>Salvar alterações</Button>
          </>}>
          <div style={{display:'flex', flexDirection:'column', gap:18}}>
            <div className="form-grid-2">
              <Field label="Ordem (N)" required>
                <input value={editDelivOrder} onChange={e => setEditDelivOrder(e.target.value)} placeholder="Ex: 01, 02" />
              </Field>
              <Field label="Prazo estimado" required>
                <input value={editDelivDeadline} onChange={e => setEditDelivDeadline(e.target.value)} placeholder="Ex: 28 mai 2026" />
              </Field>
            </div>
            <Field label="Nome do entregável" required>
              <input value={editDelivName} onChange={e => setEditDelivName(e.target.value)} placeholder="Ex: Identidade Visual Principal" />
            </Field>
            <Check checked={editDelivPrimary} onChange={setEditDelivPrimary}>Definir como entregável principal do projeto.</Check>
          </div>
        </Modal>
      )}

      {showRequestApproval && (
        <Modal title="SOLICITAR APROVAÇÃO DE ENTREGÁVEL" onClose={() => setShowRequestApproval(false)}
          footer={<>
            <Button kind="ghost" onClick={() => setShowRequestApproval(false)}>Cancelar</Button>
            <Button kind="primary" arrow onClick={async () => {
              if (!selectedDelivId) return;
              setShowRequestApproval(false);
              try {
                const targetD = (proj.deliverables || []).find(x => x.id === selectedDelivId) || {};
                await API.updateDeliverable(projectId, selectedDelivId, {
                  status: 'waiting',
                  status_label: 'Aguardando aprovação',
                  file: targetD.file || '',
                  versions: targetD.versions || 1,
                  current_version: targetD.current_version || targetD.current || 'V01'
                });
                await API.addActivity(projectId, {
                  kind: 'send',
                  txt: `Solicitação de aprovação enviada para o entregável "${targetD.name}".`
                });
                setToast('Solicitação enviada!');
                DATA.getProject(proj.id).then(setProject);
                triggerDeliverableEmail(targetD.name, 'Aguardando aprovação', targetD.current_version || targetD.current || 'V01', 'Aguardando sua revisão e aprovação no portal.');
              } catch (e) {
                setToast('Erro ao enviar solicitação: ' + e.message);
              }
            }}>Solicitar aprovação</Button>
          </>}>
          <div style={{display:'flex', flexDirection:'column', gap:14}}>
            <p style={{fontSize:13.5, color:'var(--bone-dim)', lineHeight:1.6}}>
              Selecione qual entregável você deseja enviar para aprovação do cliente:
            </p>
            <Field label="Entregável" required>
              <select value={selectedDelivId} onChange={e => setSelectedDelivId(e.target.value)}>
                {(proj.deliverables || []).map(d => <option key={d.id} value={d.id}>{d.n} · {d.name} ({d.status_label || d.statusLabel})</option>)}
              </select>
            </Field>
          </div>
        </Modal>
      )}

      {showPublishFile && (
        <Modal title="PUBLICAR ARQUIVO FINAL" onClose={() => setShowPublishFile(false)}
          footer={<>
            <Button kind="ghost" onClick={() => setShowPublishFile(false)}>Cancelar</Button>
            <Button kind="primary" arrow onClick={async () => {
              if (!publishName.trim() || !publishSize.trim()) {
                setToast('Preencha os campos obrigatórios.');
                return;
              }
              setShowPublishFile(false);
              try {
                await API.addProjectFile(proj.id, {
                  name: publishName,
                  kind: publishKind,
                  size: publishSize,
                  related: publishRelated || 'Entrega'
                });
                await API.addActivity(projectId, {
                  kind: 'send',
                  txt: `Arquivo final publicado: "${publishName}".`
                });
                setToast('Arquivo final publicado com sucesso!');
                DATA.getProject(proj.id).then(setProject);
              } catch (e) {
                setToast('Erro ao publicar arquivo: ' + e.message);
              }
            }}>Publicar material</Button>
          </>}>
          <div style={{display:'flex', flexDirection:'column', gap:18}}>
            <Field label="Nome do arquivo" required>
              <input value={publishName} onChange={e => setPublishName(e.target.value)} placeholder="Ex: Kit_Social_Media_Aurora.zip" />
            </Field>
            <div className="form-grid-2">
              <Field label="Tipo de arquivo" required>
                <select value={publishKind} onChange={e => setPublishKind(e.target.value)}>
                  <option value="ZIP">ZIP</option>
                  <option value="PDF">PDF</option>
                  <option value="PNG">PNG</option>
                  <option value="SVG">SVG</option>
                  <option value="AI">AI</option>
                  <option value="MP4">MP4</option>
                </select>
              </Field>
              <Field label="Tamanho" required>
                <input value={publishSize} onChange={e => setPublishSize(e.target.value)} placeholder="Ex: 42 MB, 1.2 GB" />
              </Field>
            </div>
            <Field label="Área / Entregável relacionado">
              <input value={publishRelated} onChange={e => setPublishRelated(e.target.value)} placeholder="Ex: Identidade Visual, Manual de Marca" />
            </Field>
          </div>
        </Modal>
      )}

      {showFinishProject && (
        <Modal title="FINALIZAR PROJETO" onClose={() => setShowFinishProject(false)}
          footer={<>
            <Button kind="ghost" onClick={() => setShowFinishProject(false)}>Cancelar</Button>
            <Button kind="primary" arrow onClick={async () => {
              setShowFinishProject(false);
              try {
                await API.updateProject(proj.id, {
                  status: 'done',
                  status_label: 'Finalizado',
                  progress: 100
                });
                await API.addActivity(projectId, {
                  kind: 'approve',
                  txt: 'Projeto concluído e finalizado com sucesso!'
                });
                setToast('Projeto finalizado com sucesso!');
                DATA.getProject(proj.id).then(setProject);
              } catch(e) {
                setToast('Erro ao finalizar projeto: ' + e.message);
              }
            }}>Finalizar agora</Button>
          </>}>
          <p style={{fontSize:13.5, color:'var(--bone-dim)', lineHeight:1.6}}>
            Deseja realmente marcar o projeto <strong>{proj.name || proj.title}</strong> como <strong>Finalizado</strong>? O progresso será definido como 100%.
          </p>
        </Modal>
      )}

      {toast && <Toast>{toast}</Toast>}
    </div>
  );
}
window.AdminProject = AdminProject;


// =========================================================
// ADMIN SETTINGS & USER REGISTRATION
// =========================================================
function AdminSettings({ navigate }){
  const [users, setUsers] = React.useState([]);
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [role, setRole] = React.useState('collaborator');
  const [company, setCompany] = React.useState('Dead Sailor');
  const [phone, setPhone] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [createdUser, setCreatedUser] = React.useState(null);
  const [toast, setToast] = useToast();

  React.useEffect(() => {
    loadUsers();
  }, []);

  async function loadUsers() {
    try {
      const data = await API.getUsers();
      setUsers(data);
    } catch (e) {
      console.warn('Erro ao carregar usuários:', e);
    }
  }

  async function handleSubmit(e) {
    e.preventDefault();
    if (!name || !email || !role) {
      setToast('Preencha os campos obrigatórios');
      return;
    }
    setLoading(true);
    setCreatedUser(null);
    try {
      const res = await API.registerUser({
        name,
        email,
        role,
        company: 'Dead Sailor',
        phone
      });
      setCreatedUser(res);
      setToast('Usuário cadastrado com sucesso!');
      setName('');
      setEmail('');
      setPhone('');
      loadUsers();
    } catch (err) {
      setToast('Erro ao cadastrar: ' + err.message);
    } finally {
      setLoading(false);
    }
  }

  const staff = users.filter(u => u.role === 'admin' || u.role === 'leader' || u.role === 'collaborator');

  return (
    <div className="page" data-screen-label="Admin · Configurações">
      <div className="page-head">
        <div>
          <div className="kicker"><span>§ 09</span> CONFIGURAÇÕES DO PORTO</div>
          <h1>Gestão de <em>Equipe.</em></h1>
          <p className="sub">Cadastre novos administradores, líderes de projeto e colaboradores da equipe Dead Sailor.</p>
        </div>
        <div className="right">
          <div className="stamp"><span className="dot"></span><span>LIVE DIRECTORY · {staff.length} MEMBROS</span></div>
        </div>
      </div>

      <div className="two-col" style={{marginTop: 36, alignItems: 'start'}}>
        {/* Registration Form */}
        <div>
          <SectionHd title={<>Cadastrar <em>novo membro</em></>} n="FORMULÁRIO" />
          <div className="card">
            <form onSubmit={handleSubmit} style={{padding: '24px 22px'}}>
              <div style={{display:'flex', flexDirection:'column', gap: 18}}>
                <Field label="Nome completo" required hint="Nome que será exibido no chat e logs.">
                  <input value={name} onChange={e => setName(e.target.value)} placeholder="Ex: Lucas Costa" required />
                </Field>

                <div className="form-grid-2">
                  <Field label="E-mail de login" required hint="Será usado como e-mail de acesso.">
                    <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="lucas@deadsailor.io" required />
                  </Field>
                  <Field label="Perfil / Acesso" required>
                    <select value={role} onChange={e => setRole(e.target.value)}>
                      <option value="collaborator">Colaborador · Acesso a Projetos</option>
                      <option value="leader">Líder · Gestão de Projetos</option>
                      <option value="admin">Administrador · Acesso Total</option>
                    </select>
                  </Field>
                </div>

                <div className="form-grid-2">
                  <Field label="Empresa (Fixo)" hint="Fixo para equipe interna.">
                    <input value="Dead Sailor" disabled />
                  </Field>
                  <Field label="Celular / Contato">
                    <input value={phone} onChange={e => setPhone(e.target.value)} placeholder="+55 21 9 0000 0000" />
                  </Field>
                </div>

                <div style={{marginTop: 10}}>
                  <Button type="submit" kind="primary" arrow disabled={loading}>
                    {loading ? 'Cadastrando...' : 'Cadastrar Membro'}
                  </Button>
                </div>
              </div>
            </form>
          </div>

          {/* holographic terminal display for newly generated temporary password */}
          {createdUser && (
            <div className="card" style={{marginTop: 24, borderColor: 'var(--signal)', background: 'rgba(0, 255, 102, 0.05)'}}>
              <div className="ptop" style={{borderBottom: '1px solid rgba(0, 255, 102, 0.2)'}}>
                <span className="mono" style={{color: 'var(--signal)'}}>[// SENHA PROVISÓRIA GERADA]</span>
                <span>Nº {createdUser.user.id.slice(-6).toUpperCase()}</span>
              </div>
              <div className="pbody" style={{fontFamily: 'var(--mono)'}}>
                <div style={{fontSize: 11, color: 'var(--fog)', marginBottom: 8}}>// CADASTRO CONCLUÍDO COM SUCESSO:</div>
                <div style={{fontSize: 13, color: 'var(--bone)', marginBottom: 12}}>
                  Nome: <strong style={{color: 'var(--bone)'}}>{createdUser.user.name}</strong><br/>
                  E-mail: <strong style={{color: 'var(--signal)'}}>{createdUser.user.email}</strong><br/>
                  Perfil: <strong>{createdUser.user.role === 'admin' ? 'ADMINISTRADOR' : createdUser.user.role === 'leader' ? 'LÍDER' : 'COLABORADOR'}</strong>
                </div>
                
                <div style={{border: '1px dashed var(--signal)', padding: '16px', background: 'rgba(0, 255, 102, 0.02)', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
                  <div>
                    <span style={{fontSize: 9, color: 'var(--fog-2)', display: 'block', letterSpacing: '1px'}}>SENHA TEMPORÁRIA:</span>
                    <span style={{fontSize: 22, color: 'var(--signal)', fontWeight: 600, letterSpacing: '2px'}}>{createdUser.tempPassword}</span>
                  </div>
                  <Button size="sm" kind="ghost" onClick={() => {
                    navigator.clipboard.writeText(createdUser.tempPassword);
                    setToast('Senha copiada para a área de transferência!');
                  }}>Copiar senha</Button>
                </div>
                
                <p style={{fontSize: 10, color: 'var(--fog-2)', marginTop: 12, lineHeight: 1.5}}>
                  * Passe esta senha temporária para o colaborador. Ele poderá acessar seu respectivo painel imediatamente.
                </p>
              </div>
            </div>
          )}
        </div>

        {/* Directory List */}
        <div>
          <SectionHd title={<>Diretório de <em>equipe</em></>} n={staff.length + " REGISTROS"} />
          <div className="tbl-wrap" style={{maxHeight: 560, overflowY: 'auto'}}>
            <table className="tbl">
              <thead>
                <tr>
                  <th>Nome / E-mail</th>
                  <th>Empresa</th>
                  <th>Cargo</th>
                </tr>
              </thead>
              <tbody>
                {staff.map(u => (
                  <tr key={u.id}>
                    <td className="tnm">
                      <strong style={{fontSize: '12px', display: 'block', color: 'var(--bone)'}}>{u.name}</strong>
                      <span className="mono" style={{fontSize: '10px', color: 'var(--fog-2)'}}>{u.email}</span>
                    </td>
                    <td className="tclient">{u.company || 'Dead Sailor'}</td>
                    <td>{statusChip(u.role === 'admin' ? 'approved' : u.role === 'leader' ? 'planning' : 'review', u.role === 'admin' ? 'ADMIN' : u.role === 'leader' ? 'LÍDER' : 'COLABORADOR')}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {toast && <Toast>{toast}</Toast>}
    </div>
  );
}
window.AdminSettings = AdminSettings;


// =========================================================
// CLIENTS LIST & CREATION
// =========================================================
function AdminClients({ navigate }){
  const [clientsData, setClientsData] = useState(null);
  const [search, setSearch] = useState('');
  const [showNewClient, setShowNewClient] = useState(false);
  const [ncName, setNcName] = useState('');
  const [ncCity, setNcCity] = useState('');
  const [ncAddress, setNcAddress] = useState('');
  const [ncContactName, setNcContactName] = useState('');
  const [ncContactEmail, setNcContactEmail] = useState('');
  const [ncCnpj, setNcCnpj] = useState('');
  const [ncPhone, setNcPhone] = useState('');
  const [ncDriveLink, setNcDriveLink] = useState('');
  const [ncPassword, setNcPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [toast, setToast] = useToast();
  const d = Da();

  // Detalhes, Edição e Histórico de Clientes
  const [selectedClient, setSelectedClient] = useState(null);
  const [editName, setEditName] = useState('');
  const [editCnpj, setEditCnpj] = useState('');
  const [editContactName, setEditContactName] = useState('');
  const [editPhone, setEditPhone] = useState('');
  const [editCity, setEditCity] = useState('');
  const [editAddress, setEditAddress] = useState('');
  const [editDriveLink, setEditDriveLink] = useState('');
  const [editContactEmail, setEditContactEmail] = useState('');
  const [editPassword, setEditPassword] = useState('');
  const [editSaving, setEditSaving] = useState(false);
  const [allProjects, setAllProjects] = useState([]);
  const [allBriefings, setAllBriefings] = useState([]);
  const [sendingAccessEmail, setSendingAccessEmail] = useState(false);
  const [sendingBriefingEmail, setSendingBriefingEmail] = useState(false);
  const [deleteConfirmClient, setDeleteConfirmClient] = useState(null);
  const [deleteInputId, setDeleteInputId] = useState('');

  React.useEffect(() => {
    if (showNewClient) {
      const generatedPass = 'ds-temp-' + Math.floor(1000 + Math.random() * 9000);
      setNcPassword(generatedPass);
    }
  }, [showNewClient]);

  const [acName, setAcName] = useState('');
  const [acEmail, setAcEmail] = useState('');
  const [acCompanyId, setAcCompanyId] = useState('');
  const [acPhone, setAcPhone] = useState('');
  const [acPassword, setAcPassword] = useState('');
  const [acLoading, setAcLoading] = useState(false);
  const [createdUser, setCreatedUser] = useState(null);

  const handleAcCompanyChange = (companyId) => {
    setAcCompanyId(companyId);
    if (companyId) {
      const selected = sourceClients.find(c => c.id === companyId);
      if (selected) {
        setAcName(selected.contact_name || '');
        setAcEmail(selected.contact_email || '');
        setAcPhone(selected.phone || '');
        
        // Verifica se já tem uma senha cadastrada
        const existingPass = passwords[selected.contact_email];
        if (existingPass && existingPass !== '—') {
          setAcPassword(existingPass);
        } else {
          // Se não tem acesso ainda, gera uma temporária
          setAcPassword('ds-temp-' + Math.floor(1000 + Math.random() * 9000));
        }
      }
    } else {
      setAcName('');
      setAcEmail('');
      setAcPhone('');
      setAcPassword('');
    }
  };

  // States para busca rápida de senhas na tabela
  const [passwords, setPasswords] = useState({});
  const [visiblePasswords, setVisiblePasswords] = useState({});
  const [editingPasswords, setEditingPasswords] = useState({});
  const [savingPasswordEmail, setSavingPasswordEmail] = useState(null);

  // Callback para salvar a senha de forma rápida/inline diretamente da tabela
  async function handleSavePasswordInline(email, newPassword) {
    if (!newPassword || newPassword.trim() === '') {
      setToast('A senha não pode ser vazia.');
      return;
    }
    setSavingPasswordEmail(email);
    try {
      await API.resetUserPassword(email, newPassword);
      setPasswords(prev => ({ ...prev, [email]: newPassword }));
      setToast('Senha de acesso atualizada com sucesso!');
    } catch (err) {
      setToast('Erro ao atualizar senha: ' + err.message);
    } finally {
      setSavingPasswordEmail(null);
    }
  }

  const loadClients = React.useCallback(async () => {
    try {
      await DATA.refreshClients();
      const loadedClients = DATA.clients || [];
      setClientsData(loadedClients);
      
      // Busca as senhas dos clientes carregados em segundo plano para exibição rápida
      loadedClients.forEach(async (c) => {
        if (c.contact_email) {
          try {
            const uObj = await API.getUserByEmail(c.contact_email);
            if (uObj && uObj.password) {
              setPasswords(prev => ({ ...prev, [c.contact_email]: uObj.password }));
              setEditingPasswords(prev => ({ ...prev, [c.contact_email]: uObj.password }));
            } else {
              setPasswords(prev => ({ ...prev, [c.contact_email]: '—' }));
              setEditingPasswords(prev => ({ ...prev, [c.contact_email]: '' }));
            }
          } catch (e) {
            console.warn('Erro ao carregar senha em segundo plano para:', c.contact_email);
          }
        }
      });
      
      try {
        await DATA.refreshAdminProjects();
        setAllProjects(DATA.adminProjects || []);
      } catch (errProj) {
        console.warn('Erro ao carregar projetos do admin:', errProj);
      }

      try {
        await DATA.refreshBriefings();
        setAllBriefings(DATA.briefings || []);
      } catch (errBrief) {
        console.warn('Erro ao carregar briefings:', errBrief);
      }
    } catch(e) {
      console.warn('Erro ao carregar clientes:', e);
    }
  }, []);

  React.useEffect(() => {
    loadClients();
  }, [loadClients]);

  const sourceClients = clientsData || d.clients || [];

  const clients = useMemo(() => sourceClients.filter(c => {
    if(search && !(c.name?.toLowerCase().includes(search.toLowerCase()) || c.city?.toLowerCase().includes(search.toLowerCase()) || c.contact_name?.toLowerCase().includes(search.toLowerCase()))) return false;
    return true;
  }), [search, sourceClients]);

  async function handleViewClient(client) {
    setSelectedClient(client);
    setEditName(client.name || '');
    setEditCnpj(client.cnpj || '');
    setEditContactName(client.contact_name || '');
    setEditPhone(client.phone || '');
    setEditCity(client.city || '');
    setEditAddress(client.address || '');
    setEditDriveLink(client.drive_link || '');
    setEditContactEmail(client.contact_email || '');
    setEditPassword('');

    if (client.contact_email) {
      try {
        const uObj = await API.getUserByEmail(client.contact_email);
        if (uObj && uObj.password) {
          // Se for hash do bcrypt, deixamos vazio no formulário de edição para evitar confusão
          if (uObj.password.startsWith('$2a$')) {
            setEditPassword('');
          } else {
            setEditPassword(uObj.password);
          }
        }
      } catch (errPass) {
        console.warn('Erro ao ler senha salva para preenchimento:', errPass.message);
      }
    }
  }

  async function handleSaveEdit(e) {
    if (e) e.preventDefault();
    if (!editName || !editContactName || !editContactEmail) {
      setToast('Preencha os campos obrigatórios (*)');
      return;
    }
    setEditSaving(true);
    try {
      await API.updateClient(selectedClient.id, {
        name: editName,
        city: editCity,
        contact_name: editContactName,
        contact_email: editContactEmail,
        cnpj: editCnpj,
        phone: editPhone,
        address: editAddress,
        drive_link: editDriveLink
      });
      
      // Se uma senha foi definida/alterada, sincroniza com o banco de dados
      if (editPassword) {
        await API.resetUserPassword(editContactEmail, editPassword);
      }
      
      setToast('Dados do cliente atualizados com sucesso!');
      loadClients();
      
      // Update selectedClient state with new data so the UI updates
      setSelectedClient(prev => ({
        ...prev,
        name: editName,
        city: editCity,
        contact_name: editContactName,
        contact_email: editContactEmail,
        cnpj: editCnpj,
        phone: editPhone,
        address: editAddress,
        drive_link: editDriveLink
      }));
    } catch(err) {
      setToast('Erro ao atualizar cliente: ' + err.message);
    } finally {
      setEditSaving(false);
    }
  }

  async function handleDeleteClient() {
    if (!deleteConfirmClient) return;
    if (deleteInputId !== deleteConfirmClient.id) {
      setToast('ID do cliente incorreto.');
      return;
    }
    setLoading(true);
    const deleteId = deleteConfirmClient.id;
    const deleteName = deleteConfirmClient.name;
    try {
      await API.deleteClient(deleteId);
      
      // Atualização otimista direta no estado do React (some da tela no mesmo instante)
      setClientsData(prev => {
        const currentList = prev || sourceClients || [];
        return currentList.filter(c => c.id !== deleteId);
      });

      // Mutação reativa local para garantir sumiço no cache em memória
      if (window.DS_DATA) {
        if (window.DS_DATA.clients) {
          window.DS_DATA.clients = window.DS_DATA.clients.filter(c => c.id !== deleteId);
        }
        if (window.DS_DATA._clients) {
          window.DS_DATA._clients = window.DS_DATA._clients.filter(c => c.id !== deleteId);
        }
      }
      
      setToast(`Cliente "${deleteName}" excluído com sucesso.`);
      setDeleteConfirmClient(null);
      setSelectedClient(null);
    } catch(err) {
      setToast('Erro ao excluir cliente: ' + err.message);
    } finally {
      setLoading(false);
    }
  }

  async function triggerSendAccessEmail(userObj, tempPass) {
    setSendingAccessEmail(true);
    try {
      await API.sendAccessEmail({
        email: userObj.email,
        name: userObj.name,
        password: tempPass,
        company: userObj.company
      });
      setToast(`E-mail com credenciais enviado para ${userObj.email}!`);
    } catch (err) {
      setToast('Erro ao enviar e-mail de acesso: ' + err.message);
    } finally {
      setSendingAccessEmail(false);
    }
  }

  async function triggerSendBriefingEmail(userObj) {
    setSendingBriefingEmail(true);
    try {
      const clientRec = sourceClients.find(c => c.name === userObj.company || c.contact_email === userObj.email) || {};
      await API.sendBriefingEmail({
        email: userObj.email,
        name: userObj.name,
        company: userObj.company,
        drive_link: clientRec.drive_link || ''
      });
      setToast(`E-mail de briefing enviado com sucesso para ${userObj.email}!`);
    } catch (err) {
      setToast('Erro ao enviar convite de briefing: ' + err.message);
    } finally {
      setSendingBriefingEmail(false);
    }
  }

  async function handleSubmit(e) {
    if (e) e.preventDefault();
    if (!ncName || !ncContactName || !ncContactEmail) {
      setToast('Preencha os campos obrigatórios (*)');
      return;
    }
    setLoading(true);
    setCreatedUser(null);
    let clientCreated = false;
    const generatedId = ncName.toLowerCase().trim().replace(/[^a-z0-9]+/g, '-');
    try {
      // 1. Cria o registro do cliente
      await API.createClient({
        id: generatedId,
        name: ncName,
        city: ncCity || 'A definir · BR',
        contact_name: ncContactName,
        contact_email: ncContactEmail,
        cnpj: ncCnpj,
        phone: ncPhone,
        address: ncAddress,
        drive_link: ncDriveLink
      });
      clientCreated = true;

      // 2. Cria automaticamente o login de acesso do cliente com a mesma senha pre-gerada
      const res = await API.registerUser({
        name: ncContactName,
        email: ncContactEmail,
        role: 'client',
        company: ncName,
        phone: ncPhone,
        password: ncPassword
      });

      setCreatedUser(res);
      setToast(`Cliente "${ncName}" e credenciais gerados com sucesso!`);
      
      // Limpa os campos
      setNcName('');
      setNcCity('');
      setNcAddress('');
      setNcContactName('');
      setNcContactEmail('');
      setNcCnpj('');
      setNcPhone('');
      setNcDriveLink('');
      setNcPassword('');
      setShowNewClient(false);
      loadClients();
    } catch (err) {
      // Rollback se a criação do cliente no BD deu certo mas o cadastro de login/acesso falhou
      if (clientCreated) {
        try {
          await API.deleteClient(generatedId);
        } catch (rollBackErr) {
          console.warn('Erro ao deletar cliente no rollback:', rollBackErr);
        }
      }
      setToast('Erro ao cadastrar cliente e acesso: ' + err.message);
    } finally {
      setLoading(false);
    }
  }

  async function handleRegisterAccess(e) {
    if (e) e.preventDefault();
    if (!acName || !acEmail || !acCompanyId) {
      setToast('Preencha os campos obrigatórios');
      return;
    }
    setAcLoading(true);
    setCreatedUser(null);
    try {
      const selectedClient = sourceClients.find(c => c.id === acCompanyId) || {};
      
      // Verifica se o cliente já possui acesso no sistema (se tem senha salva)
      const existingPass = passwords[acEmail];
      const alreadyHasAccess = existingPass && existingPass !== '—';

      if (alreadyHasAccess) {
        // Apenas atualiza a senha do usuário existente
        await API.resetUserPassword(acEmail, acPassword);
        
        // Atualiza os estados locais das senhas
        setPasswords(prev => ({ ...prev, [acEmail]: acPassword }));
        setEditingPasswords(prev => ({ ...prev, [acEmail]: acPassword }));
        
        setToast('Senha do cliente atualizada com sucesso!');
        setAcName('');
        setAcEmail('');
        setAcCompanyId('');
        setAcPhone('');
        setAcPassword('');
      } else {
        // Registra um novo acesso
        const res = await API.registerUser({
          name: acName,
          email: acEmail,
          role: 'client',
          company: selectedClient.name || acCompanyId,
          phone: acPhone,
          password: acPassword
        });
        setCreatedUser(res);
        
        // Sincroniza senha no estado local
        setPasswords(prev => ({ ...prev, [acEmail]: acPassword }));
        setEditingPasswords(prev => ({ ...prev, [acEmail]: acPassword }));
        
        setToast('Acesso de cliente liberado com sucesso!');
        setAcName('');
        setAcEmail('');
        setAcCompanyId('');
        setAcPhone('');
        setAcPassword('');
      }
    } catch (err) {
      setToast('Erro ao liberar/atualizar acesso: ' + err.message);
    } finally {
      setAcLoading(false);
    }
  }

  return (
    <div className="page" data-screen-label="Admin · Clientes">
      <div className="page-head">
        <div>
          <div className="kicker"><span><span>§ 07</span> GESTÃO DE CLIENTES</span></div>
          <h1>Diretório de <em>Clientes.</em></h1>
          <p className="sub">Cadastre novos parceiros e gere credenciais de acesso imediato ao Project Dock.</p>
        </div>
        <div className="right">
          <div className="stamp"><span className="dot"></span><span>{clients.length} CLIENTES CADASTRADOS</span></div>
          <div className="actions">
            <Button kind="primary" icon={Ico.plus()} onClick={() => setShowNewClient(true)}>Novo cliente</Button>
          </div>
        </div>
      </div>

      <div className="filter-bar">
        <div className="left">
          <div className="search" style={{width: 320}}>
            <span style={{color:'var(--fog-2)'}}>{Ico.search()}</span>
            <input placeholder="Buscar por empresa, cidade ou contato…" value={search} onChange={e=>setSearch(e.target.value)} />
          </div>
        </div>
      </div>

      <div className="two-col" style={{marginTop: 36, alignItems: 'start'}}>
        <div>
          <SectionHd title={<>Empresas & <em>Studios</em></>} n={clients.length + " REGISTROS"} />
          <div className="tbl-wrap">
            <table className="tbl">
              <thead>
                <tr>
                  <th>Empresa / Studio</th>
                  <th>CNPJ</th>
                  <th>Localização</th>
                  <th>Contato principal</th>
                  <th>E-mail de contato</th>
                  <th style={{width: 250}}>Senha de acesso</th>
                </tr>
              </thead>
              <tbody>
                {clients.map(c => {
                  const pass = passwords[c.contact_email];
                  const editPass = editingPasswords[c.contact_email] !== undefined ? editingPasswords[c.contact_email] : '';
                  const isVisible = visiblePasswords[c.contact_email] || false;
                  const isSaving = savingPasswordEmail === c.contact_email;
                  const isModified = pass !== undefined && pass !== '—' && editPass !== pass;

                  return (
                    <tr key={c.id} onClick={() => handleViewClient(c)} style={{cursor: 'pointer'}}>
                      <td className="tnm" style={{fontWeight: 'bold', color: 'var(--bone)'}}>{c.name}</td>
                      <td className="mono" style={{fontSize: 10, color: 'var(--fog-2)'}}>{c.cnpj || '—'}</td>
                      <td className="tclient">{c.city || '—'}</td>
                      <td className="tclient">{c.contact_name || '—'}</td>
                      <td className="mono" style={{fontSize: 10, color: 'var(--fog)'}}>{c.contact_email || '—'}</td>
                      <td onClick={(e) => e.stopPropagation()} style={{position: 'relative'}}>
                        {c.contact_email ? (
                          <div style={{display: 'flex', alignItems: 'center', gap: 6}}>
                            <div style={{position: 'relative', flex: 1}}>
                              <input
                                type="text"
                                value={editPass}
                                onChange={(e) => {
                                  const val = e.target.value;
                                  setEditingPasswords(prev => ({ ...prev, [c.contact_email]: val }));
                                }}
                                style={{
                                  padding: '6px 8px',
                                  fontSize: '11px',
                                  fontFamily: 'var(--mono)',
                                  background: 'rgba(232, 226, 216, 0.02)',
                                  border: '1px solid var(--steel)',
                                  color: 'var(--bone)',
                                  width: '100%',
                                  boxSizing: 'border-box'
                                }}
                                placeholder={pass === undefined ? "Carregando..." : "Sem senha"}
                                disabled={pass === undefined}
                              />
                            </div>
                            
                            {/* Copiar senha */}
                            {pass && pass !== '—' && (
                              <button
                                type="button"
                                style={{
                                  padding: '5px 8px',
                                  border: '1px solid var(--steel)',
                                  fontSize: '9px',
                                  fontFamily: 'var(--mono)',
                                  color: 'var(--bone-dim)',
                                  cursor: 'pointer',
                                  display: 'flex',
                                  alignItems: 'center',
                                  justifyContent: 'center',
                                  background: 'transparent'
                                }}
                                onClick={() => {
                                  navigator.clipboard.writeText(pass);
                                  setToast('Senha copiada!');
                                }}
                                title="Copiar Senha"
                              >
                                COPY
                              </button>
                            )}

                            {/* Salvar se modificada */}
                            {isModified && (
                              <button
                                type="button"
                                style={{
                                  padding: '5px 10px',
                                  background: 'rgba(0, 255, 102, 0.1)',
                                  border: '1px solid var(--signal)',
                                  color: 'var(--signal)',
                                  fontSize: '9px',
                                  fontFamily: 'var(--mono)',
                                  cursor: 'pointer',
                                  display: 'flex',
                                  alignItems: 'center',
                                  justifyContent: 'center',
                                  fontWeight: 'bold'
                                }}
                                disabled={isSaving}
                                onClick={() => handleSavePasswordInline(c.contact_email, editPass)}
                              >
                                {isSaving ? '...' : 'SAVE'}
                              </button>
                            )}
                          </div>
                        ) : (
                          <span style={{color: 'var(--fog-2)', fontSize: '10px', fontFamily: 'var(--mono)'}}>// SEM CONTA</span>
                        )}
                      </td>
                    </tr>
                  );
                })}
                {clients.length === 0 && (
                  <tr>
                    <td colSpan="6" style={{textAlign:'center', padding: '36px 0', color: 'var(--fog-2)', fontFamily: 'var(--mono)', fontSize: 11}}>
                      // NENHUM CLIENTE CADASTRADO
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>

        <div>
          <SectionHd title={<>Liberar <em>acesso (Login)</em></>} n="CREDENCIAS" />
          <div className="card">
            <form onSubmit={handleRegisterAccess} style={{padding: '24px 22px'}}>
              <div style={{display:'flex', flexDirection:'column', gap: 18}}>
                <Field label="Empresa vinculada" required hint="Selecione o studio para o qual deseja liberar acesso.">
                  <select value={acCompanyId} onChange={e => handleAcCompanyChange(e.target.value)} required>
                    <option value="">// SELECIONE UMA EMPRESA</option>
                    {sourceClients.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
                  </select>
                </Field>

                <Field label="Nome do contato do cliente" required hint="Nome da pessoa que fará login.">
                  <input value={acName} onChange={e => setAcName(e.target.value)} placeholder="Ex: Helena Vidal" required />
                </Field>

                <div className="form-grid-2">
                  <Field label="E-mail de login" required hint="E-mail de acesso do cliente.">
                    <input type="email" value={acEmail} onChange={e => setAcEmail(e.target.value)} placeholder="helena@aurorastudio.com" required />
                  </Field>
                  <Field label="Celular / Contato">
                    <input value={acPhone} onChange={e => setAcPhone(e.target.value)} placeholder="+55 11 9 0000 0000" />
                  </Field>
                </div>

                {acCompanyId && (
                  <Field 
                    label={acPassword && acPassword.startsWith('$2a$') ? "Acesso cadastrado (Senha segura)" : "Senha de acesso do cliente"} 
                    required 
                    hint={acPassword && acPassword.startsWith('$2a$') ? "Esta empresa possui uma senha encriptada legada. Clique para gerar uma nova em texto plano e ter controle total." : "Senha cadastrada ou temporária do cliente (editável)."}
                  >
                    <div style={{display: 'flex', gap: 8}}>
                      <input 
                        type="text"
                        value={acPassword} 
                        onChange={e => setAcPassword(e.target.value)} 
                        disabled={acPassword && acPassword.startsWith('$2a$')}
                        style={{fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--signal)', letterSpacing: '1px', fontWeight: 600, background: 'rgba(232, 226, 216, 0.02)', border: '1px solid var(--steel)'}} 
                        required 
                      />
                      {acPassword && acPassword.startsWith('$2a$') ? (
                        <button
                          type="button"
                          style={{
                            padding: '10px 14px',
                            border: '1px solid var(--signal)',
                            background: 'rgba(0, 255, 102, 0.05)',
                            fontSize: '9px',
                            fontFamily: 'var(--mono)',
                            color: 'var(--signal)',
                            cursor: 'pointer',
                            whiteSpace: 'nowrap'
                          }}
                          onClick={() => {
                            setAcPassword('ds-temp-' + Math.floor(1000 + Math.random() * 9000));
                            setToast('Nova senha temporária gerada! Clique em Atualizar Senha para gravar.');
                          }}
                        >
                          GERAR NOVA
                        </button>
                      ) : (
                        <button
                          type="button"
                          style={{
                            padding: '10px 14px',
                            border: '1px solid var(--steel)',
                            fontSize: '10px',
                            fontFamily: 'var(--mono)',
                            color: 'var(--bone-dim)',
                            cursor: 'pointer',
                            background: 'transparent'
                          }}
                          onClick={() => {
                            navigator.clipboard.writeText(acPassword);
                            setToast('Senha copiada!');
                          }}
                        >
                          COPY
                        </button>
                      )}
                    </div>
                  </Field>
                )}

                <div style={{marginTop: 10}}>
                  <Button type="submit" kind="primary" arrow disabled={acLoading}>
                    {acLoading ? 'Processando...' : (passwords[acEmail] && passwords[acEmail] !== '—' ? 'Atualizar Senha' : 'Liberar Acesso')}
                  </Button>
                </div>
              </div>
            </form>
          </div>

          {createdUser && (
            <div className="card" style={{marginTop: 24, borderColor: 'var(--signal)', background: 'rgba(0, 255, 102, 0.05)'}}>
              <div className="ptop" style={{borderBottom: '1px solid rgba(0, 255, 102, 0.2)'}}>
                <span className="mono" style={{color: 'var(--signal)'}}>[// ACESSO DO CLIENTE LIBERADO]</span>
                <span>Nº {createdUser.user.id.slice(-6).toUpperCase()}</span>
              </div>
              <div className="pbody" style={{fontFamily: 'var(--mono)'}}>
                <div style={{fontSize: 11, color: 'var(--fog)', marginBottom: 8}}>// CONTA CRIADA COM SUCESSO:</div>
                <div style={{fontSize: 13, color: 'var(--bone)', marginBottom: 12}}>
                  Empresa: <strong style={{color: 'var(--bone)'}}>{createdUser.user.company}</strong><br/>
                  Contato: <strong>{createdUser.user.name}</strong><br/>
                  E-mail: <strong style={{color: 'var(--signal)'}}>{createdUser.user.email}</strong>
                </div>
                
                <div style={{border: '1px dashed var(--signal)', padding: '16px', background: 'rgba(0, 255, 102, 0.02)', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
                  <div>
                    <span style={{fontSize: 9, color: 'var(--fog-2)', display: 'block', letterSpacing: '1px'}}>SENHA TEMPORÁRIA:</span>
                    <span style={{fontSize: 22, color: 'var(--signal)', fontWeight: 600, letterSpacing: '2px'}}>{createdUser.tempPassword}</span>
                  </div>
                  <Button size="sm" kind="ghost" onClick={() => {
                    navigator.clipboard.writeText(createdUser.tempPassword);
                    setToast('Senha copiada para a área de transferência!');
                  }}>Copiar senha</Button>
                </div>

                <div style={{display: 'flex', gap: 10, marginTop: 16}}>
                  <Button size="sm" kind="primary" disabled={sendingAccessEmail} onClick={() => triggerSendAccessEmail(createdUser.user, createdUser.tempPassword)}>
                    {sendingAccessEmail ? 'Disparando...' : 'Enviar Acesso por E-mail'}
                  </Button>
                  <Button size="sm" kind="ghost" disabled={sendingBriefingEmail} onClick={() => triggerSendBriefingEmail(createdUser.user)}>
                    {sendingBriefingEmail ? 'Disparando...' : 'Notificar Briefing'}
                  </Button>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

      {showNewClient && (
        <Modal wide title="CADASTRAR NOVO CLIENTE" onClose={() => setShowNewClient(false)}
          footer={<>
            <Button kind="ghost" onClick={() => setShowNewClient(false)}>Cancelar</Button>
            <Button kind="primary" arrow disabled={loading} onClick={handleSubmit}>{loading ? 'Salvando...' : 'Criar Cliente'}</Button>
          </>}>
          <div style={{display:'flex', flexDirection:'column', gap:18}}>
            <div className="form-grid-2">
              <Field label="Nome da Empresa / Studio" required hint="Nome da marca ou estúdio">
                <input value={ncName} onChange={e => setNcName(e.target.value)} placeholder="Ex: Lume Studio" required />
              </Field>
              <Field label="CNPJ da Empresa" hint="CNPJ (não obrigatório)">
                <input value={ncCnpj} onChange={e => setNcCnpj(e.target.value)} placeholder="Ex: 00.000.000/0000-00" />
              </Field>
            </div>

            <div className="form-grid-2">
              <Field label="Nome do Responsável" required hint="Pessoa que fará login">
                <input value={ncContactName} onChange={e => setNcContactName(e.target.value)} placeholder="Ex: Carlos Lume" required />
              </Field>
              <Field label="Telefone / Celular" hint="Contato do cliente">
                <input value={ncPhone} onChange={e => setNcPhone(e.target.value)} placeholder="Ex: +55 11 9 0000 0000" />
              </Field>
            </div>

            <div className="form-grid-2">
              <Field label="Localização / Cidade" hint="Ex: São Paulo · BR">
                <input value={ncCity} onChange={e => setNcCity(e.target.value)} placeholder="Ex: São Paulo · BR" />
              </Field>
              <Field label="Endereço Completo" hint="Endereço da sede">
                <input value={ncAddress} onChange={e => setNcAddress(e.target.value)} placeholder="Ex: Av. Paulista, 1000 - Cj 12" />
              </Field>
            </div>

            <Field label="Link da Pasta do Google Drive" hint="Link compartilhado para entrega de referências e arquivos do cliente">
              <input value={ncDriveLink} onChange={e => setNcDriveLink(e.target.value)} placeholder="Ex: https://drive.google.com/drive/folders/..." />
            </Field>

            <div className="form-grid-2">
              <Field label="E-mail de Login" required hint="Usado para acessar o portal">
                <input type="email" value={ncContactEmail} onChange={e => setNcContactEmail(e.target.value)} placeholder="Ex: contato@studiolume.com" required />
              </Field>
              <Field label="Senha Pré-montada (Copie antes de enviar)" required hint="Senha gerada para o primeiro acesso">
                <div style={{display: 'flex', gap: 8}}>
                  <input value={ncPassword} readOnly style={{fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--signal)', letterSpacing: '1px', fontWeight: 600, background: 'rgba(232, 226, 216, 0.02)'}} />
                  <Button kind="ghost" size="sm" onClick={() => {
                    navigator.clipboard.writeText(ncPassword);
                    setToast('Senha copiada!');
                  }}>Copiar</Button>
                </div>
              </Field>
            </div>
          </div>
        </Modal>
      )}

      {selectedClient && (
        <Modal xWide title={`DOCK · DADOS & HISTÓRICO: ${selectedClient.name.toUpperCase()}`} onClose={() => setSelectedClient(null)}
          footer={
            <div style={{display: 'flex', justifyContent: 'space-between', width: '100%'}}>
              <Button kind="ghost" style={{borderColor: 'rgba(255, 77, 77, 0.4)', color: '#ff4d4d'}} onClick={() => { setDeleteConfirmClient(selectedClient); setDeleteInputId(''); }}>Excluir cliente</Button>
              <Button kind="ghost" onClick={() => setSelectedClient(null)}>Fechar</Button>
            </div>
          }>
          <div className="two-col" style={{alignItems: 'start', gap: 32}}>
            
            {/* Coluna da Esquerda: Cadastro (Formulário de Edição) */}
            <div style={{flex: '1 1 42%'}}>
              <SectionHd title={<>Editar <em>Cadastro</em></>} n="DADOS CADASTRAIS" />
              <div className="card" style={{marginTop: 16}}>
                <form onSubmit={handleSaveEdit} style={{padding: '24px 22px', display:'flex', flexDirection:'column', gap: 18}}>
                  <div className="form-grid-2">
                    <Field label="Nome da Empresa / Studio" required hint="Nome da marca ou estúdio">
                      <input value={editName} onChange={e => setEditName(e.target.value)} required />
                    </Field>
                    <Field label="CNPJ da Empresa" hint="CNPJ (não obrigatório)">
                      <input value={editCnpj} onChange={e => setEditCnpj(e.target.value)} placeholder="00.000.000/0000-00" />
                    </Field>
                  </div>

                  <div className="form-grid-2">
                    <Field label="Nome do Responsável" required hint="Pessoa que fará login">
                      <input value={editContactName} onChange={e => setEditContactName(e.target.value)} required />
                    </Field>
                    <Field label="Telefone / Celular" hint="Contato do cliente">
                      <input value={editPhone} onChange={e => setEditPhone(e.target.value)} placeholder="+55 11 9 0000 0000" />
                    </Field>
                  </div>

                  <div className="form-grid-2">
                    <Field label="Localização / Cidade" hint="Ex: São Paulo · BR">
                      <input value={editCity} onChange={e => setEditCity(e.target.value)} placeholder="Ex: São Paulo · BR" />
                    </Field>
                    <Field label="Endereço Completo" hint="Endereço da sede">
                      <input value={editAddress} onChange={e => setEditAddress(e.target.value)} placeholder="Ex: Av. Paulista, 1000 - Cj 12" />
                    </Field>
                  </div>

                  <Field label="Link da Pasta do Google Drive" hint="Link compartilhado para entrega de referências e arquivos do cliente">
                    <input value={editDriveLink} onChange={e => setEditDriveLink(e.target.value)} placeholder="Ex: https://drive.google.com/drive/folders/..." />
                  </Field>

                  <Field label="E-mail de Login" required hint="E-mail de acesso e contato (não altere a menos que necessário)">
                    <input type="email" value={editContactEmail} onChange={e => setEditContactEmail(e.target.value)} required />
                  </Field>

                  <Field 
                    label="Senha de Acesso / Resetar Senha" 
                    hint="Defina uma nova senha para reconfigurar as credenciais do cliente."
                  >
                    <input 
                      type="text" 
                      value={editPassword} 
                      onChange={e => setEditPassword(e.target.value)} 
                      placeholder={passwords[selectedClient?.contact_email]?.startsWith('$2a$') ? "// SENHA SEGURA CRIPTOGRAFADA (Digite para alterar)" : "Digite para redefinir..."} 
                    />
                  </Field>

                  <div style={{marginTop: 10}}>
                    <Button type="submit" kind="primary" arrow disabled={editSaving}>
                      {editSaving ? 'Salvando...' : 'Salvar Alterações'}
                    </Button>
                  </div>

                  <div style={{marginTop: 20, borderTop: '1px solid rgba(232, 226, 216, 0.08)', paddingTop: 18}}>
                    <div style={{fontSize: 9, color: 'var(--fog-2)', letterSpacing: '1px', fontFamily: 'var(--mono)', marginBottom: 12}}>// AÇÕES RÁPIDAS DE NOTIFICAÇÃO</div>
                    <div style={{display: 'flex', gap: 10}}>
                      <Button size="sm" kind="ghost" type="button" disabled={sendingAccessEmail} onClick={async () => {
                        if (!editPassword) {
                          setToast('Por favor, defina uma nova senha temporária no campo acima para reconfigurar e reenviar.');
                          return;
                        }
                        setSendingAccessEmail(true);
                        try {
                          // 1. Reseta a senha no Supabase Auth e tabela pública
                          await API.resetUserPassword(editContactEmail, editPassword);
                          
                          // 2. Dispara o e-mail de acesso com a nova senha
                          await triggerSendAccessEmail({
                            email: editContactEmail,
                            name: editContactName,
                            company: editName
                          }, editPassword);
                          
                          setEditPassword('');
                        } catch (err) {
                          setToast('Erro ao redefinir e enviar: ' + err.message);
                        } finally {
                          setSendingAccessEmail(false);
                        }
                      }}>
                        {sendingAccessEmail ? 'Disparando...' : 'Reconfigurar & Reenviar'}
                      </Button>
                      <Button size="sm" kind="ghost" type="button" disabled={sendingBriefingEmail} onClick={() => triggerSendBriefingEmail({
                        email: editContactEmail,
                        name: editContactName,
                        company: editName
                      })}>
                        {sendingBriefingEmail ? 'Disparando...' : 'Notificar Briefing'}
                      </Button>
                    </div>
                  </div>
                </form>
              </div>
            </div>

            {/* Coluna da Direita: Histórico de Trabalhos */}
            <div style={{flex: '1 1 58%', display: 'flex', flexDirection: 'column', gap: 24}}>
              <div>
                <SectionHd title={<>Projetos & <em>Entregas</em></>} n={`${allProjects.filter(p => p.client_id === selectedClient.id).length} ENCONTRADOS`} />
                <div style={{display: 'flex', flexDirection: 'column', gap: 12, marginTop: 16}}>
                  {allProjects.filter(p => p.client_id === selectedClient.id).map(p => (
                    <div key={p.id} className="card" style={{padding: '16px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
                      <div>
                        <div style={{fontWeight: 600, color: 'var(--bone)', fontSize: 14}}>{p.title}</div>
                        <div style={{color: 'var(--fog-2)', fontSize: 11, marginTop: 2}}>{p.service} · {p.start_date || 'Sem data'}</div>
                      </div>
                      <div style={{display: 'flex', flexDirection: 'column', alignItems: 'end', gap: 4}}>
                        <span className="stamp" style={{borderColor: 'rgba(232, 226, 216, 0.1)', background: 'rgba(232, 226, 216, 0.02)', padding: '4px 8px', fontSize: 10}}>
                          {p.status_label || 'Ativo'}
                        </span>
                        {p.progress !== undefined && (
                          <div style={{width: 60, height: 4, background: 'rgba(255,255,255,0.05)', borderRadius: 2, overflow: 'hidden', marginTop: 4}}>
                            <div style={{width: `${p.progress}%`, height: '100%', background: 'var(--signal)'}} />
                          </div>
                        )}
                      </div>
                    </div>
                  ))}
                  {allProjects.filter(p => p.client_id === selectedClient.id).length === 0 && (
                    <div style={{fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--fog-2)', border: '1px dashed rgba(232,226,216,0.1)', padding: 24, textAlign: 'center'}}>
                      // NENHUM PROJETO VINCULADO
                    </div>
                  )}
                </div>
              </div>

              <div>
                <SectionHd title={<>Histórico de <em>Briefings</em></>} n={`${allBriefings.filter(b => b.client_id === selectedClient.id).length} ENCONTRADOS`} />
                <div style={{display: 'flex', flexDirection: 'column', gap: 12, marginTop: 16}}>
                  {allBriefings.filter(b => b.client_id === selectedClient.id).map(b => (
                    <div key={b.id} className="card" style={{padding: '16px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
                      <div>
                        <div style={{fontWeight: 600, color: 'var(--bone)', fontSize: 14}}>{b.project_name || 'Briefing Institucional'}</div>
                        <div style={{color: 'var(--fog-2)', fontSize: 11, marginTop: 2}}>{b.service} · Recebido em {b.received_short || 'Recente'}</div>
                      </div>
                      <div>
                        <span className="stamp" style={{
                          borderColor: b.status === 'pending' ? 'rgba(255, 179, 0, 0.2)' : 'rgba(0, 255, 102, 0.2)',
                          color: b.status === 'pending' ? '#ffb300' : '#00ff66',
                          background: b.status === 'pending' ? 'rgba(255, 179, 0, 0.02)' : 'rgba(0, 255, 102, 0.02)'
                        }}>{b.status_label || 'Pendente'}</span>
                      </div>
                    </div>
                  ))}
                  {allBriefings.filter(b => b.client_id === selectedClient.id).length === 0 && (
                    <div style={{fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--fog-2)', border: '1px dashed rgba(232,226,216,0.1)', padding: 24, textAlign: 'center'}}>
                      // NENHUM BRIEFING RECEBIDO
                    </div>
                  )}
                </div>
              </div>

            </div>

          </div>
        </Modal>
      )}

      {deleteConfirmClient && (
        <Modal title="CONFIRMAR EXCLUSÃO DE CLIENTE" onClose={() => setDeleteConfirmClient(null)}
          footer={<>
            <Button kind="ghost" onClick={() => setDeleteConfirmClient(null)}>Cancelar</Button>
            <Button kind="primary" style={{backgroundColor: '#ff4d4d', borderColor: '#ff4d4d', color: '#fff'}} disabled={loading || deleteInputId !== deleteConfirmClient.id} onClick={handleDeleteClient}>
              {loading ? 'Excluindo...' : 'Excluir permanentemente'}
            </Button>
          </>}>
          <div style={{display:'flex', flexDirection:'column', gap:18}}>
            <p style={{fontSize: 12, lineHeight: 1.5, color: 'var(--bone)'}}>
              Você está prestes a excluir o cliente <strong style={{color: 'var(--signal)'}}>{deleteConfirmClient.name}</strong> e todos os seus vínculos de acesso permanentemente. Esta ação não poderá ser desfeita.
            </p>
            <p style={{fontSize: 11, lineHeight: 1.5, color: 'var(--fog-2)'}}>
              Para prosseguir e confirmar a exclusão, digite o <strong>ID do sistema</strong> do cliente (<strong style={{color: '#ff4d4d', fontFamily: 'var(--mono)', fontSize: 13}}>{deleteConfirmClient.id}</strong>) no campo abaixo:
            </p>
            <Field label="ID do Sistema para Confirmação" required hint="Digite o ID exatamente como mostrado acima">
              <input value={deleteInputId} onChange={e => setDeleteInputId(e.target.value)} placeholder={deleteConfirmClient.id} style={{fontFamily: 'var(--mono)', fontSize: 13, textTransform: 'none', letterSpacing: '1px', border: '1px solid rgba(255, 77, 77, 0.4)'}} />
            </Field>
          </div>
        </Modal>
      )}

      {toast && <Toast>{toast}</Toast>}
    </div>
  );
}
window.AdminClients = AdminClients;