// ============================================================
// FRAGTA — Tender / Multi-lane RFQ (Beta)
//   Handle a large customer tender (many lanes) as ONE workspace
//   inside the existing request flow. Generic / reusable.
// ============================================================

const TENDER_LANES = [
  { id: 'L-01', from: 'Hamburg', to: 'Verona', mode: 'Van linehaul', vol: '8 paller/uge', eq: 'Van', target: '1.950 €', quote: '1.980 €', status: 'priced', partner: 'Adriax Trans', missing: 0 },
  { id: 'L-02', from: 'Aarhus', to: 'Gdansk', mode: 'LTL stykgods', vol: '18 paller', eq: 'Tautliner', target: '1.300 €', quote: '1.240 €', status: 'priced', partner: 'Vestpil Transport', missing: 0 },
  { id: 'L-03', from: 'Göteborg', to: 'Rotterdam', mode: 'Frigo FTL', vol: '22 paller', eq: 'Frigo +2°C', target: '2.500 €', quote: '', status: 'partner', partner: 'Frostvik Logistik', missing: 1 },
  { id: 'L-04', from: 'München', to: 'København', mode: 'FTL', vol: 'Fuldlæs', eq: 'Standard 13,6m', target: '1.800 €', quote: '', status: 'review', partner: '', missing: 2 },
  { id: 'L-05', from: 'Rotterdam', to: 'Oslo', mode: 'LTL', vol: '6 paller', eq: 'Tautliner', target: '—', quote: '', status: 'missing', partner: '', missing: 3 },
  { id: 'L-06', from: 'Wrocław', to: 'Aarhus', mode: 'FTL', vol: 'Fuldlæs', eq: 'Standard', target: '1.450 €', quote: '1.420 €', status: 'priced', partner: 'Lubex Spedycja', missing: 0 },
  { id: 'L-07', from: 'Antwerpen', to: 'Stockholm', mode: 'ADR LTL', vol: '9 paller', eq: 'ADR', target: '2.100 €', quote: '', status: 'review', partner: '', missing: 2 },
  { id: 'L-08', from: 'Praha', to: 'Hamburg', mode: 'LTL', vol: '12 paller', eq: 'Tautliner', target: '980 €', quote: '1.010 €', status: 'priced', partner: 'Bavex Cargo', missing: 0 },
];

const TENDER_STATUS = {
  priced:  { label: 'Prissat', cls: 'b-done' },
  partner: { label: 'Afventer partner', cls: 'b-sent' },
  review:  { label: 'Til gennemsyn', cls: 'b-wait' },
  missing: { label: 'Mangler info', cls: 'b-err' },
};

const PAST_TENDERS = [
  { id: 'T-2026-07', cust: 'Byfeldt Retail', name: 'Q3 udbud', lanes: 8, priced: 4, won: null, status: 'active', due: '12. jul 2026', updated: 'I dag' },
  { id: 'T-2026-05', cust: 'BalticTrade', name: 'Østersø-ruter 2026', lanes: 14, priced: 14, won: 9, status: 'submitted', due: '20. maj 2026', updated: '21. maj' },
  { id: 'T-2026-04', cust: 'Saltholm Foods', name: 'Køl & frigo H1', lanes: 6, priced: 6, won: 6, status: 'won', due: '02. apr 2026', updated: '04. apr' },
  { id: 'T-2026-02', cust: 'Müller GmbH', name: 'DACH linehaul', lanes: 11, priced: 11, won: 3, status: 'lost', due: '15. feb 2026', updated: '18. feb' },
];

const PAST_STATUS = {
  active:    { label: 'I gang', cls: 'b-wait' },
  submitted: { label: 'Afsendt', cls: 'b-sent' },
  won:       { label: 'Vundet', cls: 'b-done' },
  lost:      { label: 'Tabt', cls: 'b-err' },
};

