/* ============ Theme + font presets ============ */
const THEMES = {
  casabilia: {
    name: 'Casabilia', swatch: ['#23211e', '#a9842f', '#dcc37a'],
    vars: {
      '--green-900': '#161514', '--green-800': '#23211e', '--green-700': '#4a4540', '--green-600': '#a9842f',
      '--sage': '#dcc37a', '--sage-soft': '#f4eeda', '--sage-line': '#e4d099',
      '--coral': '#c2683f', '--coral-soft': '#f1d3c4', '--gold': '#a9842f',
      '--paper': '#f6f4ef', '--paper-2': '#ece9e0',
    },
  },
  forest: {
    name: 'Forest', swatch: ['#2c5a44', '#3f7a5f', '#c2cf95'],
    vars: {
      '--green-900': '#21422f', '--green-800': '#2c5a44', '--green-700': '#356a52', '--green-600': '#3f7a5f',
      '--sage': '#c2cf95', '--sage-soft': '#e3e8cb', '--sage-line': '#b6c486',
      '--coral': '#e07a6f', '--coral-soft': '#f3c9c3', '--gold': '#b58a3e',
      '--paper': '#f4f3ed', '--paper-2': '#eceadf',
    },
  },
  navy: {
    name: 'Harbor', swatch: ['#16324a', '#2f6f9e', '#a8c6dc'],
    vars: {
      '--green-900': '#0f2233', '--green-800': '#16324a', '--green-700': '#214b6b', '--green-600': '#2f6f9e',
      '--sage': '#a8c6dc', '--sage-soft': '#e2ecf4', '--sage-line': '#bcd4e6',
      '--coral': '#d2774f', '--coral-soft': '#f0d3c2', '--gold': '#c08a3e',
      '--paper': '#f3f5f7', '--paper-2': '#e7ecf0',
    },
  },
  emerald: {
    name: 'Emerald', swatch: ['#125438', '#1f8a5b', '#bfe3c8'],
    vars: {
      '--green-900': '#0e3a2a', '--green-800': '#125438', '--green-700': '#1c6e4a', '--green-600': '#1f8a5b',
      '--sage': '#bfe3c8', '--sage-soft': '#e1f1e6', '--sage-line': '#c7e6cf',
      '--coral': '#e0795f', '--coral-soft': '#f4cfc3', '--gold': '#c59b3a',
      '--paper': '#f2f6f3', '--paper-2': '#e6ede8',
    },
  },
  slate: {
    name: 'Slate', swatch: ['#26384a', '#2f8f86', '#9fd0c8'],
    vars: {
      '--green-900': '#1b2733', '--green-800': '#26384a', '--green-700': '#3a5266', '--green-600': '#2f8f86',
      '--sage': '#9fd0c8', '--sage-soft': '#e2efed', '--sage-line': '#bfe0da',
      '--coral': '#e08a5f', '--coral-soft': '#f3d3c2', '--gold': '#b88a3e',
      '--paper': '#f4f6f6', '--paper-2': '#e8ecec',
    },
  },
  plum: {
    name: 'Plum', swatch: ['#43273f', '#9a5a86', '#e6b9cf'],
    vars: {
      '--green-900': '#2c1a2e', '--green-800': '#43273f', '--green-700': '#5e3a55', '--green-600': '#9a5a86',
      '--sage': '#e6b9cf', '--sage-soft': '#f6e6ee', '--sage-line': '#eccfdd',
      '--coral': '#d56a6a', '--coral-soft': '#f1cccc', '--gold': '#b98a4e',
      '--paper': '#f7f3f5', '--paper-2': '#efe7ec',
    },
  },
  sand: {
    name: 'Sand', swatch: ['#4f4233', '#bd6a44', '#e7cda3'],
    vars: {
      '--green-900': '#3a3026', '--green-800': '#4f4233', '--green-700': '#6b5a45', '--green-600': '#bd6a44',
      '--sage': '#e7cda3', '--sage-soft': '#f5ecdc', '--sage-line': '#ecd9bc',
      '--coral': '#c65b3c', '--coral-soft': '#f0d2c4', '--gold': '#b1812f',
      '--paper': '#f6f2ea', '--paper-2': '#ece5d8',
    },
  },
};
const FONTS = {
  modern: { name: 'Modern', display: "'Space Grotesk', sans-serif", body: "'Plus Jakarta Sans', sans-serif" },
  editorial: { name: 'Editorial', display: "'DM Serif Display', serif", body: "'DM Sans', sans-serif" },
  neutral: { name: 'Neutral', display: "'Archivo', sans-serif", body: "'Archivo', sans-serif" },
  bold: { name: 'Bold', display: "'Sora', sans-serif", body: "'Manrope', sans-serif" },
  classic: { name: 'Classic', display: "'Libre Baskerville', serif", body: "'Work Sans', sans-serif" },
};

const DEFAULT_SETTINGS = {
  title: 'Casabilia Investment',
  subtitle: 'Real estate investment analyzer',
  theme: 'casabilia',
  font: 'modern',
  keys: {},
};

