// ============================================================
// FRAGTA — Settings (Indstillinger)
//   Left-side section menu: Users · Company · Templates ·
//   Imports · Integrations · Frida. Clean, operational.
// ============================================================

const SETTINGS_SECTIONS = [
  { id: 'users', label: 'Brugere', ico: 'users', desc: 'Teammedlemmer, roller og adgang' },
  { id: 'company', label: 'Virksomhed', ico: 'building', desc: 'Stamdata, valuta, sprog og signatur' },
  { id: 'templates', label: 'Skabeloner', ico: 'doc', desc: 'Mail-skabeloner til RFQ, tilbud og opfølgning' },
  { id: 'imports', label: 'Imports', ico: 'upload', desc: 'Upload partnere, kunder og historik' },
  { id: 'integrations', label: 'Integrationer', ico: 'network', desc: 'Mail, API, TMS og eksport' },
  { id: 'frida', label: 'Frida', ico: 'chat', desc: 'Konfigurér jeres AI-assistent' },
];

const ROLES = ['Admin', 'Manager', 'Speditør', 'Viewer'];

const SET_USERS = [
  { nm: 'Jonas Holt', mail: 'jho@meridian-spedition.dk', role: 'Admin', active: true, last: 'For 4 min siden' },
  { nm: 'Mette Krogh', mail: 'mkr@meridian-spedition.dk', role: 'Manager', active: true, last: 'I dag · 08:12' },
  { nm: 'Anders Vinther', mail: 'avi@meridian-spedition.dk', role: 'Speditør', active: true, last: 'I dag · 07:40' },
  { nm: 'Camilla Bach', mail: 'cba@meridian-spedition.dk', role: 'Speditør', active: true, last: 'I går · 16:22' },
  { nm: 'Rasmus Bredahl', mail: 'rbr@meridian-spedition.dk', role: 'Viewer', active: false, last: '12-05-2026' },
];

const SET_TEMPLATES = [
  { id: 't1', nm: 'Forespørgsel til vognmand', tag: 'Partner RFQ', body: 'Hej {{vognmand}},\n\nVi har en forsendelse på {{volumen}} fra {{fra}} til {{til}} med afhentning {{dato}}. Kan I give et tilbud?\n\nMvh {{afsender}}, {{firma}}' },
  { id: 't2', nm: 'Tilbud til kunde', tag: 'Customer quote', body: 'Kære {{kunde}},\n\nTak for forespørgslen. Vi kan tilbyde transport {{fra}} → {{til}} til {{pris}}, transittid {{transit}}.\n\nVenlig hilsen\n{{firma}}' },
  { id: 't3', nm: 'Opfølgning', tag: 'Follow-up', body: 'Hej {{kunde}},\n\nJeg følger lige op på vores tilbud fra {{dato}}. Er det stadig aktuelt for jer?\n\nMvh {{afsender}}' },
  { id: 't4', nm: 'Udbuds-afklaring', tag: 'Tender clarification', body: 'Hej {{kunde}},\n\nFor at prissætte udbuddet korrekt mangler vi: {{spørgsmål}}.\n\nMvh {{afsender}}' },
];

const SET_IMPORTS = [
  { nm: 'Partnerliste', sub: 'Vognmænd & leverandører', fmt: 'CSV, XLSX', last: 'Importeret 02-06-2026 · 248 rækker' },
  { nm: 'Kundeliste', sub: 'Kunder & kontakter', fmt: 'CSV, XLSX', last: 'Importeret 28-05-2026 · 96 rækker' },
  { nm: 'Historiske tilbud', sub: 'Tidligere priser pr. rute', fmt: 'CSV, XLSX', last: 'Aldrig importeret' },
  { nm: 'Rute-historik', sub: 'Lane history til AI-match', fmt: 'CSV, XLSX', last: 'Importeret 10-05-2026 · 1.420 rækker' },
  { nm: 'Udbudsfiler', sub: 'Tender-filer fra kunder', fmt: 'XLSX', last: 'Aldrig importeret' },
];

