const ESP_CIDADES = ['Campinas', 'São Paulo', 'Sorocaba', 'Jundiaí', 'Ribeirão Preto', 'Piracicaba'];
const ESP_ESPS = ['Engenheiro Civil', 'Eletricista', 'Topógrafo', 'Engenheiro de Segurança', 'Mestre de Obras', 'Arquiteto'];
const ESP_DISPS = ['Disponível', 'Alocado', 'Indisponível'];
const ESP_STATUS = ['Pendente', 'Verificado', 'Homologado', 'Destaque'];
const ESP_ST = { Pendente: 'var(--text-muted)', Verificado: 'var(--status-info)', Homologado: 'var(--status-active)', Destaque: 'var(--status-warning)' };
const ESP_DS = { 'Disponível': 'var(--status-success)', Alocado: 'var(--status-warning)', 'Indisponível': 'var(--text-subtle)' };
const espMk = (id, nome, whatsapp, cidade, especialidade, anos, cnpj, disp, status, docs, fotos) => ({ id, nome, whatsapp, cidade, especialidade, anos, cnpj, disp, status, docs: docs.map(n => ({ name: n, date: '09/2026' })), fotos });
const ESP_SEED = [
  espMk(1, 'Ana Beatriz Souza', '(19) 99812-4410', 'Campinas', 'Engenheiro Civil', 14, '32.114.908/0001-21', 'Disponível', 'Destaque', ['Registro CREA', 'ART de obra anterior', 'Certidão de acervo técnico'], 6),
  espMk(2, 'Carlos Menezes', '(11) 98455-1022', 'São Paulo', 'Eletricista', 9, '', 'Alocado', 'Homologado', ['NR-10', 'Certificado de curso técnico'], 4),
  espMk(3, 'Fernanda Lopes', '(15) 99701-3388', 'Sorocaba', 'Topógrafo', 11, '41.220.556/0001-09', 'Disponível', 'Homologado', ['Registro CREA', 'Calibração de equipamento'], 3),
  espMk(4, 'João Pedro Ribeiro', '(11) 97320-8841', 'Jundiaí', 'Mestre de Obras', 22, '', 'Disponível', 'Verificado', ['Carteira de trabalho', 'NR-35'], 8),
  espMk(5, 'Marina Costa', '(16) 99655-2019', 'Ribeirão Preto', 'Arquiteto', 7, '29.884.301/0001-44', 'Indisponível', 'Verificado', ['Registro CAU'], 5),
  espMk(6, 'Rafael Tavares', '(19) 98144-7730', 'Piracicaba', 'Engenheiro de Segurança', 12, '', 'Disponível', 'Homologado', ['Registro CREA', 'PGR modelo'], 2),
  espMk(7, 'Luciana Prado', '(19) 99233-6015', 'Campinas', 'Eletricista', 5, '', 'Disponível', 'Pendente', [], 0),
  espMk(8, 'Thiago Nogueira', '(11) 99508-4476', 'São Paulo', 'Engenheiro Civil', 18, '37.550.112/0001-70', 'Alocado', 'Destaque', ['Registro CREA', 'Certidão de acervo técnico', 'Atestado de capacidade técnica'], 9),
  espMk(9, 'Patrícia Almeida', '(15) 98877-1250', 'Sorocaba', 'Mestre de Obras', 16, '', 'Disponível', 'Homologado', ['NR-35', 'NR-18'], 4),
  espMk(10, 'Diego Martins', '(16) 99120-5584', 'Ribeirão Preto', 'Topógrafo', 3, '', 'Disponível', 'Pendente', ['Registro CREA'], 1),
];
function EspecialistasScreen() {
  const { PageHeader, Button, KpiCard, StatusDistribution, Input, Select, SegmentedControl, Card, Table, Badge, Avatar, Drawer, DataField, FileItem } = window.VRticeDesignSystem_d763eb;
  const [list, setList] = React.useState(ESP_SEED);
  const [q, setQ] = React.useState(''), [cidade, setCidade] = React.useState(''), [esp, setEsp] = React.useState(''), [disp, setDisp] = React.useState(''), [status, setStatus] = React.useState('');
  const [drawer, setDrawer] = React.useState(null), [confirm, setConfirm] = React.useState(false), [err, setErr] = React.useState('');
  const qq = q.trim().toLowerCase();
  const f = list.filter(x => (!qq || x.nome.toLowerCase().includes(qq)) && (!cidade || x.cidade === cidade) && (!esp || x.especialidade === esp) && (!disp || x.disp === disp) && (!status || x.status === status));
  const cur = drawer && drawer.mode === 'view' ? list.find(x => x.id === drawer.id) : null;
  const draft = drawer && drawer.mode === 'form' ? drawer.draft : null;
  const upd = (id, p) => setList(l => l.map(x => x.id === id ? { ...x, ...p } : x));
  const setD = (k, v) => { setErr(''); setDrawer(d => ({ ...d, draft: { ...d.draft, [k]: v } })); };
  const homol = list.filter(x => x.status === 'Homologado' || x.status === 'Destaque').length;
  const save = () => {
    if (!draft.nome.trim() || !draft.whatsapp.trim()) return setErr('Preencha nome e WhatsApp.');
    const rec = { ...draft, anos: Number(draft.anos) || 0 };
    if (draft.id) { upd(draft.id, rec); setDrawer({ mode: 'view', id: draft.id }); }
    else { const id = Date.now(); setList(l => [{ ...rec, id, docs: [], fotos: 0 }, ...l]); setDrawer({ mode: 'view', id }); }
  };
  return (
    <BlockGrid.Auto id="especialistas">
      <PageHeader eyebrow="Banco de especialistas" title="Profissionais homologados" description="Encontre quem pode atender uma obra por cidade, especialidade e disponibilidade." actions={<Button onClick={() => { setErr(''); setDrawer({ mode: 'form', draft: { nome: '', whatsapp: '', cidade: ESP_CIDADES[0], especialidade: ESP_ESPS[0], anos: '', cnpj: '', disp: ESP_DISPS[0], status: ESP_STATUS[0] } }); }}>+ Novo especialista</Button>} />
      <DemoNotice />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 16, marginTop: -4 }}>
        <KpiCard compact label="Total no banco" value={list.length} caption={new Set(list.map(x => x.cidade)).size + ' cidades atendidas'} />
        <KpiCard compact label="Homologados" value={homol} caption="Incluindo destaques" />
        <KpiCard compact label="Disponíveis agora" value={list.filter(x => x.disp === 'Disponível').length} caption="Podem ser alocados hoje" />
        <KpiCard compact label="Aguardando verificação" value={list.filter(x => x.status === 'Pendente').length} caption="Documentos a conferir" />
      </div>
      <StatusDistribution value={status} onChange={setStatus} items={ESP_STATUS.map(l => ({ label: l, n: list.filter(x => x.status === l).length, color: ESP_ST[l] }))} />
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center' }}>
        <Input placeholder="Buscar por nome" value={q} onChange={e => setQ(e.target.value)} style={{ flex: '1 1 220px' }} />
        <Select value={cidade} onChange={e => setCidade(e.target.value)} style={{ flex: '0 1 200px' }} options={[{ value: '', label: 'Todas as cidades' }, ...ESP_CIDADES]} />
        <Select value={esp} onChange={e => setEsp(e.target.value)} style={{ flex: '0 1 220px' }} options={[{ value: '', label: 'Todas as especialidades' }, ...ESP_ESPS]} />
        <SegmentedControl variant="fill" value={disp} onChange={setDisp} options={[{ value: '', label: 'Todos' }, ...ESP_DISPS.map(d => ({ value: d, label: d }))]} style={{ flex: '0 1 auto', borderRadius: 10, borderColor: 'var(--border-field)' }} />
      </div>
      <Card variant="flat" padding={0} gap={0} style={{ overflow: 'hidden' }}>
        <VxTable id="especialistas" minWidth={760} rowY={14} empty="Nenhum especialista com esses filtros." onRowClick={r => { setConfirm(false); setDrawer({ mode: 'view', id: r.id }); }} rowKey="id" rows={f} columns={[
          { key: 'nome', label: 'Especialista', width: 'minmax(240px,2fr)', render: r => <span style={{ display: 'flex', alignItems: 'center', gap: 12 }}><Avatar name={r.nome} size={38} /><span style={{ display: 'flex', flexDirection: 'column', gap: 2, minWidth: 0 }}><span style={{ fontWeight: 600 }}>{r.nome}</span><span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{r.especialidade}</span></span></span> },
          { key: 'cidade', label: 'Cidade', width: 'minmax(130px,1fr)', render: r => <span style={{ color: 'var(--text-secondary)' }}>{r.cidade}</span> },
          { key: 'anos', label: 'Anos', width: '80px', mono: true, render: r => r.anos + ' anos' },
          { key: 'disp', label: 'Disponibilidade', width: 'minmax(130px,1fr)', render: r => <span style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--text-secondary)' }}><span style={{ width: 8, height: 8, borderRadius: '50%', background: ESP_DS[r.disp] }} />{r.disp}</span> },
          { key: 'status', label: 'Status', width: '130px', render: r => <Badge variant="meta" color={ESP_ST[r.status]} style={{ fontSize: 12, fontWeight: 700, padding: '5px 12px' }}>{r.status}</Badge> },
        ]} />
      </Card>
      {cur && <Drawer kicker="Especialista" onClose={() => setDrawer(null)} footer={<>
        <Button style={{ flex: 1 }} onClick={() => setDrawer({ mode: 'form', draft: { ...cur, anos: String(cur.anos) } })}>Editar</Button>
        <Button variant="danger" onClick={() => { if (!confirm) return setConfirm(true); setList(l => l.filter(x => x.id !== cur.id)); setDrawer(null); }}>{confirm ? 'Confirmar exclusão' : 'Excluir'}</Button>
      </>}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <Avatar name={cur.nome} size={64} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}><span style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.01em' }}>{cur.nome}</span><span style={{ fontSize: 14, color: 'var(--text-muted)' }}>{cur.especialidade} · {cur.cidade}</span></div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <span style={{ fontSize: 11, letterSpacing: '0.14em', color: 'var(--text-subtle)' }}>STATUS</span>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0,1fr))', gap: 4, background: 'var(--surface-field)', border: '1px solid var(--border-default)', borderRadius: 12, padding: 4 }}>
            {ESP_STATUS.map(l => { const on = cur.status === l; return <button key={l} onClick={() => upd(cur.id, { status: l })} style={{ cursor: 'pointer', fontFamily: 'inherit', fontSize: 12, fontWeight: 600, padding: '8px 4px', borderRadius: 9, border: 'none', color: on ? 'var(--text-on-tone)' : 'var(--text-muted)', background: on ? ESP_ST[l] : 'transparent' }}>{l}</button>; })}
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <DataField label="WhatsApp">{cur.whatsapp}</DataField><DataField label="Experiência">{cur.anos} anos</DataField>
          <DataField label="CNPJ">{cur.cnpj || 'Pessoa física'}</DataField><DataField label="Disponibilidade">{cur.disp}</DataField>
        </div>
        <Button variant="tonal" block href={'https://wa.me/55' + cur.whatsapp.replace(/\D/g, '')} target="_blank">Chamar no WhatsApp</Button>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontSize: 15, fontWeight: 600 }}>Documentos</span>
            <label style={{ cursor: 'pointer', fontSize: 13, color: 'var(--text-link)' }}>+ Enviar arquivo<input type="file" style={{ display: 'none' }} onChange={e => { const fl = e.target.files && e.target.files[0]; if (fl) upd(cur.id, { docs: [...cur.docs, { name: fl.name, date: 'hoje' }] }); }} /></label>
          </div>
          {(cur.docs.length ? cur.docs : [{ name: 'Nenhum documento enviado', date: '' }]).map((d, i) => <FileItem key={i} name={d.name} date={d.date} />)}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <span style={{ fontSize: 15, fontWeight: 600 }}>Fotos de obras</span>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0,1fr))', gap: 8 }}>
            {Array.from({ length: Math.min(cur.fotos, 6) }, (_, i) => <div key={i} style={{ aspectRatio: '1', borderRadius: 10, background: 'repeating-linear-gradient(135deg, var(--surface-inset) 0 10px, var(--surface-sunken) 10px 20px)', border: '1px solid var(--border-subtle)', display: 'flex', alignItems: 'flex-end', padding: 8, boxSizing: 'border-box', fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-subtle)' }}>foto {i + 1}</div>)}
          </div>
        </div>
      </Drawer>}
      {draft && <Drawer kicker={draft.id ? 'Editar cadastro' : 'Novo cadastro'} onClose={() => setDrawer(null)} footer={<><Button style={{ flex: 1 }} onClick={save}>Salvar</Button><Button variant="ghost" onClick={() => setDrawer(null)}>Cancelar</Button></>}>
        <span style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.01em', marginTop: -8 }}>{draft.id ? draft.nome : 'Cadastrar especialista'}</span>
        {[['nome', 'Nome completo', 'Ex.: Maria Silva'], ['whatsapp', 'WhatsApp', '(19) 99999-9999'], ['anos', 'Anos de experiência', 'Ex.: 8'], ['cnpj', 'CNPJ (opcional)', '00.000.000/0000-00']].map(([k, l, ph]) => <Input key={k} label={l} placeholder={ph} value={draft[k]} onChange={e => setD(k, e.target.value)} />)}
        {[['cidade', 'Cidade', ESP_CIDADES], ['especialidade', 'Especialidade', ESP_ESPS], ['disp', 'Disponibilidade', ESP_DISPS], ['status', 'Status', ESP_STATUS]].map(([k, l, o]) => <Select key={k} label={l} options={o} value={draft[k]} onChange={e => setD(k, e.target.value)} />)}
        {err && <span role="alert" style={{ fontSize: 13, color: 'var(--status-danger-text)' }}>{err}</span>}
      </Drawer>}
    </BlockGrid.Auto>
  );
}
window.EspecialistasScreen = EspecialistasScreen;