/**
 * KlavoNFSe — DANFSe (Documento Auxiliar da NFS-e) · modelo Klavo
 */

import React from 'react';
import { QRCodeSVG } from 'qrcode.react';
import './KlavoNFSe.css';

/* ── Types ──────────────────────────────────────────── */

export interface Endereco {
  logradouro: string;
  bairro?: string;
  municipio: string;
  uf: string;
  cep: string;
}

export interface Parte {
  nome: string;
  cnpj?: string;
  cpf?: string;
  inscricaoMunicipal?: string;
  endereco: Endereco;
  telefone?: string;
  email?: string;
  simplesNacional?: boolean;
  logoUrl?: string;
}

export interface Servico {
  codigoLc116: string;
  codigoMunicipal?: string;
  itemListaServico: string;
  descricao: string;
  municipioPrestacao: { municipio: string; uf: string; pais?: string };
  municipioIssqn: { municipio: string; uf: string };
  paisResultado?: string;
  regimeEspecial?: string;
  imunidade?: string;
}

export interface Tributacao {
  situacaoIssqn: string;
  baseCalculo: number;
  aliquota: number;
  issqnApurado: number;
  retencaoIssqn: 'retido' | 'nao_retido';
  deducoes?: number;
  descontoIncondicionado?: number;
  beneficioMunicipal?: string;
  irrf?: number;
  inss?: number;
  contribSociais?: number;
  pis?: number;
  cofins?: number;
}

export interface Totais {
  valorServico: number;
  descontoCondicionado?: number;
  descontoIncondicionado?: number;
  issqnRetido?: number;
  retencoesFederais?: number;
  valorLiquido: number;
  tributosAproxFederais?: number;
  tributosAproxEstaduais?: number;
  tributosAproxMunicipais?: number;
}

export interface NFSeData {
  numero: string;
  dpsNumero: string;
  dpsSerie: string | number;
  emissaoEm: string;
  chaveAcesso: string;
  autorizacao: string;
  status: 'autorizada' | 'cancelada' | 'rejeitada' | 'processando';
  municipioEmissor: { municipio: string; uf: string };
  naturezaOperacao: string;
  regimeTributario: string;
  prestador: Parte;
  tomador: Parte;
  servico: Servico;
  tributacao: Tributacao;
  totais: Totais;
  vencimento?: string;
  observacoes?: string;
  qrCodeSvg?: React.ReactNode;
  urlVerificacao?: string;
}

export interface MunicipioInfo {
  nome: string;
  uf: string;
  secretaria: string;
  telefone: string;
  portal: string;
}

export interface KlavoNFSeProps {
  data: NFSeData;
  municipio: MunicipioInfo;
  showControls?: boolean;
}

/* ── Formatters ─────────────────────────────────────── */

const fmtBRL = (v?: number) =>
  v === undefined || v === null
    ? null
    : new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(v);

const fmtNumber = (v?: number, digits = 2) =>
  v === undefined || v === null
    ? '—'
    : new Intl.NumberFormat('pt-BR', {
        minimumFractionDigits: digits,
        maximumFractionDigits: digits,
      }).format(v);

const fmtDateTime = (iso: string) => {
  const d = new Date(iso);
  return `${d.toLocaleDateString('pt-BR')} · ${d.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })}`;
};

const fmtCNPJ = (raw?: string) => {
  if (!raw) return '';
  const d = raw.replace(/\D/g, '').padStart(14, '0');
  return d.replace(/^(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})$/, '$1.$2.$3/$4-$5');
};

const fmtChaveAcesso = (chave: string) =>
  chave.replace(/\s+/g, '').replace(/(.{4})/g, '$1 ').trim();

/* ── Sub-components ─────────────────────────────────── */

