// components/models.jsx — copied from mastermind-v2/components/models.jsx
// Source of truth: https://github.com/itonsberg/mahana-mastermind-chat
// Adjusted icon paths for this project's layout.

const MODELS = [
  { id: 'claude',   name: 'Claude',   org: 'Anthropic',         icon: '../assets/models/anthropic.svg',        color: '#D97757', bg: '#FAF2EC', voice: 'warm, careful, long-form',  persona: 'the philosopher' },
  { id: 'gpt',      name: 'GPT-5',    org: 'OpenAI',            icon: '../assets/models/openai.svg',           color: '#10A37F', bg: '#EFF8F4', voice: 'versatile, crisp',          persona: 'the generalist' },
  { id: 'gemini',   name: 'Gemini',   org: 'Google',            icon: '../assets/models/gemini-wordmark.svg',  color: '#4B8BF5', bg: '#EEF3FD', voice: 'multimodal, fast',          persona: 'the polymath', iconMode: 'wordmark' },
  { id: 'grok',     name: 'Grok',     org: 'xAI',               icon: '../assets/models/xai.svg',              color: '#111111', bg: '#F1F1F1', voice: 'blunt, witty',              persona: 'the contrarian' },
  { id: 'qwen',     name: 'Qwen',     org: 'Alibaba',           icon: '../assets/models/qwen.svg',             color: '#615CED', bg: '#EEEDFD', voice: 'technical, multilingual',   persona: 'the linguist' },
  { id: 'deepseek', name: 'DeepSeek', org: 'DeepSeek',          icon: '../assets/models/deepseek.svg',         color: '#4D6BFE', bg: '#ECEFFF', voice: 'analytical, math-first',    persona: 'the analyst' },
  { id: 'kimi',     name: 'Kimi',     org: 'Moonshot',          icon: '../assets/models/kimi.svg',             color: '#111111', bg: '#EDEDED', voice: 'long-context reader',       persona: 'the archivist' },
  { id: 'meta',     name: 'Llama',    org: 'Meta AI',           icon: '../assets/models/meta.svg',             color: '#0668E1', bg: '#E8F0FD', voice: 'open, fast',                persona: 'the open one' },
  { id: 'bfl',      name: 'Flux',     org: 'Black Forest Labs', icon: '../assets/models/bfl.svg',              color: '#111111', bg: '#EDEDED', voice: 'image specialist',          persona: 'the visualist' },
  { id: 'minimax',  name: 'MiniMax',  org: 'MiniMax',           icon: '../assets/models/minimax.svg',          color: '#F25A38', bg: '#FCEEEA', voice: 'creative, fast',            persona: 'the improviser' },
];

const MAHANA_GRADIENT = ['#FFB359', '#FF7A8A', '#E86CC7', '#8B7BFF', '#6FD8FF'];
const MAHANA_GRADIENT_CSS = `linear-gradient(135deg, #FFB359 0%, #FF7A8A 25%, #E86CC7 50%, #8B7BFF 75%, #6FD8FF 100%)`;

const MODELS_BY_ID = Object.fromEntries(MODELS.map(m => [m.id, m]));

function ModelGlyph({ model, size = 24, color }) {
  const m = typeof model === 'string' ? MODELS_BY_ID[model] : model;
  if (!m) return null;
  if (m.iconMode === 'wordmark') {
    return (
      <img src={m.icon} alt={m.name}
        style={{ width: size * 1.6, height: size * 0.6, objectFit: 'contain', flexShrink: 0 }} />
    );
  }
  return (
    <span style={{
      display: 'inline-block',
      width: size, height: size,
      background: color || m.color,
      WebkitMaskImage: `url(${m.icon})`,
      maskImage: `url(${m.icon})`,
      WebkitMaskSize: 'contain', maskSize: 'contain',
      WebkitMaskRepeat: 'no-repeat', maskRepeat: 'no-repeat',
      WebkitMaskPosition: 'center', maskPosition: 'center',
      flexShrink: 0,
    }} />
  );
}

