// Cliente — Customer 360 detail page

function PropertyThumb({ p }) {
  return (
    <div className="prop-thumb" style={{ background: `linear-gradient(135deg, ${p.grad[0]}, ${p.grad[1]})` }}>
      <svg viewBox="0 0 80 60" className="prop-thumb-art" preserveAspectRatio="xMidYMid slice">
        <defs>
          <pattern id={`pp-${p.id}`} width="14" height="14" patternUnits="userSpaceOnUse" patternTransform="rotate(20)">
            <line x1="0" y1="0" x2="0" y2="14" stroke="rgba(255,255,255,0.10)" strokeWidth="1" />
          </pattern>
        </defs>
        <rect width="80" height="60" fill={`url(#pp-${p.id})`} />
        <g transform="translate(40,32)" fill="rgba(255,255,255,0.85)" stroke="rgba(255,255,255,0.95)" strokeWidth="0.8" strokeLinejoin="round">
          <path d="M-18 8 L0 -10 L18 8 L18 18 L-18 18 Z" fill="rgba(255,255,255,0.10)" />
          <rect x="-12" y="2" width="6" height="10" fill="rgba(255,255,255,0.18)" />
          <rect x="-4"  y="2" width="6" height="6"  fill="rgba(255,255,255,0.18)" />
          <rect x="6"   y="2" width="6" height="6"  fill="rgba(255,255,255,0.18)" />
          <rect x="6"   y="10" width="6" height="2" fill="rgba(255,255,255,0.18)" />
        </g>
      </svg>
    </div>
  );
}

function MatchRing({ score, size = 44 }) {
  const stroke = 3.4;
  const r = (size - stroke) / 2;
  const c = size / 2;
  const circ = 2 * Math.PI * r;
  const offset = circ * (1 - score / 100);
  const color = score >= 90 ? '#34d399' : score >= 75 ? '#1F93FF' : score >= 60 ? '#f5b544' : '#94a3b8';
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="match-ring">
      <circle cx={c} cy={c} r={r} fill="none" stroke="var(--score-track)" strokeWidth={stroke} />
      <circle cx={c} cy={c} r={r} fill="none" stroke={color} strokeWidth={stroke} strokeLinecap="round"
              strokeDasharray={circ} strokeDashoffset={offset}
              transform={`rotate(-90 ${c} ${c})`} />
      <text x="50%" y="54%" textAnchor="middle" fontSize="11" fontWeight="600" fill="var(--fg)">{score}</text>
    </svg>
  );
}

