<!DOCTYPE html>
<html lang="nb">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Skriv ut prøvelapp</title>
<style>
  :root {
    --rosa-header: #eec1d8;
    --rosa-mellom: #c278a6;
    --rosa-mork: #7b3055;
    --rosa-dyp: #4b0d2e;
    --rosa-bg: #fdf6f9;
    --rosa-lys: #f8edf3;
    --tekst: #2d2024;
    --tekst-myk: #6b5a60;
    --linje: #f3c7dc;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    background: #e8e4e0;
    padding: 20px;
    color: var(--tekst);
  }

  /* ============================================
     KNAPPERAD (kun for skjerm)
     ============================================ */
  .kontroll {
    max-width: 400px;
    margin: 0 auto 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
  }
  .kontroll button {
    background: #eec1d8;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 999px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    transition: 0.2s;
    box-shadow: 0 4px 12px rgba(185, 105, 150, 0.15);
  }
  .kontroll button:hover {
    background: #d6a3bd;
  }
  .kontroll button:active {
    transform: scale(0.97);
  }
  .kontroll .tilbake {
    background: white;
    color: #7b3055;
    border: 1.5px solid #f3c7dc;
    box-shadow: none;
  }
  .kontroll .tilbake:hover {
    background: #fdf6f9;
    border-color: #c97ba2;
  }

  .laster {
    text-align: center;
    color: var(--tekst-myk);
    padding: 40px;
    font-style: italic;
  }

  .tips {
    max-width: 500px;
    margin: 0 auto 20px;
    padding: 14px 20px;
    background: #fdf6f9;
    border-radius: 12px;
    border-left: 3px solid #c278a6;
    font-size: 13px;
    color: #2d2024;
    line-height: 1.6;
    text-align: center;
  }
  .tips strong {
    color: #7b3055;
    display: block;
    margin-bottom: 10px;
  }
  .apne-safari-btn {
    background: #eec1d8 !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    box-shadow: 0 4px 12px rgba(185, 105, 150, 0.15) !important;
  }
  .apne-safari-btn:hover {
    background: #d6a3bd !important;
  }

  @media print {
    .tips { display: none !important; }
  }

  /* ============================================
     SELVE A4-ETIKETTEN
     ============================================ */
  .etikett {
    width: 210mm;
    height: 297mm;
    background: white;
    margin: 0 auto;
    padding: 50px 60px 60px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    position: relative;
    overflow: hidden;
  }

  /* Rosa linje øverst */
  .etikett::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: #eec1d8;
  }

  /* Diskret garnnøste-aksent i hjørnet */
  .etikett-hjornet {
    position: absolute;
    top: 40px;
    right: 50px;
    font-size: 48px;
    opacity: 0.18;
  }

  .etikett h2 {
    color: var(--rosa-dyp);
    font-family: Georgia, serif;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 10px;
    padding-right: 30px;
  }

  .etikett-undertittel {
    color: var(--tekst-myk);
    font-size: 16px;
    font-style: italic;
    margin-bottom: 24px;
  }

  /* Strikkefasthet */
  .fasthet-topp {
    margin: 0 0 30px;
    padding: 22px 28px;
    background: var(--rosa-lys);
    border-radius: 22px;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 16px;
  }
  .fasthet-topp .tall {
    font-size: 32px;
    color: var(--rosa-mork);
    font-weight: 700;
  }
  .fasthet-topp .label {
    font-size: 13px;
    color: var(--rosa-mork);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
  }

  /* Info-grid */
  .info {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 18px 24px;
    font-size: 18px;
    line-height: 1.5;
  }
  .info .label {
    color: var(--rosa-mork);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 13px;
    align-self: center;
  }
  .info .verdi {
    color: var(--tekst);
    font-weight: 500;
  }

  .farge-prikk {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
    border: 1px solid var(--linje);
  }

  /* Bunntekst — fast plassert nederst */
  .footer {
    position: absolute;
    bottom: 50px;
    left: 60px;
    right: 60px;
    text-align: center;
    font-size: 13px;
    color: var(--tekst-myk);
    letter-spacing: 0.5px;
  }
  .footer::before {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background: var(--rosa-header);
    margin: 0 auto 10px;
  }
  .footer strong {
    color: var(--rosa-mork);
    font-weight: 700;
  }

  /* Feilmelding */
  .feil {
    max-width: 400px;
    margin: 40px auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    color: #c00;
    font-size: 14px;
  }

  /* ============================================
     SKJERM-VISNING: skaler ned A4 så det passer
     ============================================ */
  @media screen {
    body {
      overflow-x: hidden;
    }
    #content {
      display: flex;
      justify-content: center;
      width: 100%;
    }
    .etikett {
      transform: scale(0.4);
      transform-origin: top center;
      margin-left: -126mm;
      margin-right: -126mm;
      margin-bottom: -178mm;
    }
  }

  @media screen and (min-width: 700px) {
    .etikett {
      transform: scale(0.55);
      margin-left: -94mm;
      margin-right: -94mm;
      margin-bottom: -134mm;
    }
  }

  @media screen and (min-width: 1100px) {
    .etikett {
      transform: scale(0.75);
      margin-left: -52mm;
      margin-right: -52mm;
      margin-bottom: -75mm;
    }
  }

  /* ============================================
     UTSKRIFT — full A4-størrelse, ingen skalering
     ============================================ */
  @media print {
    body {
      background: white;
      padding: 0;
      margin: 0;
    }
    .kontroll, .laster {
      display: none !important;
    }
    .etikett {
      transform: none !important;
      margin: 0 !important;
      box-shadow: none !important;
      width: 210mm !important;
      height: 297mm !important;
      page-break-after: avoid;
      page-break-inside: avoid;
    }
    /* Tving fram bakgrunnsfarger (rosa linje, rosa fasthet-boks) */
    * {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
      color-adjust: exact !important;
    }
    @page {
      size: A4 portrait;
      margin: 0;
    }
  }
