/* COBRANÇAS · Vista 5 — CONFIGURAÇÃO
   4 abas: Thresholds · Modos · Permissões · Integrações */

const FinConfigView = () => {
  const [tab, setTab] = React.useState('thresholds');
  const tabs = [
    { id: 'thresholds',   label: 'Thresholds & alertas',  desc: 'limites, idades, scoring' },
    { id: 'modos',        label: 'Modos pagamento',        desc: 'Eurofactor, cheque, transf.' },
    { id: 'permissoes',   label: 'Permissões',             desc: 'quem aprova o quê' },
    { id: 'integracoes',  label: 'Integrações',            desc: 'Primavera, Coface, HiPay' },
  ];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
      <div className="card" style={{ padding: 0, marginBottom: 12, flexShrink: 0 }}>
        <div style={{ display: 'flex' }}>
          {tabs.map(t => (
            <button key={t.id} onClick={() => setTab(t.id)} style={{
              flex: 1, padding: '12px 14px', textAlign: 'left',
              background: tab === t.id ? 'color-mix(in oklch, var(--ai-500) 6%, transparent)' : 'transparent',
              borderBottom: tab === t.id ? '2px solid var(--ai-500)' : '2px solid transparent',
              borderRight: '1px solid var(--border)',
              cursor: 'pointer',
            }}>
              <div style={{ fontSize: 13, fontWeight: 600 }}>{t.label}</div>
              <div style={{ fontSize: 10.5, color: 'var(--text-muted)', marginTop: 2 }}>{t.desc}</div>
            </button>
          ))}
        </div>
      </div>

      <div className="scrollbar" style={{ flex: 1, overflowY: 'auto', minHeight: 0, paddingRight: 4 }}>
        {tab === 'thresholds' && <Thresholds />}
        {tab === 'modos' && <Modos />}
        {tab === 'permissoes' && <Permissoes />}
        {tab === 'integracoes' && <Integracoes />}
      </div>
    </div>
  );
};

// ─── 1. Thresholds ──────────────────────────────────────────────────

const Thresholds = () => {
  const H = window.FinHelpers;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, paddingBottom: 40 }}>
      <Block title="Aging · idade considerada crítica" sub="Ao excederem este número de dias, os saldos passam para a faixa vermelha e geram alerta na queue.">
        <Row label="Default global" tail={<Stepper value={60} unit="d" />} />
        <Row label="Por segmento A" tail={<Stepper value={75} unit="d" />} desc="clientes A toleram um pouco mais" />
        <Row label="Por segmento B" tail={<Stepper value={60} unit="d" />} />
        <Row label="Por segmento C" tail={<Stepper value={45} unit="d" />} desc="C aperta mais cedo" />
        <Row label="Excepções por cliente" tail={<button className="btn btn-xs">3 clientes excluídos →</button>} />
        <ValidarLine>Valores actuais usados como sugestão. Confirmar com a Patrícia se o threshold default deve ser 60d ou 45d.</ValidarLine>
      </Block>

      <Block title="Limite de crédito · alertas">
        <Row label="Limite Coface · alerta" tail={<Stepper value={85} unit="%" />} desc="quando atingido, gera alerta no resumo" />
        <Row label="Limite Coface · bloqueio" tail={<Stepper value={100} unit="%" />} />
        <Row label="Limite interno · alerta" tail={<Stepper value={90} unit="%" />} />
        <Row label="Excedente permitido na queue" tail={<Stepper value={5} unit="%" />} desc="quanto Digi pode autorizar acima do limite com nota" />
      </Block>

      <Block title="Score interno (Digi)">
        <Row label="Peso · histórico pagamentos (12m)" tail={<Stepper value={40} unit="%" />} />
        <Row label="Peso · idade média saldo"          tail={<Stepper value={25} unit="%" />} />
        <Row label="Peso · variação Coface"            tail={<Stepper value={20} unit="%" />} />
        <Row label="Peso · pedidos manuais à frente"   tail={<Stepper value={15} unit="%" />} />
        <Row label="Soma actual" tail={<span className="font-mono" style={{ fontWeight: 700 }}>100% ✓</span>} />
        <ValidarLine>Pesos sugeridos. Patrícia: queres que o histórico pese mais? Que outros sinais devem entrar?</ValidarLine>
      </Block>

      <Block title="SLA queue · encomendas portal">
        <Row label="SLA verde (resposta requerida em)" tail={<Stepper value={4} unit="h" />} />
        <Row label="SLA amarelo (escalar a partir de)" tail={<Stepper value={2} unit="h restantes" />} />
        <Row label="SLA vermelho (expirado, escalada automática)" tail={<Stepper value={0} unit="h" />} />
        <Row label="Notificar comercial" tail={<Toggle checked />} desc="WhatsApp + email simultaneamente" />
      </Block>
    </div>
  );
};

