const { Button, Badge, Eyebrow, Card, SectionHeading, Input, Textarea, Select, Checkbox, RadioGroup, TopicChip, SourceNote, Callout } = window.CensoNosaraDesignSystem_f123a0;
const GD = window.CN_DATA;

const TONOS = {
  Formal: { open: 'Reciba un cordial saludo.', close: 'Agradezco de antemano su atención y quedo a la espera de una respuesta formal.' },
  Directo: { open: 'Le escribo como vecina o vecino del distrito de Nosara.', close: 'Solicito una respuesta con plazos concretos y la persona responsable del seguimiento.' },
  Urgente: { open: 'Le escribo con carácter urgente como habitante del distrito de Nosara.', close: 'Solicito una respuesta en un plazo no mayor a diez días hábiles, dada la gravedad de la situación descrita.' }
};

const linea = d => d.org + (d.cargo ? ', ' + d.cargo : '');
const correos = list => list.map(d => d.email).filter(Boolean);

function buildLetter({ nombre, comunidad, topicId, tono, contexto, facts, pedido, para, copias }) {
  const t = GD.topics.find(x => x.id === topicId);
  const hoy = new Date().toLocaleDateString('es-CR', { day: 'numeric', month: 'long', year: 'numeric' });
  const tn = TONOS[tono] || TONOS.Formal;
  const cited = t.facts.filter((_, i) => facts[i]);
  return [
    'Nosara, Guanacaste, ' + hoy,
    '',
    'Señores',
    ...(para.length ? para.map(linea) : ['[Institución destinataria]']),
    'Presente',
    '',
    'Asunto: solicitud de intervención en materia de ' + t.label.toLowerCase() + ' para el distrito de Nosara.',
    '',
    tn.open + ' Mi nombre es ' + (nombre || '[su nombre]') + ' y resido en ' + (comunidad || '[su comunidad]') + ', distrito de Nosara, cantón de Nicoya, Guanacaste.',
    '',
    'Fundamento esta solicitud en el Censo de Población y Vivienda de Nosara 2024, el primer censo distrital de base comunitaria realizado en Costa Rica, coordinado por ADC y ConoSer con asesoría técnica del INEC, con una cobertura del 95,1 % de la población del distrito. Sus resultados documentan lo siguiente:',
    '',
    ...cited.map(f => '· ' + f),
    '',
    contexto ? 'Adicionalmente, en mi comunidad: ' + contexto : null,
    contexto ? '' : null,
    'Por lo anterior, solicito respetuosamente ' + (pedido || t.ask) + '.',
    '',
    tn.close,
    '',
    'Atentamente,',
    '',
    nombre || '[su nombre]',
    (comunidad || '[su comunidad]') + ', distrito de Nosara',
    '',
    copias.length ? 'Con copia a:' : null,
    ...copias.map(d => '· ' + linea(d)),
    copias.length ? '' : null,
    ',',
    GD.source
  ].filter(x => x !== null).join('\n');
}

function GrupoDestinos({ titulo, nota, destinos, marcados, onToggle }) {
  return (
    <div style={{ marginBottom: 'var(--space-5)' }}>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-2xs)', fontWeight: 600, letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase', color: 'var(--cn-navy-700)', marginBottom: 4 }}>{titulo}</div>
      {nota && <p style={{ fontSize: 'var(--fs-xs)', color: 'var(--text-muted)', margin: '0 0 10px', maxWidth: '52ch' }}>{nota}</p>}
      {destinos.map(d => (
        <Checkbox key={d.org} label={linea(d)} help={d.email || 'correo pendiente, lo aporta el equipo del censo'}
          checked={!!marcados[d.org]} onChange={() => onToggle(d)} />
      ))}
    </div>
  );
}