</style>
</head>
<body>

<div class="kontroll">
  <button onclick="window.print()">Skriv ut</button>
  <button class="tilbake" onclick="window.close()">Lukk</button>
</div>

<div id="content">
  <div class="laster">Laster prøvelapp...</div>
</div>

<script>
// ============================================
// FLERSPRÅKLIG (kopi fra hovedappen)
// ============================================
const translations = {
  nb: {
    swatch: 'Prøvelapp',
    machine: 'Maskin',
    tension: 'Spenning',
    pattern: 'Mønster',
    technique: 'Teknikk',
    content: 'Innhold',
    color: 'Farge',
    date: 'Dato',
    gauge: 'Strikkefasthet',
    per_10cm: 'per 10 cm',
    masker: 'M',
    rekker: 'R',
    error_loading: 'Kunne ikke laste prøvelappen'
  },
  en: {
    swatch: 'Swatch',
    machine: 'Machine',
    tension: 'Tension',
    pattern: 'Pattern',
    technique: 'Technique',
    content: 'Content',
    color: 'Color',
    date: 'Date',
    gauge: 'Gauge',
    per_10cm: 'per 10 cm',
    masker: 'St',
    rekker: 'R',
    error_loading: 'Could not load swatch'
  }
};
// Sjekk om vi er i PWA-modus (lagt til hjem-skjermen)
const erPWA = window.navigator.standalone === true ||
              window.matchMedia('(display-mode: standalone)').matches;
if (erPWA) {
  const knapp = document.getElementById('pwa-knapp');
  if (knapp) knapp.style.display = 'block';
}

// Åpne nåværende side i Safari (ikke PWA-modus)
function apneISafari() {
  // Bygg en URL som åpner i Safari uten PWA-modus
  const safariUrl = window.location.href;

  // På iOS: Bruk x-safari-https:// protokollen
  // Dette tvinger åpning i Safari selv fra PWA
  const iosSafariUrl = safariUrl
    .replace('https://', 'x-safari-https://')
    .replace('http://', 'x-safari-http://');

  // Prøv først x-safari, fall tilbake til vanlig hvis det ikke fungerer
  window.location.href = iosSafariUrl;

  // Backup etter 500ms hvis x-safari ikke fungerte
  setTimeout(() => {
    window.open(safariUrl, '_blank');
  }, 500);
}
const currentLanguage = localStorage.getItem('pa_language') || 'nb';
let currentUserName = localStorage.getItem('pa_username') || '';
const token = localStorage.getItem('pa_token') || '';

// Hent navnet fra serveren hvis vi ikke har det lagret
async function hentBrukernavn() {
  if (currentUserName) return;
  try {
    const res = await fetch('/proveapp/api/auth.php?action=testlogin', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: 'test@proveapp.no' })
    });
    const data = await res.json();
    if (data.navn) {
      currentUserName = data.navn;
      localStorage.setItem('pa_username', currentUserName);
    }
  } catch (e) {
    // Ignorer feil
  }
}

