// ============================================================
// Generator — inline-editable car purchase contract
// Ficek & Partners · kza.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;
  const spanRef = React.useRef(null);

  if (select) {
    // Custom dropdown — button + popup div. Native <select> popup šírku
    // určuje browser podľa najdlhšej option a často pretečie mimo paper.
    // Custom popup má width: 100% wrappera, options sa korektne zalamujú.
    // Skrytý <select.ed-select-native> sa udržiava synchronizovaný kvôli
    // downloadAsDoc() ktorý číta selectedIndex z natívneho selectu.
    const initial = defaultValue || (options && options[0] && options[0].v) || "";
    const [val, setVal] = React.useState(initial);
    const [open, setOpen] = React.useState(false);
    const wrapRef = React.useRef(null);
    const selectedLabel = (options.find(o => o.v === val) || options[0] || {}).label || '';

    React.useEffect(() => {
      if (!open) return;
      const onClick = (e) => {
        if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
      };
      const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
      document.addEventListener('mousedown', onClick);
      document.addEventListener('keydown', onKey);
      return () => {
        document.removeEventListener('mousedown', onClick);
        document.removeEventListener('keydown', onKey);
      };
    }, [open]);

    const choose = (v) => {
      setVal(v);
      setOpen(false);
      onValueChange && onValueChange(v);
    };

    const wrapCls = "ed-select-wrap" + (block ? " ed-select-wrap-block" : "");
    const btnCls = "ed-select" + (block ? " ed-select-block" : "") + (open ? " open" : "");

    return (
      <span className={wrapCls} ref={wrapRef}>
        <button
          type="button"
          className={btnCls}
          onClick={() => setOpen(o => !o)}
          aria-haspopup="listbox"
          aria-expanded={open}
          aria-label={ph}
        >
          <span className="ed-select-text">{selectedLabel}</span>
        </button>
        {open && (
          <div className="ed-select-popup" role="listbox" aria-label={ph}>
            {options.map(o => (
              <div
                key={o.v}
                role="option"
                aria-selected={o.v === val}
                className={"ed-select-option" + (o.v === val ? ' selected' : '')}
                onClick={() => choose(o.v)}
              >
                {o.label}
              </div>
            ))}
          </div>
        )}
        <span className="ed-select-print" aria-hidden="true">{selectedLabel}</span>
        {/* Hidden native <select> — udržiavaný synchronizovaný kvôli
            downloadAsDoc(), ktorý číta selectedIndex priamo z DOM. */}
        <select
          className="ed-select-native"
          value={val}
          onChange={() => {}}
          aria-hidden="true"
          tabIndex={-1}
        >
          {options.map(o => <option key={o.v} value={o.v}>{o.label}</option>)}
        </select>
      </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={spanRef}
      className={cls}
      contentEditable
      suppressContentEditableWarning
      onInput={handleInput}
      data-placeholder={ph}
      role="textbox"
      aria-label={ph}
    />
  );
});

window.Ed = Ed;


// ---------- Top Header ----------
// Doctype = druh predávaného vozidla. Štruktúra zmluvy je rovnaká, líši sa len
// identifikácia (EVČ vs. samostatná pre prívesný vozík), výbava a typové defaulty.
const DOCTYPES = [
  { id: 'auto',     label: 'Auto',            icon: 'A', title: 'KÚPNA ZMLUVA O PREVODE MOTOROVÉHO VOZIDLA',   ref: '§ 588 a nasl. Občianskeho zákonníka' },
  { id: 'motorka',  label: 'Motocykel',       icon: 'M', title: 'KÚPNA ZMLUVA O PREVODE MOTOCYKLA',            ref: '§ 588 a nasl. Občianskeho zákonníka' },
  { id: 'dodavka',  label: 'Dodávka',         icon: 'D', title: 'KÚPNA ZMLUVA O PREVODE ÚŽITKOVÉHO VOZIDLA',   ref: '§ 588 a nasl. Občianskeho zákonníka' },
  { id: 'pripojne', label: 'Prívesný vozík',  icon: 'P', title: 'KÚPNA ZMLUVA O PREVODE PRÍVESNÉHO VOZÍKA',    ref: '§ 588 a nasl. Občianskeho zákonníka' },
];

// Vymazať všetky vyplnené .ed polia + resetovať select-y na prvú option + vyčistiť localStorage.
// Nad DOM-om — trigger `input`/`change` event aby React Ed komponenty zaznamenali zmenu.
const clearAllFields = () => {
  if (!window.confirm('Naozaj chcete vymazať všetky údaje? Táto akcia sa nedá vrátiť späť.')) return;
  const paper = document.querySelector('article.paper');
  if (!paper) return;
  paper.querySelectorAll('.ed[contenteditable]').forEach(el => {
    el.textContent = '';
    el.dispatchEvent(new Event('input', { bubbles: true }));
  });
  paper.querySelectorAll('select.ed-select').forEach(sel => {
    sel.selectedIndex = 0;
    sel.dispatchEvent(new Event('change', { bubbles: true }));
  });
  try { localStorage.removeItem('kza.ed.v1'); } catch (e) {}
};
// 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 kúpnej zmluvy">
        {DOCTYPES.map(t => {
          const href = (window.VZOR_URLS && window.VZOR_URLS[t.id]) || '#';
          const isActive = doctype === t.id;
          return (
            <a
              key={t.id}
              role="tab"
              aria-selected={isActive}
              aria-current={isActive ? 'page' : undefined}
              className={isActive ? 'active' : ''}
              href={href}
            >
              <span className="tab-icon" aria-hidden="true">§</span> <span className="tab-label">{t.label}</span>
            </a>
          );
        })}
      </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 btn-action" onClick={() => window.print()} title="Stiahnuť PDF" aria-label="Stiahnuť PDF">
          <span className="btn-icon" aria-hidden="true">↓</span><span className="btn-label">PDF</span>
        </button>
        <button className="btn btn-ghost btn-sm btn-action" onClick={clearAllFields} title="Vymazať všetky vyplnené údaje" aria-label="Vymazať všetky vyplnené údaje">
          <span className="btn-icon" aria-hidden="true">✕</span><span className="btn-label">Vymazať údaje</span>
        </button>
        <a href={window.LEGAL_REVIEW_URL} target="_blank" rel="noopener noreferrer" className="btn btn-oxblood btn-sm btn-action btn-cta" title="Právna kontrola advokátom" aria-label="Právna kontrola advokátom">
          <span className="btn-label">Právna kontrola</span>
          <span className="btn-label-short" aria-hidden="true">Kontrola</span>
        </a>
      </div>
    </div>
  </header>
);

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