// ============================================================
// FRAGTA — screens part 2: AddCompany wizard, Prospects, Admin, Login
// ============================================================

// ---- TILFØJ VIRKSOMHED (3-trin wizard) -------------------------------------
const WIZ_SERVICES = ['Airfreight','Courier (UPS, TNT etc.)','Express van','Intermodal / rail','Truck','Seafreight','Container trucking','Airfreight trucking'];
const WIZ_COMMODITIES = ['Excise cargo','Food stuff','General cargo','Frigo / temp','Dangerous goods (ADR)','Oversized'];

function AddCompanyModal({ onClose }) {
  const d = useDemo();
  const [step, setStep] = useState(0);
  const [svc, setSvc] = useState([]);
  const [com, setCom] = useState([]);
  const steps = [['Generelt', 'users'], ['Service & Ruter', 'box'], ['Dokumenter', 'doc']];
  const toggle = (set, v) => set(a => a.includes(v) ? a.filter(x => x !== v) : [...a, v]);

  return (
    <div className="scrim" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="m-head">
          <div>
            <div className="m-title">Tilføj virksomhed</div>
            <div className="m-sub">Ny vognmand i {d.workspace}s netværk</div>
          </div>
          <button className="m-x" onClick={onClose}><Icon n="x" /></button>
        </div>

        <div className="wizard-tabs">
          {steps.map(([lab, ico], i) => (
            <button key={i} className={'wizard-tab' + (step === i ? ' on' : step > i ? ' done' : '')} onClick={() => setStep(i)}>
              <span className="wt-n">{step > i ? <Icon n="check" style={{ width: 11, height: 11 }} /> : i + 1}</span>{lab}
            </button>
          ))}
        </div>

        <div className="m-body">
          {step === 0 && (
            <div style={{ display: 'grid', gap: 16 }}>
              <div className="field"><label>Virksomhedsnavn</label><input placeholder="f.eks. Adria Cargo S.r.l." /></div>
              <div className="grid-2">
                <div className="field"><label>Kontaktperson</label><input placeholder="f.eks. John Doe" /></div>
                <div className="field"><label>Land</label><input placeholder="f.eks. Danmark" /></div>
              </div>
              <div className="grid-2">
                <div className="field"><label>Telefon</label><input placeholder="f.eks. +45 12 34 56 78" /></div>
                <div className="field"><label>E-mail</label><input placeholder="f.eks. john@example.com" /></div>
              </div>
            </div>
          )}

          {step === 1 && (
            <div style={{ display: 'grid', gap: 18 }}>
              <div className="grid-2">
                <div className="field">
                  <label>Service (vælg en eller flere)</label>
                  <div className="optlist">
                    {WIZ_SERVICES.map(s => (
                      <div key={s} className={'opt' + (svc.includes(s) ? ' on' : '')} onClick={() => toggle(setSvc, s)}>
                        <span className="ck">{svc.includes(s) && <Icon n="check" />}</span>{s}
                      </div>
                    ))}
                  </div>
                </div>
                <div className="field">
                  <label>Commodities (vælg en eller flere)</label>
                  <div className="optlist">
                    {WIZ_COMMODITIES.map(s => (
                      <div key={s} className={'opt' + (com.includes(s) ? ' on' : '')} onClick={() => toggle(setCom, s)}>
                        <span className="ck">{com.includes(s) && <Icon n="check" />}</span>{s}
                      </div>
                    ))}
                  </div>
                </div>
              </div>
              <div className="grid-2">
                <div className="field"><label>Fra (lande)</label><input placeholder="Søg efter lande…" /><span className="hint">Skriv for at søge og vælge lande</span></div>
                <div className="field"><label>Til (lande)</label><input placeholder="Søg efter lande…" /><span className="hint">Skriv for at søge og vælge lande</span></div>
              </div>
              <div className="field"><label>Interne noter</label><textarea placeholder="Tilføj interne noter om virksomheden…"></textarea><span className="hint">Disse noter er kun synlige for jer internt</span></div>
            </div>
          )}

          {step === 2 && (
            <div style={{ display: 'grid', gap: 14 }}>
              <p style={{ color: 'var(--ink-dim)', fontSize: 13.5, margin: 0 }}>Upload relevante dokumenter såsom forretningslicens, forsikringspapirer eller certificeringer. Maks 10 filer.</p>
              <div className="dropzone">
                <span className="dz-ico"><Icon n="upload" /></span>
                <div><b>Klik for at uploade</b> eller træk og slip filer her</div>
                <span className="hint">PDF, JPG, PNG, DOC, DOCX · maks 10 MB pr. fil</span>
              </div>
            </div>
          )}
        </div>

        <div className="m-foot">
          <button className="btn btn-ghost btn-sm" disabled={step === 0} style={{ opacity: step === 0 ? .4 : 1 }} onClick={() => setStep(s => Math.max(0, s - 1))}><Icon n="arrowL" /> Tilbage</button>
          <div style={{ display: 'flex', gap: 10 }}>
            {step < 2 && <button className="btn btn-ghost btn-sm btn-arrow" onClick={() => setStep(s => s + 1)}>Næste</button>}
            <button className="btn btn-primary btn-sm" onClick={onClose}><Icon n="check" /> Gem virksomhed</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ---- PROSPECTS --------------------------------------------------------------
function Prospects() {
  const [list, setList] = useState(PROSPECTS);
  const [open, setOpen] = useState(null);
  const remove = i => { setList(l => l.filter((_, x) => x !== i)); setOpen(null); };
  const sel = open != null ? list[open] : null;
  return (
    <div className="page reveal">
      <div className="wrap">
        <div className="page-head">
          <div className="lead-h">
            <span className="eyebrow">Prospects · afventer godkendelse</span>
            <h1 className="page-title">Nye vognmænd</h1>
            <p className="page-sub">Virksomheder Fragta har mødt i indkommende mails, men som endnu ikke er en del af jeres katalog. Klik for at se deres indsendte oplysninger. Godkend for at lade dem byde på fremtidige forespørgsler.</p>
          </div>
          <div className="head-actions"><span className="tag">{list.length} afventer</span></div>
        </div>

        <div className="rows">
          {list.length ? list.map((p, i) => (
            <div className="prospect is-click" key={i} onClick={() => setOpen(i)}>
              <Avatar name={p.nm} />
              <div className="pr-main">
                <div className="pr-nm">{p.nm} <span className="co-flag"><Icon n="pin" style={{ width: 12, height: 12 }} />{p.flag}</span></div>
                <div className="pr-sub">{p.contact} · {p.mail} · {p.source} · <b>{p.date}</b></div>
                <div className="pr-tags">{p.services.map(s => <ServiceTag key={s} s={s} />)}<span className="tag" style={{ borderStyle: 'dashed' }}>{p.note}</span></div>
              </div>
              <div className="pr-actions" onClick={e => e.stopPropagation()}>
                <button className="btn btn-quiet btn-sm" onClick={() => remove(i)}><Icon n="trash" /> Slet</button>
                <button className="btn btn-ghost btn-sm" onClick={() => remove(i)}><Icon n="x" /> Afvis</button>
                <button className="btn btn-primary btn-sm" onClick={() => remove(i)}><Icon n="check" /> Godkend</button>
              </div>
            </div>
          )) : (
            <div className="empty">
              <span className="em-ico" style={{ color: 'var(--good)', borderColor: 'color-mix(in srgb,var(--good) 40%,transparent)' }}><Icon n="checkc" /></span>
              <h4>Ingen afventende prospects</h4>
              <p>Alt er gennemgået. Nye virksomheder dukker op her, så snart Fragta møder dem i indbakken.</p>
            </div>
          )}
        </div>
      </div>

      {sel && (
        <div className="scrim" onClick={() => setOpen(null)}>
          <div className="modal" onClick={e => e.stopPropagation()}>
            <div className="m-head">
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <Avatar name={sel.nm} />
                <div>
                  <div className="m-title">{sel.nm}</div>
                  <div className="m-sub">{sel.land} · {sel.source} · {sel.date}</div>
                </div>
              </div>
              <button className="m-x" onClick={() => setOpen(null)}><Icon n="x" /></button>
            </div>
            <div className="m-body">
              <div className="pd-grid">
                <div className="pd-cell"><span className="pk">Kontaktperson</span><span className="pv">{sel.contact}</span></div>
                <div className="pd-cell"><span className="pk">Land</span><span className="pv">{sel.land}</span></div>
                <div className="pd-cell"><span className="pk">E-mail</span><span className="pv">{sel.mail}</span></div>
                <div className="pd-cell"><span className="pk">Telefon</span><span className="pv">{sel.tel}</span></div>
                <div className="pd-cell"><span className="pk">Modtaget</span><span className="pv">{sel.date}</span></div>
                <div className="pd-cell"><span className="pk">Set i</span><span className="pv">{sel.seenIn}</span></div>
              </div>
              <div className="pd-block">
                <span className="pk">Servicetyper</span>
                <div className="pr-tags" style={{ marginTop: 7 }}>{sel.services.map(s => <ServiceTag key={s} s={s} />)}</div>
              </div>
              <div className="pd-block">
                <span className="pk">Lasttyper</span>
                <div className="pr-tags" style={{ marginTop: 7 }}>{sel.loadTypes.map(s => <span key={s} className="tag">{s}</span>)}</div>
              </div>
              <div className="pd-block">
                <span className="pk">Commodities</span>
                <div className="pr-tags" style={{ marginTop: 7 }}>{sel.commodities.map(s => <span key={s} className="tag">{s}</span>)}</div>
              </div>
              <div className="pd-block">
                <span className="pk">Ruter</span>
                <div className="pv" style={{ marginTop: 6 }}>{sel.from.join(', ')} → {sel.to.join(' · ')}</div>
              </div>
              <div className="pd-block">
                <span className="pk">Indsendt besked</span>
                <div className="pd-msg">{sel.msg}</div>
              </div>
            </div>
            <div className="m-foot">
              <button className="btn btn-quiet btn-sm" onClick={() => remove(open)}><Icon n="trash" /> Slet prospect</button>
              <div style={{ display: 'flex', gap: 8 }}>
                <button className="btn btn-ghost btn-sm" onClick={() => remove(open)}><Icon n="x" /> Afvis</button>
                <button className="btn btn-primary btn-sm" onClick={() => remove(open)}><Icon n="check" /> Godkend til katalog</button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ---- ADMIN ------------------------------------------------------------------
function Admin() {
  const d = useDemo();
  const [q, setQ] = useState('');
  const list = USERS.filter(u => !q || (u.nm + u.un + u.mail).toLowerCase().includes(q.toLowerCase()));
  const stats = [
    { ico: 'users', tone: 'accent', n: USERS.length, l: 'Brugere i alt' },
    { ico: 'checkc', tone: 'good', n: USERS.filter(u => u.active).length, l: 'Aktive brugere' },
    { ico: 'shield', tone: 'warn', n: USERS.filter(u => u.admin).length, l: 'Administratorer' },
  ];
  return (
    <div className="page reveal">
      <div className="wrap">
        <div className="page-head">
          <div className="lead-h">
            <span className="eyebrow">Admin · brugerstyring</span>
            <h1 className="page-title">Brugere</h1>
            <p className="page-sub">Hvem hos {d.workspace} har adgang til Fragta-arbejdsområdet.</p>
          </div>
          <div className="head-actions"><button className="btn btn-dark"><Icon n="plus" /> Tilføj bruger</button></div>
        </div>

        <div className="stat-row" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(200px,1fr))' }}>
          {stats.map((s, i) => (
            <div className={'stat' + (i === 0 ? ' lead' : '')} key={i}>
              <div className="stat-top"><span className={'stat-ico ' + s.tone}><Icon n={s.ico} /></span></div>
              <div><div className="stat-n">{s.n}</div><div className="stat-l">{s.l}</div></div>
            </div>
          ))}
        </div>

        <div className="toolbar">
          <div className="search"><Icon n="search" /><input placeholder="Søg efter navn, brugernavn eller e-mail…" value={q} onChange={e => setQ(e.target.value)} /></div>
        </div>

        <div className="rows">
          {list.map((u, i) => (
            <div className="userrow" key={i}>
              <Avatar name={u.nm} accent={u.admin} />
              <div className="ur-main">
                <div className="ur-nm">{u.nm}</div>
                <div className="ur-sub">{u.un} · {u.mail}</div>
              </div>
              <span className="ur-badges">
                {u.admin && <span className="badge b-admin">Admin</span>}
                <span className="badge b-active"><span className="d" style={{ background: 'currentColor' }}></span>Aktiv</span>
              </span>
              <span className="ur-login">Sidste login: {u.login}</span>
              <span className="r-chev"><Icon n="chevR" /></span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ---- LOGIN ------------------------------------------------------------------
function Login({ onLogin }) {
  const d = useDemo();
  return (
    <div className="login-screen">
      <div className="login-aside">
        <div className="la-grid"></div>
        <div className="la-glow"></div>
        <div className="brand">{d.logo ? <img className="brand-logo" src={d.logo} alt={d.workspace} style={{ height: 30 }} onError={() => setDemo({ logo: null })} /> : <><BrandMark /><span className="brand-name">Fragta</span></>}</div>
        <div className="la-q">Fragta — <span className="g">demo-miljø.</span></div>
        <div className="la-sub">En interaktiv sandkasse, hvor I kan klikke jer gennem hele tilbudsflowet: indbakke, AI-analyse, match af vognmænd og svar til kunden — med jeres eget brand på.</div>
        <div className="la-foot">
          {[['80%', 'Hurtigere svar'], ['6 min', 'Sparet pr. forespørgsel'], ['24/7', 'Klar døgnet rundt']].map(([n, l], i) => (
            <div key={i}><div className="lf-n">{n}</div><div className="lf-l">{l}</div></div>
          ))}
        </div>
      </div>

      <div className="login-main">
        <form className="login-card" onSubmit={e => { e.preventDefault(); onLogin(); }}>
          <div className="lc-brand">{d.logo ? <img className="brand-logo" src={d.logo} alt={d.workspace} style={{ height: 30 }} onError={() => setDemo({ logo: null })} /> : <><BrandMark /><span className="brand-name" style={{ fontSize: 19 }}>Fragta</span></>}</div>
          <div>
            <div className="lc-ey">Demo-miljø</div>
            <h1>Log ind på demoen</h1>
          </div>
          <div className="field"><label>Brugernavn</label><input placeholder="Indtast brugernavn" defaultValue={d.contactUser} /></div>
          <div className="field"><label>Adgangskode</label><input type="password" placeholder="Indtast adgangskode" defaultValue="demo1234" /></div>
          <div className="lc-row">
            <label className="lc-remember"><input type="checkbox" defaultChecked /> <span className="lc-check"></span> <span className="lc-remember-tx">Husk mig</span></label>
            <a className="lc-forgot" href="#" onClick={e => e.preventDefault()}>Glemt kode?</a>
          </div>
          <button className="btn btn-primary btn-arrow" type="submit" style={{ width: '100%', padding: '13px' }}>Start demo</button>
        </form>
      </div>
    </div>
  );
}

Object.assign(window, { AddCompanyModal, Prospects, Admin, Login });