function t(key) {
  const lang = translations[currentLanguage] ? currentLanguage : 'nb';
  return translations[lang][key] || translations['nb'][key] || key;
}

// ============================================
// HENT PRØVELAPP-ID FRA URL
// ============================================
const params = new URLSearchParams(window.location.search);
const swatchId = params.get('id');

if (!swatchId) {
  document.getElementById('content').innerHTML =
    '<div class="feil">Mangler prøvelapp-ID i URL</div>';
} else {
  hentBrukernavn().then(() => loadSwatch(swatchId));
}

// ============================================
// HENT DATA FRA SERVEREN OG VIS ETIKETTEN
// ============================================
async function loadSwatch(id) {
  try {
    const res = await fetch('/proveapp/api/swatches.php', {
      headers: { 'Authorization': 'Bearer ' + token }
    });
    const swatches = await res.json();
    const s = swatches.find(x => x.id == id);

    if (!s) {
      document.getElementById('content').innerHTML =
        '<div class="feil">' + t('error_loading') + '</div>';
      return;
    }

    renderEtikett(s);
  } catch (e) {
    document.getElementById('content').innerHTML =
      '<div class="feil">' + t('error_loading') + '<br><small>' + e.message + '</small></div>';
  }
}

// ============================================
// BYGG ETIKETTEN
// ============================================
function renderEtikett(s) {
  const masker = s.calc_masker && s.calc_masker_cm
    ? Math.round((parseFloat(s.calc_masker) / parseFloat(s.calc_masker_cm)) * 10)
    : null;
  const rekker = s.calc_rekker && s.calc_rekker_cm
    ? Math.round((parseFloat(s.calc_rekker) / parseFloat(s.calc_rekker_cm)) * 10)
    : null;
  const harFasthet = masker && rekker;

  let html = '<div class="etikett">';
  html += '<div class="etikett-hjornet">🧶</div>';

  html += '<h2>' + (s.monster || s.garn || t('swatch')) + '</h2>';

  let undertittel = '';
  if (s.garn) undertittel += s.garn;
  if (s.garn_merke) undertittel += (undertittel ? ', ' : '') + s.garn_merke;
  if (undertittel) {
    html += '<div class="etikett-undertittel">' + undertittel + '</div>';
  }

  if (harFasthet) {
    html += '<div class="fasthet-topp">';
    html += '<span class="tall">' + masker + ' ' + t('masker') + ' × ' + rekker + ' ' + t('rekker') + '</span>';
    html += '<span class="label">/ 10 cm</span>';
    html += '</div>';
  }

  html += '<div class="info">';
  if (s.maskintype) html += rad(t('machine'), s.maskintype);
  if (s.spenning) html += rad(t('tension'), s.spenning);
  if (s.monster && s.monster !== (s.garn || '')) html += rad(t('pattern'), s.monster);
  if (s.teknikk) html += rad(t('technique'), s.teknikk);
  if (s.innhold) html += rad(t('content'), s.innhold);

  if (s.farge || s.fargekode) {
    let fargeHtml = '';
    if (s.hex_farge) fargeHtml += '<span class="farge-prikk" style="background:' + s.hex_farge + '"></span>';
    if (s.farge) fargeHtml += s.farge;
    if (s.fargekode) fargeHtml += (s.farge ? ' (' : '') + s.fargekode + (s.farge ? ')' : '');
    html += radHtml(t('color'), fargeHtml);
  }

  if (s.created_at) {
    const d = new Date(s.created_at);
    const dateStr = d.toLocaleDateString(currentLanguage === 'nb' ? 'nb-NO' : 'en-US',
      { day: 'numeric', month: 'long', year: 'numeric' });
    html += rad(t('date'), dateStr);
  }

  html += '</div>';

  html += '<div class="footer"><strong>' + currentUserName + '</strong></div>';

  html += '</div>';

  document.getElementById('content').innerHTML = html;
}

function rad(label, verdi) {
  if (!verdi) return '';
  return '<div class="label">' + label + '</div><div class="verdi">' + escapeHtml(verdi) + '</div>';
}

function radHtml(label, htmlVerdi) {
  if (!htmlVerdi) return '';
  return '<div class="label">' + label + '</div><div class="verdi">' + htmlVerdi + '</div>';
}

function escapeHtml(str) {
  if (!str) return '';
  return String(str)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');
}
</script>

</body>
</html>
