// 先生キャラクター — 丸顔 + 表情アニメ
// 3案: "round"（シンプル丸顔）, "owl"（フクロウ博士）, "blob"（ブロブ型）
const { useEffect, useRef, useState } = React;

function RoundTeacher({ emotion = 'idle', talking = false, size = 180 }) {
  // 表情パラメータ
  const eyes = {
    idle:    { lid: 0, pupil: [0,0], brow: 0 },
    happy:   { lid: 0.55, pupil: [0,0], brow: -2 },
    think:   { lid: 0.1, pupil: [3,-1], brow: 4 },
    praise:  { lid: 0.6, pupil: [0,-1], brow: -3 },
    hint:    { lid: 0.1, pupil: [-3,0], brow: 2 },
    surprise:{ lid: 0, pupil: [0,0], brow: -5 },
  }[emotion] || { lid: 0, pupil: [0,0], brow: 0 };

  return (
    <svg viewBox="-100 -100 200 200" width={size} height={size} style={{ overflow: 'visible', animation: talking ? 'bob 1.4s ease-in-out infinite' : 'float-y 4s ease-in-out infinite' }}>
      {/* 髪（ふわっと） */}
      <path d="M -70 -30 Q -85 -75 -40 -85 Q -10 -105 20 -92 Q 65 -90 70 -50 Q 75 -20 68 -5 Q 40 -55 0 -58 Q -38 -55 -68 -5 Q -78 -18 -70 -30 Z"
        fill="#5a4330" stroke="#3d2d20" strokeWidth="2" strokeLinejoin="round"/>

      {/* 顔 */}
      <ellipse cx="0" cy="5" rx="62" ry="66" fill="#f7d9b8" stroke="#3d2d20" strokeWidth="2.5"/>

      {/* ほっぺ */}
      <ellipse cx="-35" cy="22" rx="12" ry="7" fill="#f2a88b" opacity="0.7"/>
      <ellipse cx="35" cy="22" rx="12" ry="7" fill="#f2a88b" opacity="0.7"/>

      {/* 眉毛 */}
      <path d={`M -40 ${-18 + eyes.brow} Q -25 ${-22 + eyes.brow} -12 ${-18 + eyes.brow}`} stroke="#3d2d20" strokeWidth="3.5" fill="none" strokeLinecap="round"/>
      <path d={`M 12 ${-18 + eyes.brow} Q 25 ${-22 + eyes.brow} 40 ${-18 + eyes.brow}`} stroke="#3d2d20" strokeWidth="3.5" fill="none" strokeLinecap="round"/>

      {/* 目 */}
      <g style={{ animation: 'blink 5s infinite' }}>
        <g transform={`translate(-25,0)`}>
          <ellipse cx="0" cy="0" rx="8" ry={8 * (1 - eyes.lid)} fill="#3d2d20"/>
          <circle cx={2 + eyes.pupil[0]*0.3} cy={-2 + eyes.pupil[1]*0.3} r="2.2" fill="#fff"/>
        </g>
        <g transform={`translate(25,0)`}>
          <ellipse cx="0" cy="0" rx="8" ry={8 * (1 - eyes.lid)} fill="#3d2d20"/>
          <circle cx={2 + eyes.pupil[0]*0.3} cy={-2 + eyes.pupil[1]*0.3} r="2.2" fill="#fff"/>
        </g>
      </g>

      {/* メガネ */}
      <g stroke="#3d2d20" strokeWidth="2" fill="none" opacity="0.85">
        <ellipse cx="-25" cy="0" rx="16" ry="13"/>
        <ellipse cx="25" cy="0" rx="16" ry="13"/>
        <line x1="-9" y1="0" x2="9" y2="0"/>
      </g>

      {/* 口 */}
      {talking ? (
        <ellipse cx="0" cy="30" rx="7" ry={emotion === 'surprise' ? 9 : 5} fill="#6b3524" style={{ animation: 'mouth-talk 0.35s infinite' }}/>
      ) : emotion === 'happy' || emotion === 'praise' ? (
        <path d="M -12 28 Q 0 40 12 28" stroke="#3d2d20" strokeWidth="3" fill="#ba6850" strokeLinecap="round"/>
      ) : emotion === 'surprise' ? (
        <ellipse cx="0" cy="32" rx="5" ry="7" fill="#6b3524"/>
      ) : (
        <path d="M -10 30 Q 0 34 10 30" stroke="#3d2d20" strokeWidth="3" fill="none" strokeLinecap="round"/>
      )}
    </svg>
  );
}