// ─── 2. Modos de pagamento ─────────────────────────────────────────

const Modos = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 12, paddingBottom: 40 }}>
    <Block title="Eurofactor" sub="Cobertura factoring (Crédito Agrícola). Default novo cliente: 60d.">
      <Row label="Activo"             tail={<Toggle checked />} />
      <Row label="Cobertura factoring" tail={<span className="font-mono">98%</span>} desc="restantes 2% caem em risco interno" />
      <Row label="Liquidação dia"     tail={<span className="font-mono">25 mês seguinte</span>} />
      <Row label="Excepções"          tail={<button className="btn btn-xs">12 clientes excluídos →</button>} />
    </Block>
    <Block title="Cheque" sub="Cuidado especial dia 15 (deadline mensal de cheques)">
      <Row label="Activo"             tail={<Toggle checked />} />
      <Row label="Aviso pré-deadline" tail={<Stepper value={3} unit="d antes" />} />
      <Row label="Lembrete pós-deadline (cheque em falta)" tail={<Stepper value={2} unit="d" />} />
      <Row label="Pré-pagamento default <"  tail={<Stepper value={2000} unit="€" />} desc="abaixo deste valor, novo cliente paga sempre antes" />
    </Block>
    <Block title="Transferência bancária">
      <Row label="Activo"             tail={<Toggle checked />} />
      <Row label="Prazo default"      tail={<Stepper value={30} unit="d" />} />
      <Row label="Comprovativo obrigatório" tail={<Toggle checked />} />
    </Block>
    <Block title="Electrónico (HiPay / multibanco)">
      <Row label="Activo HiPay"       tail={<Toggle checked />} />
      <Row label="Pré-pagamento auto" tail={<Toggle checked />} desc="quando Digi liberta encomenda, gera link HiPay" />
      <Row label="Tempo expiração link" tail={<Stepper value={48} unit="h" />} />
    </Block>
  </div>
);

// ─── 3. Permissões ─────────────────────────────────────────────────

const Permissoes = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 12, paddingBottom: 40 }}>
    <Block title="Queue portal · quem aprova" sub="Ao libertar uma encomenda, qual é o limite e quem precisa de aprovar.">
      <Row label="Patrícia (C&C)"  tail={<span className="font-mono">até 50.000 €</span>} />
      <Row label="Etelvina (CFO)"  tail={<span className="font-mono">acima 50.000 € · ou cliente Coface</span>} />
      <Row label="Comercial"       tail={<span className="font-mono">só recebe info, não aprova</span>} />
      <Row label="Digi (auto)"     tail={<span className="font-mono">≤ 2.000 € + score &gt;75 + sem flags</span>} desc="auto-aprovado, registado no histórico" />
      <ValidarLine>Limite €50K para Patrícia foi assumido pelo briefing. Confirmar se é exactamente assim ou se varia por empresa SGPS.</ValidarLine>
    </Block>
    <Block title="Suspensões / acordos pagamento">
      <Row label="Quem pode suspender cliente" tail={<span className="font-mono">Patrícia + Etelvina</span>} />
      <Row label="Quem pode levantar suspensão" tail={<span className="font-mono">Etelvina · Patrícia c/ nota</span>} />
      <Row label="Acordos > 6 meses" tail={<span className="font-mono">Etelvina + Comercial</span>} desc="ambos têm de assinar" />
    </Block>
    <Block title="Notificações cruzadas">
      <Row label="Comercial recebe alerta de queue" tail={<Toggle checked />} desc="WhatsApp Daniel/Marta/Ricardo/Patricia/Etelvina conforme conta" />
      <Row label="Etelvina recebe digest diário"   tail={<Toggle checked />} />
      <Row label="Comerciais vêem score do cliente" tail={<Toggle checked={false} />} desc="só Patrícia + Etelvina vêem o score Digi" />
    </Block>
  </div>
);

// ─── 4. Integrações ────────────────────────────────────────────────

