const { Button, Badge, Card, Icon, StatCard, Input, Select, DataTable, SidebarNav, TopBar, ProgressBar, Toast, Avatar, Tabs } = window.CW;
const DA = './assets/';

const DM_NAV = [
  {section:'Operação'},{id:'dashboard',label:'Dashboard',icon:'layout-dashboard'},{id:'signals',label:'Sinalizações da Rede',icon:'bell'},{id:'risk',label:'Análise de risco',icon:'shield-alert'},{id:'team',label:'Equipe',icon:'user'},{id:'uploads',label:'Uploads',icon:'download'},
  {section:'Conta'},{id:'security',label:'Minha conta',icon:'lock'},{id:'tokens',label:'Tokens de agente',icon:'settings'},{id:'agent',label:'Conectar um agente',icon:'send'},
  {section:'Administração'},{id:'addresses',label:'Endereços',icon:'building-2'},
  {section:'Interno AICERNE'},{id:'tenants',label:'Coworkings',icon:'layout-grid'},{id:'cnpj',label:'Busca nacional',icon:'search'},{id:'admins',label:'Administradores',icon:'shield-check'},
];
const DM_COMPANIES = [['Ateliê Norte LTDA','27.451.920/0001-40','Revisar'],['Viva Solar Serviços','18.232.104/0001-52','Atualizada'],['Nexo Arquitetura','41.828.661/0001-09','Prioridade'],['Ciclo Café Comércio','08.740.033/0001-72','Atualizada']];
const dmCol = { display:'flex', flexDirection:'column', gap:'var(--gap-grid)' };
const dmGrid = (n, narrow) => ({ display:'grid', gridTemplateColumns:narrow?'1fr':`repeat(auto-fit,minmax(${n>3?150:200}px,1fr))`, gap:'var(--gap-grid)' });
const act = (label, toast, variant='primary', icon) => <Button variant={variant} icon={icon} onClick={toast}>{label}</Button>;
const rowBtn = (label, toast) => <Button size="sm" variant="ghost" onClick={toast} style={{whiteSpace:'nowrap'}}>{label}</Button>;

function DmDashboard({ toast }) {
  const narrow = useNarrow(1000);
  const [sel,setSel] = React.useState(null);
  const rows = DM_COMPANIES.map((c,i)=>({i,name:c[0],cnpj:c[1],status:c[2],when:`Hoje, ${String(9+i).padStart(2,'0')}:2${i}`}));
  return (
    <div className="cw-stagger" style={dmCol}>
      <PageHeader big crumb="VISIBILIDADE DA BASE" title="Dashboard" text="Leitura rápida de empresas, mudanças e próxima ação." />
      <div style={dmGrid(3,narrow)}>
        <StatCard label="Empresas no endereço" value={<CountUp to={128} />} delta="+8 no período" icon="building-2" />
        <StatCard label="Alterações para revisar" value={<CountUp to={6} pad={2} />} delta="Rotina da equipe" deltaTone="flat" icon="activity" />
        <StatCard label="Base verificada" value={<CountUp to={94} />} unit="%" delta="Leitura demonstrativa" deltaTone="flat" icon="shield-check" tone="dark" />
      </div>
      <Card title="Inteligência do endereço" subtitle="Composição ilustrativa da base do coworking." actions={<Badge tone="brand" size="sm">FONTE: DEMO</Badge>}>
        <div style={dmGrid(3,narrow)}>
          <ProgressBar label="Microempresas" value={58} valueLabel="58%" tone="brand" />
          <ProgressBar label="Pequenas empresas" value={27} valueLabel="27%" tone="accent" />
          <ProgressBar label="Outros portes" value={15} valueLabel="15%" tone="warn" />
        </div>
      </Card>
      <Card title="Empresas acompanhadas" subtitle="Lista fictícia para validar a interface." actions={<Button size="sm" variant="outline" icon="download" onClick={toast}>Exportar exemplo</Button>}>
        <DataTable rows={rows} onRowClick={r=>setSel(sel===r.i?null:r.i)} columns={[
          {key:'name',label:'Empresa',render:r=><CnpjCell name={r.name} cnpj={'CNPJ '+r.cnpj} />},
          {key:'status',label:'Situação',render:r=><StatusBadge label={r.status} />},
          {key:'when',label:'Última leitura'},
          {key:'a',label:'',align:'right',render:r=><Button size="sm" variant={sel===r.i?'secondary':'ghost'} iconAfter={sel===r.i?'x':'chevron-right'} style={{whiteSpace:'nowrap'}}>{sel===r.i?'Fechar ficha':'Ver ficha'}</Button>}]} />
      </Card>
      {sel===null ? null : (
        <Card tone="inset">
          <Overline>FICHA DA EMPRESA</Overline>
          <div style={{display:'flex',alignItems:'center',gap:12,margin:'12px 0 18px'}}>
            <Avatar name={DM_COMPANIES[sel][0]} tone="navy" />
            <div><div style={{fontFamily:'var(--font-display)',fontSize:22,color:'var(--text-heading)'}}>{DM_COMPANIES[sel][0]}</div><div style={{fontFamily:'var(--font-mono)',fontSize:13,color:'var(--text-muted)'}}>{DM_COMPANIES[sel][1]}</div></div>
          </div>
          <div style={dmGrid(3,narrow)}>
            {[['Situação cadastral','Ativa'],['Última alteração','Endereço atualizado'],['Origem','Base demonstrativa']].map(([k,v])=>(
              <Card key={k} padding="16px"><div style={{fontSize:12,fontWeight:600,color:'var(--text-faint)'}}>{k}</div><div style={{fontSize:15,fontWeight:700,color:'var(--text-heading)',marginTop:4}}>{v}</div></Card>
            ))}
          </div>
          <p style={{fontSize:13,color:'var(--text-muted)',margin:'16px 0 0',display:'flex',gap:8,alignItems:'center'}}><Icon name="info" size={14} />Esta ficha é apenas visual. Nenhuma consulta foi feita e nenhuma decisão é automatizada.</p>
        </Card>
      )}
    </div>
  );
}

