// Workspace settings — industry terminology config (admin only)
function WorkspaceSettings({ onApply }) {
  const T = window.PEARLER_TERMS;
  const [preset, setPreset] = React.useState(T.current.preset || 'kitchens');
  const [terms, setTermsState] = React.useState({ ...T.current });

  const applyPreset = (key) => {
    setPreset(key);
    setTermsState({ preset: key, ...T.PRESETS[key] });
  };
  const editTerm = (field, val) => setTermsState(t => ({ ...t, [field]: val, preset: 'custom' }));

  const save = () => {
    // Derive lowercase + plural helpers from the singular/plural the admin typed
    const next = {
      ...terms,
      loc_lc: (terms.location || '').toLowerCase(),
      locs_lc: (terms.locations || '').toLowerCase(),
      rep_lc: (terms.rep || '').toLowerCase(),
      reps_lc: (terms.reps || '').toLowerCase(),
    };
    window.setTerms(next);
    onApply();
  };

  const dirty = JSON.stringify(terms) !== JSON.stringify(T.current);

  return (
    <div>
      <div className="card" style={{ marginBottom: 16, padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 14, background: 'var(--info-soft)', border: '1px solid oklch(0.85 0.04 240)' }}>
        <div style={{ width: 32, height: 32, borderRadius: 16, background: 'var(--info)', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <Icon name="sliders" size={16} color="white"/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: 'oklch(0.3 0.1 240)', marginBottom: 2 }}>Tailor the language to your industry</div>
          <div style={{ fontSize: 12, color: 'oklch(0.35 0.08 240)' }}>
            Pearler adapts its wording to how your business talks. Pick your industry or customise the terms — the whole platform relabels instantly. No data changes, just the words.
          </div>
        </div>
      </div>

      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-hd">
          <div>
            <div className="card-title">Industry preset</div>
            <div className="card-sub">Choose the closest match — you can fine-tune the words below</div>
          </div>
        </div>
        <div className="card-pad">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
            {Object.entries(T.PRESETS).map(([key, p]) => (
              <div
                key={key}
                onClick={() => applyPreset(key)}
                className={`preset-card ${preset === key ? 'on' : ''}`}
              >
                <div style={{ fontWeight: 600, fontSize: 13, marginBottom: 4 }}>{p.label}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{p.locations} · {p.reps}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-hd">
          <div>
            <div className="card-title">Custom terms</div>
            <div className="card-sub">These words appear throughout the app — navigation, filters, reports, forms</div>
          </div>
          {dirty && (
            <button className="btn sm primary" onClick={save}><Icon name="check" size={11}/> Apply across workspace</button>
          )}
        </div>
        <div className="card-pad">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
            <div>
              <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--ink-3)', fontWeight: 500, marginBottom: 10 }}>Location (where you sell)</div>
              <div className="detail-grid">
                <div className="detail-field">
                  <span className="lbl">Singular</span>
                  <input value={terms.location} onChange={(e) => editTerm('location', e.target.value)}/>
                </div>
                <div className="detail-field">
                  <span className="lbl">Plural</span>
                  <input value={terms.locations} onChange={(e) => editTerm('locations', e.target.value)}/>
                </div>
              </div>
              <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 8 }}>
                e.g. <em>{terms.locations}</em> appears in the sidebar, filters, and the comparison view.
              </div>
            </div>
            <div>
              <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--ink-3)', fontWeight: 500, marginBottom: 10 }}>Salesperson (your team)</div>
              <div className="detail-grid">
                <div className="detail-field">
                  <span className="lbl">Singular</span>
                  <input value={terms.rep} onChange={(e) => editTerm('rep', e.target.value)}/>
                </div>
                <div className="detail-field">
                  <span className="lbl">Plural</span>
                  <input value={terms.reps} onChange={(e) => editTerm('reps', e.target.value)}/>
                </div>
              </div>
              <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 8 }}>
                e.g. the "{terms.reps}" leaderboard, "{terms.rep}" filters, deal ownership.
              </div>
            </div>
          </div>

          <div className="divider"></div>

          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--ink-3)', fontWeight: 500, marginBottom: 10 }}>Live preview</div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {[`${terms.locations}`, `Sales ${terms.reps}`, `Manage ${terms.locations}`, `Top ${terms.rep_lc || terms.rep.toLowerCase()}: ...`, `${terms.location} comparison`].map((s, i) => (
              <span key={i} className="pill" style={{ fontSize: 12 }}>{s}</span>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

window.WorkspaceSettings = WorkspaceSettings;