const Integracoes = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 12, paddingBottom: 40 }}>
    <IntegrationCard
      name="Primavera v10"
      status="conectado" sync="há 12 minutos · auto a cada 15 min"
      desc="Fonte de verdade: clientes, ficha, conta corrente, estados, documentos. Read-only nesta versão — escritas ainda passam pelo workflow Primavera."
    />
    <IntegrationCard
      name="Coface API"
      status="conectado" sync="actualização diária 06:00"
      desc="Limites de crédito, scores e cobertura. A Digi puxa diariamente e gera alerta se variação >5pp."
    />
    <IntegrationCard
      name="HiPay (pré-pagamentos)"
      status="conectado" sync="real-time"
      desc="Quando uma encomenda é libertada com pré-pagamento, é gerado link HiPay e enviado ao cliente. Confirmação real-time."
    />
    <IntegrationCard
      name="Eurofactor (Crédito Agrícola)"
      status="conectado" sync="ficheiro nightly · 23:00"
      desc="Importação do estado de factoring por factura. Reconcilia automaticamente com a conta corrente Primavera."
    />
    <IntegrationCard
      name="WhatsApp Business"
      status="conectado" sync="real-time"
      desc="Para envio de lembretes pós-vencimento e diálogo informal com clientes. Templates aprovados Meta."
    />
    <IntegrationCard
      name="Email · Microsoft 365"
      status="conectado" sync="real-time"
      desc="Para lembretes formais, cartas pré-litígio, comunicações com Eurofactor."
    />
    <IntegrationCard
      name="Telefonia · Cisco"
      status="parcial" sync="apenas log de chamadas"
      desc="Logs de chamadas registados na ficha do cliente. Gravação ainda não integrada."
    />
  </div>
);

// ─── shared ─────────────────────────────────────────────────────

const Block = ({ title, sub, children }) => (
  <div className="card" style={{ padding: 16 }}>
    <div style={{ marginBottom: 14 }}>
      <div className="font-display" style={{ fontSize: 14, fontWeight: 600 }}>{title}</div>
      {sub && <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>{sub}</div>}
    </div>
    <div>{children}</div>
  </div>
);

const Row = ({ label, tail, desc }) => (
  <div style={{ padding: '10px 0', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 12 }}>
    <div style={{ flex: 1 }}>
      <div style={{ fontSize: 12.5 }}>{label}</div>
      {desc && <div style={{ fontSize: 10.5, color: 'var(--text-dim)', marginTop: 2 }}>{desc}</div>}
    </div>
    <div style={{ flexShrink: 0 }}>{tail}</div>
  </div>
);

const Stepper = ({ value, unit }) => (
  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '3px 4px', background: 'var(--bg-sunken)', border: '1px solid var(--border)', borderRadius: 4 }}>
    <button style={{ width: 22, height: 22, border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--text-muted)' }}>−</button>
    <span className="font-mono" style={{ minWidth: 32, textAlign: 'center', fontWeight: 600, fontSize: 12 }}>{value}</span>
    <button style={{ width: 22, height: 22, border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--text-muted)' }}>+</button>
    <span className="font-mono" style={{ fontSize: 10, color: 'var(--text-dim)', marginRight: 4 }}>{unit}</span>
  </div>
);

const Toggle = ({ checked }) => (
  <div style={{
    width: 36, height: 20, borderRadius: 10,
    background: checked ? 'var(--success)' : 'var(--bg-sunken)',
    border: '1px solid ' + (checked ? 'transparent' : 'var(--border)'),
    position: 'relative', cursor: 'pointer',
  }}>
    <div style={{
      position: 'absolute', top: 1, left: checked ? 17 : 1,
      width: 16, height: 16, borderRadius: '50%',
      background: '#fff',
      transition: 'left 0.18s',
      boxShadow: '0 1px 2px rgba(0,0,0,0.2)',
    }} />
  </div>
);

const ValidarLine = ({ children }) => {
  const H = window.FinHelpers;
  return (
    <div style={{ marginTop: 10, padding: '8px 10px', background: 'color-mix(in oklch, #A855F7 5%, transparent)', borderLeft: '2px solid #A855F7', fontSize: 11, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 6 }}>
      <H.ValidarPatricia>Pendente de validação na próxima reunião com a Patrícia.</H.ValidarPatricia>
      <span>{children}</span>
    </div>
  );
};

const IntegrationCard = ({ name, status, sync, desc }) => {
  const colors = {
    conectado: { fg: 'var(--success)', label: '● conectado' },
    parcial:   { fg: '#F59E0B', label: '◐ parcial' },
    erro:      { fg: 'var(--danger)', label: '✕ erro' },
  };
  const c = colors[status];
  return (
    <div className="card" style={{ padding: 14 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13.5, fontWeight: 600 }}>{name}</div>
          <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>{desc}</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <span className="font-mono" style={{ fontSize: 10.5, color: c.fg, fontWeight: 600 }}>{c.label}</span>
          <div style={{ fontSize: 10, color: 'var(--text-dim)', marginTop: 2, fontFamily: 'var(--font-mono)' }}>{sync}</div>
        </div>
        <button className="btn btn-xs">Configurar →</button>
      </div>
    </div>
  );
};

window.FinConfigView = FinConfigView;