const SET_INTEGRATIONS = [
  { nm: 'Outlook indbakke', sub: 'Læs forespørgsler direkte fra Microsoft 365', ico: 'mail', status: 'on' },
  { nm: 'Gmail indbakke', sub: 'Læs forespørgsler fra Google Workspace', ico: 'mail', status: 'off' },
  { nm: 'API & webhooks', sub: 'Send og modtag data programmatisk', ico: 'network', status: 'off' },
  { nm: 'Eksport til Excel/CSV', sub: 'Download tilbud, ruter og rapporter', ico: 'upload', status: 'on' },
  { nm: 'TMS-integration', sub: 'Send booking videre til fx Truckplanner', ico: 'catalog', status: 'soon' },
  { nm: 'WhatsApp', sub: 'Modtag forespørgsler via WhatsApp Business', ico: 'chat', status: 'soon' },
];

function SetUsers() {
  const [list, setList] = useState(SET_USERS);
  return (
    <div className="set-pane">
      <div className="set-pane-head">
        <div><h2>Brugere</h2><p>Administrér teammedlemmer, roller og adgang til arbejdsområdet.</p></div>
        <button className="btn btn-primary btn-sm"><Icon n="plus" /> Tilføj bruger</button>
      </div>
      <div className="panel">
        <div className="set-userhead"><span>Bruger</span><span>Rolle</span><span>Status</span><span>Sidst aktiv</span><span></span></div>
        {list.map((u, i) => (
          <div className="set-userrow" key={i}>
            <div className="su-id"><Avatar name={u.nm} accent={u.role === 'Admin'} /><div className="su-main"><div className="su-nm">{u.nm}</div><div className="su-mail">{u.mail}</div></div></div>
            <div>
              <select className="set-select sm" value={u.role} onChange={e => setList(l => l.map((x, j) => j === i ? { ...x, role: e.target.value } : x))}>
                {ROLES.map(r => <option key={r}>{r}</option>)}
              </select>
            </div>
            <div><span className={'su-status ' + (u.active ? 'on' : 'off')}><span className="d"></span>{u.active ? 'Aktiv' : 'Inaktiv'}</span></div>
            <div className="su-last">{u.last}</div>
            <div className="su-act"><button className="icon-btn sm" title="Fjern" onClick={() => setList(l => l.filter((_, j) => j !== i))}><Icon n="trash" /></button></div>
          </div>
        ))}
      </div>
      <div className="set-roles-note">
        <span className="srn-h">Roller</span>
        <div className="srn-grid">
          {[['Admin', 'Fuld adgang inkl. indstillinger og brugere'], ['Manager', 'Alle forespørgsler + rapporter, ikke indstillinger'], ['Speditør', 'Arbejder med forespørgsler og tilbud'], ['Viewer', 'Læseadgang — kan ikke sende']].map(([r, d]) => (
            <div className="srn-item" key={r}><b>{r}</b><span>{d}</span></div>
          ))}
        </div>
      </div>
    </div>
  );
}

function SetCompany() {
  const d = (typeof useDemo === 'function') ? useDemo() : { workspace: 'Meridian Spedition', logo: null };
  const fileRef = useRef(null);
  const [saved, setSaved] = useState(false);
  const flash = () => { setSaved(true); clearTimeout(window.__setFlash); window.__setFlash = setTimeout(() => setSaved(false), 1500); };
  const onLogo = (e) => {
    const f = e.target.files && e.target.files[0]; if (!f) return;
    const rd = new FileReader(); rd.onload = () => { if (typeof setDemo === 'function') setDemo({ logo: rd.result }); flash(); }; rd.readAsDataURL(f);
  };
  return (
    <div className="set-pane">
      <div className="set-pane-head"><div><h2>Virksomhed</h2><p>Stamdata der bruges på tværs af tilbud, mails og rapporter.</p></div><span className={'save-pill' + (saved ? ' show' : '')}><Icon n="check" /> Gemt</span></div>
      <div className="panel"><div className="set-body">
        <div className="set-grid2">
          <div className="field"><label>Virksomhedsnavn</label><input defaultValue={d.workspace} onBlur={() => { if (typeof setDemo === 'function') setDemo({ workspace: event.target.value }); flash(); }} /></div>
          <div className="field"><label>Firma-e-mail</label><input defaultValue="kontakt@meridian-spedition.dk" onBlur={flash} /></div>
        </div>
        <div className="field"><label>Logo</label>
          <div className="set-logo">
            <div className="set-logo-prev">{d.logo ? <img src={d.logo} alt="logo" /> : <span><Icon n="building" /></span>}</div>
            <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={() => { if (typeof setDemo === 'function') setDemo({ logo: null }); flash(); }}>Fjern</button>}
          </div>
        </div>
        <div className="set-grid3">
          <div className="field"><label>Standard-valuta</label><select className="set-select" onChange={flash} defaultValue="EUR"><option>EUR</option><option>DKK</option><option>SEK</option><option>USD</option></select></div>
          <div className="field"><label>Standard-sprog</label><select className="set-select" onChange={flash} defaultValue="Dansk"><option>Dansk</option><option>English</option><option>Deutsch</option></select></div>
          <div className="field"><label>Standard-margin</label><div className="inp-suffix"><input defaultValue="12" onBlur={flash} /><span>%</span></div></div>
        </div>
        <div className="field"><label>Mail-signatur</label><textarea rows="4" defaultValue={'Venlig hilsen\nMeridian Spedition A/S\nkontakt@meridian-spedition.dk · +45 70 00 00 00'} onBlur={flash}></textarea></div>
      </div></div>
    </div>
  );
}