function ModelMark({ model, size = 24, ring = false, style = {} }) {
  const m = typeof model === 'string' ? MODELS_BY_ID[model] : model;
  if (!m) return null;
  const pad = size * 0.22;
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%', background: m.bg,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0, position: 'relative',
      boxShadow: ring ? `0 0 0 2px ${m.color}, 0 0 0 4px ${m.bg}` : `inset 0 0 0 1px rgba(0,0,0,0.06)`,
      ...style,
    }}>
      <img src={m.icon} alt={m.name}
        style={{ width: size - pad*2, height: size - pad*2, objectFit: 'contain' }} />
    </div>
  );
}

function ModelChip({ model, size = 28, ring = false, style = {} }) {
  const m = typeof model === 'string' ? MODELS_BY_ID[model] : model;
  if (!m) return null;
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%', background: m.bg,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0, position: 'relative',
      boxShadow: ring
        ? `0 0 0 1.5px ${m.color}, 0 0 0 3px rgba(255,255,255,0.8)`
        : `inset 0 0 0 1px rgba(0,0,0,0.06)`,
      ...style,
    }}>
      <ModelGlyph model={m} size={size * 0.55} />
    </div>
  );
}

function MorphingAvatar({ size = 40, modelIds, speed = 900, active = true, ring = true }) {
  const [idx, setIdx] = React.useState(0);
  const list = (modelIds && modelIds.length) ? modelIds : MODELS.slice(0, 6).map(m => m.id);
  React.useEffect(() => {
    if (!active || list.length < 2) return;
    const t = setInterval(() => setIdx(i => (i + 1) % list.length), speed);
    return () => clearInterval(t);
  }, [active, speed, list.length]);
  const current = list[idx % list.length];
  const next = list[(idx + 1) % list.length];
  const m = MODELS_BY_ID[current];
  const mNext = MODELS_BY_ID[next];
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      position: 'relative', flexShrink: 0,
      background: `conic-gradient(from 0deg, ${MAHANA_GRADIENT.join(', ')}, ${MAHANA_GRADIENT[0]})`,
      padding: 2,
      boxShadow: ring ? '0 6px 20px rgba(255, 45, 180, 0.25), 0 2px 6px rgba(0,0,0,0.08)' : 'none',
    }}>
      <div style={{ width: '100%', height: '100%', borderRadius: '50%',
        background: '#fff', position: 'relative', overflow: 'hidden',
        display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ position: 'absolute', inset: 0,
          background: `radial-gradient(circle at 30% 30%, ${m?.color}22, transparent 60%),
                       radial-gradient(circle at 70% 70%, ${mNext?.color}22, transparent 60%)`,
          transition: 'background 500ms ease' }} />
        <div key={current} style={{ position: 'absolute', inset: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          animation: `mm-fade ${speed}ms ease-in-out both` }}>
          <ModelGlyph model={m} size={size * 0.5} />
        </div>
      </div>
    </div>
  );
}

if (typeof document !== 'undefined' && !document.getElementById('mm-morph-keyframes')) {
  const s = document.createElement('style');
  s.id = 'mm-morph-keyframes';
  s.textContent = `
    @keyframes mm-fade {
      0%   { opacity: 0; transform: scale(0.7); filter: blur(6px); }
      30%  { opacity: 1; transform: scale(1); filter: blur(0); }
      85%  { opacity: 1; transform: scale(1); filter: blur(0); }
      100% { opacity: 0; transform: scale(1.15); filter: blur(6px); }
    }
  `;
  document.head.appendChild(s);
}

Object.assign(window, { MODELS, MODELS_BY_ID, MAHANA_GRADIENT, MAHANA_GRADIENT_CSS,
                        ModelMark, ModelChip, ModelGlyph, MorphingAvatar });