function OwlTeacher({ emotion = 'idle', talking = false, size = 180 }) {
  const eyes = {
    idle:    { lid: 0, pupil: [0,0] },
    happy:   { lid: 0.7, pupil: [0,0] },
    think:   { lid: 0.2, pupil: [4,-2] },
    praise:  { lid: 0.7, pupil: [0,-1] },
    hint:    { lid: 0.1, pupil: [-4,0] },
    surprise:{ lid: 0, pupil: [0,0] },
  }[emotion] || { lid: 0, pupil: [0,0] };

  return (
    <svg viewBox="-100 -100 200 200" width={size} height={size} style={{ overflow: 'visible', animation: talking ? 'bob 1.4s ease-in-out infinite' : 'float-y 4s ease-in-out infinite' }}>
      {/* 卒業帽 */}
      <g transform="translate(0,-70)">
        <rect x="-45" y="-8" width="90" height="8" fill="#2d2418"/>
        <polygon points="-55,-8 55,-8 45,-20 -45,-20" fill="#2d2418"/>
        <circle cx="0" cy="-14" r="3" fill="#c84a3b"/>
        <path d="M 0 -14 Q 20 -10 25 10" stroke="#c84a3b" strokeWidth="2" fill="none"/>
      </g>
      {/* 体 */}
      <ellipse cx="0" cy="15" rx="70" ry="70" fill="#b88a5a" stroke="#2d2418" strokeWidth="2.5"/>
      {/* お腹の白 */}
      <ellipse cx="0" cy="30" rx="40" ry="40" fill="#f0dcb6"/>
      {/* 羽根の模様 */}
      <path d="M -60 10 Q -55 25 -60 40" stroke="#8a6237" strokeWidth="2" fill="none"/>
      <path d="M 60 10 Q 55 25 60 40" stroke="#8a6237" strokeWidth="2" fill="none"/>

      {/* 目の周り（丸くて大きい） */}
      <circle cx="-22" cy="-5" r="24" fill="#f6eed8" stroke="#2d2418" strokeWidth="2"/>
      <circle cx="22" cy="-5" r="24" fill="#f6eed8" stroke="#2d2418" strokeWidth="2"/>

      {/* 目 */}
      <g style={{ animation: 'blink 5s infinite' }}>
        <ellipse cx="-22" cy="-5" rx="11" ry={11 * (1 - eyes.lid)} fill="#2d2418"/>
        <circle cx={-22 + 3 + eyes.pupil[0]*0.3} cy={-5 - 3 + eyes.pupil[1]*0.3} r="3" fill="#fff"/>
        <ellipse cx="22" cy="-5" rx="11" ry={11 * (1 - eyes.lid)} fill="#2d2418"/>
        <circle cx={22 + 3 + eyes.pupil[0]*0.3} cy={-5 - 3 + eyes.pupil[1]*0.3} r="3" fill="#fff"/>
      </g>

      {/* くちばし */}
      {talking ? (
        <polygon points="-7,20 7,20 0,35" fill="#d79a3b" stroke="#2d2418" strokeWidth="2" style={{ transformOrigin: 'center top', animation: 'mouth-talk 0.35s infinite' }}/>
      ) : (
        <polygon points="-6,20 6,20 0,32" fill="#d79a3b" stroke="#2d2418" strokeWidth="2"/>
      )}

      {/* 蝶ネクタイ */}
      <g transform="translate(0,72)">
        <polygon points="-18,-6 -18,6 0,0" fill="#c84a3b"/>
        <polygon points="18,-6 18,6 0,0" fill="#c84a3b"/>
        <rect x="-3" y="-4" width="6" height="8" fill="#9a3528"/>
      </g>
    </svg>
  );
}

function BlobTeacher({ emotion = 'idle', talking = false, size = 180 }) {
  const eyes = {
    idle:    { lid: 0, pupil: [0,0] },
    happy:   { lid: 0.8, pupil: [0,0] },
    think:   { lid: 0.15, pupil: [3,-1] },
    praise:  { lid: 0.8, pupil: [0,0] },
    hint:    { lid: 0.1, pupil: [-3,0] },
    surprise:{ lid: 0, pupil: [0,0] },
  }[emotion] || { lid: 0, pupil: [0,0] };

  return (
    <svg viewBox="-100 -100 200 200" width={size} height={size} style={{ overflow: 'visible', animation: talking ? 'bob 1.4s ease-in-out infinite' : 'float-y 4s ease-in-out infinite' }}>
      {/* ブロブ本体 */}
      <path d="M 0 -75 Q 60 -70 72 -20 Q 85 30 55 65 Q 15 85 -25 75 Q -70 60 -78 15 Q -85 -35 -55 -60 Q -30 -78 0 -75 Z"
        fill="#e88a6a" stroke="#2d2418" strokeWidth="2.5"/>

      {/* ハイライト */}
      <ellipse cx="-35" cy="-35" rx="18" ry="10" fill="#f7b59a" opacity="0.7"/>

      {/* ほっぺ */}
      <ellipse cx="-42" cy="20" rx="10" ry="6" fill="#c84a3b" opacity="0.5"/>
      <ellipse cx="42" cy="20" rx="10" ry="6" fill="#c84a3b" opacity="0.5"/>

      {/* 目 */}
      <g style={{ animation: 'blink 5s infinite' }}>
        <ellipse cx="-22" cy="-8" rx="9" ry={9 * (1 - eyes.lid)} fill="#2d2418"/>
        <circle cx={-22 + 2 + eyes.pupil[0]*0.3} cy={-8 - 2 + eyes.pupil[1]*0.3} r="2.5" fill="#fff"/>
        <ellipse cx="22" cy="-8" rx="9" ry={9 * (1 - eyes.lid)} fill="#2d2418"/>
        <circle cx={22 + 2 + eyes.pupil[0]*0.3} cy={-8 - 2 + eyes.pupil[1]*0.3} r="2.5" fill="#fff"/>
      </g>

      {/* 口 */}
      {talking ? (
        <ellipse cx="0" cy="25" rx="8" ry={emotion === 'surprise' ? 10 : 5} fill="#6b3524" style={{ animation: 'mouth-talk 0.35s infinite' }}/>
      ) : emotion === 'happy' || emotion === 'praise' ? (
        <path d="M -14 22 Q 0 36 14 22" stroke="#2d2418" strokeWidth="3" fill="#6b3524" strokeLinecap="round"/>
      ) : (
        <path d="M -10 25 Q 0 30 10 25" stroke="#2d2418" strokeWidth="3" fill="none" strokeLinecap="round"/>
      )}
    </svg>
  );
}

function Teacher({ variant = 'round', emotion = 'idle', talking = false, size = 180 }) {
  const C = variant === 'owl' ? OwlTeacher : variant === 'blob' ? BlobTeacher : RoundTeacher;
  return <C emotion={emotion} talking={talking} size={size} />;
}

Object.assign(window, { Teacher, RoundTeacher, OwlTeacher, BlobTeacher });