// character-builder.jsx — the personalisable avatar customizer.
// Uses HSCChars3.build(config) for live previews of any combo.

const PARTS = window.HSCChars3 ? window.HSCChars3.parts : {};

// Display order for skin tones (light → deep)
const SKIN_ORDER = ['porcelain','fair','tan','bronze','deep','deepest'];
const HAIR_ORDER = ['black','brown','auburn','blond','grey','white','pink','teal','indigo','lavender'];

// Friendly names
const NAMES = {
  porcelain: 'Porcelain', fair: 'Fair', tan: 'Tan', bronze: 'Bronze', deep: 'Deep', deepest: 'Rich',
  black: 'Black', brown: 'Brown', auburn: 'Auburn', blond: 'Blond', grey: 'Grey', white: 'Silver',
  pink: 'Pink', teal: 'Teal', indigo: 'Indigo', lavender: 'Lavender',
  none: 'None',
  // hair styles
  wavyBob: 'Wavy bob', topknot: 'Top knot', longCurl: 'Long curl', undercut: 'Undercut',
  afro: 'Afro', shaggy: 'Shaggy', sideSwept: 'Side swept', crewCut: 'Crew cut',
  ponytail: 'Ponytail', bowl: 'Bowl', braids: 'Braids', locs: 'Locs', bun: 'Bun',
  pigtails: 'Pigtails', mohawk: 'Mohawk',
  // face
  roundGlasses: 'Round glasses', squareGlasses: 'Square glasses', goggles: 'Lab goggles',
  sunglasses: 'Sunglasses', monocle: 'Monocle', freckles: 'Freckles', beautyMark: 'Beauty mark', eyepatch: 'Eyepatch',
  // head
  cap: 'Cap', beanie: 'Beanie', headband: 'Headband', bow: 'Bow', hijab: 'Hijab',
  headphones: 'Headphones', halo: 'Halo', crown: 'Crown',
  // outfits
  tshirt: 'T-shirt', hoodie: 'Hoodie', labCoat: 'Lab coat', uniform: 'Uniform',
  jacket: 'Jacket', scarf: 'Scarf',
  // props
  atom: 'Atom', planet: 'Planet', flame: 'Flame', helix: 'DNA helix', pi: 'Pi', beaker: 'Beaker',
  leaf: 'Leaf', wave: 'Wave', pH: 'pH', cell: 'Cell', sigma: 'Sigma', prism: 'Prism',
  microscope: 'Microscope', magnifier: 'Magnifier', book: 'Book',
  // bg
  plum: 'Plum', rose: 'Rose', sage: 'Sage', gold: 'Gold', slate: 'Slate', teal: 'Teal',
  coral: 'Coral', blue: 'Blue', sand: 'Sand', mauve: 'Mauve', mint: 'Mint', char: 'Charcoal',
  // patterns
  stars: 'Stars', sparks: 'Sparks', leaves: 'Leaves', dots: 'Dots', grid: 'Grid',
  bubbles: 'Bubbles', waves: 'Waves', confetti: 'Confetti',
  // frames
  gold: 'Gold ring', rose: 'Rose ring', green: 'Mint ring', plum: 'Plum ring',
  silver: 'Silver', rainbow: 'Rainbow', pixel: 'Pixel',
  // moods
  smile: 'Smile', grin: 'Grin', focused: 'Focused', excited: 'Excited',
  smirk: 'Smirk', chill: 'Chill',
};
const nm = (k) => NAMES[k] || k;

