// buddy.jsx — the Desk Genie itself.
// A simple LED-glow pet drawn from primitive shapes (circles/rects only).
// Renders different expressions + ring colors per state, with CSS animations
// for breathing, bobbing, blinking and the jump on completion.

const STATE_PRESETS = {
  thinking: {
    label: 'THINKING',
    code: 'STATE_001',
    ring: '#ff9a3c',
    accent: '#ff5c1a',
    msg: 'Reasoning · 14 tokens/s',
  },
  waiting: {
    label: 'WAITING_FOR_INPUT',
    code: 'STATE_002',
    ring: '#3b6dff',
    accent: '#3b6dff',
    msg: 'Standing by for prompt',
  },
  done: {
    label: 'TASK_COMPLETE',
    code: 'STATE_003',
    ring: '#1f8a5b',
    accent: '#1f8a5b',
    msg: 'Reply ready · review on screen',
  },
  idle: {
    label: 'IDLE',
    code: 'STATE_004',
    ring: '#9a958a',
    accent: '#9a958a',
    msg: 'Sleeping · tap to wake',
  },
  error: {
    label: 'ATTENTION_REQUIRED',
    code: 'STATE_005',
    ring: '#e94b3c',
    accent: '#e94b3c',
    msg: 'Connection dropped · check Wi-Fi',
  },
};

// Eye renderers for each state. All built from rects + ellipses only.
function Eyes({ state, color }) {
  // Base eye position
  const left = 70, right = 110, y = 66;
  if (state === 'done') {
    // ^_^ smile — two arcs as rotated rounded rects
    return (
      <g fill="none" stroke={color} strokeWidth="5" strokeLinecap="round">
        <path d={`M ${left - 8} ${y + 4} Q ${left} ${y - 8} ${left + 8} ${y + 4}`} />
        <path d={`M ${right - 8} ${y + 4} Q ${right} ${y - 8} ${right + 8} ${y + 4}`} />
      </g>
    );
  }
  if (state === 'idle') {
    // -_- sleepy — flat lines
    return (
      <g stroke={color} strokeWidth="5" strokeLinecap="round">
        <line x1={left - 7} y1={y} x2={left + 7} y2={y} />
        <line x1={right - 7} y1={y} x2={right + 7} y2={y} />
      </g>
    );
  }
  if (state === 'error') {
    // x_x — crossed lines
    return (
      <g stroke={color} strokeWidth="5" strokeLinecap="round">
        <line x1={left - 6} y1={y - 6} x2={left + 6} y2={y + 6} />
        <line x1={left - 6} y1={y + 6} x2={left + 6} y2={y - 6} />
        <line x1={right - 6} y1={y - 6} x2={right + 6} y2={y + 6} />
        <line x1={right - 6} y1={y + 6} x2={right + 6} y2={y - 6} />
      </g>
    );
  }
  if (state === 'waiting') {
    // o_o open round eyes (with subtle blink animation via CSS)
    return (
      <g fill={color} className="dg-eyes-blink">
        <ellipse cx={left} cy={y} rx="5" ry="6" />
        <ellipse cx={right} cy={y} rx="5" ry="6" />
      </g>
    );
  }
  // thinking — narrow thinking eyes scanning
  return (
    <g fill={color} className="dg-eyes-scan">
      <rect x={left - 6} y={y - 4} width="12" height="8" rx="3" />
      <rect x={right - 6} y={y - 4} width="12" height="8" rx="3" />
    </g>
  );
}

function ThinkingDots({ visible, color }) {
  if (!visible) return null;
  return (
    <g className="dg-think-dots" fill={color}>
      <circle cx="142" cy="36" r="3.5" className="dg-dot dg-dot-1" />
      <circle cx="156" cy="32" r="3.5" className="dg-dot dg-dot-2" />
      <circle cx="170" cy="28" r="3.5" className="dg-dot dg-dot-3" />
    </g>
  );
}

