// pelnomocnictwo.jsx — przeglądarka pojedynczego pełnomocnictwa
// URL: pelnomocnictwo.html?id=05
// Eksportuje window.PelnomocnictwoViewer

const PV_DATA = [
  { id:'01', nazwa:'Allianz Polska S.A.',                                  folder:'01_ALLIANZ_POLSKA_SA',                           prefix:'ALLIANZ-POLSKA-SA',                    strony:2  },
  { id:'02', nazwa:'Allianz Życie Polska SA',                              folder:'02_ALLIANZ_ZYCIE_POLSKA_SA',                      prefix:'ALLIANZ-ZYCIE-POLSKA-SA',              strony:4  },
  { id:'03', nazwa:'Balcia Insurance SE, Reso Europa Service Sp. z o.o.', folder:'03_BALCIA_INSURANCE_SE_RESO_EUROPA',              prefix:'BALCIA-INSURANCE-SE-RESO-EUROPA',      strony:2  },
  { id:'04', nazwa:'Compensa TU S.A.',                                     folder:'04_COMPENSA_TU_SA',                               prefix:'COMPENSA-TU-SA',                       strony:4  },
  { id:'05', nazwa:'Ergo Hestia',                                          folder:'05_ERGO_HESTIA',                                  prefix:'ERGO-HESTIA',                          strony:5  },
  { id:'06', nazwa:'Ergo Hestia Życie',                                    folder:'06_ERGO_HESTIA_ZYCIE',                           prefix:'ERGO-HESTIA-ZYCIE',                    strony:7  },
  { id:'07', nazwa:'Generali TU SA / Proama',                              folder:'07_GENERALI_TU_SA_PROAMA',                       prefix:'GENERALI-TU-SA-PROAMA',                strony:6  },
  { id:'08', nazwa:'Generali Życie',                                       folder:null,                                              prefix:null,                                   strony:0  },
  { id:'09', nazwa:'Inter Polska SA',                                      folder:'09_INTER_POLSKA_SA',                              prefix:'INTER-POLSKA-SA',                      strony:2  },
  { id:'10', nazwa:'InterRisk TU SA VIG',                                  folder:'10_INTERRISK_TU_SA_VIG',                         prefix:'INTERRISK-TU-SA-VIG',                  strony:1  },
  { id:'11', nazwa:'Inter Życie Polska SA',                                folder:'11_INTER_ZYCIE_POLSKA_SA',                       prefix:'INTER-ZYCIE-POLSKA-SA',                strony:2  },
  { id:'12', nazwa:'Link4',                                                folder:'12_LINK4',                                        prefix:'LINK4',                                strony:6  },
  { id:'13', nazwa:'Lloyds',                                               folder:'13_LLOYDS',                                       prefix:'LLOYDS',                               strony:1  },
  { id:'14', nazwa:'Nationale-Nederlanden TU na Życie SA',                 folder:'14_NATIONALE_NEDERLANDEN_TU_NA_ZYCIE_SA',        prefix:'NATIONALE-NEDERLANDEN-TU-NA-ZYCIE-SA', strony:1  },
  { id:'15', nazwa:'PZU S.A.',                                             folder:'15_PZU_SA',                                       prefix:'PZU-SA',                               strony:7  },
  { id:'16', nazwa:'PZU Życie S.A.',                                       folder:'16_PZU_ZYCIE_SA',                                prefix:'PZU-ZYCIE-SA',                         strony:4  },
  { id:'17', nazwa:'Saltus',                                               folder:'17_SALTUS',                                       prefix:'SALTUS',                               strony:2  },
  { id:'18', nazwa:'Saltus Życie',                                         folder:'18_SALTUS_ZYCIE',                                prefix:'SALTUS-ZYCIE',                         strony:4  },
  { id:'19', nazwa:'Warta',                                                folder:'19_WARTA',                                        prefix:'WARTA',                                strony:1  },
  { id:'20', nazwa:'Warta Życie',                                          folder:'20_WARTA_ZYCIE',                                 prefix:'WARTA-ZYCIE',                          strony:2  },
  { id:'21', nazwa:'Trasti',                                               folder:'21_TRASTI',                                       prefix:'TRASTI',                               strony:2  },
  { id:'22', nazwa:'TUZ Ubezpieczenia',                                    folder:'22_TUZ_UBEZPIECZENIA',                           prefix:'TUZ-UBEZPIECZENIA',                    strony:9  },
  { id:'23', nazwa:'Uniqa TU SA',                                          folder:'23_UNIQA_TU_SA',                                 prefix:'UNIQA-TU-SA',                          strony:12 },
  { id:'24', nazwa:'Uniqa TU na Życie S.A.',                               folder:'24_UNIQA_TU_NA_ZYCIE_SA',                       prefix:'UNIQA-TU-NA-ZYCIE-SA',                 strony:1  },
  { id:'25', nazwa:'Unum Życie TUiR S.A. (Pramerica Życie TUiR S.A.)',    folder:'25_UNUM_ZYCIE_TUiR_SA_PRAMERICA',               prefix:'UNUM-ZYCIE-TUiR-SA-PRAMERICA',         strony:2  },
  { id:'26', nazwa:'Vienna Life',                                          folder:'26_VIENNA_LIFE',                                 prefix:'VIENNA-LIFE',                          strony:2  },
];