function DmSignals({ toast }) {
  const [tab,setTab] = React.useState('all');
  return (
    <div className="cw-stagger" style={dmCol}>
      <PageHeader big crumb="REDE" title="Sinalizações da Rede" text="Registre, acompanhe e consulte sinalizações entre coworkings." action={act('Nova sinalização',toast,'primary','plus')} />
      <Card>
        <div style={{display:'flex',gap:12,alignItems:'center',flexWrap:'wrap',marginBottom:16}}>
          <Input placeholder="Buscar por CNPJ ou empresa" icon="search" style={{flex:'1 1 240px'}} />
          <Tabs variant="segmented" active={tab} onChange={setTab} tabs={[{id:'all',label:'Todas'},{id:'mine',label:'Do meu coworking'},{id:'net',label:'Da rede'}]} />
          <Select options={['Todos os problemas','Dados divergentes']} style={{width:190}} />
          <Select options={['Todas as situações','Em acompanhamento']} style={{width:200}} />
        </div>
        <DataTable rows={[{n:'Nexo Arquitetura',c:'41.828.661/0001-09',cat:'Dados divergentes',s:'Em acompanhamento',d:'Hoje'},{n:'Ateliê Norte LTDA',c:'27.451.920/0001-40',cat:'Contato pendente',s:'Resolvida',d:'Ontem'}]} columns={[
          {key:'n',label:'Empresa',render:r=><CnpjCell name={r.n} cnpj={r.c} />},{key:'cat',label:'Categoria'},{key:'s',label:'Situação',render:r=><StatusBadge label={r.s} />},{key:'d',label:'Data'},{key:'a',label:'',align:'right',render:()=>rowBtn('Abrir',toast)}]} />
      </Card>
    </div>
  );
}