function SetTemplates() {
  const [sel, setSel] = useState('t1');
  const t = SET_TEMPLATES.find(x => x.id === sel);
  return (
    <div className="set-pane">
      <div className="set-pane-head"><div><h2>Skabeloner</h2><p>Genbrugelige mail-skabeloner. Brug fletfelter som <code>{'{{kunde}}'}</code>.</p></div><button className="btn btn-primary btn-sm"><Icon n="plus" /> Ny skabelon</button></div>
      <div className="set-tpl">
        <div className="panel set-tpl-list">
          {SET_TEMPLATES.map(x => (
            <button key={x.id} className={'tpl-row' + (x.id === sel ? ' on' : '')} onClick={() => setSel(x.id)}>
              <span className="tpl-nm">{x.nm}</span><span className="tpl-tag">{x.tag}</span>
            </button>
          ))}
        </div>
        <div className="panel set-tpl-edit">
          <div className="set-body">
            <div className="field"><label>Navn</label><input defaultValue={t.nm} key={t.id + 'n'} /></div>
            <div className="field"><label>Indhold</label><textarea rows="9" defaultValue={t.body} key={t.id + 'b'}></textarea></div>
            <div className="tpl-vars">Fletfelter: <code>{'{{kunde}}'}</code> <code>{'{{fra}}'}</code> <code>{'{{til}}'}</code> <code>{'{{volumen}}'}</code> <code>{'{{pris}}'}</code> <code>{'{{afsender}}'}</code></div>
            <div className="set-actions"><button className="btn btn-primary btn-sm"><Icon n="check" /> Gem skabelon</button></div>
          </div>
        </div>
      </div>
    </div>
  );
}

function SetImports() {
  return (
    <div className="set-pane">
      <div className="set-pane-head"><div><h2>Imports</h2><p>Upload og administrér data. Filer behandles og kobles til AI-match og katalog.</p></div></div>
      <div className="panel">
        {SET_IMPORTS.map((im, i) => (
          <div className="set-import" key={i}>
            <span className="si-ico"><Icon n="upload" /></span>
            <div className="si-main"><div className="si-nm">{im.nm}</div><div className="si-sub">{im.sub} · {im.fmt}</div></div>
            <span className="si-last">{im.last}</span>
            <button className="btn btn-ghost btn-sm"><Icon n="upload" /> Upload</button>
          </div>
        ))}
      </div>
      <div className="set-import-drop"><Icon n="upload" /> Træk en fil hertil for at importere — CSV eller XLSX</div>
    </div>
  );
}

function SetIntegrations() {
  const [state, setState] = useState(SET_INTEGRATIONS.reduce((a, x, i) => (a[i] = x.status, a), {}));
  const labels = { on: 'Forbundet', off: 'Forbind', soon: 'Kommer snart' };
  return (
    <div className="set-pane">
      <div className="set-pane-head"><div><h2>Integrationer</h2><p>Forbind Fragta med jeres indbakke, systemer og eksport.</p></div></div>
      <div className="set-integrations">
        {SET_INTEGRATIONS.map((it, i) => (
          <div className={'set-int' + (state[i] === 'soon' ? ' soon' : '')} key={i}>
            <span className="int-ico"><Icon n={it.ico} /></span>
            <div className="int-main"><div className="int-nm">{it.nm}{state[i] === 'soon' && <span className="beta-pill sm">Snart</span>}</div><div className="int-sub">{it.sub}</div></div>
            {state[i] === 'on'
              ? <span className="int-on"><span className="d"></span>Forbundet</span>
              : state[i] === 'soon'
                ? <button className="btn btn-quiet btn-sm" disabled>Kommer snart</button>
                : <button className="btn btn-ghost btn-sm" onClick={() => setState(s => ({ ...s, [i]: 'on' }))}>Forbind</button>}
          </div>
        ))}
      </div>
    </div>
  );
}