const TenantLogo: React.FC<{ url?: string }> = ({ url }) => {
  if (url) {
    return (
      <div className="tenant-logo">
        <img src={url} alt="" />
      </div>
    );
  }
  return (
    <div className="tenant-logo" style={{ fontSize: 22, fontWeight: 700, color: 'rgba(255,255,255,.7)', fontFamily: 'Sora, sans-serif' }}>
      K<span style={{ color: '#C9A24E' }}>.</span>
    </div>
  );
};

const StatusBadge: React.FC<{ status: NFSeData['status'] }> = ({ status }) => {
  const config = {
    autorizada:  { label: 'Autorizada',       tone: 'ok' },
    cancelada:   { label: 'Cancelada',         tone: 'err' },
    rejeitada:   { label: 'Rejeitada',         tone: 'err' },
    processando: { label: 'Em processamento',  tone: 'warn' },
  } as const;
  const { label, tone } = config[status];
  return (
    <span className={`status status--${tone}`}>
      <span className="dot" />
      {label}
    </span>
  );
};

const DefaultKlavoQR: React.FC = () => (
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <rect width="100" height="100" fill="#fff" />
    <g fill="#0E1116">
      <path d="M0 0h28v28h-28zM4 4v20h20v-20zM8 8h12v12h-12z" />
      <path d="M72 0h28v28h-28zM76 4v20h20v-20zM80 8h12v12h-12z" />
      <path d="M0 72h28v28h-28zM4 76v20h20v-20zM8 80h12v12h-12z" />
    </g>
    <g fill="#0E1116">
      {[32, 40, 48, 56, 64].map((x) => (
        <rect key={`t1-${x}`} x={x} y="4" width="4" height="4" />
      ))}
      {[32, 40, 48, 56, 64].map((y) => (
        <rect key={`t2-${y}`} x="4" y={y} width="4" height="4" />
      ))}
      {Array.from({ length: 15 }).flatMap((_, row) =>
        Array.from({ length: 15 }).map((_, col) => {
          const x = 32 + col * 4;
          const y = 32 + row * 4;
          const seed = (row * 7 + col * 13) % 5;
          if (seed < 2) return null;
          if (x < 28 && y < 28) return null;
          return <rect key={`d-${row}-${col}`} x={x} y={y} width="4" height="4" />;
        }),
      )}
    </g>
    <rect x="42" y="42" width="16" height="16" fill="#fff" />
    <text x="50" y="55" textAnchor="middle" fontFamily="Sora, sans-serif" fontWeight={600} fontSize={14} fill="#0B3D91" letterSpacing="-0.06em">
      K<tspan fill="#C9A24E">.</tspan>
    </text>
  </svg>
);

const PartyBlock: React.FC<{ parte: Parte; role: 'prestador' | 'tomador' }> = ({ parte, role }) => (
  <div className="party">
    <div className="party-eyebrow">
      <span className="label">{role === 'prestador' ? 'Emitente' : 'Destinatário'}</span>
      <span className={`role role--${role}`}>{role === 'prestador' ? 'Prestador' : 'Tomador'}</span>
    </div>
    <div className="party-name">{parte.nome}</div>
    <dl className="party-grid">
      {parte.cnpj && (<><dt>CNPJ</dt><dd className="mono">{fmtCNPJ(parte.cnpj)}</dd></>)}
      {parte.cpf  && (<><dt>CPF</dt><dd className="mono">{parte.cpf}</dd></>)}
      {parte.inscricaoMunicipal && (<><dt>Insc. Mun.</dt><dd className="mono">{parte.inscricaoMunicipal}</dd></>)}
      <dt>Endereço</dt>
      <dd>{parte.endereco.logradouro}{parte.endereco.bairro ? ` — ${parte.endereco.bairro}` : ''}</dd>
      <dt>Município</dt>
      <dd>{parte.endereco.municipio} · {parte.endereco.uf} · CEP {parte.endereco.cep}</dd>
      {(parte.telefone || parte.email) && (
        <><dt>Contato</dt><dd>{[parte.telefone, parte.email].filter(Boolean).join(' · ')}</dd></>
      )}
      {role === 'prestador' && parte.simplesNacional !== undefined && (
        <><dt>Simples</dt><dd className="muted">{parte.simplesNacional ? 'Optante' : 'Não optante'}</dd></>
      )}
      {role === 'tomador' && (
        <><dt>Intermediário</dt><dd className="muted">Não informado</dd></>
      )}
    </dl>
  </div>
);