function TenderUpload({ onImport }) {
  const fileRef = useRef(null);
  return (
    <div className="page reveal">
      <div className="wrap">
        <div className="page-head">
          <div className="lead-h">
            <span className="eyebrow">Flere ruter samlet <span className="beta-pill">Beta</span></span>
            <h1 className="page-title">Udbud / Tender</h1>
            <p className="page-sub">Når en kunde sender et større udbud med mange lanes, kan I uploade filen og arbejde alle lanes igennem ét sted — prissætning, partner-match og svar samlet i én arbejdsflade.</p>
          </div>
        </div>
        <div className="tender-drop" onClick={() => fileRef.current && fileRef.current.click()}>
          <input ref={fileRef} type="file" accept=".xlsx,.xls,.csv" hidden onChange={() => onImport()} />
          <span className="td-ic"><Icon n="upload" /></span>
          <div className="td-title">Upload tender-fil</div>
          <div className="td-sub">Træk en Excel- eller CSV-fil hertil — Fragta læser alle lanes og bygger arbejdsfladen.</div>
          <button className="btn btn-primary btn-sm" onClick={e => { e.stopPropagation(); onImport(); }}><Icon n="upload" /> Vælg fil</button>
          <button className="btn btn-quiet btn-sm" onClick={e => { e.stopPropagation(); onImport(); }}>Brug eksempel-tender</button>
        </div>
        <div className="tender-formats">
          <span className="scen-sub" style={{ marginBottom: 0 }}>Understøtter</span>
          <span className="tf-chip"><Icon n="doc" /> .xlsx</span>
          <span className="tf-chip"><Icon n="doc" /> .xls</span>
          <span className="tf-chip"><Icon n="doc" /> .csv</span>
        </div>

        <div className="past-tenders">
          <div className="pt-head"><h3>Tidligere udbud</h3><span className="oc-cap">{PAST_TENDERS.length}</span></div>
          <div className="pt-table">
            <div className="pt-row pt-thead"><span>Udbud</span><span>Lanes</span><span>Vundet</span><span>Frist</span><span>Status</span></div>
            {PAST_TENDERS.map(t => (
              <div className="pt-row" key={t.id} onClick={() => onImport()}>
                <span className="pt-name"><span className="pt-title"><b>{t.cust}</b> · {t.name}</span><small>#{t.id} · opdateret {t.updated}</small></span>
                <span className="pt-cell mono">{t.status === 'active' ? t.priced + ' / ' + t.lanes : t.lanes}</span>
                <span className="pt-cell mono">{t.won != null ? t.won + ' / ' + t.lanes : '—'}</span>
                <span className="pt-cell mono">{t.due}</span>
                <span><span className={'badge ' + PAST_STATUS[t.status].cls}>{PAST_STATUS[t.status].label}</span></span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function TenderWorkspace({ onReset }) {
  const [filter, setFilter] = useState('all');
  const [open, setOpen] = useState(null);
  const lanes = TENDER_LANES;
  const counts = lanes.reduce((a, l) => (a[l.status] = (a[l.status] || 0) + 1, a), {});
  const priced = counts.priced || 0;
  const totalTarget = lanes.length;
  const segs = [
    ['all', 'Alle', lanes.length],
    ['priced', 'Prissat', priced],
    ['review', 'Til gennemsyn', counts.review || 0],
    ['partner', 'Afventer partner', counts.partner || 0],
    ['missing', 'Mangler info', counts.missing || 0],
  ];
  const list = filter === 'all' ? lanes : lanes.filter(l => l.status === filter);
  const sel = open != null ? lanes.find(l => l.id === open) : null;
  const pct = Math.round((priced / totalTarget) * 100);

  return (
    <div className="page reveal">
      <div className="wrap">
        <div className="page-head">
          <div className="lead-h">
            <span className="eyebrow">Flere ruter samlet <span className="beta-pill">Beta</span></span>
            <h1 className="page-title">Byfeldt Retail — Q3 udbud</h1>
            <p className="page-sub">{lanes.length} lanes importeret fra <b>tender_q3_2026.xlsx</b> · frist 12. jul 2026. Arbejd hver lane igennem, og eksportér det færdige svar samlet.</p>
          </div>
          <div className="head-actions">
            <button className="btn btn-ghost btn-sm" onClick={onReset}><Icon n="upload" /> Ny tender</button>
            <button className="btn btn-dark btn-sm"><Icon n="logout" style={{ transform: 'rotate(90deg)' }} /> Eksportér svar</button>
          </div>
        </div>

        {/* progress + stats */}
        <div className="tender-stats">
          <div className="ts-progress">
            <div className="tsp-top"><span>Færdiggjort</span><b>{priced} / {totalTarget} lanes</b></div>
            <div className="tsp-bar"><i style={{ width: pct + '%' }}></i></div>
          </div>
          <div className="ts-cells">
            <div className="ts-cell"><span className="n">{lanes.length}</span><span className="l">Lanes</span></div>
            <div className="ts-cell"><span className="n" style={{ color: 'var(--good)' }}>{priced}</span><span className="l">Prissat</span></div>
            <div className="ts-cell"><span className="n" style={{ color: 'var(--warn)' }}>{(counts.review || 0) + (counts.partner || 0)}</span><span className="l">I gang</span></div>
            <div className="ts-cell"><span className="n" style={{ color: 'var(--danger)' }}>{counts.missing || 0}</span><span className="l">Mangler</span></div>
          </div>
        </div>

        {/* filter segments */}
        <div className="seg tender-seg">
          {segs.map(([k, lbl, n]) => (
            <button key={k} className={filter === k ? 'on' : ''} onClick={() => setFilter(k)}>{lbl} <span className="seg-n">{n}</span></button>
          ))}
        </div>

        {/* lane table */}
        <div className="tender-table">
          <div className="tt-head">
            <span>Lane</span><span>Setup</span><span>Volumen</span><span>Mål</span><span>Tilbud</span><span>Partner</span><span>Status</span>
          </div>
          {list.map(l => (
            <div className={'tt-row' + (open === l.id ? ' open' : '')} key={l.id} onClick={() => setOpen(open === l.id ? null : l.id)}>
              <span className="tt-lane"><span className="tt-route"><b>{l.from}</b> → <b>{l.to}</b></span><small>#{l.id}</small></span>
              <span className="tt-cell">{l.mode}</span>
              <span className="tt-cell mono">{l.vol}</span>
              <span className="tt-cell mono">{l.target}</span>
              <span className={'tt-quote' + (l.quote ? '' : ' empty')}>{l.quote || '—'}</span>
              <span className="tt-cell">{l.partner || <span className="tt-none">Ikke valgt</span>}</span>
              <span className="tt-status"><span className={'badge ' + TENDER_STATUS[l.status].cls}>{TENDER_STATUS[l.status].label}</span>{l.missing ? <span className="tt-miss">{l.missing} mangler</span> : null}</span>
            </div>
          ))}
        </div>

        {/* per-lane detail drawer */}
        {sel && (
          <div className="scrim" onClick={() => setOpen(null)}>
            <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 680 }}>
              <div className="m-head">
                <div>
                  <div className="m-title">{sel.from} → {sel.to}</div>
                  <div className="m-sub">Lane #{sel.id} · {sel.mode} · {sel.vol}</div>
                </div>
                <button className="m-x" onClick={() => setOpen(null)}><Icon n="x" /></button>
              </div>
              <div className="m-body">
                <div className="lane-grid">
                  <div className="lg-cell"><span className="k">Udstyr</span><span className="v">{sel.eq}</span></div>
                  <div className="lg-cell"><span className="k">Målpris</span><span className="v">{sel.target}</span></div>
                  <div className="lg-cell"><span className="k">Status</span><span className="v"><span className={'badge ' + TENDER_STATUS[sel.status].cls}>{TENDER_STATUS[sel.status].label}</span></span></div>
                </div>

                {sel.missing > 0 && (
                  <div className="lane-missing">
                    <span className="scen-sub">Mangler info ({sel.missing})</span>
                    <ul className="miss-list compact">
                      {sel.missing >= 1 && <li>Pallehøjde / stabelbarhed</li>}
                      {sel.missing >= 2 && <li>Frekvens pr. uge</li>}
                      {sel.missing >= 3 && <li>Afhentnings-cutoff</li>}
                    </ul>
                  </div>
                )}

                <div className="lane-partners">
                  <span className="scen-sub">Foreslåede partnere (fra katalog)</span>
                  {[['Adriax Trans', 96, '1.980 €'], ['Bavex Cargo', 91, '2.090 €'], ['Norvex Logistik', 88, '2.210 €']].map(([nm, fit, pr], i) => (
                    <div className={'lp-row' + (sel.partner === nm ? ' sel' : '')} key={i}>
                      <span className="lp-nm">{nm}</span>
                      <span className="lp-fit"><span className="feas-bar sm"><i style={{ width: fit + '%' }}></i></span>{fit}%</span>
                      <span className="lp-pr">{pr}</span>
                      <button className="btn btn-quiet btn-sm">{sel.partner === nm ? 'Valgt' : 'Vælg'}</button>
                    </div>
                  ))}
                </div>

                <div className="lane-quote">
                  <div className="field"><label>Tilbudspris</label><input defaultValue={sel.quote} placeholder="Indtast pris…" /></div>
                  <div className="field"><label>Transittid</label><input defaultValue="" placeholder="f.eks. 2 dage" /></div>
                </div>
              </div>
              <div className="m-foot">
                <span className="oc-note" style={{ margin: 0 }}><Icon n="spark" /> Lane {list.indexOf(sel) > -1 ? (lanes.indexOf(sel) + 1) : ''} af {lanes.length}</span>
                <div style={{ display: 'flex', gap: 8 }}>
                  <button className="btn btn-ghost btn-sm"><Icon n="mail" /> Bed kunde om info</button>
                  <button className="btn btn-primary btn-sm" onClick={() => setOpen(null)}><Icon n="check" /> Gem &amp; næste lane</button>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function Tender() {
  const [imported, setImported] = useState(false);
  return imported
    ? <TenderWorkspace onReset={() => setImported(false)} />
    : <TenderUpload onImport={() => setImported(true)} />;
}

Object.assign(window, { Tender });