function DmRisk() {
  const narrow = useNarrow(900);
  const [res,setRes] = React.useState('A consulta demonstrativa preserva a decisão para a equipe.');
  return (
    <div className="cw-stagger" style={dmCol}>
      <PageHeader big crumb="CONSULTAS" title="Análise de risco" text="Busque uma empresa e organize a revisão humana." />
      <Card title="Consultar empresa" subtitle="Use um CNPJ fictício para testar a tela. Este ambiente não faz consultas externas." style={{maxWidth:760}}>
        <div style={{display:'flex',gap:10,alignItems:'flex-end',flexDirection:narrow?'column':'row'}}>
          <Input defaultValue="27.451.920/0001-40" icon="search" style={{flex:1,width:narrow?'100%':'auto',fontFamily:'var(--font-mono)'}} />
          <Button icon="radar" onClick={()=>setRes('Exemplo concluído: a equipe deve revisar o contexto antes de qualquer decisão.')}>Analisar exemplo</Button>
        </div>
        <div style={{marginTop:16,padding:'12px 14px',borderRadius:'var(--radius-control)',background:'var(--navy-50)',color:'var(--navy-800)',fontSize:14,display:'flex',gap:10,alignItems:'center'}}><Icon name="info" size={16} />{res}</div>
      </Card>
      <Card title="Carteira demonstrativa" subtitle="Créditos e resultados são apenas ilustrativos." actions={<Badge tone="ok">25 créditos de exemplo</Badge>}>
        <DataTable rows={[{e:'Ateliê Norte LTDA',a:'Perfil empresarial',d:'Hoje, 09:42',s:'Concluída'},{e:'Nexo Arquitetura',a:'Perfil empresarial',d:'Ontem, 16:20',s:'Revisar'}]} columns={[
          {key:'e',label:'Empresa',render:r=><strong style={{color:'var(--text-heading)'}}>{r.e}</strong>},{key:'a',label:'Ação'},{key:'d',label:'Data'},{key:'s',label:'Situação',render:r=><StatusBadge label={r.s} />}]} />
      </Card>
    </div>
  );
}

function DmTeam({ toast }) {
  return (
    <div className="cw-stagger" style={dmCol}>
      <PageHeader big crumb="ACESSO" title="Equipe do coworking" text="Usuários fictícios que podem operar o painel." action={act('Adicionar usuário',toast,'primary','plus')} />
      <Card><ProgressBar label="2 de 3 acessos ativos" value={2} max={3} valueLabel="Limite demonstrativo do plano" tone="accent" size="lg" /></Card>
      <Card padding="8px 24px 12px">
        <DataTable rows={[{n:'Larissa Monteiro',e:'larissa@example.test',p:'Proprietária'},{n:'Caio Ribeiro',e:'caio@example.test',p:'Assistente'}]} columns={[
          {key:'n',label:'Usuário',render:r=><div style={{display:'flex',alignItems:'center',gap:10}}><Avatar name={r.n} size="sm" square={false} tone={r.p==='Proprietária'?'orange':'navy'} /><CnpjCell name={r.n} sub={r.e} /></div>},{key:'p',label:'Papel'},{key:'s',label:'Status',render:()=><StatusBadge label="Ativo" />},{key:'a',label:'',align:'right',render:()=>rowBtn('Editar',toast)}]} />
      </Card>
    </div>
  );
}

function DmUploads() {
  const narrow = useNarrow(900);
  const [res,setRes] = React.useState('O arquivo não é enviado neste ambiente.');
  const ref = React.useRef(null);
  return (
    <div className="cw-stagger" style={dmCol}>
      <PageHeader big crumb="BASE DO COWORKING" title="Uploads" text="Acrescente empresas a serem acompanhadas pela equipe." />
      <Card style={{border:'1.5px dashed var(--navy-200)',background:'var(--navy-50)',boxShadow:'none'}}>
        <h2 style={{fontSize:20,fontWeight:'var(--fw-display)',margin:0,color:'var(--text-heading)'}}>O que o arquivo precisa ter</h2>
        <ul style={{listStyle:'none',padding:0,margin:'16px 0 22px',display:'flex',flexDirection:'column',gap:10}}>
          {['Coluna de CNPJ e razão social.','Arquivo .csv ou .xlsx de até 10 MB.','Dados fictícios nesta demonstração.'].map(t=><li key={t} style={{display:'flex',gap:10,fontSize:15,color:'var(--text-body)'}}><Icon name="circle-check" size={17} style={{color:'var(--navy-600)',marginTop:2}} />{t}</li>)}
        </ul>
        <input ref={ref} type="file" hidden onChange={()=>setRes('Arquivo de exemplo lido somente no navegador. Nenhuma linha foi enviada.')} />
        <Button icon="file-text" onClick={()=>ref.current && ref.current.click()}>Escolher arquivo de exemplo</Button>
        <p style={{fontSize:13,color:'var(--text-muted)',margin:'14px 0 0'}}>{res}</p>
      </Card>
      <Card title="Último resultado demonstrativo">
        <div style={dmGrid(4,narrow)}>
          {[['42','Novas','var(--navy-900)'],['15','Atualizadas','var(--navy-900)'],['2','Recusadas','var(--red-600)'],['59','Linhas lidas','var(--orange-600)']].map(([n,l,c])=>(
            <div key={l} style={{padding:'16px 18px',borderRadius:'var(--radius-control)',background:'var(--grey-50)'}}><div style={{fontFamily:'var(--font-display)',fontSize:40,lineHeight:1,color:c,fontVariantNumeric:'tabular-nums'}}><CountUp to={+n} /></div><div style={{fontSize:13,fontWeight:600,color:'var(--text-muted)',marginTop:8}}>{l}</div></div>
          ))}
        </div>
      </Card>
    </div>
  );
}

