/* Makers — UI Kit · Opção 2 · Azul Petróleo × Ciano Operacional */

function UIKitArtboardO2() {
  /* ── Mini primitives ── */
  const Badge = ({ label, color = 'var(--o2-cyan)', bg = 'var(--o2-cyan-pale)' }) => (
    <span style={{ background: bg, color, borderRadius: 99, padding: '3px 10px', fontSize: 11, fontWeight: 600, fontFamily: 'var(--o2-mono)', letterSpacing: '0.04em', whiteSpace: 'nowrap' }}>{label}</span>
  );

  const StatusDot = ({ color, label }) => (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 12, color: 'var(--o2-ink)' }}>
      <span style={{ width: 8, height: 8, borderRadius: '50%', background: color, display: 'inline-block', flexShrink: 0 }}/>
      {label}
    </span>
  );

  const Btn = ({ label, variant = 'primary', small }) => {
    const styles = {
      primary:   { bg: 'var(--o2-petrol)', color: '#fff', border: 'none' },
      cyan:      { bg: 'var(--o2-cyan)', color: 'var(--o2-petrol)', border: 'none' },
      secondary: { bg: 'transparent', color: 'var(--o2-petrol)', border: '1.5px solid var(--o2-petrol)' },
      ghost:     { bg: 'transparent', color: 'var(--o2-muted)', border: '1.5px solid var(--o2-line)' },
      green:     { bg: 'var(--o2-explorador)', color: '#fff', border: 'none' },
      amber:     { bg: 'var(--o2-aos)', color: '#fff', border: 'none' },
    };
    const s = styles[variant] || styles.primary;
    return (
      <div style={{ background: s.bg, color: s.color, border: s.border, borderRadius: 8, padding: small ? '6px 14px' : '10px 20px', fontSize: small ? 12 : 14, fontWeight: 600, letterSpacing: '-0.01em', display: 'inline-flex', alignItems: 'center', gap: 6, cursor: 'pointer', whiteSpace: 'nowrap' }}>{label}</div>
    );
  };

  const Input = ({ placeholder, icon }) => (
    <div style={{ background: 'var(--o2-white)', border: '1.5px solid var(--o2-line)', borderRadius: 8, padding: '9px 14px', fontSize: 14, color: 'var(--o2-muted)', display: 'flex', alignItems: 'center', gap: 8 }}>
      {icon && <span style={{ fontSize: 13 }}>{icon}</span>}
      <span>{placeholder}</span>
    </div>
  );

  const LeadCard = ({ name, company, status, statusColor, score, product, productColor }) => (
    <div style={{ background: 'var(--o2-white)', borderRadius: 12, border: '1px solid var(--o2-line)', padding: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div>
          <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--o2-ink)', marginBottom: 2 }}>{name}</div>
          <div style={{ fontSize: 12, color: 'var(--o2-muted)' }}>{company}</div>
        </div>
        <div style={{ background: productColor + '22', color: productColor, borderRadius: 6, padding: '3px 8px', fontSize: 11, fontWeight: 600, fontFamily: 'var(--o2-mono)' }}>{product}</div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <StatusDot color={statusColor} label={status}/>
        <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 11, color: 'var(--o2-muted)' }}>Score: <span style={{ color: 'var(--o2-ink)', fontWeight: 600 }}>{score}</span></div>
      </div>
    </div>
  );

  const ConversationCard = ({ from, msg, time, unread }) => (
    <div style={{ background: 'var(--o2-white)', borderRadius: 12, border: '1px solid var(--o2-line)', padding: 14, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
      <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'var(--o2-whatsapp)', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 14, fontWeight: 700 }}>
        {from[0]}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--o2-ink)' }}>{from}</span>
          <span style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, color: 'var(--o2-muted)' }}>{time}</span>
        </div>
        <div style={{ fontSize: 12, color: 'var(--o2-muted)', marginTop: 2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{msg}</div>
      </div>
      {unread && <div style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--o2-whatsapp)', flexShrink: 0, marginTop: 4 }}/>}
    </div>
  );

  const TicketCard = ({ title, ref_, priority, assigned, eta }) => {
    const pColors = { Alta: 'var(--o2-aos)', Média: 'var(--o2-cyan)', Baixa: 'var(--o2-muted)' };
    return (
      <div style={{ background: 'var(--o2-white)', borderRadius: 12, border: '1px solid var(--o2-line)', padding: 14 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
          <span style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, color: 'var(--o2-muted)' }}>{ref_}</span>
          <span style={{ fontSize: 11, color: pColors[priority], fontWeight: 600 }}>● {priority}</span>
        </div>
        <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--o2-ink)', marginBottom: 6 }}>{title}</div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--o2-muted)' }}>
          <span>{assigned}</span>
          <span style={{ fontFamily: 'var(--o2-mono)' }}>{eta}</span>
        </div>
      </div>
    );
  };

  const MetricCard = ({ value, label, delta, color = 'var(--o2-petrol)' }) => (
    <div style={{ background: 'var(--o2-white)', borderRadius: 12, border: '1px solid var(--o2-line)', padding: '16px 20px', display: 'flex', flexDirection: 'column', gap: 4 }}>
      <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 28, fontWeight: 600, color, lineHeight: 1 }}>{value}</div>
      <div style={{ fontSize: 12, color: 'var(--o2-muted)', fontWeight: 500 }}>{label}</div>
      {delta && <div style={{ fontSize: 11, color: delta > 0 ? 'var(--o2-explorador)' : '#ef4444', fontFamily: 'var(--o2-mono)' }}>{delta > 0 ? '+' : ''}{delta}% vs. mês anterior</div>}
    </div>
  );

  const PipelineStage = ({ label, count, value, active }) => (
    <div style={{ flex: 1, background: active ? 'var(--o2-petrol)' : 'var(--o2-paper)', borderRadius: 8, padding: '12px 10px', border: active ? 'none' : '1px solid var(--o2-line)', textAlign: 'center' }}>
      <div style={{ fontSize: 11, fontWeight: 600, color: active ? 'rgba(255,255,255,0.7)' : 'var(--o2-muted)', marginBottom: 6, letterSpacing: '0.04em' }}>{label}</div>
      <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 20, fontWeight: 600, color: active ? 'var(--o2-cyan)' : 'var(--o2-ink)' }}>{count}</div>
      <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, color: active ? 'rgba(255,255,255,0.4)' : 'var(--o2-muted)', marginTop: 2 }}>{value}</div>
    </div>
  );

  return (
    <div className="o2" style={{ background: 'var(--o2-paper)', padding: 48, width: '100%', height: '100%' }}>
      <O2Eyebrow>05 · Componentes de interface · UI Kit</O2Eyebrow>
      <h2 style={{ fontFamily: 'var(--o2-sans)', fontSize: 32, fontWeight: 800, letterSpacing: '-0.03em', margin: '0 0 36px', color: 'var(--o2-ink)' }}>
        Cards, botões, badges e estados
      </h2>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 20 }}>

        {/* Col 1 */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Buttons */}
          <div style={{ background: 'var(--o2-white)', borderRadius: 12, border: '1px solid var(--o2-line)', padding: 20 }}>
            <O2Label children="Botões"/>
            <div style={{ marginTop: 14, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              <Btn label="Primário" variant="primary"/>
              <Btn label="Ciano" variant="cyan"/>
              <Btn label="Secondary" variant="secondary"/>
              <Btn label="Ghost" variant="ghost"/>
              <Btn label="Explorador" variant="green"/>
              <Btn label="AOS" variant="amber"/>
            </div>
          </div>

          {/* Inputs */}
          <div style={{ background: 'var(--o2-white)', borderRadius: 12, border: '1px solid var(--o2-line)', padding: 20 }}>
            <O2Label children="Inputs e pesquisa"/>
            <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
              <Input placeholder="Pesquisar empresas..." icon="⊙"/>
              <Input placeholder="Filtrar por sector..."/>
              <div style={{ background: 'var(--o2-white)', border: '1.5px solid var(--o2-cyan)', borderRadius: 8, padding: '9px 14px', fontSize: 14, color: 'var(--o2-ink)', display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ fontSize: 13 }}>⊕</span>
                <span>Turismo · Algarve</span>
                <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--o2-muted)' }}>×</span>
              </div>
            </div>
          </div>

          {/* Badges */}
          <div style={{ background: 'var(--o2-white)', borderRadius: 12, border: '1px solid var(--o2-line)', padding: 20 }}>
            <O2Label children="Badges de produto"/>
            <div style={{ marginTop: 14, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              <Badge label="EXPLORADOR" color="var(--o2-explorador)" bg="var(--o2-green-pale)"/>
              <Badge label="AOS" color="var(--o2-aos)" bg="var(--o2-amber-pale)"/>
              <Badge label="WHATSAPP" color="var(--o2-whatsapp)" bg="#f0fdf4"/>
              <Badge label="BOTS" color="var(--o2-cyan-2)" bg="var(--o2-cyan-pale)"/>
              <Badge label="ESTÚDIO" color="var(--o2-estudio)" bg="var(--o2-petrol-pale)"/>
            </div>
            <div style={{ marginTop: 12, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              <StatusDot color="var(--o2-explorador)" label="Ativo"/>
              <StatusDot color="var(--o2-aos)" label="Pendente"/>
              <StatusDot color="var(--o2-muted)" label="Pausado"/>
              <StatusDot color="#ef4444" label="Erro"/>
            </div>
          </div>

          {/* Metrics */}
          <div style={{ background: 'var(--o2-white)', borderRadius: 12, border: '1px solid var(--o2-line)', padding: 20 }}>
            <O2Label children="Métricas"/>
            <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              <MetricCard value="47" label="Leads activos" delta={12} color="var(--o2-explorador)"/>
              <MetricCard value="€24k" label="Pipeline aberto" delta={8} color="var(--o2-petrol)"/>
              <MetricCard value="3.2h" label="Tempo resposta" delta={-15} color="var(--o2-cyan-2)"/>
              <MetricCard value="89%" label="Taxa qualificação" delta={4} color="var(--o2-aos)"/>
            </div>
          </div>
        </div>

        {/* Col 2 */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Lead cards */}
          <div style={{ background: 'var(--o2-white)', borderRadius: 12, border: '1px solid var(--o2-line)', padding: 20 }}>
            <O2Label children="Cards de lead"/>
            <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
              <LeadCard name="Turismo Algarve Lda" company="Albufeira, Faro" status="Qualificado" statusColor="var(--o2-explorador)" score="92" product="EXPLORADOR" productColor="#22C55E"/>
              <LeadCard name="Viagens Sete Mares" company="Porto, Portugal" status="Em contacto" statusColor="var(--o2-aos)" score="78" product="AOS" productColor="#F59E0B"/>
              <LeadCard name="Suntravel Tours" company="Lisboa, Portugal" status="Novo" statusColor="var(--o2-cyan)" score="65" product="BOTS" productColor="#18C7D4"/>
            </div>
          </div>

          {/* Conversation cards */}
          <div style={{ background: 'var(--o2-white)', borderRadius: 12, border: '1px solid var(--o2-line)', padding: 20 }}>
            <O2Label children="Cards de conversa"/>
            <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
              <ConversationCard from="Ana Ferreira" msg="Bom dia, queria saber mais sobre viagens para o Algarve em agosto" time="09:14" unread={true}/>
              <ConversationCard from="João Pinto" msg="Obrigado pela proposta! Vou confirmar amanhã." time="08:32" unread={false}/>
              <ConversationCard from="Maria Costa" msg="Podem fazer check-in às 14h? Chegamos de manhã..." time="Ontem" unread={false}/>
            </div>
          </div>

          {/* Ticket cards */}
          <div style={{ background: 'var(--o2-white)', borderRadius: 12, border: '1px solid var(--o2-line)', padding: 20 }}>
            <O2Label children="Tickets AOS"/>
            <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
              <TicketCard title="Enviar proposta de viagem Açores" ref_="TK-0041" priority="Alta" assigned="Filipe A." eta="Hoje 17h"/>
              <TicketCard title="Follow-up grupo escolar Junho" ref_="TK-0039" priority="Média" assigned="Sara M." eta="Amanhã"/>
              <TicketCard title="Confirmar disponibilidade resort" ref_="TK-0037" priority="Baixa" assigned="—" eta="Sexta"/>
            </div>
          </div>
        </div>

        {/* Col 3 */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Pipeline */}
          <div style={{ background: 'var(--o2-white)', borderRadius: 12, border: '1px solid var(--o2-line)', padding: 20 }}>
            <O2Label children="Pipeline de vendas"/>
            <div style={{ marginTop: 14, display: 'flex', gap: 6 }}>
              <PipelineStage label="Novo" count="12" value="€18k"/>
              <PipelineStage label="Contacto" count="8" value="€24k" active/>
              <PipelineStage label="Proposta" count="5" value="€31k"/>
              <PipelineStage label="Fechado" count="3" value="€12k"/>
            </div>
          </div>

          {/* Alert / notification */}
          <div style={{ background: 'var(--o2-white)', borderRadius: 12, border: '1px solid var(--o2-line)', padding: 20 }}>
            <O2Label children="Alertas e notificações"/>
            <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { type: 'Sucesso', msg: 'Proposta enviada com sucesso.', color: 'var(--o2-explorador)', bg: 'var(--o2-green-pale)' },
                { type: 'Atenção', msg: 'Follow-up pendente há 3 dias.', color: 'var(--o2-aos)', bg: 'var(--o2-amber-pale)' },
                { type: 'Info', msg: '47 novas empresas encontradas.', color: 'var(--o2-cyan-2)', bg: 'var(--o2-cyan-pale)' },
                { type: 'Erro', msg: 'Falha ao enviar mensagem.', color: '#ef4444', bg: '#fff0f0' },
              ].map((a, i) => (
                <div key={i} style={{ background: a.bg, borderRadius: 8, padding: '10px 14px', borderLeft: `3px solid ${a.color}`, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                  <span style={{ fontSize: 11, fontWeight: 700, color: a.color, flexShrink: 0, marginTop: 1 }}>{a.type}</span>
                  <span style={{ fontSize: 12, color: 'var(--o2-ink)' }}>{a.msg}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Timeline */}
          <div style={{ background: 'var(--o2-white)', borderRadius: 12, border: '1px solid var(--o2-line)', padding: 20 }}>
            <O2Label children="Timeline de follow-up"/>
            <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 0 }}>
              {[
                { date: 'Hoje', action: 'Lead qualificado', color: 'var(--o2-explorador)', done: true },
                { date: 'Hoje', action: 'Proposta enviada via WhatsApp', color: 'var(--o2-whatsapp)', done: true },
                { date: 'Amanhã', action: 'Follow-up automático', color: 'var(--o2-cyan)', done: false },
                { date: 'Sex 09', action: 'Confirmação de proposta', color: 'var(--o2-aos)', done: false },
              ].map((t, i) => (
                <div key={i} style={{ display: 'flex', gap: 12, paddingBottom: 14, position: 'relative' }}>
                  {i < 3 && <div style={{ position: 'absolute', left: 5, top: 16, bottom: 0, width: 1, background: 'var(--o2-line)' }}/>}
                  <div style={{ width: 11, height: 11, borderRadius: '50%', background: t.done ? t.color : 'var(--o2-line)', border: t.done ? 'none' : `2px solid ${t.color}`, flexShrink: 0, marginTop: 2, position: 'relative', zIndex: 1 }}/>
                  <div>
                    <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--o2-ink)' }}>{t.action}</div>
                    <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, color: 'var(--o2-muted)', marginTop: 1 }}>{t.date}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Mini dashboard */}
          <div style={{ background: 'var(--o2-petrol)', borderRadius: 12, padding: 20 }}>
            <O2Label color="var(--o2-cyan)" children="Mini dashboard"/>
            <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)' }}>Leads esta semana</span>
                <span style={{ fontFamily: 'var(--o2-mono)', fontSize: 16, color: 'var(--o2-cyan)', fontWeight: 600 }}>23</span>
              </div>
              {[
                { label: 'Explorador', pct: 68, color: 'var(--o2-explorador)' },
                { label: 'WhatsApp Bot', pct: 45, color: 'var(--o2-whatsapp)' },
                { label: 'AOS', pct: 82, color: 'var(--o2-aos)' },
              ].map((r, i) => (
                <div key={i}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                    <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)' }}>{r.label}</span>
                    <span style={{ fontFamily: 'var(--o2-mono)', fontSize: 11, color: 'rgba(255,255,255,0.5)' }}>{r.pct}%</span>
                  </div>
                  <div style={{ height: 4, background: 'rgba(255,255,255,0.1)', borderRadius: 99 }}>
                    <div style={{ height: '100%', width: `${r.pct}%`, background: r.color, borderRadius: 99 }}/>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { UIKitArtboardO2 });