// Pad swatches (the swappable surfaces) — drawn as small chips
const PADS = [
  { id: 'oat',     name: 'OAT',     fill: '#e9e3d4', stroke: '#d6cfb8' },
  { id: 'ink',     name: 'INK',     fill: '#1a1a1c', stroke: '#000' },
  { id: 'rust',    name: 'RUST',    fill: '#d04a1f', stroke: '#a8391a' },
  { id: 'moss',    name: 'MOSS',    fill: '#5b6e3a', stroke: '#43522a' },
  { id: 'lake',    name: 'LAKE',    fill: '#3b6dff', stroke: '#2a52c2' },
  { id: 'paper',   name: 'PAPER',   fill: '#fafaf6', stroke: '#dad6c8' },
];

function Buddy({ state = 'idle', padId = 'oat', size = 320, jump = false, accent = '#ff5c1a' }) {
  const preset = STATE_PRESETS[state] || STATE_PRESETS.idle;
  const pad = PADS.find((p) => p.id === padId) || PADS[0];
  // Body color follows the pad (so swap is visible). Eye/highlight color contrasts.
  const bodyDark = ['ink', 'rust', 'moss', 'lake'].includes(padId);
  const eyeColor = bodyDark ? '#ffffff' : '#1a1a1c';
  const bodyHi = bodyDark ? 'rgba(255,255,255,.18)' : 'rgba(255,255,255,.55)';
  const ringColor = preset.ring;

  return (
    <div
      className={[
        'dg-buddy',
        `dg-state-${state}`,
        jump ? 'dg-jumping' : '',
      ].join(' ')}
      style={{ width: size, height: size, '--dg-ring': ringColor, '--dg-accent': accent }}
    >
      {/* Soft floor shadow */}
      <div className="dg-shadow" />

      {/* The actual character */}
      <svg
        viewBox="0 0 200 200"
        className="dg-svg"
        xmlns="http://www.w3.org/2000/svg"
      >
        {/* LED ring — glow halo behind base */}
        <ellipse cx="100" cy="155" rx="62" ry="14" fill={ringColor} opacity=".22" className="dg-ring-glow" />
        <ellipse cx="100" cy="155" rx="48" ry="9" fill={ringColor} opacity=".55" className="dg-ring-mid" />
        <ellipse cx="100" cy="155" rx="36" ry="5" fill={ringColor} className="dg-ring-core" />

        {/* Base (the swappable PAD) */}
        <g className="dg-pad">
          <rect x="48" y="148" width="104" height="14" rx="7" fill={pad.fill} stroke={pad.stroke} strokeWidth="1" />
          <rect x="48" y="148" width="104" height="3" rx="1.5" fill={bodyHi} />
        </g>

        {/* Body — bobbing/jumping group */}
        <g className="dg-body">
          {/* Antenna */}
          <line x1="100" y1="20" x2="100" y2="36" stroke={pad.fill} strokeWidth="2" />
          <circle cx="100" cy="18" r="3.5" fill={ringColor} className="dg-antenna-tip" />

          {/* Main dome — rounded squircle */}
          <rect x="42" y="38" width="116" height="108" rx="42" fill={pad.fill} stroke={pad.stroke} strokeWidth="1.5" />
          {/* Top highlight */}
          <rect x="56" y="46" width="88" height="14" rx="7" fill={bodyHi} opacity=".7" />
          {/* Lower contour shadow */}
          <rect x="42" y="120" width="116" height="26" rx="22" fill="rgba(0,0,0,.06)" />

          {/* Screen window — where the eyes live */}
          <rect x="58" y="56" width="84" height="36" rx="14" fill={bodyDark ? '#0a0a0c' : '#1a1a1c'} />
          <rect x="60" y="58" width="80" height="3" rx="1.5" fill="rgba(255,255,255,.08)" />

          {/* Eyes */}
          <Eyes state={state} color={'#ffffff'} />

          {/* Cheek dot — tiny status LED on body */}
          <circle cx="138" cy="108" r="3" fill={ringColor} className="dg-cheek" />

          {/* Thinking dots floating up beside the buddy */}
          <ThinkingDots visible={state === 'thinking'} color={ringColor} />
        </g>
      </svg>
    </div>
  );
}

window.Buddy = Buddy;
window.BUDDY_STATES = ['thinking', 'waiting', 'done', 'idle', 'error'];
window.BUDDY_PADS = PADS;
window.STATE_PRESETS = STATE_PRESETS;