// ============================================================
// FRAGTA — Demo instance layer
//   • per-customer branding config (localStorage)
//   • persistent request status store (demo "sticks")
//   • Demo Studio screen (Fragta-konsulent side)
// ============================================================

// ---- CONFIG STORE ----------------------------------------------------------
const DEMO_KEY = 'fragta-demo-config-v1';
const DEMO_DEFAULTS = {
  workspace: 'Nordpil Spedition',
  logo: null,            // data-URL of customer logo
  accent: '#00FF94',
  tagline: 'Svar på forespørgslen før kaffen er kold.',
  industry: 'Spedition & fragtformidling',
  contactName: 'Jonas Holt',
  contactUser: 'jho',
  region: 'Norden & Centraleuropa',
};
function loadDemo() {
  try { return { ...DEMO_DEFAULTS, ...(JSON.parse(localStorage.getItem(DEMO_KEY)) || {}) }; }
  catch (e) { return { ...DEMO_DEFAULTS }; }
}
let _demo = loadDemo();
const _demoSubs = new Set();
function getDemo() { return _demo; }
function setDemo(patch) {
  _demo = { ..._demo, ...patch };
  try { localStorage.setItem(DEMO_KEY, JSON.stringify(_demo)); } catch (e) {}
  _demoSubs.forEach(f => f(_demo));
}
function resetDemoConfig() { setDemo({ ...DEMO_DEFAULTS }); }
function useDemo() {
  const [, force] = useState(0);
  useEffect(() => { const f = () => force(x => x + 1); _demoSubs.add(f); return () => _demoSubs.delete(f); }, []);
  return _demo;
}

// ---- REQUEST STATUS STORE (persistent demo actions) ------------------------
const REQ_KEY = 'fragta-demo-reqstatus-v1';
function loadReqStore() { try { return JSON.parse(localStorage.getItem(REQ_KEY)) || {}; } catch (e) { return {}; } }
let _reqStore = loadReqStore();
const _reqSubs = new Set();
function setRequestStatus(id, status) {
  _reqStore = { ..._reqStore, [id]: status };
  try { localStorage.setItem(REQ_KEY, JSON.stringify(_reqStore)); } catch (e) {}
  _reqSubs.forEach(f => f(_reqStore));
}
function getRequestStatus(id, fallback) { return _reqStore[id] || fallback; }
function findRequest(id) { return [..._newReqs, ...REQUESTS].find(r => r.id === id); }
function resetRequestStore() {
  _reqStore = {};
  try { localStorage.removeItem(REQ_KEY); } catch (e) {}
  _newReqs = [];
  try { localStorage.removeItem(NEWREQ_KEY); } catch (e) {}
  _reqSubs.forEach(f => f(_reqStore));
}
// ---- CUSTOM (manually created) REQUESTS ------------------------------------
const NEWREQ_KEY = 'fragta-demo-newreqs-v1';
function loadNewReqs() { try { return JSON.parse(localStorage.getItem(NEWREQ_KEY)) || []; } catch (e) { return []; } }
let _newReqs = loadNewReqs();
function addRequest(req) {
  _newReqs = [req, ..._newReqs];
  try { localStorage.setItem(NEWREQ_KEY, JSON.stringify(_newReqs)); } catch (e) {}
  _reqSubs.forEach(f => f(_reqStore));
}
function getNewReqs() { return _newReqs; }
function resetNewReqs() {
  _newReqs = [];
  try { localStorage.removeItem(NEWREQ_KEY); } catch (e) {}
  _reqSubs.forEach(f => f(_reqStore));
}

// returns REQUESTS (+ manually created) with persisted status overrides applied
function useLiveRequests() {
  const [, force] = useState(0);
  useEffect(() => { const f = () => force(x => x + 1); _reqSubs.add(f); return () => _reqSubs.delete(f); }, []);
  return [..._newReqs, ...REQUESTS].map(r => ({ ...r, status: _reqStore[r.id] || r.status }));
}

// ---- PROSPECT STORE (godkendte/afviste prospects forsvinder & badges falder) -
const PROSPECT_KEY = 'fragta-demo-prospects-v1';
function loadProspectStore() { try { return JSON.parse(localStorage.getItem(PROSPECT_KEY)) || {}; } catch (e) { return {}; } }
let _prospectStore = loadProspectStore(); // { [mail]: 'approved' | 'dismissed' }
const _prospectSubs = new Set();
function prospectKey(p) { return p.mail || p.nm; }
function setProspectState(p, state) {
  _prospectStore = { ..._prospectStore, [prospectKey(p)]: state };
  try { localStorage.setItem(PROSPECT_KEY, JSON.stringify(_prospectStore)); } catch (e) {}
  _prospectSubs.forEach(f => f(_prospectStore));
}
function resetProspectStore() {
  _prospectStore = {};
  try { localStorage.removeItem(PROSPECT_KEY); } catch (e) {}
  _prospectSubs.forEach(f => f(_prospectStore));
}
// returns only prospects that haven't been approved/dismissed yet
function useLiveProspects() {
  const [, force] = useState(0);
  useEffect(() => { const f = () => force(x => x + 1); _prospectSubs.add(f); return () => _prospectSubs.delete(f); }, []);
  const src = (typeof PROSPECTS !== 'undefined' && PROSPECTS) ? PROSPECTS : [];
  return src.filter(p => !_prospectStore[prospectKey(p)]);
}