// Category definitions
const CATS = [
  { id: 'skin',      label: 'Skin tone',     icon: '🎨', type: 'swatch',  options: SKIN_ORDER, palette: PARTS.skinTones },
  { id: 'hairStyle', label: 'Hair style',    icon: '✂️', type: 'tile',    options: Object.keys(PARTS.hairStyles || {}) },
  { id: 'hair',      label: 'Hair color',    icon: '🎨', type: 'swatch',  options: HAIR_ORDER, palette: PARTS.hairColors },
  { id: 'face',      label: 'Glasses & face', icon: '👓', type: 'tile',   options: Object.keys(PARTS.face || {}) },
  { id: 'head',      label: 'Headwear',      icon: '🎩', type: 'tile',    options: Object.keys(PARTS.head || {}) },
  { id: 'outfit',    label: 'Outfit',        icon: '👕', type: 'tile',    options: Object.keys(PARTS.outfit || {}) },
  { id: 'mood',      label: 'Expression',    icon: '🙂', type: 'tile',    options: Object.keys(PARTS.mood || {}) },
  { sep: true },
  { id: 'prop',      label: 'Science prop',  icon: '⚗️', type: 'tile',    options: Object.keys(PARTS.prop || {}) },
  { id: 'bg',        label: 'Background',    icon: '🌈', type: 'swatch',  options: Object.keys(PARTS.bg || {}), palette: PARTS.bg },
  { id: 'pattern',   label: 'Pattern',       icon: '✨', type: 'tile',    options: Object.keys(PARTS.pattern || {}) },
  { id: 'ring',      label: 'Frame',         icon: '⭕', type: 'tile',    options: Object.keys(PARTS.frame || {}) },
];

// Items that are "unlockable" rather than free
const LOCKED = new Set(['monocle','eyepatch','halo','crown','hijab','rainbow','pixel','char','locs','pigtails','mohawk']);
const COST = { monocle: 200, eyepatch: 300, halo: 800, crown: 1500, rainbow: 600, pixel: 400, char: 250, locs: 350, pigtails: 250, mohawk: 400, hijab: 0 };

// Presets (curated combos)
const PRESETS = [
  { name: 'Lab fox',      cfg: { skin:'tan', hair:'auburn', hairStyle:'longCurl', face:'goggles', head:'none', outfit:'labCoat', mood:'focused', prop:'beaker', bg:'rose', pattern:'sparks', ring:'gold' } },
  { name: 'Stargazer',    cfg: { skin:'fair', hair:'indigo', hairStyle:'wavyBob', face:'roundGlasses', head:'none', outfit:'hoodie', mood:'smile', prop:'planet', bg:'plum', pattern:'stars', ring:'none' } },
  { name: 'Field walker', cfg: { skin:'bronze', hair:'black', hairStyle:'crewCut', face:'none', head:'cap', outfit:'jacket', mood:'chill', prop:'leaf', bg:'sage', pattern:'leaves', ring:'green' } },
  { name: 'Mathlete',     cfg: { skin:'deep', hair:'black', hairStyle:'afro', face:'squareGlasses', head:'none', outfit:'tshirt', mood:'smile', prop:'pi', bg:'gold', pattern:'grid', ring:'none' } },
  { name: 'Wave rider',   cfg: { skin:'fair', hair:'pink', hairStyle:'sideSwept', face:'none', head:'headphones', outfit:'hoodie', mood:'excited', prop:'wave', bg:'mint', pattern:'waves', ring:'rose' } },
  { name: 'Bio dreamer',  cfg: { skin:'porcelain', hair:'blond', hairStyle:'ponytail', face:'freckles', head:'bow', outfit:'tshirt', mood:'smile', prop:'cell', bg:'coral', pattern:'bubbles', ring:'gold' } },
  { name: 'Statistician', cfg: { skin:'tan', hair:'black', hairStyle:'bowl', face:'roundGlasses', head:'none', outfit:'uniform', mood:'focused', prop:'sigma', bg:'slate', pattern:'dots', ring:'silver' } },
  { name: 'Optician',     cfg: { skin:'bronze', hair:'grey', hairStyle:'shaggy', face:'sunglasses', head:'beanie', outfit:'jacket', mood:'smirk', prop:'prism', bg:'gold', pattern:'sparks', ring:'rainbow' } },
];

