// ============================================================
// Paper — A4 list pro vlastní směnku „bez protestu".
// § 75 zákona č. 191/1950 Sb., zákon směnečný a šekový (ZSŠ).
// Implementace podle docs/SMENKA_FORM_SPEC.md.
//
// Layout:
//   1. Hlavička — místo a datum vystavení (datum slovem)
//   2. Centrovaný nadpis  S M Ě N K A
//   3. Tělo směnky (§ 75 ZSŠ) — bezpodmienečný slib + „BEZ PROTESTU"
//   4. Identifikace výstavce (= dlužník při vlastní směnce)
//   5. Podpis výstavce
//   6. Vodorovná čára — vizuální oddělení (NS ČR 29 Cdo 1099/2003)
//   7. Doložka „Doložka — dohoda smluvních stran" (rozhodčí doložka)
//   8. Volitelně — blok rukojmího (per aval, § 30 – § 32 ZSŠ)
// ============================================================

const __IS_MOBILE_DEVICE = (() => {
  if (typeof navigator === 'undefined') return false;
  try {
    const params = new URLSearchParams(window.location.search);
    if (params.get('forceDesktopUI') === '1') return false;
  } catch (e) {}
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent || '');
})();

// ---------- PartyBlock — typ osoby + údaje ----------
// `role`: 'creditor' | 'debtor' | 'aval'
const PartyBlock = ({ label, type, onTypeChange, onDisplayChange, role, demo, hideRoleHeader }) => {
  const isPerson = type === 'person';
  const [bizKind, setBizKind] = React.useState('po'); // 'po' = právnická osoba, 'fop' = FO podnikatel

  const [personName, setPersonName] = React.useState('');
  const [companyName, setCompanyName] = React.useState('');
  const [companyRep, setCompanyRep] = React.useState('');

  React.useEffect(() => {
    if (!onDisplayChange) return;
    let text = '';
    if (isPerson) {
      text = personName.trim();
    } else if (bizKind === 'po') {
      const nm = companyName.trim();
      const rep = companyRep.trim();
      text = nm && rep ? `${nm} — zast. ${rep}` : nm;
    } else {
      text = companyName.trim();
    }
    onDisplayChange(text);
  }, [isPerson, bizKind, personName, companyName, companyRep]);

  return (
    <div className="party-block">
      {!hideRoleHeader && (
        <div className="party-role no-copy">
          <span className="party-role-label">{label}</span>
          <div className="party-type-switches">
            <div className="party-type-switch" role="tablist" aria-label="Typ osoby">
              <button
                role="tab"
                aria-selected={isPerson}
                className={isPerson ? 'active' : ''}
                onClick={() => onTypeChange('person')}
              >
                <svg width="11" height="11" viewBox="0 0 12 12" fill="none" aria-hidden="true">
                  <circle cx="6" cy="4" r="2.1" stroke="currentColor" strokeWidth="1.1"/>
                  <path d="M2.2 10.5c.5-2 2-3 3.8-3s3.3 1 3.8 3" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round"/>
                </svg>
                Fyzická osoba
              </button>
              <button
                role="tab"
                aria-selected={!isPerson}
                className={!isPerson ? 'active' : ''}
                onClick={() => onTypeChange('company')}
              >
                <svg width="11" height="11" viewBox="0 0 12 12" fill="none" aria-hidden="true">
                  <rect x="1.8" y="2.3" width="8.4" height="7.4" stroke="currentColor" strokeWidth="1.1"/>
                  <path d="M4 5.2h1M7 5.2h1M4 7.2h1M7 7.2h1" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round"/>
                </svg>
                Podnikatel
              </button>
            </div>
            {!isPerson && (
              <div className="party-type-switch party-type-switch-sub" role="tablist" aria-label="Typ podnikatele">
                <button
                  role="tab"
                  aria-selected={bizKind === 'po'}
                  className={bizKind === 'po' ? 'active' : ''}
                  onClick={() => setBizKind('po')}
                >
                  Právnická osoba
                </button>
                <button
                  role="tab"
                  aria-selected={bizKind === 'fop'}
                  className={bizKind === 'fop' ? 'active' : ''}
                  onClick={() => setBizKind('fop')}
                >
                  FO podnikatel
                </button>
              </div>
            )}
          </div>
        </div>
      )}

      {isPerson ? (
        <div className="party-fields">
          <div className="party-field-row">
            <span className="party-field-label">Jméno a příjmení:</span>
            <span className="party-field-input"><Ed defaultValue={(demo && demo.name) || ''} placeholder="Jméno a příjmení" lg onValueChange={setPersonName} /></span>
          </div>
          <div className="party-field-row">
            <span className="party-field-label">Datum narození:</span>
            <span className="party-field-input"><Ed defaultValue={(demo && demo.born) || ''} placeholder="DD. MM. RRRR" /></span>
          </div>
          <div className="party-field-row">
            <span className="party-field-label">Bydliště:</span>
            <span className="party-field-input"><Ed defaultValue={(demo && demo.addr) || ''} placeholder="Ulice, č., PSČ, město" xl /></span>
          </div>
          <div className="party-field-row">
            <span className="party-field-label">Občanství:</span>
            <span className="party-field-input"><Ed defaultValue="Česká republika" placeholder="Česká republika" /></span>
          </div>
        </div>
      ) : (
        <div className="party-fields">
          <div className="party-field-row">
            <span className="party-field-label">{bizKind === 'po' ? 'Název společnosti:' : 'Obchodní firma:'}</span>
            <span className="party-field-input"><Ed defaultValue="" placeholder={bizKind === 'po' ? 'Název společnosti' : 'Obchodní firma'} lg onValueChange={setCompanyName} /></span>
          </div>
          <div className="party-field-row">
            <span className="party-field-label">IČ:</span>
            <span className="party-field-input"><Ed defaultValue="" placeholder="00000000" /></span>
          </div>
          <div className="party-field-row">
            <span className="party-field-label">Sídlo:</span>
            <span className="party-field-input"><Ed defaultValue="" placeholder="Ulice, č., PSČ, město" xl /></span>
          </div>
          {bizKind === 'po' && (
            <div className="party-field-row">
              <span className="party-field-label">Zastoupena:</span>
              <span className="party-field-input"><Ed defaultValue="" placeholder="jméno a funkce zástupce" lg onValueChange={setCompanyRep} /></span>
            </div>
          )}
        </div>
      )}
    </div>
  );
};