function loadSettings() {
  try { return { ...DEFAULT_SETTINGS, ...(JSON.parse(localStorage.getItem(SETTINGS_KEY)) || {}) }; } catch (e) { return { ...DEFAULT_SETTINGS }; }
}
function applyTheme(s) {
  const root = document.documentElement;
  const th = THEMES[s.theme] || THEMES.casabilia;
  Object.entries(th.vars).forEach(([k, v]) => root.style.setProperty(k, v));
  const f = FONTS[s.font] || FONTS.modern;
  root.style.setProperty('--font-display', f.display);
  root.style.setProperty('--font-body', f.body);
}

const KEY_FIELDS = [
  { k: 'locationiq', label: 'LocationIQ', sub: 'Geocoding, autocomplete, maps, drive time', status: 'live', url: 'locationiq.com' },
  { k: 'rentcast', label: 'RentCast', sub: 'Property facts, tax, AVM, rent, comps', status: 'billing', url: 'rentcast.io' },
  { k: 'apininjas', label: 'API Ninjas', sub: 'Fallback geocoder', status: 'live', url: 'api-ninjas.com' },
  { k: 'geoapify', label: 'Geoapify', sub: 'Free autocomplete alternative', status: 'optional', url: 'geoapify.com' },
  { k: 'google', label: 'Google Maps', sub: 'Places autocomplete + Street View', status: 'needkey', url: 'console.cloud.google.com' },
  { k: 'greatschools', label: 'GreatSchools', sub: 'School ratings', status: 'needkey', url: 'greatschools.org/api' },
  { k: 'walkscore', label: 'Walk Score', sub: 'Walk / Transit score', status: 'needkey', url: 'walkscore.com/professional' },
  { k: 'lonewolf', label: 'Lone Wolf', sub: 'Workspace / zipForm URL for offer hand-off', status: 'optional', url: 'lwolf.com' },
];

function SettingsPanel({ settings, setSettings }) {
  const set = (patch) => setSettings((s) => ({ ...s, ...patch }));
  const setKey = (k, v) => setSettings((s) => ({ ...s, keys: { ...s.keys, [k]: v } }));
  const effectiveKey = (k) => (settings.keys[k] && settings.keys[k].trim()) || DEFAULT_KEYS[k] || '';

  return (
    <div className="settings-wrap">
      <div className="card">
        <div className="card-head"><h3>Branding</h3></div>
        <div className="card-body">
          <div className="field-stack">
            <div className="fs-row"><label>App Title</label><input className="set-input" value={settings.title} onChange={(e) => set({ title: e.target.value })} /></div>
            <div className="fs-row"><label>Subtitle</label><input className="set-input" value={settings.subtitle} onChange={(e) => set({ subtitle: e.target.value })} /></div>
          </div>
          <div className="set-label">Color theme</div>
          <div className="theme-row">
            {Object.entries(THEMES).map(([id, th]) => (
              <button key={id} className={'theme-chip' + (settings.theme === id ? ' on' : '')} onClick={() => set({ theme: id })}>
                <span className="theme-sw">{th.swatch.map((c, i) => <span key={i} style={{ background: c }}></span>)}</span>
                {th.name}
              </button>
            ))}
          </div>
          <div className="set-label">Typeface</div>
          <div className="theme-row">
            {Object.entries(FONTS).map(([id, f]) => (
              <button key={id} className={'theme-chip' + (settings.font === id ? ' on' : '')} onClick={() => set({ font: id })}>
                <span style={{ fontFamily: f.display, fontSize: 17, fontWeight: 700 }}>Aa</span>{f.name}
              </button>
            ))}
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>API Keys</h3><span className="head-total" style={{ fontSize: 12 }}>saved on this device</span></div>
        <div className="card-body">
          <div style={{ fontSize: 12.5, color: 'var(--muted)', lineHeight: 1.5, marginBottom: 12 }}>
            Keys are stored only in your browser (localStorage). Leave blank to use the built-in default where one exists.
          </div>
          {KEY_FIELDS.map((f) => {
            const has = !!effectiveKey(f.k);
            const badge = f.status === 'live' ? { t: 'Live', c: 'live' }
              : f.status === 'billing' ? { t: 'Needs billing', c: 'warn-pill' }
              : f.status === 'optional' ? { t: 'Optional', c: 'sample' }
              : { t: has ? 'Set' : 'Add key', c: has ? 'live' : 'sample' };
            return (
              <div className="key-row" key={f.k}>
                <div className="key-meta">
                  <div className="key-name">{f.label} <span className={'src-pill ' + badge.c}>{badge.t}</span></div>
                  <div className="key-sub">{f.sub} · {f.url}</div>
                </div>
                <input className="set-input key-input" type={f.k === 'lonewolf' ? 'text' : 'password'} placeholder={f.k === 'lonewolf' ? 'https://…' : (DEFAULT_KEYS[f.k] ? 'Using built-in default' : 'Paste key')}
                  value={settings.keys[f.k] || ''} onChange={(e) => setKey(f.k, e.target.value)} />
              </div>
            );
          })}
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>Data &amp; Reset</h3></div>
        <div className="card-body">
          <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.6 }}>
            All deal inputs, saved deals and settings live in this browser. Use <b>Reset</b> in the top bar to restore the example deal. Clearing browser data removes everything.
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { THEMES, FONTS, DEFAULT_SETTINGS, loadSettings, applyTheme, SettingsPanel });