// ============================================================
// Generator — inline-editable rental contract
// Ficek & Partners · NajomnaZmluva.sk
// ============================================================

// Inline editable field (contentEditable) with focus-clear behavior
// Props: id, defaultValue, placeholder, lg, xl, num, onValueChange
// Inline editable field — placeholder rendered via CSS ::before on empty contentEditable.
// The editable span is always truly empty when the user hasn't typed; CSS shows the ghost
// placeholder text (non-selectable) over it. When user types, the span fills and the
// placeholder disappears. When user deletes everything, it reappears.
const Ed = React.forwardRef(({ id, defaultValue = "", placeholder = "", lg, xl, num, select, options, block, onValueChange }, ref) => {
  const [empty, setEmpty] = React.useState(true);
  const ph = placeholder || defaultValue;

  if (select) {
    const selCls = "ed-select" + (block ? " ed-select-block" : "");
    const initial = defaultValue || (options && options[0] && options[0].v) || "";
    const [val, setVal] = React.useState(initial);
    const selectedLabel = (options.find(o => o.v === val) || options[0] || {}).label || '';
    return (
      <>
        <select
          className={selCls}
          defaultValue={initial}
          onChange={(e) => { setVal(e.target.value); onValueChange && onValueChange(e.target.value); }}
          aria-label={ph}
        >
          {options.map(o => <option key={o.v} value={o.v}>{o.label}</option>)}
        </select>
        <span className="ed-select-print" aria-hidden="true">{selectedLabel}</span>
      </>
    );
  }

  const handleInput = (e) => {
    const v = e.currentTarget.textContent;
    setEmpty(v.length === 0);
    onValueChange && onValueChange(v);
  };

  const cls = [
    "ed",
    lg && "ed-lg",
    xl && "ed-xl",
    num && "ed-num",
    block && "ed-block",
    empty && "ed-empty",
  ].filter(Boolean).join(" ");

  return (
    <span
      ref={ref}
      className={cls}
      contentEditable
      suppressContentEditableWarning
      onInput={handleInput}
      data-placeholder={ph}
      role="textbox"
      aria-label={ph}
    />
  );
});

window.Ed = Ed;


// ---------- Top Header ----------
const DOCTYPES = [
  { id: 'navrh',       label: 'Návrh na rozvod — bezdetný', icon: 'R', title: 'NÁVRH NA ROZVOD MANŽELSTVA',                          ref: '§ 23 a nasl. zákona č. 36/2005 Z. z. o rodine' },
  { id: 'navrh-deti',  label: 'Návrh na rozvod — s deťmi',  icon: 'R', title: 'NÁVRH NA ROZVOD MANŽELSTVA S MALOLETÝMI DEŤMI',       ref: '§ 23 a § 26 zákona č. 36/2005 Z. z. o rodine' },
  { id: 'dohoda',      label: 'Dohoda rodičov o deťoch',   icon: 'D', title: 'DOHODA RODIČOV O VÝKONE RODIČOVSKÝCH PRÁV',           ref: '§ 24 zákona č. 36/2005 Z. z. o rodine' },
];

// Vymazať všetky vyplnené polia + vyčistiť localStorage + reload.
// localStorage kľúče sú doctype-aware (Persist + lokálne kľúče v každom variante
// PaperDeti/PaperDohoda). Po reloade sa komponenty znovu mountnú a načítajú
// default state z prázdneho storage. Reload je nutný — DOM/Ed cleanup nestačí,
// pretože radio voľby, sumy výživného a voliteľné body žijú v React useState
// inicializovanom z localStorage v useState initializer.
const clearAllFields = () => {
  if (!window.confirm('Naozaj chcete vymazať všetky údaje? Vymažú sa natrvalo.')) return;
  const dt = window.__INITIAL_DOCTYPE;
  const keys =
    dt === 'navrh-deti' ? [
      'ziadostorozvod.ed-deti.v1',
      'ziadostorozvod.cl3-deti.v1',
      'ziadostorozvod.cl4-deti.v1',
      'ziadostorozvod.kids-deti.v1',
      'ziadostorozvod.meta-deti.v1',
    ] : dt === 'dohoda' ? [
      'ziadostorozvod.ed-dohoda.v1',
      'ziadostorozvod.cl-dohoda.v1',
      'ziadostorozvod.kids-dohoda.v1',
      'ziadostorozvod.meta-dohoda.v1',
    ] : [
      'ziadostorozvod.ed.v1',
    ];
  try { keys.forEach(k => localStorage.removeItem(k)); } catch (e) {}
  // Full reload — zaistí, že useState(() => parseLocalStorage()) initializery
  // prečítajú prázdny storage a vrátia default (radio nevybratý, prázdne sumy
  // výživného, žiadne voliteľné body, prázdne deti).
  window.location.reload();
};
// Exponujeme globálne aby ho mohol volať aj `.paper-actions` button v Paper.jsx.
window.__clearFormFields = clearAllFields;

const GenHeader = ({ doctype, setDoctype, progress }) => (
  <header className="gen-header">
    <div className="gen-header-row">
      <a href={window.SITE_URL} className="brand">
        <div className="brand-mark">F</div>
        <div>
          <div className="brand-name">Ficek &amp; Partners</div>
          <div className="brand-sub">Advokátska kancelária</div>
        </div>
      </a>

      <div className="tabs" role="tablist" aria-label="Druh dokumentu">
        {DOCTYPES.map(t => (
          <button
            key={t.id}
            role="tab"
            aria-selected={doctype === t.id}
            className={doctype === t.id ? 'active' : ''}
            onClick={() => {
              if (t.id === doctype) return;
              // Cross-doctype prepnutie = full navigation. Každá HTML stránka
              // naloží len svoj Paper variant (Paper.jsx alebo PaperDeti.jsx),
              // takže pushState samotný by nestačil — komponenta by chýbala.
              const url = window.VZOR_URLS && window.VZOR_URLS[t.id];
              if (url) window.location.href = url;
              else setDoctype(t.id);
            }}
          >
            <span className="tab-icon">§</span> {t.label}
          </button>
        ))}
      </div>

      <div className="header-actions">
        <div className="progress-chip" title={`${progress}% vyplnené`}>
          <div className="progress-ring" style={{ '--p': progress }}></div>
          <span>{progress} % DOKONČENÉ</span>
        </div>
        <button className="btn btn-ghost btn-sm" onClick={() => window.print()}>↓ PDF</button>
        <button className="btn btn-ghost btn-sm" onClick={clearAllFields} title="Vymazať všetky vyplnené údaje">✕ Vymazať údaje</button>
        <a href={window.LEGAL_REVIEW_URL} target="_blank" rel="noopener noreferrer" className="btn btn-oxblood btn-sm">Právna kontrola</a>
      </div>
    </div>
  </header>
);

window.GenHeader = GenHeader;
window.DOCTYPES = DOCTYPES;