/* ── Main component ─────────────────────────────────── */

export const KlavoNFSe: React.FC<KlavoNFSeProps> = ({ data, municipio, showControls = true }) => {
  const { prestador, tomador, servico, tributacao, totais } = data;

  return (
    <>
      {showControls && (
        <div className="klavo-nfse-ctrl">
          <div className="title">DANFSe · Modelo Klavo</div>
          <button type="button" onClick={() => window.print()}>
            Imprimir / Salvar PDF
          </button>
        </div>
      )}

      <article className="klavo-nfse">
        {/* HEADER */}
        <header className="header">
          <div className="tenant">
            <TenantLogo url={prestador.logoUrl} />
            <div className="tenant-info">
              <div className="tenant-name">{prestador.nome}</div>
              <div className="tenant-meta">
                CNPJ&nbsp;<strong>{fmtCNPJ(prestador.cnpj)}</strong>
                <span className="sep">·</span>
                IM {prestador.inscricaoMunicipal}
                <span className="sep">·</span>
                {prestador.endereco.municipio} · {prestador.endereco.uf}
              </div>
            </div>
          </div>
          <div className="doc-id">
            <div className="nfse">
              <div className="kind">Nº da NFS-e</div>
              <div className="num"><span>Nº</span>{data.numero}</div>
            </div>
            <div className="dps">
              <span className="k">DPS Nº · Série</span>
              <span className="v">{data.dpsNumero} · {data.dpsSerie}</span>
            </div>
            <div className="date">Emissão · {fmtDateTime(data.emissaoEm)}</div>
          </div>
        </header>

        {/* IDENTITY */}
        <div className="identity">
          <div className="identity-left">
            <div className="ribbon">
              <span className="eyebrow">DANFSe · Documento auxiliar da NFS-e</span>
              <span className="ver">v1.0</span>
              <StatusBadge status={data.status} />
            </div>

            <div className="chave-box">
              <div className="chave-label">Chave de<br /><strong>acesso</strong></div>
              <div className="chave-value">{fmtChaveAcesso(data.chaveAcesso)}</div>
            </div>

            <div className="meta-row">
              <div className="meta-cell">
                <span className="k">Município emissor</span>
                <span className="v">{data.municipioEmissor.municipio} · {data.municipioEmissor.uf}</span>
              </div>
              <div className="meta-cell">
                <span className="k">Natureza da operação</span>
                <span className="v">{data.naturezaOperacao}</span>
              </div>
              <div className="meta-cell">
                <span className="k">Regime tributário</span>
                <span className="v">{data.regimeTributario}</span>
              </div>
              <div className="meta-cell">
                <span className="k">Autorização</span>
                <span className="v mono">{data.autorizacao}</span>
              </div>
            </div>
          </div>

          <div className="qr" aria-label="QR de verificação">
            <QRCodeSVG value="https://www.nfse.gov.br/consultapublica" size={100} level="M" />
            <div className="qr-cap">Verifique</div>
          </div>
        </div>

        {/* PARTIES */}
        <div className="parties">
          <PartyBlock parte={prestador} role="prestador" />
          <PartyBlock parte={tomador}   role="tomador" />
        </div>

        {/* SERVICE */}
        <section className="service">
          <div>
            <div className="service-eyebrow"><span className="label">Serviço prestado</span></div>
            <div className="service-codigo">
              <span className="pill">{servico.codigoLc116}</span>
              {servico.codigoMunicipal && (
                <span className="pill-muni">Mun. {servico.codigoMunicipal}</span>
              )}
            </div>
            <div className="service-titulo">{servico.itemListaServico}</div>
            <p className="service-desc">{servico.descricao}</p>
          </div>
          <div className="service-right">
            <div className="service-eyebrow"><span className="label">Local &amp; escopo</span></div>
            <div className="svc-meta">
              <div className="meta-cell">
                <span className="k">Local prestação</span>
                <span className="v">{servico.municipioPrestacao.municipio} · {servico.municipioPrestacao.uf}</span>
              </div>
              <div className="meta-cell">
                <span className="k">País</span>
                <span className="v">{servico.municipioPrestacao.pais ?? 'Brasil'}</span>
              </div>
              <div className="meta-cell">
                <span className="k">Município ISSQN</span>
                <span className="v">{servico.municipioIssqn.municipio} · {servico.municipioIssqn.uf}</span>
              </div>
              <div className="meta-cell">
                <span className="k">País resultado</span>
                <span className="v">{servico.paisResultado ?? 'Brasil'}</span>
              </div>
              <div className="meta-cell">
                <span className="k">Regime especial</span>
                <span className="v muted">{servico.regimeEspecial ?? 'Nenhum'}</span>
              </div>
              <div className="meta-cell">
                <span className="k">Imunidade</span>
                <span className="v soft">{servico.imunidade ?? '—'}</span>
              </div>
            </div>
          </div>
        </section>

        {/* TAX */}
        <section className="tax-section">
          <div className="tax-grid">
            <div className="tax-cell"><span className="k">Tributação ISSQN</span><span className="v">{tributacao.situacaoIssqn}</span></div>
            <div className="tax-cell"><span className="k">BC ISSQN</span><span className="v mono">{fmtBRL(tributacao.baseCalculo)}</span></div>
            <div className="tax-cell"><span className="k">Alíquota</span><span className="v mono">{fmtNumber(tributacao.aliquota, 3)}%</span></div>
            <div className="tax-cell"><span className="k">ISSQN apurado</span><span className="v mono v--accent">{fmtBRL(tributacao.issqnApurado)}</span></div>
            <div className="tax-cell"><span className="k">Retenção ISSQN</span><span className="v">{tributacao.retencaoIssqn === 'retido' ? 'Retido' : 'Não retido'}</span></div>
            <div className="tax-cell"><span className="k">Deduções/Reduções</span><span className="v mono">{fmtBRL(tributacao.deducoes ?? 0)}</span></div>
            <div className="tax-cell"><span className="k">Desconto incond.</span><span className="v mono">{fmtBRL(tributacao.descontoIncondicionado ?? 0)}</span></div>
            <div className="tax-cell"><span className="k">Benefício mun.</span><span className="v soft">{tributacao.beneficioMunicipal ?? '—'}</span></div>
            <div className="tax-cell"><span className="k">IRRF</span><span className="v mono">{fmtBRL(tributacao.irrf ?? 0)}</span></div>
            <div className="tax-cell"><span className="k">INSS retido</span><span className="v mono">{fmtBRL(tributacao.inss ?? 0)}</span></div>
            <div className="tax-cell"><span className="k">Contrib. sociais</span><span className="v mono">{fmtBRL(tributacao.contribSociais ?? 0)}</span></div>
            <div className="tax-cell">
              <span className="k">PIS · COFINS</span>
              <span className="v soft">
                {tributacao.pis === undefined && tributacao.cofins === undefined
                  ? '— · —'
                  : `${fmtBRL(tributacao.pis ?? 0)} · ${fmtBRL(tributacao.cofins ?? 0)}`}
              </span>
            </div>
          </div>
        </section>

        {/* TOTALS */}
        <section className="totals">
          <div className="totals-detail">
            <div className="totals-line"><span className="k">Valor do serviço</span><span className="v">{fmtBRL(totais.valorServico)}</span></div>
            <div className="totals-line"><span className="k">Desconto condicionado</span><span className="v muted">{totais.descontoCondicionado ? fmtBRL(totais.descontoCondicionado) : '—'}</span></div>
            <div className="totals-line"><span className="k">Desconto incondicionado</span><span className="v muted">{totais.descontoIncondicionado ? fmtBRL(totais.descontoIncondicionado) : '—'}</span></div>
            <div className="totals-line"><span className="k">ISSQN retido</span><span className="v muted">{totais.issqnRetido ? fmtBRL(totais.issqnRetido) : '—'}</span></div>
            <div className="totals-line"><span className="k">Retenções federais</span><span className="v">{fmtBRL(totais.retencoesFederais ?? 0)}</span></div>
            <div className="totals-line"><span className="k">PIS/COFINS apur. própria</span><span className="v muted">—</span></div>
          </div>
          <div className="liquido">
            <span className="k">Valor líquido da NFS-e</span>
            <span className="v">
              <span className="cur">R$</span>
              {fmtNumber(totais.valorLiquido, 2)}
            </span>
            {data.vencimento && (
              <span className="sub">Vencimento da cobrança em {data.vencimento} · Boleto/Pix gerado via Klavo.</span>
            )}
          </div>
        </section>

        {/* FOOTER GRID */}
        <section className="footer-grid">
          <div className="tributos-aprox">
            <h6>Totais aproximados dos tributos · Lei 12.741/2012</h6>
            <div className="tributos-aprox-row">
              <span className="k">Federais</span><span className="dots" /><span className="v">{fmtBRL(totais.tributosAproxFederais ?? 0)}</span>
            </div>
            <div className="tributos-aprox-row">
              <span className="k">Estaduais</span><span className="dots" /><span className="v">{fmtBRL(totais.tributosAproxEstaduais ?? 0)}</span>
            </div>
            <div className="tributos-aprox-row">
              <span className="k">Municipais</span><span className="dots" /><span className="v">{fmtBRL(totais.tributosAproxMunicipais ?? 0)}</span>
            </div>
            <div className="tributos-aprox-note">
              Valores aproximados calculados conforme tabela do IBPT, sem efeito fiscal.
            </div>
          </div>
          <div className="info-comp">
            <h6>Informações complementares</h6>
            <p>
              {data.observacoes ?? (
                <>
                  Documento emitido eletronicamente — autenticidade verificável pelo QR ou pela chave
                  de acesso.{' '}
                  {data.urlVerificacao
                    ? <><strong>Portal:</strong> {data.urlVerificacao} &nbsp;</>
                    : null}
                  NFS-e{' '}
                  <strong>sem validade jurídica</strong> sem a respectiva autorização do município
                  emissor. Não há documentos fiscais vinculados.
                </>
              )}
            </p>
          </div>
        </section>

        {/* PAGE FOOTER */}
        <footer className="pagefoot">
          <div className="muni-meta">
            <div className="seal" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none">
                <path d="M12 2 L20 6 V12 C20 17 16 21 12 22 C8 21 4 17 4 12 V6 Z" stroke="#0B3D91" strokeWidth="1.6" strokeLinejoin="round" />
                <path d="M9 12 l2 2 l4 -4" stroke="#0B3D91" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>
            <div className="copy">
              <strong>Município de {municipio.nome} · {municipio.secretaria}</strong>
              {municipio.telefone} &nbsp;·&nbsp; {municipio.portal}
            </div>
          </div>
          <a className="klavo-signature" href="https://klavo.com.br" target="_blank" rel="noopener noreferrer">
            <div className="by">
              Emitido via
              <strong>Klavo<span className="dot">.</span></strong>
            </div>
            <div className="monogram">K<span className="pt">.</span></div>
          </a>
        </footer>

        <div className="footrule">
          <span>Klavo · Plataforma de gestão de contratos e faturamento</span>
          <span>klavo.com.br &nbsp;·&nbsp; doc 1/1</span>
        </div>
      </article>
    </>
  );
};

export default KlavoNFSe;