// ---- LOGO mark: customer logo if set, else Fragta diamond ------------------
function WorkmarkLogo({ size = 26 }) {
  const d = useDemo();
  if (d.logo) return <img className="cust-logo" src={d.logo} alt={d.workspace} style={{ height: size }} />;
  return <BrandMark />;
}

// ---- DEMO STUDIO (Fragta-konsulent) ----------------------------------------
const INDUSTRY_PRESETS = [
  'Spedition & fragtformidling',
  'Vognmand & distribution',
  'Køl & frigo-transport',
  'Projekt- & tungtransport',
  'Luftfragt & oversøisk',
];
const ACCENT_PRESETS = ['#00FF94', '#2D5BFF', '#F8DE7F', '#FF7847', '#B8FF35', '#A78BFA'];

function DemoStudio() {
  const d = useDemo();
  const [saved, setSaved] = useState(false);
  const fileRef = useRef(null);
  const flash = () => { setSaved(true); clearTimeout(window.__demoFlash); window.__demoFlash = setTimeout(() => setSaved(false), 1600); };

  const onLogo = (e) => {
    const f = e.target.files && e.target.files[0];
    if (!f) return;
    if (!/^image\//.test(f.type)) { window.alert('Vælg en billedfil (PNG, JPG eller SVG).'); return; }
    const rd = new FileReader();
    rd.onload = () => {
      const raw = rd.result;
      const img = new Image();
      img.onload = () => {
        try {
          const maxW = 360;
          const scale = Math.min(1, maxW / img.width);
          const cw = Math.max(1, Math.round(img.width * scale));
          const ch = Math.max(1, Math.round(img.height * scale));
          const cv = document.createElement('canvas'); cv.width = cw; cv.height = ch;
          cv.getContext('2d').drawImage(img, 0, 0, cw, ch);
          setDemo({ logo: cv.toDataURL('image/png') });
        } catch (err) { setDemo({ logo: raw }); }
        flash();
      };
      img.onerror = () => { setDemo({ logo: raw }); flash(); }; // e.g. SVG — store raw
      img.src = raw;
    };
    rd.readAsDataURL(f);
  };

  const resetAll = () => {
    if (!window.confirm('Nulstil hele demo-instansen? Branding og alle handlinger (sendte/afsluttede forespørgsler) sættes tilbage.')) return;
    resetDemoConfig();
    resetRequestStore();
    resetProspectStore();
    flash();
  };

  return (
    <div className="page reveal">
      <div className="wrap">
        <div className="page-head">
          <div className="lead-h">
            <span className="eyebrow eyebrow-fragta"><BrandMark /> Fragta-konsulent · intern</span>
            <h1 className="page-title">Demo-opsætning</h1>
            <p className="page-sub">Gør instansen kundespecifik før en demo: skift arbejdsområdets navn, læg kundens logo ind, og match accentfarven. Ændringer slår igennem med det samme i hele appen og gemmes lokalt.</p>
          </div>
          <div className="head-actions">
            <span className={'save-pill' + (saved ? ' show' : '')}><Icon n="check" /> Gemt</span>
            <button className="btn btn-quiet btn-sm" onClick={resetAll}><Icon n="refresh" /> Nulstil demo</button>
          </div>
        </div>

        <div className="studio-grid">
          {/* config column */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--gap)' }}>
            <div className="panel">
              <div className="panel-head"><h3>Kunde-branding</h3></div>
              <div className="studio-body">
                <div className="field">
                  <label>Arbejdsområde / kundenavn</label>
                  <input value={d.workspace} onChange={e => { setDemo({ workspace: e.target.value }); }} onBlur={flash} placeholder="f.eks. Nordic Freight A/S" />
                  <span className="hint">Vises i topbaren, på login og i admin.</span>
                </div>

                <div className="field">
                  <label>Kundens logo</label>
                  <div className="logo-upload">
                    <div className="logo-preview">
                      {d.logo ? <img src={d.logo} alt="logo" onError={() => setDemo({ logo: null })} /> : <span className="lp-empty"><Icon n="building" /></span>}
                    </div>
                    <div className="logo-actions">
                      <input ref={fileRef} type="file" accept="image/*" hidden onChange={onLogo} />
                      <button className="btn btn-ghost btn-sm" onClick={() => fileRef.current && fileRef.current.click()}><Icon n="upload" /> Upload logo</button>
                      {d.logo && <button className="btn btn-quiet btn-sm" onClick={() => { setDemo({ logo: null }); flash(); }}><Icon n="x" /> Fjern</button>}
                      <span className="hint">PNG/SVG med transparent baggrund virker bedst.</span>
                    </div>
                  </div>
                </div>

                <div className="field">
                  <label>Accentfarve</label>
                  <div className="swatches">
                    {ACCENT_PRESETS.map(c => (
                      <button key={c} className={'swatch' + (d.accent === c ? ' on' : '')} style={{ background: c }} onClick={() => { setDemo({ accent: c }); flash(); }} aria-label={c}>
                        {d.accent === c && <Icon n="check" />}
                      </button>
                    ))}
                    <label className="swatch custom" style={{ background: d.accent }}>
                      <input type="color" value={d.accent} onChange={e => setDemo({ accent: e.target.value })} onBlur={flash} />
                    </label>
                  </div>
                </div>

                <div className="grid-2">
                  <div className="field">
                    <label>Branche</label>
                    <select value={d.industry} onChange={e => { setDemo({ industry: e.target.value }); flash(); }}>
                      {INDUSTRY_PRESETS.map(p => <option key={p}>{p}</option>)}
                    </select>
                  </div>
                  <div className="field">
                    <label>Primær region</label>
                    <input value={d.region} onChange={e => setDemo({ region: e.target.value })} onBlur={flash} placeholder="f.eks. Norden" />
                  </div>
                </div>

                <div className="field">
                  <label>Login-tagline</label>
                  <input value={d.tagline} onChange={e => setDemo({ tagline: e.target.value })} onBlur={flash} placeholder="Kort slogan på login-skærmen" />
                </div>

                <div className="grid-2">
                  <div className="field">
                    <label>Demo-bruger (navn)</label>
                    <input value={d.contactName} onChange={e => setDemo({ contactName: e.target.value })} onBlur={flash} />
                  </div>
                  <div className="field">
                    <label>Brugernavn</label>
                    <input value={d.contactUser} onChange={e => setDemo({ contactUser: e.target.value })} onBlur={flash} />
                  </div>
                </div>
              </div>
            </div>

            <div className="panel">
              <div className="panel-head"><h3>Demo-data</h3></div>
              <div className="studio-body">
                <p style={{ color: 'var(--ink-dim)', fontSize: 13.5, margin: '0 0 14px', lineHeight: 1.55 }}>
                  Handlinger i demoen (godkend &amp; send, vælg tilbud, godkend prospect) gemmes lokalt, så instansen ser levende ud mellem sessioner. Nulstil for at starte en frisk demo.
                </p>
                <button className="btn btn-ghost btn-sm" onClick={() => { resetRequestStore(); flash(); }}><Icon n="refresh" /> Nulstil forespørgsels-status</button>
              </div>
            </div>
          </div>

          {/* live preview column */}
          <div className="panel preview-panel">
            <div className="panel-head"><h3>Forhåndsvisning</h3><span className="oc-cap">Live</span></div>
            <div className="studio-body">
              <span className="prev-cap">Topbar</span>
              <div className="prev-topbar">
                <div className="brand">{d.logo ? <img className="brand-logo" src={d.logo} alt={d.workspace} style={{ height: 22 }} onError={() => setDemo({ logo: null })} /> : <><BrandMark /><span className="brand-name">Fragta</span></>}</div>
                <div className="workspace"><span className="ws-dot"></span>Arbejdsområde · <b>{d.workspace}</b></div>
              </div>

              <span className="prev-cap">Login</span>
              <div className="prev-login">
                <div className="prev-logo">{d.logo ? <img src={d.logo} alt="logo" onError={() => setDemo({ logo: null })} /> : <BrandMark />}</div>
                <div className="prev-q">{d.tagline}</div>
                <div className="prev-meta">{d.workspace} · {d.industry}</div>
              </div>

              <span className="prev-cap">Accent</span>
              <div className="prev-accent">
                <span className="btn btn-primary btn-sm">Godkend &amp; send</span>
                <span className="prev-chip">Pålidelighed <i></i></span>
              </div>
              <div className="prev-foot"><BrandMark /> Powered by Fragta · kunden ser deres eget brand</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  getDemo, setDemo, useDemo, resetDemoConfig, WorkmarkLogo,
  setRequestStatus, getRequestStatus, useLiveRequests, resetRequestStore,
  addRequest, getNewReqs, resetNewReqs, findRequest,
  setProspectState, resetProspectStore, useLiveProspects,
  DemoStudio,
});