/* global React, window */
// Violin Lab — Lesson: parts of the violin.
//
// Renders a simple labelled violin SVG with the most important parts
// students need to know by name: scroll, pegs, neck, fingerboard,
// bridge, f-holes, tailpiece, chinrest, body, bow (with frog + tip).

(function () {
  'use strict';
  window.ViolinLab = window.ViolinLab || {};
  window.ViolinLab.ui = window.ViolinLab.ui || {};

  const PARTS = [
    { id: 'scroll',      title: 'Scroll',      blurb: 'Decorative carved top of the violin.' },
    { id: 'pegs',        title: 'Pegs',        blurb: 'Wind to tune each string. Use them carefully — small turns.' },
    { id: 'nut',         title: 'Nut',         blurb: 'Small ridge where strings cross from the pegbox onto the fingerboard.' },
    { id: 'fingerboard', title: 'Fingerboard', blurb: 'Where your left-hand fingers press the strings.' },
    { id: 'bridge',      title: 'Bridge',      blurb: 'Wooden arch that holds strings off the body. Never glued — held by string tension.' },
    { id: 'fholes',      title: 'F-holes',     blurb: 'Sound holes shaped like an italic "f".' },
    { id: 'tailpiece',   title: 'Tailpiece',   blurb: 'Anchors the strings at the bottom; fine-tuners live here.' },
    { id: 'chinrest',    title: 'Chinrest',    blurb: 'Where your jaw rests while playing.' },
    { id: 'body',        title: 'Body',        blurb: 'The hollow wooden box that amplifies the strings.' },
    { id: 'frog',        title: 'Frog (bow)',  blurb: 'The end of the bow you hold; tightens/loosens the hair.' },
    { id: 'tip',         title: 'Tip (bow)',   blurb: 'The far end of the bow.' },
  ];

  const ViolinSVG = function (props) {
    const hoverId = props.hoverId;
    const setHoverId = props.setHoverId;

    function partProps(id) {
      const active = hoverId === id;
      return {
        onMouseEnter: function () { setHoverId(id); },
        onMouseLeave: function () { setHoverId(null); },
        onFocus: function () { setHoverId(id); },
        onBlur: function () { setHoverId(null); },
        style: { cursor: 'pointer', outline: 'none' },
        tabIndex: 0,
        'aria-label': PARTS.find(function (p) { return p.id === id; }).title,
        opacity: hoverId && !active ? 0.55 : 1,
      };
    }

    const body = 'oklch(50% 0.10 50)';
    const dark = 'oklch(28% 0.06 50)';

    return (
      <svg viewBox="0 0 400 540" width="100%" style={{ maxWidth: 360, height: 'auto', display: 'block', margin: '0 auto' }}>
        {/* Body */}
        <g {...partProps('body')}>
          <path
            d="M 200 470 C 250 470 290 430 285 360 C 280 330 268 320 268 290 C 268 270 280 260 280 240 C 280 200 250 180 235 180 C 220 180 215 175 215 165 L 215 130 C 215 122 215 118 210 118 L 190 118 C 185 118 185 122 185 130 L 185 165 C 185 175 180 180 165 180 C 150 180 120 200 120 240 C 120 260 132 270 132 290 C 132 320 120 330 115 360 C 110 430 150 470 200 470 Z"
            fill={body}
            stroke={dark}
            strokeWidth={2}
          />
        </g>

        {/* F-holes */}
        <g {...partProps('fholes')}>
          <path d="M 167 300 C 165 285 168 270 175 268 C 178 267 180 270 178 275 C 175 280 174 285 175 290 C 176 300 178 320 180 335 C 181 345 176 350 172 348 C 168 346 166 340 167 330 C 168 325 168 315 167 300 Z" fill={dark} />
          <path d="M 233 300 C 235 285 232 270 225 268 C 222 267 220 270 222 275 C 225 280 226 285 225 290 C 224 300 222 320 220 335 C 219 345 224 350 228 348 C 232 346 234 340 233 330 C 232 325 232 315 233 300 Z" fill={dark} />
        </g>

        {/* Bridge */}
        <g {...partProps('bridge')}>
          <path d="M 178 256 L 178 235 L 184 235 L 186 240 L 196 240 L 198 235 L 202 235 L 204 240 L 214 240 L 216 235 L 222 235 L 222 256 Z" fill="oklch(70% 0.05 60)" stroke={dark} strokeWidth={1.2} />
        </g>

        {/* Strings (visible from bridge to nut) */}
        <g {...partProps('nut')}>
          <line x1={194} y1={97} x2={194} y2={240} stroke="oklch(96% 0.01 60)" strokeWidth={1.2} />
          <line x1={199} y1={97} x2={199} y2={240} stroke="oklch(96% 0.01 60)" strokeWidth={1.0} />
          <line x1={204} y1={97} x2={204} y2={240} stroke="oklch(96% 0.01 60)" strokeWidth={0.9} />
          <line x1={209} y1={97} x2={209} y2={240} stroke="oklch(96% 0.01 60)" strokeWidth={0.8} />
          {/* Nut */}
          <rect x={189} y={95} width={26} height={4} fill="oklch(96% 0.01 60)" stroke={dark} strokeWidth={0.6} />
        </g>

        {/* Fingerboard */}
        <g {...partProps('fingerboard')}>
          <rect x={190} y={99} width={24} height={120} fill={dark} stroke="oklch(15% 0.03 50)" strokeWidth={1} />
        </g>

        {/* Neck (sides under fingerboard) */}
        <rect x={186} y={99} width={4} height={120} fill={body} stroke={dark} strokeWidth={1} />
        <rect x={214} y={99} width={4} height={120} fill={body} stroke={dark} strokeWidth={1} />

        {/* Pegbox + pegs */}
        <g {...partProps('pegs')}>
          <path d="M 188 60 L 216 60 L 215 95 L 189 95 Z" fill={body} stroke={dark} strokeWidth={1.4} />
          {/* 4 pegs (2 each side) */}
          <circle cx={184} cy={68} r={4.5} fill="oklch(15% 0.03 50)" />
          <circle cx={220} cy={68} r={4.5} fill="oklch(15% 0.03 50)" />
          <circle cx={184} cy={86} r={4.5} fill="oklch(15% 0.03 50)" />
          <circle cx={220} cy={86} r={4.5} fill="oklch(15% 0.03 50)" />
        </g>

        {/* Scroll */}
        <g {...partProps('scroll')}>
          <path d="M 202 35 C 195 35 188 43 188 52 C 188 57 192 62 202 62 C 212 62 216 57 216 52 C 216 43 209 35 202 35 Z" fill={body} stroke={dark} strokeWidth={1.4} />
          <circle cx={202} cy={50} r={4.5} fill={dark} />
        </g>

        {/* Chinrest */}
        <g {...partProps('chinrest')}>
          <ellipse cx={180} cy={440} rx={26} ry={16} fill={dark} stroke="oklch(15% 0.03 50)" strokeWidth={1.2} />
        </g>

        {/* Tailpiece */}
        <g {...partProps('tailpiece')}>
          <path d="M 184 256 L 216 256 L 222 320 L 178 320 Z" fill={dark} stroke="oklch(15% 0.03 50)" strokeWidth={1.2} />
        </g>

        {/* Bow above the violin */}
        <g {...partProps('frog')}>
          {/* Bow stick */}
          <line x1={20} y1={500} x2={380} y2={510} stroke="oklch(35% 0.04 60)" strokeWidth={3} strokeLinecap="round" />
          {/* Hair */}
          <line x1={28} y1={508} x2={372} y2={518} stroke="oklch(94% 0.01 60)" strokeWidth={1.5} />
          {/* Frog */}
          <rect x={14} y={498} width={20} height={14} rx={2} fill="oklch(15% 0.03 50)" stroke={dark} strokeWidth={1} />
        </g>
        <g {...partProps('tip')}>
          <rect x={372} y={504} width={14} height={10} rx={2} fill="oklch(94% 0.01 60)" stroke={dark} strokeWidth={1} />
        </g>
      </svg>
    );
  };

  const LessonAnatomy = function () {
    const [hoverId, setHoverId] = React.useState(null);
    const active = PARTS.find(function (p) { return p.id === hoverId; });

    return (
      <div>
        <div style={{ marginBottom: 16 }}>
          <div style={{ fontSize: 22, fontWeight: 700, color: 'oklch(18% 0.03 265)', marginBottom: 6 }}>Parts of the violin</div>
          <div style={{ fontSize: 13.5, color: 'oklch(40% 0.04 265)', lineHeight: 1.5 }}>Hover or tap any part of the violin or bow to read what it's called.</div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(220px, 380px) 1fr', gap: 24, alignItems: 'start' }}>
          <div style={{ background: 'oklch(96% 0.01 60)', borderRadius: 14, padding: 18 }}>
            <ViolinSVG hoverId={hoverId} setHoverId={setHoverId} />
          </div>

          <div>
            <div style={{
              background: '#fff',
              border: '1px solid oklch(92% 0.012 265)',
              borderRadius: 12,
              padding: '14px 18px',
              minHeight: 80,
              marginBottom: 16,
            }}>
              {active ? (
                <div>
                  <div style={{ fontSize: 11, color: 'oklch(55% 0.04 265)', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 4 }}>{active.title}</div>
                  <div style={{ fontSize: 14, color: 'oklch(22% 0.04 265)', lineHeight: 1.45 }}>{active.blurb}</div>
                </div>
              ) : (
                <div style={{ fontSize: 12.5, color: 'oklch(55% 0.04 265)' }}>Hover any part of the diagram.</div>
              )}
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 8 }}>
              {PARTS.map(function (p) {
                const on = hoverId === p.id;
                return (
                  <button
                    key={p.id}
                    onMouseEnter={function () { setHoverId(p.id); }}
                    onMouseLeave={function () { setHoverId(null); }}
                    onFocus={function () { setHoverId(p.id); }}
                    onBlur={function () { setHoverId(null); }}
                    style={{
                      padding: '8px 12px',
                      borderRadius: 8,
                      border: '1px solid ' + (on ? 'oklch(35% 0.16 265)' : 'oklch(92% 0.012 265)'),
                      background: on ? 'oklch(96% 0.04 265)' : '#fff',
                      color: on ? 'oklch(28% 0.1 265)' : 'oklch(40% 0.04 265)',
                      fontSize: 12.5,
                      fontWeight: 600,
                      cursor: 'pointer',
                      fontFamily: "'Plus Jakarta Sans', sans-serif",
                      textAlign: 'left',
                    }}
                  >{p.title}</button>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    );
  };

  window.ViolinLab.ui.LessonAnatomy = LessonAnatomy;
})();