window.PartyBlock = PartyBlock;


// ---------- Paper (vlastní směnka) ----------
const Paper = ({
  creditor, setCreditorType,
  debtor, setDebtorType,
  withAval, setWithAval, aval, setAvalType,
  email, setEmail,
  setActiveArticle, setActiveTipKey, onTipClick, activeTipKey
}) => {

  const TipBtn = ({ pointKey, inline, end }) => (
    <button
      type="button"
      className={`tip-pin no-print ${inline ? 'tip-pin-inline' : ''} ${end ? 'tip-pin-end' : ''} ${activeTipKey === pointKey ? 'active' : ''}`}
      data-tip-key={pointKey}
      onClick={(e) => { e.stopPropagation(); onTipClick && onTipClick(pointKey); }}
      aria-label={`Zobrazit tip k bodu ${pointKey}`}
      title={`Tip k bodu ${pointKey}`}
      contentEditable={false}
    >
      TIP
    </button>
  );

  // ===== State pre dynamické polia =====
  const [currency, setCurrency] = React.useState('Kč');
  const [castka, setCastka] = React.useState('');
  const [castkaSlovem, setCastkaSlovem] = React.useState('');
  const [datumVystaveni, setDatumVystaveni] = React.useState('');
  const [datumSplatnosti, setDatumSplatnosti] = React.useState('');

  // Slovní podoba částky se autovyplňuje, dokud uživatel ručně neupraví.
  const [slovemTouched, setSlovemTouched] = React.useState(false);
  React.useEffect(() => {
    if (slovemTouched) return;
    const n = parseInt((castka || '').replace(/\s+/g, ''), 10);
    if (isFinite(n) && n > 0 && window.numberToCzechWords) {
      const auto = window.numberToCzechWords(n, currency);
      setCastkaSlovem(auto);
    }
  }, [castka, currency, slovemTouched]);

  React.useEffect(() => {
    if (!['Kč', 'EUR', 'USD', 'Jiná'].includes(currency)) setCurrency('Kč');
  }, [currency]);

  // Scroll-spy pro activeArticle
  React.useEffect(() => {
    const articles = document.querySelectorAll('.paper .article[id]');
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) setActiveArticle(e.target.id); });
    }, { rootMargin: '-35% 0px -55% 0px' });
    articles.forEach(a => obs.observe(a));

    const points = document.querySelectorAll('.paper p.has-tip .tip-pin[data-tip-key]');
    const pointEls = Array.from(points).map(btn => ({ el: btn.closest('p.has-tip'), key: btn.dataset.tipKey }));
    let currentKey = null;
    const pObs = new IntersectionObserver((entries) => {
      const hits = entries
        .filter(e => e.isIntersecting)
        .map(e => {
          const found = pointEls.find(pe => pe.el === e.target);
          return found ? { ...found, top: e.boundingClientRect.top } : null;
        })
        .filter(Boolean)
        .sort((a, b) => a.top - b.top);
      if (hits.length && hits[0].key !== currentKey) {
        currentKey = hits[0].key;
        setActiveTipKey && setActiveTipKey(currentKey);
      }
    }, { rootMargin: '-30% 0px -60% 0px' });
    pointEls.forEach(pe => pe.el && pObs.observe(pe.el));

    return () => { obs.disconnect(); pObs.disconnect(); };
  }, [withAval, currency]);

  // Display jména pre podpisové linky
  const [creditorDisplay, setCreditorDisplay] = React.useState('');
  const [debtorDisplay, setDebtorDisplay] = React.useState('');
  const [avalDisplay, setAvalDisplay] = React.useState('');

  // Datum slovem — pre rendrovanie do tela směnky
  const datumVystaveniSlovem = (window.formatCzechDate && datumVystaveni) ? window.formatCzechDate(datumVystaveni) : '';
  const datumSplatnostiSlovem = (window.formatCzechDate && datumSplatnosti) ? window.formatCzechDate(datumSplatnosti) : '';

  return (
    <div className="paper-stage">
      <article className="paper paper-smenka" aria-label="Vlastní směnka — editovatelný dokument">

        {/* Sekce 1: Hlavička — místo a datum vystavení */}
        <section className="article" id="art-header">
          <div className="article-head">
            <div className="article-num">1</div>
            <span className="article-title">Údaje o vystavení směnky</span>
          </div>

          <p className="has-tip smenka-header-row">
            <TipBtn pointKey="header.misto" />
            <strong>Místo vystavení směnky:</strong>{' '}
            <span className="ed-cg"><Ed defaultValue="" placeholder="např. Brno" lg /></span>
          </p>

          <p className="has-tip smenka-header-row">
            <TipBtn pointKey="header.datum" />
            <strong>Datum vystavení směnky:</strong>{' '}
            <span className="ed-cg" style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <input
                type="date"
                className="ed-date"
                value={datumVystaveni}
                onChange={(e) => setDatumVystaveni(e.target.value)}
                aria-label="Datum vystavení směnky"
              />
              {datumVystaveniSlovem && (
                <span className="smenka-date-words" aria-hidden="true">{datumVystaveniSlovem}</span>
              )}
            </span>
          </p>
        </section>

        {/* Centrovaný nadpis SMĚNKA */}
        <h1 className="smenka-title">S M Ě N K A</h1>
        <div className="smenka-subtitle">vlastní směnka „bez protestu" podle § 75 zákona č. 191/1950 Sb., zákon směnečný a šekový</div>

        {/* Sekce 2 + 3 + 4: Tělo směnky — § 75 ZSŠ. Bezpodmínečný slib zaplatit. */}
        <section className="article" id="art-body">
          <div className="article-head">
            <div className="article-num">2 – 4</div>
            <span className="article-title">Směnečný text (§ 75 ZSŠ)</span>
          </div>

          <p className="has-tip smenka-body">
            <TipBtn pointKey="body.text" />
            Za tuto směnku zaplatím <strong>„BEZ PROTESTU"</strong> dne{' '}
            <span className="ed-cg" style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <input
                type="date"
                className="ed-date"
                value={datumSplatnosti}
                onChange={(e) => setDatumSplatnosti(e.target.value)}
                aria-label="Datum splatnosti směnky"
              />
              {datumSplatnostiSlovem && (
                <span className="smenka-date-words" aria-hidden="true">{datumSplatnostiSlovem}</span>
              )}
            </span>
            {' '}v <span className="ed-cg"><Ed defaultValue="" placeholder="místo placení (např. Brno)" lg /></span>{' '}
            panu/paní/společnosti{' '}
            <span className="smenka-remitent">
              {creditorDisplay
                ? <strong>{creditorDisplay}</strong>
                : <em style={{ color: 'var(--ink-3)' }}>[remitenta vyplňte níže]</em>}
            </span>
            {' '}nebo na jeho/její řad částku{' '}
            <span className="ed-cg">
              <Ed defaultValue="" placeholder="50 000" num onValueChange={setCastka} />
            </span>{' '}
            <Ed select value={currency} onValueChange={setCurrency} options={[
              { v: 'Kč', label: 'Kč' },
              { v: 'EUR', label: 'EUR' },
              { v: 'USD', label: 'USD' },
              { v: 'Jiná', label: 'Jiná' },
            ]} />
            {' '}(slovy:{' '}
            <span className="ed-cg">
              <Ed
                defaultValue=""
                placeholder="padesát tisíc korun českých"
                lg
                value={castkaSlovem}
                onValueChange={(v) => { setSlovemTouched(true); setCastkaSlovem(v); }}
              />
            </span>).
          </p>
        </section>

        {/* Sekce 5: Výstavce směnky (= dlužník) */}
        <section className="article" id="art-vystavce">
          <div className="article-head">
            <div className="article-num">5</div>
            <span className="article-title">Výstavce směnky (= dlužník)</span>
          </div>

          <p className="has-tip" style={{ marginTop: 4 }}>
            <TipBtn pointKey="vystavce" />
            <strong>Výstavce vlastní směnky</strong> je zároveň jejím dlužníkem (§ 75 ZSŠ). Vyplňte úplné identifikační údaje.
          </p>

          <PartyBlock
            label="Výstavce směnky"
            role="debtor"
            type={debtor.type || 'person'}
            onTypeChange={(t) => setDebtorType(t)}
            onDisplayChange={setDebtorDisplay}
            demo={{ name: 'Petr Svoboda', born: '04. 08. 1991', addr: 'Údolní 8, 602 00 Brno' }}
          />

          <div className="smenka-signature">
            <div className="smenka-sig-line">.............................................</div>
            <div className="smenka-sig-label">
              podpis výstavce směnky{debtorDisplay ? <><br/><strong>{debtorDisplay}</strong></> : null}
            </div>
          </div>
        </section>

        {/* Sekce 6: Věřitel — remitent (komu / na jehož řad) */}
        <section className="article" id="art-veritel">
          <div className="article-head">
            <div className="article-num">6</div>
            <span className="article-title">Věřitel (remitent)</span>
          </div>

          <p className="has-tip" style={{ marginTop: 4 }}>
            <TipBtn pointKey="veritel" />
            Identifikujte osobu, <strong>komu nebo na jejíž řad má být placeno</strong> (§ 75 bod 5 ZSŠ).
          </p>

          <PartyBlock
            label="Věřitel (remitent)"
            role="creditor"
            type={creditor.type || 'person'}
            onTypeChange={(t) => setCreditorType(t)}
            onDisplayChange={setCreditorDisplay}
            demo={{ name: 'Jan Novák', born: '14. 03. 1981', addr: 'Botanická 14, 602 00 Brno' }}
          />
        </section>

        {/* Vodorovná čára — vizuálne oddelenie směnky od doložky.
            Implementácia záverov NS ČR 29 Cdo 1099/2003. */}
        <hr className="smenka-divider" aria-hidden="true" />

        {/* Sekce 7: Doložka — dohoda smluvních stran (rozhodčí doložka) */}
        <section className="article" id="art-dolozka">
          <div className="dolozka-heading">Doložka — dohoda smluvních stran</div>

          <p className="has-tip dolozka-body">
            <TipBtn pointKey="dolozka" />
            Smluvní strany se dohodly, že všechny majetkové spory, které vzniknou z této směnky, budou rozhodnuty v rozhodčím řízení podle zák. č. 216/1994 Sb. o rozhodčím řízení rozhodcem: <strong>JUDr. Milan Ficek, advokát</strong> (zapsaný v seznamu evropských advokátů ČAK pod ev. č. 50245), se sídlem: Lidická 700/19, 602 00 Brno (<a href="http://www.rrcr.cz" target="_blank" rel="noopener noreferrer">www.rrcr.cz</a>). Rozhodce rozhoduje neveřejně bez ústního jednání (písemně) na základě písemných důkazů. Rozhodčí poplatek za každý spor činí 4 % z hodnoty předmětu sporu, nejméně 4.500,- Kč. Zásilka se má za doručenou i vhozením do domovní schránky adresáta nebo jejím vrácením rozhodci. Rozhodce se řídí právními předpisy a nesmí rozhodovat v rozporu s veřejným pořádkem. Právní předpisy rozhodce aplikuje stejně jako soudce v soudním řízení podle o. s. ř. Ustanovení této doložky upravující postup, kterým má rozhodce vést řízení, je dohodou stran ve smyslu § 19 odst. 1 ZRŘ. Není-li postup upraven, postupuje rozhodce v řízení způsobem, který považuje za vhodný (§ 19 odst. 2 ZRŘ), a to s přiměřenou aplikací ustanovení o. s. ř. (§ 30 ZRŘ).
          </p>
        </section>

        {/* Sekce 8 (volitelne): Rukojmí — per aval (§ 30 – § 32 ZSŠ) */}
        <section className="article" id="art-aval">
          <div className="article-head">
            <div className="article-num">8</div>
            <span className="article-title">Rukojmí (per aval) — volitelně</span>
            <label className="smenka-aval-toggle no-copy" style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, fontFamily: 'var(--sans)' }}>
              <input
                type="checkbox"
                checked={withAval}
                onChange={(e) => setWithAval(e.target.checked)}
              />
              Přidat směnečného rukojmího
            </label>
          </div>

          {withAval && (
            <>
              <p className="has-tip" style={{ marginTop: 4 }}>
                <TipBtn pointKey="aval" />
                <strong>Rukojmí (per aval)</strong> se zaručuje za zaplacení směnečné sumy podle § 30 – § 32 ZSŠ. Závazek rukojmího je platný i tehdy, je-li závazek, za který se zaručil, neplatný z jiného důvodu než pro vadu formy (§ 32 odst. 2 ZSŠ).
              </p>

              <PartyBlock
                label="Rukojmí"
                role="aval"
                type={aval.type || 'person'}
                onTypeChange={(t) => setAvalType(t)}
                onDisplayChange={setAvalDisplay}
                demo={{ name: '', born: '', addr: '' }}
              />

              <div className="smenka-signature smenka-signature--aval">
                <div className="smenka-aval-marker">per aval</div>
                <div className="smenka-sig-line">.............................................</div>
                <div className="smenka-sig-label">
                  podpis rukojmího{avalDisplay ? <><br/><strong>{avalDisplay}</strong></> : null}
                </div>
              </div>
            </>
          )}
          {!withAval && (
            <p style={{ fontSize: 12.5, color: 'var(--ink-3)', fontStyle: 'italic' }} className="no-copy">
              Rukojmí (avalista) se přidává, pokud má za výstavce ručit třetí osoba. Bez tohoto kroku směnka platí pouze proti výstavci.
            </p>
          )}
        </section>

        {/* Sekce 9: E-mail — volitelný (krok 7 generátora) */}
        <section className="article no-print" id="art-email">
          <div className="article-head">
            <div className="article-num">7</div>
            <span className="article-title">Odeslání e-mailem (volitelně)</span>
          </div>
          <p style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 4 }}>
            Pokud zadáte e-mailovou adresu, po kliknutí na <strong>Stáhnout PDF</strong> se zároveň otevře váš e-mailový klient s předpřipravenou zprávou. PDF si do zprávy připojíte ručně.
          </p>
          <p>
            <span className="ed-cg">
              <input
                type="email"
                className="ed-email"
                placeholder="vase.adresa@example.cz"
                value={email || ''}
                onChange={(e) => setEmail(e.target.value)}
                aria-label="E-mail pro odeslání směnky"
              />
            </span>
          </p>
        </section>

      </article>

      {/* Download actions */}
      <div className="paper-actions no-print no-copy">
        <div className="paper-actions__row">
          <button type="button" className="btn-download" onClick={() => {
            window.print();
            // Mailto fallback — otvor klient s pripravenou správou (príloha PDF
            // si používateľ pripojí ručne).
            if (email && email.includes('@')) {
              const subj = 'Vlastní směnka — vzor';
              const body = `Dobrý den,\n\nv příloze je PDF vlastní směnky.\nVystaveno v ${''} dne ${datumVystaveniSlovem || '...'} se splatností ${datumSplatnostiSlovem || '...'}.\nPDF si prosím připojte ručně z otevřeného dialogu tisku.\n\nS pozdravem`;
              setTimeout(() => {
                window.location.href = `mailto:${encodeURIComponent(email)}?subject=${encodeURIComponent(subj)}&body=${encodeURIComponent(body)}`;
              }, 800);
            }
          }}>
            <span className="btn-download__glyph" aria-hidden="true">↓</span>
            <span className="btn-download__main">Stáhnout jako PDF</span>
            <span className="btn-download__meta">A4</span>
          </button>
          {!__IS_MOBILE_DEVICE && (
            <button type="button" className="btn-download btn-download--ghost" onClick={() => window.print()}>
              <span className="btn-download__glyph" aria-hidden="true">↓</span>
              <span className="btn-download__main">Stáhnout jako Word</span>
              <span className="btn-download__meta">.doc</span>
            </button>
          )}
          <button type="button" className="btn-download btn-download--danger" onClick={() => window.__clearFormFields && window.__clearFormFields()}>
            <span className="btn-download__glyph" aria-hidden="true">✕</span>
            <span className="btn-download__main">Vymazat údaje</span>
            <span className="btn-download__meta">nevratná akce</span>
          </button>
        </div>
        {__IS_MOBILE_DEVICE ? (
          <p className="paper-actions__note paper-actions__note--mobile" role="note">
            <span className="paper-actions__note-icon" aria-hidden="true">ⓘ</span>
            <span>Stažení ve formátu Word je momentálně dostupné pouze na počítači. Pro mobil doporučujeme stažení v PDF.</span>
          </p>
        ) : (
          <p className="paper-actions__note">
            PDF se otevře v dialogu tisku prohlížeče — v cíli zvolte <em>Uložit jako PDF</em>. Word (.doc) otevřete v MS Word nebo v LibreOffice a můžete směnku dále upravit.
          </p>
        )}
      </div>
    </div>
  );
};

window.Paper = Paper;