function Char3({ config, size = 130 }) {
  if (!window.HSCChars3) return null;
  const html = window.HSCChars3.build(config, { size });
  return <span dangerouslySetInnerHTML={{ __html: html }} style={{ display: 'inline-block', lineHeight: 0 }}/>;
}

function CharacterBuilder() {
  const [config, setConfig] = React.useState({
    skin: 'tan', hair: 'auburn', hairStyle: 'longCurl',
    face: 'roundGlasses', head: 'none', outfit: 'labCoat',
    mood: 'smile', prop: 'beaker',
    bg: 'rose', pattern: 'sparks', ring: 'gold',
  });
  const [activeCat, setActiveCat] = React.useState('hairStyle');
  const [name, setName] = React.useState('Mira');

  const set = (k, v) => setConfig(c => ({ ...c, [k]: v }));

  const currentCat = CATS.find(c => c.id === activeCat);

  return (
    <div className="cb-wrap">
      {/* Left: customizer */}
      <div className="cb-left">
        {/* category nav */}
        <nav className="cb-cats">
          <h3>YOU</h3>
          {CATS.map((c, i) => c.sep ? (
            <div key={i} className="cb-cat-sep"/>
          ) : (
            <div key={c.id}
              className={`cb-cat ${activeCat === c.id ? 'active' : ''}`}
              onClick={() => setActiveCat(c.id)}>
              <span className="cb-cat-ic">{c.icon}</span>
              <span>{c.label}</span>
              <span className="cb-cat-val">{(nm(config[c.id]) || '—').slice(0, 8)}</span>
            </div>
          ))}
        </nav>

        {/* picker */}
        <div className="cb-pick">
          <div className="cb-pick-head">
            <div>
              <h2><small>STEP · {currentCat.label}</small>Pick your {currentCat.label.toLowerCase()}</h2>
            </div>
            <div className="cb-pick-count">{currentCat.options.length} options</div>
          </div>

          {LOCKED.has(config[activeCat]) && (
            <div className="cb-unlock-row">
              <Icon name="bolt"/>
              <span><strong>{nm(config[activeCat])}</strong> is a premium item — owned because you're on <strong>Class</strong>. Top up coins to unlock more.</span>
            </div>
          )}

          {currentCat.type === 'swatch' ? (
            <div className="cb-swatches" style={{ marginBottom: 18 }}>
              {currentCat.options.map(opt => {
                const isActive = config[activeCat] === opt;
                return (
                  <div key={opt}
                    className={`cb-sw ${isActive ? 'active' : ''}`}
                    style={{ background: currentCat.palette[opt] }}
                    onClick={() => set(activeCat, opt)}
                    title={nm(opt)}>
                    {isActive && <div className="cb-sw-tick"><Icon name="check"/></div>}
                    <div className="cb-sw-name">{nm(opt)}</div>
                  </div>
                );
              })}
            </div>
          ) : (
            <div className="cb-tiles">
              {currentCat.options.map(opt => {
                const isActive = config[activeCat] === opt;
                const isLocked = LOCKED.has(opt);
                // tiny preview — keep base avatar, only swap the category
                const previewCfg = { ...config, [activeCat]: opt };
                return (
                  <div key={opt}
                    className={`cb-tile ${isActive ? 'active' : ''}`}
                    onClick={() => set(activeCat, opt)}>
                    <Char3 config={previewCfg} size={120}/>
                    {isLocked && !isActive && (
                      <span className="cb-tile-cost">⚡ {COST[opt] || 200}</span>
                    )}
                    <div className="cb-tile-name">{nm(opt)}</div>
                  </div>
                );
              })}
            </div>
          )}
        </div>

        {/* live preview */}
        <div className="cb-preview">
          <div className="cb-preview-head">
            <span className="cb-preview-eye"><Icon name="sparkles"/> Your avatar · live</span>
          </div>

          <div className="cb-preview-big">
            <Char3 config={config} size={280}/>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
            <div className="cb-name-row">
              <input className="cb-name-input"
                value={name}
                onChange={e => setName(e.target.value)}/>
              <button className="cb-name-pencil"><Icon name="pencil"/></button>
            </div>

            <div className="cb-sizes">
              <div className="cb-size-card">
                <Char3 config={config} size={64}/>
                <div className="cb-size-lbl">64 · Profile</div>
              </div>
              <div className="cb-size-card">
                <Char3 config={config} size={40}/>
                <div className="cb-size-lbl">40 · Cards</div>
              </div>
              <div className="cb-size-card">
                <Char3 config={config} size={28}/>
                <div className="cb-size-lbl">28 · Lists</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Right: summary + presets + actions */}
      <aside className="cb-right">
        <div className="cb-r-head">
          <div className="cb-r-head-eye">★ YOUR LOOK</div>
          <h2>{name}</h2>
          <p>This is what shows up on every leaderboard, quiz row and focus room. Change anytime — your XP and stats stay with you.</p>
        </div>

        <div className="cb-balance">
          <div className="cb-bal">
            <div className="cb-bal-num"><Icon name="bolt"/> 1,840</div>
            <div className="cb-bal-lbl">Your coins</div>
          </div>
          <div className="cb-bal">
            <div className="cb-bal-num">8 / 24</div>
            <div className="cb-bal-lbl">Unlocked items</div>
          </div>
        </div>

        <div className="cb-summary">
          <h3>Current build</h3>
          <div className="cb-summary-row">
            <span className="cb-summary-key">Skin tone</span>
            <span className="cb-summary-val"><span className="sw" style={{ background: PARTS.skinTones[config.skin] }}/>{nm(config.skin)}</span>
          </div>
          <div className="cb-summary-row">
            <span className="cb-summary-key">Hair</span>
            <span className="cb-summary-val"><span className="sw" style={{ background: PARTS.hairColors[config.hair] }}/>{nm(config.hair)} · {nm(config.hairStyle)}</span>
          </div>
          <div className="cb-summary-row">
            <span className="cb-summary-key">Face</span>
            <span className="cb-summary-val">{nm(config.face)} · {nm(config.mood)}</span>
          </div>
          <div className="cb-summary-row">
            <span className="cb-summary-key">Headwear</span>
            <span className="cb-summary-val">{nm(config.head)}</span>
          </div>
          <div className="cb-summary-row">
            <span className="cb-summary-key">Outfit</span>
            <span className="cb-summary-val">{nm(config.outfit)}</span>
          </div>
          <div className="cb-summary-row">
            <span className="cb-summary-key">Prop</span>
            <span className="cb-summary-val">{nm(config.prop)}</span>
          </div>
          <div className="cb-summary-row">
            <span className="cb-summary-key">Backdrop</span>
            <span className="cb-summary-val"><span className="sw" style={{ background: PARTS.bg[config.bg] }}/>{nm(config.bg)} · {nm(config.pattern)}</span>
          </div>
          <div className="cb-summary-row">
            <span className="cb-summary-key">Frame</span>
            <span className="cb-summary-val">{nm(config.ring)}</span>
          </div>

          <div className="cb-presets">
            <h3 style={{ marginTop: 18 }}>Try a preset</h3>
            <div className="cb-presets-grid">
              {PRESETS.map((p, i) => (
                <div key={i} className="cb-preset"
                  onClick={() => setConfig(p.cfg)}
                  title={p.name}>
                  <Char3 config={p.cfg} size={72}/>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="cb-actions">
          <button className="cb-cta">
            <Icon name="check"/> Save my avatar
          </button>
          <div className="cb-cta-row">
            <button className="cb-cta ghost sm"><Icon name="sparkles"/> Random</button>
            <button className="cb-cta ghost sm"><Icon name="share"/> Share</button>
            <button className="cb-cta ghost sm"><Icon name="bolt"/> Shop</button>
          </div>
        </div>
      </aside>
    </div>
  );
}