function DmSecurity({ toast }) {
  const rows = [['lock','Senha','Última alteração: ambiente demonstrativo.','Alterar senha','outline'],['shield-check','Autenticação em dois fatores','Adicione uma camada de proteção à conta.','Configurar','primary'],['activity','Sessões ativas','Nenhuma sessão real é exibida nesta página.','Ver sessões','outline']];
  return (
    <div className="cw-stagger" style={dmCol}>
      <PageHeader big crumb="CONTA" title="Segurança" text="Senha, autenticação e sessões ativas da conta." />
      <Card padding="0">
        {rows.map(([ic,t,d,b,v],i)=>(
          <div key={t} style={{display:'flex',alignItems:'center',gap:16,padding:'20px 24px',borderTop:i?'1px solid var(--divider)':'0',flexWrap:'wrap'}}>
            <span style={{width:40,height:40,flex:'none',borderRadius:'var(--radius-control)',background:'var(--navy-50)',color:'var(--navy-700)',display:'flex',alignItems:'center',justifyContent:'center'}}><Icon name={ic} size={18} /></span>
            <div style={{flex:'1 1 220px'}}><div style={{fontWeight:700,fontSize:15,color:'var(--text-heading)'}}>{t}</div><div style={{fontSize:13,color:'var(--text-muted)',marginTop:2}}>{d}</div></div>
            <Button size="sm" variant={v} onClick={toast}>{b}</Button>
          </div>
        ))}
      </Card>
    </div>
  );
}

function DmTokens({ toast }) {
  return (
    <div className="cw-stagger" style={dmCol}>
      <PageHeader big crumb="AGENTES" title="Tokens de acesso" text="Credenciais de demonstração para conectar seu próprio agente." action={act('Criar token',toast,'primary','plus')} />
      <div style={{padding:'12px 16px',borderRadius:'var(--radius-control)',background:'var(--status-warn-bg)',color:'var(--status-warn-fg)',fontSize:14,fontWeight:600,display:'flex',gap:10,alignItems:'center'}}><Icon name="lock" size={16} />Tokens reais nunca aparecem neste preview.</div>
      <Card padding="8px 24px 12px">
        <DataTable rows={[{t:'Assistente comercial'}]} columns={[
          {key:'t',label:'Token',render:r=><CnpjCell name={r.t} sub="Criado no ambiente demonstrativo" />},{key:'e',label:'Escopo',render:()=><Badge tone="info" size="sm">Leitura</Badge>},{key:'u',label:'Último uso',render:()=>'Nunca usado'},{key:'a',label:'',align:'right',render:()=><Button size="sm" variant="danger" onClick={toast}>Revogar</Button>}]} />
      </Card>
    </div>
  );
}