window.Generador = function Generador({ initialTopic, lang }) {
  const [topicId, setTopicId] = React.useState(initialTopic || 'salud');
  const t = GD.topics.find(x => x.id === topicId);
  const chain = GD.destinatarios[topicId];
  const [nombre, setNombre] = React.useState('');
  const [comunidad, setComunidad] = React.useState('');
  const [tono, setTono] = React.useState('Formal');
  const [contexto, setContexto] = React.useState('');
  const [pedido, setPedido] = React.useState('');
  const [facts, setFacts] = React.useState([true, true, true]);
  const [marcados, setMarcados] = React.useState({});
  const [copied, setCopied] = React.useState(false);

  // Selección por defecto: máxima autoridad + regional + legislativa + gobierno local.
  React.useEffect(() => {
    const m = {};
    chain.principal.forEach(d => { m[d.org] = 'para'; });
    chain.regional.forEach(d => { m[d.org] = 'copia'; });
    GD.copias.legislativa.destinos.forEach(d => { m[d.org] = 'copia'; });
    GD.copias.local.destinos.forEach(d => { m[d.org] = 'copia'; });
    setMarcados(m); setFacts([true, true, true]); setPedido('');
  }, [topicId]);

  const toggle = (d, rol) => setMarcados(m => { const n = { ...m }; if (n[d.org]) delete n[d.org]; else n[d.org] = rol; return n; });

  const para = chain.principal.filter(d => marcados[d.org]);
  const copias = [...chain.regional, ...GD.copias.legislativa.destinos, ...GD.copias.local.destinos].filter(d => marcados[d.org]);

  const asunto = 'Solicitud de intervención en materia de ' + t.label.toLowerCase() + ', distrito de Nosara (Censo Nosara 2024)';
  const letter = buildLetter({ nombre, comunidad, topicId, tono, contexto, facts, pedido, para, copias });

  const toList = correos(para), ccList = correos(copias);
  const faltan = (para.length + copias.length) - (toList.length + ccList.length);
  const mailto = 'mailto:' + encodeURIComponent(toList.join(',')) +
    '?cc=' + encodeURIComponent(ccList.join(',')) +
    '&subject=' + encodeURIComponent(asunto) +
    '&body=' + encodeURIComponent(letter);
  const gmail = 'https://mail.google.com/mail/?view=cm&fs=1&to=' + encodeURIComponent(toList.join(',')) +
    '&cc=' + encodeURIComponent(ccList.join(',')) +
    '&su=' + encodeURIComponent(asunto) + '&body=' + encodeURIComponent(letter);

  const copy = () => { navigator.clipboard && navigator.clipboard.writeText(letter); setCopied(true); setTimeout(() => setCopied(false), 1800); };
  const download = () => {
    const b = new Blob([letter], { type: 'text/plain;charset=utf-8' });
    const a = document.createElement('a'); a.href = URL.createObjectURL(b); a.download = 'carta-censo-nosara-' + topicId + '.txt'; a.click();
  };

  return (
    <main id="cartas">
      <section style={{ background: 'var(--cn-navy-700)', color: 'var(--cn-cream-300)' }}>
        <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'clamp(40px,5vw,72px) var(--gutter)' }}>
          <Badge tone="solidAccent">Herramienta</Badge>
          <h1 style={{ color: 'var(--cn-cream-300)', fontSize: 'clamp(2.2rem,4.4vw,3.6rem)', letterSpacing: 'var(--ls-hero)', lineHeight: 1, margin: '16px 0 14px', maxWidth: '18ch' }}>Generador de cartas a instituciones</h1>
          <p style={{ color: 'var(--cn-navy-200)', fontSize: 'var(--fs-lg)', maxWidth: '58ch', margin: 0 }}>
            Elija un tema y obtenga una carta lista, con la autoridad competente en el «Para» y las copias que corresponden: vía legislativa, representación regional y gobierno local.
          </p>
          <p style={{ color: 'var(--cn-navy-300)', fontSize: 'var(--fs-sm)', maxWidth: '58ch', margin: 'var(--space-3) 0 0' }}>
            Directorio de contacto con información disponible hasta 2026, por favor verifique cualquier cambio antes de enviar.
          </p>
          {lang && lang !== 'es' && (
            <p style={{ color: 'var(--cn-navy-300)', fontSize: 'var(--fs-sm)', maxWidth: '58ch', margin: 'var(--space-5) 0 0', paddingTop: 'var(--space-4)', borderTop: '1px solid var(--border-inverse)' }}>
              {window.T(lang).soloEspanol}
            </p>
          )}
        </div>
      </section>

      <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'var(--section-y) var(--gutter) 0' }}>
        <window.Arte hero="dato-a-carta" />
      </div>

      <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'var(--section-y) var(--gutter)', display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 'var(--space-10)', alignItems: 'start' }} data-stack>
        <div>
          <Eyebrow>Paso 1 · Tema</Eyebrow>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-2)', marginBottom: 'var(--space-8)' }}>
            {GD.topics.map(x => <TopicChip key={x.id} topic={x.id} label={x.label} selected={topicId === x.id} onClick={() => setTopicId(x.id)} />)}
          </div>

          <Eyebrow>Paso 2 · A quién va dirigida</Eyebrow>
          <Card tone="sunken" padding="var(--space-5)" style={{ marginBottom: 'var(--space-8)' }}>
            <GrupoDestinos titulo="Para: máxima autoridad competente" nota={'Responsable directo del tema «' + t.label.toLowerCase() + '».'}
              destinos={chain.principal} marcados={marcados} onToggle={d => toggle(d, 'para')} />
            <GrupoDestinos titulo="Copia: representación regional" nota="Quien ejecuta en la región Chorotega y puede dar seguimiento operativo."
              destinos={chain.regional} marcados={marcados} onToggle={d => toggle(d, 'copia')} />
            <GrupoDestinos titulo={'Copia: ' + GD.copias.legislativa.titulo.toLowerCase()} nota={GD.copias.legislativa.nota}
              destinos={GD.copias.legislativa.destinos} marcados={marcados} onToggle={d => toggle(d, 'copia')} />
            <GrupoDestinos titulo={'Copia: ' + GD.copias.local.titulo.toLowerCase()} nota={GD.copias.local.nota}
              destinos={GD.copias.local.destinos} marcados={marcados} onToggle={d => toggle(d, 'copia')} />
          </Card>

          <Eyebrow>Paso 3 · Datos que quiere citar</Eyebrow>
          <div style={{ marginBottom: 'var(--space-8)' }}>
            {t.facts.map((f, i) => (
              <Checkbox key={i} label={f} checked={facts[i]} onChange={e => { const n = facts.slice(); n[i] = e.target.checked; setFacts(n); }} />
            ))}
          </div>

          <Eyebrow>Paso 4 · Sus datos</Eyebrow>
          <div data-stack style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 var(--space-5)' }}>
            <Input label="Su nombre" placeholder="María Jiménez Rojas" value={nombre} onChange={e => setNombre(e.target.value)} required />
            <Input label="Su comunidad" placeholder="Santa Marta" value={comunidad} onChange={e => setComunidad(e.target.value)} />
          </div>
          <RadioGroup label="Tono" name="tono" value={tono} onChange={e => setTono(e.target.value)} columns={3} options={['Formal', 'Directo', 'Urgente']} />
          <Textarea label="Su caso concreto (opcional)" rows={3} placeholder="Ej.: en Santa Marta la ambulancia tarda más de una hora en llegar." value={contexto} onChange={e => setContexto(e.target.value)} />
          <Input label="Petición específica (opcional)" placeholder={t.ask.slice(0, 60) + '…'} value={pedido} onChange={e => setPedido(e.target.value)} help="Si lo deja vacío usamos la petición sugerida para este tema." />
        </div>

        <div style={{ position: 'sticky', top: 96, display: 'grid', gap: 'var(--space-4)' }}>
          <Card tone="surface" padding="0" style={{ overflow: 'hidden' }}>
            <div style={{ background: 'var(--cn-cream-300)', padding: '12px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid var(--border-subtle)' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-2xs)', fontWeight: 600, letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase', color: 'var(--cn-navy-700)' }}>Vista previa</span>
              <Badge tone="outline" size="sm">{para.length} para · {copias.length} copias</Badge>
            </div>
            <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--border-subtle)', display: 'grid', gap: 6, fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-3xs)', color: 'var(--text-muted)', lineHeight: 1.6 }}>
              <div><strong style={{ color: 'var(--cn-navy-700)' }}>Para:</strong> {toList.join(', ') || 'correos pendientes'}</div>
              <div><strong style={{ color: 'var(--cn-navy-700)' }}>CC:</strong> {ccList.join(', ') || 'correos pendientes'}</div>
              <div><strong style={{ color: 'var(--cn-navy-700)' }}>Asunto:</strong> {asunto}</div>
            </div>
            <pre style={{ margin: 0, padding: 'var(--space-6)', fontFamily: 'var(--font-text)', fontSize: 'var(--fs-sm)', lineHeight: 1.7, color: 'var(--text-body)', whiteSpace: 'pre-wrap', maxHeight: 420, overflow: 'auto' }}>{letter}</pre>
          </Card>
          <div style={{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
            <Button variant="accent" href={mailto}>Abrir en mi correo</Button>
            <Button variant="outline" href={gmail} target="_blank" rel="noopener">Abrir en Gmail</Button>
            <Button variant="ghost" onClick={copy}>{copied ? 'Copiada ✓' : 'Copiar'}</Button>
            <Button variant="ghost" onClick={download}>Descargar .txt</Button>
          </div>
          {faltan > 0 && (
            <Callout tone="alert" title={faltan + ' destinatarios sin correo'}>
              El «Para» y el «CC» se llenan solos en cuanto se carguen los correos oficiales en <code>data.js</code>. Mientras tanto la carta se abre con los campos vacíos y los nombres van dentro del texto.
            </Callout>
          )}
          <SourceNote>{GD.source}</SourceNote>
        </div>
      </div>
    </main>
  );
};