function SetFrida() {
  const [tone, setTone] = useState('Professionel & venlig');
  const [mode, setMode] = useState('support');
  const [saved, setSaved] = useState(false);
  const flash = () => { setSaved(true); clearTimeout(window.__frFlash); window.__frFlash = setTimeout(() => setSaved(false), 1500); };
  const can = [
    ['Forklarer forespørgsler', true], ['Foreslår vognmænd', true], ['Udkast til svar-mails', true],
    ['Svarer på pris & vilkår', true], ['Booker automatisk', false], ['Forhandler priser', false],
  ];
  return (
    <div className="set-pane">
      <div className="set-pane-head"><div><h2>Frida</h2><p>Jeres indbyggede AI-assistent. Bestem tone, kontekst og hvad Frida må hjælpe med.</p></div><span className={'save-pill' + (saved ? ' show' : '')}><Icon n="check" /> Gemt</span></div>
      <div className="panel"><div className="set-body">
        <div className="set-grid2">
          <div className="field"><label>Tone of voice</label><select className="set-select" value={tone} onChange={e => { setTone(e.target.value); flash(); }}><option>Professionel & venlig</option><option>Kort & direkte</option><option>Uformel</option><option>Formel</option></select></div>
          <div className="field"><label>Standard-sprog</label><select className="set-select" onChange={flash} defaultValue="Dansk"><option>Dansk</option><option>English</option><option>Tilpas til kunden</option></select></div>
        </div>
        <div className="field"><label>Virksomheds-kontekst</label><textarea rows="3" defaultValue="Meridian Spedition er en dansk speditør med fokus på vej- og søfragt i Nordeuropa. Vi prioriterer pålidelige vognmænd og hurtige svar til kunderne." onBlur={flash}></textarea><span className="hint">Frida bruger dette til at svare i jeres kontekst.</span></div>
        <div className="field"><label>Standard-antagelser</label><textarea rows="2" defaultValue="Priser er ekskl. moms. Transittid i hverdage. Tautliner med mindre andet er nævnt." onBlur={flash}></textarea></div>
        <div className="field"><label>Frida må hjælpe med</label>
          <div className="frida-can">
            {can.map(([c, on], i) => (
              <label className="fc-item" key={i}><input type="checkbox" defaultChecked={on} onChange={flash} /><span className="fc-box"></span>{c}</label>
            ))}
          </div>
        </div>
        <div className="field"><label>Tilstand</label>
          <div className="seg set-seg">
            {[['support', 'Support'], ['onboarding', 'Onboarding'], ['off', 'Slået fra']].map(([v, l]) => (
              <button key={v} className={mode === v ? 'on' : ''} onClick={() => { setMode(v); flash(); }}>{l}</button>
            ))}
          </div>
          <span className="hint">Onboarding-tilstand guider nye brugere ekstra grundigt gennem platformen.</span>
        </div>
      </div></div>
    </div>
  );
}

function Settings() {
  const [sec, setSec] = useState('users');
  const panes = { users: SetUsers, company: SetCompany, templates: SetTemplates, imports: SetImports, integrations: SetIntegrations, frida: SetFrida };
  const Pane = panes[sec];
  return (
    <div className="page reveal">
      <div className="wrap">
        <div className="page-head"><div className="lead-h"><span className="eyebrow">Indstillinger</span><h1 className="page-title">Indstillinger</h1><p className="page-sub">Administrér brugere, virksomhed, skabeloner, imports, integrationer og Frida.</p></div></div>
        <div className="set-layout">
          <nav className="set-menu">
            {SETTINGS_SECTIONS.map(s => (
              <button key={s.id} className={'set-menu-item' + (s.id === sec ? ' on' : '')} onClick={() => setSec(s.id)}>
                <Icon n={s.ico} />
                <span className="smi-main"><span className="smi-l">{s.label}</span><span className="smi-d">{s.desc}</span></span>
              </button>
            ))}
          </nav>
          <div className="set-content"><Pane /></div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Settings });