function DmAgent() {
  const steps = [['Crie um token','Defina o nome e o escopo que o agente poderá consultar.'],['Informe a URL do servidor','Use o endereço fornecido pela sua conta, nunca este preview.'],['Teste uma pergunta','O agente consulta apenas os dados permitidos pelo plano.']];
  return (
    <div className="cw-stagger" style={dmCol}>
      <PageHeader big crumb="AGENTES" title="Conectar um agente" text="Guia visual para configurar um harness ou assistente com o CoworkOS." />
      <Card style={{maxWidth:820}}>
        {steps.map(([t,d],i)=>{
          const last = i===steps.length-1;
          return (
            <div key={t} style={{display:'flex',gap:18,paddingBottom:last?0:24,position:'relative'}}>
              {last?null:<span aria-hidden="true" style={{position:'absolute',left:23,top:48,bottom:0,width:2,backgroundImage:'linear-gradient(180deg,var(--navy-300) 50%,transparent 50%)',backgroundSize:'2px 12px'}}></span>}
              <span style={{width:48,height:48,flex:'none',borderRadius:999,background:last?'var(--orange-500)':'var(--navy-950)',color:'var(--white)',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--font-display)',fontSize:18}}>{i+1}</span>
              <div style={{paddingTop:4}}><div style={{fontSize:17,fontWeight:700,color:'var(--text-heading)'}}>{t}</div><p style={{fontSize:14,color:'var(--text-muted)',margin:'4px 0 0'}}>{d}</p></div>
            </div>
          );
        })}
      </Card>
    </div>
  );
}

function DmAddresses({ toast }) {
  return (
    <div className="cw-stagger" style={dmCol}>
      <PageHeader big crumb="ADMINISTRAÇÃO" title="Endereços do coworking" text="Unidades usadas para compor o acompanhamento da base." action={act('Adicionar endereço',toast,'primary','plus')} />
      <Card padding="8px 24px 12px">
        <DataTable rows={[{u:'Hub Centro',e:'Rua do Comércio, 120'},{u:'Hub Jatiúca',e:'Av. Beira Mar, 340'}]} columns={[
          {key:'u',label:'Unidade',render:r=><CnpjCell name={r.u} sub={r.e} />},{key:'c',label:'Cidade',render:()=>'Maceió - AL'},{key:'s',label:'Status',render:()=><StatusBadge label="Ativo" />},{key:'a',label:'',align:'right',render:()=>rowBtn('Editar',toast)}]} />
      </Card>
    </div>
  );
}

function DmTenants() {
  return (
    <div className="cw-stagger" style={dmCol}>
      <PageHeader big crumb="INTERNO AICERNE" title="Coworkings" text="Visão administrativa fictícia de tenants e seus planos." />
      <Card padding="8px 24px 12px">
        <DataTable rows={[{c:'Hub Cowork Centro',p:'Basic',a:'3 usuários'},{c:'Estação Criativa',p:'Starter',a:'1 usuário'}]} columns={[
          {key:'c',label:'Coworking',render:r=><strong style={{color:'var(--text-heading)'}}>{r.c}</strong>},{key:'p',label:'Plano',render:r=><Badge tone="neutral" size="sm">{r.p}</Badge>},{key:'s',label:'Status',render:()=><StatusBadge label="Ativo" />},{key:'a',label:'Acessos',align:'right'}]} />
      </Card>
    </div>
  );
}

function DmCnpj({ toast }) {
  return (
    <div className="cw-stagger" style={dmCol}>
      <PageHeader big crumb="INTERNO AICERNE" title="Busca nacional" text="Tela administrativa mockada para localizar empresas por CNPJ." />
      <Card style={{maxWidth:760}}>
        <div style={{display:'flex',gap:10,alignItems:'flex-end',flexWrap:'wrap'}}>
          <Input placeholder="Digite um CNPJ fictício" defaultValue="41.828.661/0001-09" icon="search" style={{flex:'1 1 260px'}} />
          <Button icon="search" onClick={toast}>Buscar</Button>
        </div>
        <Card tone="inset" padding="16px 18px" style={{marginTop:16}}>
          <div style={{display:'flex',alignItems:'center',gap:12}}>
            <Avatar name="Nexo Arquitetura" tone="crimson" />
            <CnpjCell name="Nexo Arquitetura" cnpj="41.828.661/0001-09" />
          </div>
          <p style={{fontSize:13,color:'var(--text-muted)',margin:'12px 0 0'}}>Resultado demonstrativo. Sem consulta a fonte externa.</p>
        </Card>
      </Card>
    </div>
  );
}

function DmAdmins({ toast }) {
  return (
    <div className="cw-stagger" style={dmCol}>
      <PageHeader big crumb="INTERNO AICERNE" title="Administradores" text="Acessos internos fictícios para administração da plataforma." action={act('Adicionar administrador',toast,'primary','plus')} />
      <Card padding="8px 24px 12px">
        <DataTable rows={[{n:'Admin Demonstração',e:'admin@example.test'}]} columns={[
          {key:'n',label:'Administrador',render:r=><CnpjCell name={r.n} sub={r.e} />},{key:'s',label:'Status',render:()=><StatusBadge label="Ativo" />},{key:'u',label:'Último acesso',render:()=>'Hoje'},{key:'a',label:'',align:'right',render:()=>rowBtn('Editar',toast)}]} />
      </Card>
    </div>
  );
}

const DM_SCREENS = { dashboard:DmDashboard, signals:DmSignals, risk:DmRisk, team:DmTeam, uploads:DmUploads, security:DmSecurity, tokens:DmTokens, agent:DmAgent, addresses:DmAddresses, tenants:DmTenants, cnpj:DmCnpj, admins:DmAdmins };
const dmRoute = () => { const r = (location.hash.replace('#/','') || 'dashboard').split('?')[0]; return DM_SCREENS[r] ? r : 'dashboard'; };

function Demo() {
  const narrow = useNarrow(900);
  const [route,setRoute] = React.useState(dmRoute);
  const [toastOn,setToastOn] = React.useState(false);
  const mainRef = React.useRef(null);
  React.useEffect(() => { const on = () => { setRoute(dmRoute()); if (mainRef.current) mainRef.current.scrollTop = 0; }; window.addEventListener('hashchange', on); return () => window.removeEventListener('hashchange', on); }, []);
  React.useEffect(() => { if (!toastOn) return; const t = setTimeout(()=>setToastOn(false), 2600); return () => clearTimeout(t); }, [toastOn]);
  const toast = () => setToastOn(true);
  const Screen = DM_SCREENS[route];
  return (
    <div style={{display:'flex',flexDirection:'column',height:'100vh',background:'var(--surface-page)'}}>
      <div style={{flex:'none',display:'flex',justifyContent:'center',alignItems:'center',gap:12,flexWrap:'wrap',padding:'8px 16px',background:'var(--navy-900)',color:'var(--text-on-dark-muted)',fontSize:12,fontWeight:600}}>
        <span><span style={{color:'var(--orange-400)',letterSpacing:'var(--ls-caps)'}}>AMBIENTE DEMONSTRATIVO</span> - dados fictícios, sem conexão com produção</span>
        <a href="./index.html" style={{color:'var(--white)',textDecoration:'underline',textUnderlineOffset:3}}>Ver landing</a>
      </div>
      <div style={{flex:1,minHeight:0,display:'flex',flexDirection:narrow?'column':'row'}}>
        <SidebarNav assetBase={DA} items={DM_NAV} active={route} onSelect={id=>{ location.hash = '#/'+id; }}
          style={narrow?{width:'100%',flexDirection:'row',flexWrap:'wrap',padding:'10px 12px',maxHeight:200,overflow:'auto'}:{overflowY:'auto'}}
          footer={narrow?null:<div style={{display:'flex',alignItems:'center',gap:10,padding:'14px 8px 4px',borderTop:'1px solid rgba(255,255,255,.08)'}}><Avatar name="Larissa Monteiro" size="sm" square={false} tone="orange" /><div style={{lineHeight:1.3}}><div style={{fontSize:13,fontWeight:600,color:'var(--white)'}}>Larissa Monteiro</div><div style={{fontSize:11,color:'#9fb1cf'}}>Plano Basic - exemplo</div></div></div>} />
        <div style={{flex:1,minWidth:0,display:'flex',flexDirection:'column'}}>
          <TopBar title="Hub Cowork Centro" subtitle="Ambiente demonstrativo" search={false} user={narrow?null:{name:'Larissa Monteiro',role:'Plano Basic - exemplo'}} />
          <main id="demo-main" ref={mainRef} tabIndex={-1} style={{flex:1,overflowY:'auto',outline:0}}>
            <div key={route} className="cw-screen" style={{maxWidth:1320,margin:'0 auto',padding:narrow?'20px 16px':'28px 32px 48px'}}><Screen toast={toast} /></div>
          </main>
        </div>
      </div>
      {toastOn ? <div role="status" className="cw-toast" style={{position:'fixed',right:24,bottom:24,zIndex:80}}><Toast tone="info" title="Ação simulada: nenhum dado foi alterado." onDismiss={()=>setToastOn(false)} /></div> : null}
    </div>
  );
}
window.Demo = Demo;