const PV_STYLES = `
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #15181f; }
.pv { min-height: 100vh; background: #15181f; color: #fff; font-family: 'Inter', system-ui, sans-serif; display: flex; flex-direction: column; }

/* TOP BAR */
.pv-bar { background: #1e2330; border-bottom: 1px solid rgba(255,255,255,.08); padding: 0 24px; height: 56px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.pv-bar-left { display: flex; align-items: center; gap: 20px; }
.pv-bar-logo { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-size: 17px; font-weight: 700; letter-spacing: .08em; color: #fff; text-decoration: none; }
.pv-bar-sep { width: 1px; height: 18px; background: rgba(255,255,255,.15); }
.pv-bar-title { font-size: 13px; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 380px; }
.pv-bar-back { font-size: 12px; color: rgba(255,255,255,.45); text-decoration: none; letter-spacing: .04em; display: flex; align-items: center; gap: 6px; transition: color .15s; }
.pv-bar-back:hover { color: rgba(255,255,255,.8); }

/* VIEWER */
.pv-viewer { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 32px 24px 48px; gap: 20px; }
.pv-img-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 900px; }
.pv-img { max-width: 100%; max-height: calc(100vh - 180px); object-fit: contain; display: block; border-radius: 3px; box-shadow: 0 4px 32px rgba(0,0,0,.5); }
.pv-nav { display: flex; align-items: center; gap: 16px; }
.pv-btn { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); color: #fff; width: 44px; height: 44px; border-radius: 99px; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; line-height: 1; flex-shrink: 0; }
.pv-btn:hover:not(:disabled) { background: rgba(255,255,255,.2); }
.pv-btn:disabled { opacity: .2; cursor: default; }
.pv-counter { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-size: 15px; font-weight: 500; letter-spacing: .1em; color: rgba(255,255,255,.5); min-width: 60px; text-align: center; }
.pv-name { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.35); text-align: center; }

/* ERROR */
.pv-error { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 64px 24px; text-align: center; }
.pv-error .e-title { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-size: 28px; font-weight: 500; color: rgba(255,255,255,.7); }
.pv-error .e-sub { font-size: 14px; color: rgba(255,255,255,.35); line-height: 1.6; }
.pv-error .e-phone { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-size: 20px; font-weight: 600; color: #c98a3f; margin-top: 8px; }

/* RESPONSIVE */
@media (max-width: 600px) {
  .pv-bar-title { display: none; }
  .pv-img { max-height: calc(100vh - 160px); }
  .pv-bar { padding: 0 16px; }
  .pv-viewer { padding: 20px 12px 40px; }
}
`;

function PelnomocnictwoViewer() {
  const id = new URLSearchParams(window.location.search).get('id');
  const item = PV_DATA.find(d => d.id === id);

  const [page, setPage] = React.useState(0);

  React.useEffect(() => {
    if (item) {
      document.title = `${item.nazwa} — Pełnomocnictwo GOMAR Witwicka`;
    }
    const onKey = (e) => {
      if (!item || item.strony === 0) return;
      if (e.key === 'ArrowRight') setPage(p => Math.min(p + 1, item.strony - 1));
      if (e.key === 'ArrowLeft')  setPage(p => Math.max(p - 1, 0));
    };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [item]);

  const src = item && item.strony > 0
    ? `/assets/pelnomocnictwa/${item.folder}/${item.prefix}_strona_${page + 1}.jpg`
    : null;

  return (
    <div className="pv">
      <style dangerouslySetInnerHTML={{ __html: PV_STYLES }} />

      <div className="pv-bar">
        <div className="pv-bar-left">
          <a className="pv-bar-logo" href="/">GOMAR</a>
          <div className="pv-bar-sep" />
          <span className="pv-bar-title">
            {item ? item.nazwa : 'Pełnomocnictwo'}
          </span>
        </div>
        <a className="pv-bar-back" href="/pelnomocnictwa/">← Wróć do listy</a>
      </div>

      {src ? (
        <div className="pv-viewer">
          <img className="pv-img" src={src} alt={`${item.nazwa} — strona ${page + 1}`} />
          {item.strony > 1 && (
            <div className="pv-nav">
              <button className="pv-btn" onClick={() => setPage(p => p - 1)} disabled={page === 0} aria-label="Poprzednia strona">‹</button>
              <span className="pv-counter">Strona {page + 1} z {item.strony}</span>
              <button className="pv-btn" onClick={() => setPage(p => p + 1)} disabled={page === item.strony - 1} aria-label="Następna strona">›</button>
            </div>
          )}
          <div className="pv-name">{item.nazwa}</div>
        </div>
      ) : (
        <div className="pv-error">
          <div className="e-title">Dokument niedostępny</div>
          <div className="e-sub">
            {item
              ? `Pełnomocnictwo ${item.nazwa} nie zostało jeszcze dodane.`
              : 'Nie znaleziono dokumentu o podanym identyfikatorze.'}
            <br />Skontaktuj się z biurem.
          </div>
          <div className="e-phone">501 43 44 40</div>
        </div>
      )}
    </div>
  );
}

window.PelnomocnictwoViewer = PelnomocnictwoViewer;