function ClienteHeader({ c, onBack }) {
  const solo = window.useHorosSolo ? window.useHorosSolo() : false;
  return (
    <div className="cli-detail-head">
      <button className="ghost-btn lg back-btn" onClick={onBack}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="m15 6-6 6 6 6" />
        </svg>
        Voltar para Clientes
      </button>

      <div className="cli-detail-card">
        <div className="cli-detail-bg" />
        <div className="cli-detail-row">
          <div className="cli-detail-left">
            <div className="cli-avatar-xl" style={{ background: `linear-gradient(135deg, ${c.palette[0]}, ${c.palette[1]})` }}>
              {c.initials}
              <span className="cli-avatar-ring" />
            </div>
            <div className="cli-detail-meta">
              <div className="cli-detail-name">
                <h1>{c.name}</h1>
                <TempPill t={c.temp} />
                <span className="score-chip">
                  <Icon name="sparkles" size={11} stroke={2} />
                  {c.score}/100
                </span>
              </div>

              <div className="cli-detail-info">
                <span><Icon name="user" size={12} /> CPF {c.cpf}</span>
                <span className="dot-sep" />
                <span><Icon name="phone" size={12} /> {fmtPhone(c.phone)}</span>
                <span className="dot-sep" />
                <span><Icon name="msgs" size={12} /> {c.email}</span>
              </div>

              <div className="cli-detail-info">
                {!solo && <><span><Icon name="user" size={12} />
                  Corretor responsável: <b>{c.broker}</b>
                </span>
                <span className="dot-sep" /></>}
                <span><Icon name="cal" size={12} /> Cliente desde mai 2026</span>
                {c.wa && <>
                  <span className="dot-sep" />
                  <span className="wa-chip"><Icon name="whats" size={11} /> WhatsApp conectado</span>
                </>}
              </div>
            </div>
          </div>

          <div className="cli-detail-actions">
            <button className="ghost-btn lg" onClick={() => window.horosOpenLeadSheet(c.id)} style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><Icon name="sheet" size={13} /> Abrir ficha</button>
            <button className="ghost-btn lg"><Icon name="message" size={13} /> Enviar mensagem</button>
            <button className="btn-primary"><Icon name="cal" size={14} /> Agendar reunião</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function ClienteSummaryCards({ c }) {
  const cred = c.credit;
  return (
    <div className="cli-summary">
      <div className="cli-sum-card">
        <div className="cli-sum-icon kind-data"><Icon name="user" size={14} /></div>
        <div className="cli-sum-meta">
          <span className="cli-sum-label">Dados Pessoais</span>
          <span className="cli-sum-val">{c.civil || 'Casada'}</span>
          <span className="cli-sum-sub">{c.deps} {c.deps === 1 ? 'dependente' : 'dependentes'} · {c.profession}</span>
        </div>
      </div>

      <div className="cli-sum-card">
        <div className="cli-sum-icon kind-credit"><Icon name="trending" size={14} /></div>
        <div className="cli-sum-meta">
          <span className="cli-sum-label">Crédito aprovado</span>
          <span className="cli-sum-val">{cliFmt(cred.approved)}</span>
          <span className="cli-sum-sub">{cred.bank} · {cred.term}</span>
        </div>
        <span className="cli-sum-pill ok">{cred.status === 'approved' ? <><Icon name="check" size={11} style={{marginRight:3}} />Aprovado</> : 'Em análise'}</span>
      </div>

      <div className="cli-sum-card">
        <div className="cli-sum-icon kind-action"><Icon name="bolt" size={14} /></div>
        <div className="cli-sum-meta">
          <span className="cli-sum-label">Próxima ação</span>
          <span className="cli-sum-val">{c.nextAction}</span>
          <span className={`cli-sum-sub ${c.urgency ? `due-${c.urgency}` : ''}`}>{c.nextWhen}</span>
        </div>
      </div>

      <div className="cli-sum-card">
        <div className="cli-sum-icon kind-status"><Icon name="sparkles" size={14} /></div>
        <div className="cli-sum-meta">
          <span className="cli-sum-label">Status atual</span>
          <span className="cli-sum-val">{c.statusLabel}</span>
          <span className="cli-sum-sub">{c.seg} · última interação {c.last}</span>
        </div>
      </div>
    </div>
  );
}

function SectionTitle({ icon, title, sub, action }) {
  return (
    <div className="cli-section-head">
      <div className="cli-section-title">
        <span className="cli-section-icon"><Icon name={icon} size={14} stroke={1.8} /></span>
        <div>
          <h2>{title}</h2>
          {sub && <span className="cli-section-sub">{sub}</span>}
        </div>
      </div>
      {action}
    </div>
  );
}

const Field = ({ label, value, mono, accent }) => (
  <div className="cli-field">
    <span className="cli-field-label">{label}</span>
    <span className={`cli-field-value ${mono ? 'mono' : ''} ${accent ? 'accent' : ''}`}>{value}</span>
  </div>
);

function ClienteDados({ c }) {
  const solo = window.useHorosSolo ? window.useHorosSolo() : false;
  return (
    <section className="panel cli-section">
      <div className="panel-head no-border">
        <SectionTitle icon="user" title="Dados do cliente"
          sub="Informações completas do perfil"
          action={<button className="ghost-btn"><Icon name="settings" size={12} /> Editar</button>} />
      </div>
      <div className="cli-fields-grid">
        <Field label="Nome completo" value={c.name} />
        <Field label="CPF" value={c.cpf} mono />
        <Field label="Telefone" value={fmtPhone(c.phone)} mono />
        <Field label="Email" value={c.email} />
        <Field label="Data nascimento" value={c.birth} />
        <Field label="Estado civil" value={c.civil} />
        <Field label="Profissão" value={c.profession} />
        <Field label="Empresa atual" value={c.company} />
        <Field label="Renda individual" value={cliFmt(c.renda) + '/mês'} accent />
        <Field label="Renda familiar" value={cliFmt(c.rendaFam) + '/mês'} accent />
        <Field label="Dependentes" value={c.deps} />
        <Field label="Primeira compra" value={c.firstBuy ? 'Sim' : 'Não'} />
        <Field label="Região desejada" value={c.region} />
        <Field label="Valor pretendido" value={cliFmt(c.desired)} accent />
        <Field label="Entrada disponível" value={cliFmt(c.entry)} accent />
        {!solo && <Field label="Corretor responsável" value={c.broker} />}
      </div>
      <div className="cli-notes">
        <span className="cli-notes-label">Observações</span>
        <p>{c.notes}</p>
      </div>
    </section>
  );
}

function ClienteCredito({ c }) {
  const cr = c.credit;
  return (
    <section className="panel cli-section">
      <div className="panel-head no-border">
        <SectionTitle icon="trending" title="Análise de crédito"
          sub={<>Origem: <b>{cr.origin}</b></>}
          action={<span className={`status-pill ${cr.status === 'approved' ? 'won' : 'engaged'}`}>{cr.status === 'approved' ? 'Aprovado' : 'Em análise'}</span>} />
      </div>

      <div className="cred-summary">
        <div className="cred-big">
          <span className="cred-big-label">Valor aprovado</span>
          <span className="cred-big-value">{cliFmt(cr.approved)}</span>
          <span className="cred-big-meta">Cliente apto · score {cr.score} · {cr.tier}</span>
        </div>

        <div className="cred-stats">
          <div className="cred-stat">
            <span className="cred-stat-label">Entrada</span>
            <span className="cred-stat-value">{cliFmt(cr.entry)}</span>
          </div>
          <div className="cred-stat">
            <span className="cred-stat-label">Parcela máxima</span>
            <span className="cred-stat-value">{cliFmt(cr.maxParc)}/mês</span>
          </div>
          <div className="cred-stat">
            <span className="cred-stat-label">Banco</span>
            <span className="cred-stat-value">{cr.bank}</span>
          </div>
          <div className="cred-stat">
            <span className="cred-stat-label">Prazo</span>
            <span className="cred-stat-value">{cr.term}</span>
          </div>
          <div className="cred-stat">
            <span className="cred-stat-label">Comprometimento</span>
            <span className="cred-stat-value">{cr.commit} da renda</span>
          </div>
          <div className="cred-stat">
            <span className="cred-stat-label">Data análise</span>
            <span className="cred-stat-value">{cr.analysisDate}</span>
          </div>
        </div>
      </div>

      <div className="cred-docs">
        <span className="cred-docs-label">Documentação</span>
        <div className="cred-docs-grid">
          {cr.docs.map((d, i) => (
            <div key={i} className={`cred-doc ${d.ok ? 'ok' : 'pending'}`}>
              <span className="cred-doc-bullet">
                {d.ok
                  ? <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 5 5 9-12" /></svg>
                  : <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><path d="M12 7v6M12 17v.01"/></svg>}
              </span>
              <span>{d.label}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="cred-note">{cr.note}</div>
    </section>
  );
}

function ClienteImoveis({ c }) {
  const items = c.matches.map(getMatch).filter(Boolean);
  return (
    <section className="panel cli-section">
      <div className="panel-head no-border">
        <SectionTitle icon="sparkles" title="Imóveis compatíveis"
          sub="IA combina renda, crédito, região e perfil do cliente"
          action={<button className="ghost-btn"><Icon name="filter" size={12} /> Ajustar critérios</button>} />
      </div>

      <div className="prop-grid">
        {items.map((p, i) => (
          <div key={p.id} className={`prop-card ${i === 0 ? 'top' : ''}`}>
            <div className="prop-card-thumb">
              <PropertyThumb p={p} />
              {i === 0 && <span className="prop-rec-tag"><Icon name="sparkles" size={10} stroke={2} /> Recomendado IA</span>}
              <span className="prop-type-tag">{p.tag}</span>
            </div>
            <div className="prop-card-body">
              <div className="prop-card-head">
                <div>
                  <h4>{p.name}</h4>
                  <span className="prop-loc">{p.loc}</span>
                </div>
                <MatchRing score={p.match} size={42} />
              </div>
              <div className="prop-card-meta">{p.type}</div>
              <div className="prop-card-stats">
                <div>
                  <span className="prop-stat-label">Valor</span>
                  <span className="prop-stat-value">{cliFmt(p.value)}</span>
                </div>
                <div>
                  <span className="prop-stat-label">Parcela</span>
                  <span className="prop-stat-value">{cliFmt(p.parc)}/mês</span>
                </div>
              </div>
              <div className="prop-card-foot">
                <button className="ghost-btn">Ver imóvel</button>
                <button className="btn-soft"><Icon name="send" size={11} stroke={2} /> Enviar ao cliente</button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function ClienteTimeline({ c }) {
  const kindMeta = {
    system: { color: '#94a3b8', icon: 'settings' },
    client: { color: '#22d3ee', icon: 'msgs' },
    broker: { color: '#7EC8FF', icon: 'user' },
    ai:     { color: '#a855f7', icon: 'sparkles' },
  };
  return (
    <section className="panel cli-section">
      <div className="panel-head no-border">
        <SectionTitle icon="cal" title="Timeline"
          sub="Histórico cronológico das interações" />
      </div>
      <ol className="cli-timeline">
        {c.timeline.map((t, i) => {
          const [time, label, kind] = t;
          const m = kindMeta[kind] || kindMeta.system;
          return (
            <li key={i} className="cli-tl-item">
              <span className="cli-tl-rail" />
              <span className="cli-tl-dot" style={{ background: m.color, boxShadow: `0 0 0 4px ${m.color}22` }}>
                <Icon name={m.icon} size={9} stroke={2} />
              </span>
              <div className="cli-tl-body">
                <span className="cli-tl-time">{time}</span>
                <span className="cli-tl-label">{label}</span>
              </div>
            </li>
          );
        })}
      </ol>
    </section>
  );
}

function ClienteMessages({ c }) {
  const [draft, setDraft] = React.useState('');
  return (
    <section className="panel cli-section cli-msgs">
      <div className="panel-head no-border">
        <SectionTitle icon="msgs" title="Mensagens"
          sub={<>Conversa <b>WhatsApp · CRM · IA</b> integradas</>}
          action={<span className="wa-chip"><Icon name="whats" size={11} /> Conectado</span>} />
      </div>

      <div className="cli-chat">
        {c.messages.map((m, i) => (
          <div key={i} className={`cli-msg from-${m.from}`}>
            {m.from === 'ia' && <span className="cli-msg-tag"><Icon name="sparkles" size={9} stroke={2} /> IA</span>}
            {m.from === 'corretor' && <span className="cli-msg-tag broker">{c.broker.split(' ')[0]}</span>}
            <div className="cli-msg-bubble">{m.text}</div>
            <span className="cli-msg-time">{m.time}</span>
          </div>
        ))}
      </div>

      <div className="cli-chat-input">
        <button className="icon-btn" title="Anexar"><Icon name="plus" size={14} stroke={2} /></button>
        <input value={draft} onChange={e => setDraft(e.target.value)} placeholder="Escreva uma mensagem para o cliente…" />
        <button className="icon-btn" title="Áudio"><Icon name="phone" size={14} /></button>
        <button className="btn-primary send-btn" disabled={!draft.trim()}><Icon name="send" size={13} stroke={2} /> Enviar</button>
      </div>
    </section>
  );
}

function ClienteInsights({ c }) {
  const meta = {
    hot:   { color: '#ff5a4e', bg: 'rgba(255,90,78,0.14)',  icon: 'flame' },
    warn:  { color: '#f5b544', bg: 'rgba(245,181,68,0.14)', icon: 'bolt' },
    match: { color: '#a855f7', bg: 'rgba(168,85,247,0.14)', icon: 'sparkles' },
    money: { color: '#34d399', bg: 'rgba(52,211,153,0.14)', icon: 'trending' },
  };
  return (
    <section className="panel ai-panel cli-insights">
      <div className="ai-head">
        <horos-mascot size="34" class="ai-mascot" aria-hidden="true" />
        <div className="ai-title-wrap">
          <span className="ai-title">
            Insights IA
            <span className="ai-status"><span className="pulse-dot" /> ativo</span>
          </span>
          <span className="ai-sub">Análise contínua deste cliente</span>
        </div>
      </div>
      <div className="ai-body">
        {c.insights.map((ins, i) => {
          const m = meta[ins.kind] || meta.match;
          return (
            <div key={i} className="ai-insight">
              <div className="ai-insight-ico" style={{ background: m.bg, color: m.color }}>
                <Icon name={m.icon} size={12} stroke={1.8} />
              </div>
              <div style={{ flex: 1 }}>
                <div className="ai-insight-text"><b>{ins.label}</b></div>
                <div className="ai-insight-time">{ins.detail}</div>
              </div>
            </div>
          );
        })}

        <button className="ai-cta">
          Ver recomendações
          <Icon name="arrRight" size={12} stroke={2} />
        </button>
      </div>
    </section>
  );
}

function ClienteDetailPage({ c, onBack }) {
  // Scroll to top on open
  React.useEffect(() => {
    const el = document.querySelector('.content');
    if (el) el.scrollTop = 0;
  }, [c.id]);

  return (
    <>
      <ClienteHeader c={c} onBack={onBack} />
      <ClienteSummaryCards c={c} />

      <div className="cli-detail-grid">
        <div className="cli-detail-main">
          <ClienteDados c={c} />
          <ClienteCredito c={c} />
          <ClienteImoveis c={c} />
          <ClienteMessages c={c} />
        </div>
        <div className="cli-detail-side">
          <ClienteInsights c={c} />
          <ClienteTimeline c={c} />
        </div>
      </div>
    </>
  );
}

window.ClienteDetailPage = ClienteDetailPage;