import React, { useState } from 'react';

// 1. CORE DATA: กำหนดข้อมูลคอร์ด (ข้อมูลตำแหน่งนิ้ว เฟรตที่ 1-6)
// ตัวอย่าง: [สาย6, สาย5, สาย4, สาย3, สาย2, สาย1], 0 = สายเปิด
const CHORD_LIBRARY = {
  'Cm': { fingers: [3, 1, 0, 1, 3], label: 'Cm' },
  'Bb': { fingers: [1, 1, 3, 3, 1], label: 'Bb' },
  'Ab': { fingers: [4, 3, 1, 2, 1], label: 'Ab' },
  'Fm': { fingers: [1, 3, 3, 1, 1], label: 'Fm' },
  'Gm': { fingers: [3, 5, 5, 3, 3], label: 'Gm' },
};

export default function GuitarChordApp() {
  // 2. CORE STATE: สถานะ "คอร์ดปัจจุบัน"
  const [selectedChord, setSelectedChord] = useState('Cm');

  // Logic สำหรับเปลี่ยนคอร์ด
  const handleChordClick = (chordKey) => {
    setSelectedChord(chordKey);
  };

  // 3. CORE UI PART 1: Chord Grid (ปุ่มตารางคอร์ด)
  return (
    <div style={{ padding: '20px', background: '#1a1a1a', color: 'white', maxWidth: '500px', fontFamily: 'sans-serif' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '10px', marginBottom: '20px' }}>
        {Object.keys(CHORD_LIBRARY).map((chord) => (
          <button
            key={chord}
            onClick={() => handleChordClick(chord)}
            style={{
              padding: '15px', background: selectedChord === chord ? '#3a3a3a' : '#2a2a2a',
              border: selectedChord === chord ? '2px solid white' : '1px solid #444',
              color: 'white', fontSize: '18px', cursor: 'pointer', borderRadius: '5px'
            }}
          >
            {chord}
          </button>
        ))}
      </div>

      {/* 4. CORE UI PART 2: Fretboard Renderer (ภาพเฟรตบอร์ดกีตาร์) */}
      <FretboardVisualizer fingers={CHORD_LIBRARY[selectedChord].fingers} />
      
      {/* 5. CORE MEDIA SYNC (ตัวอย่างการซิงค์เสียง) */}
      <div style={{ marginTop: '20px', background: '#333', padding: '15px', borderRadius: '10px' }}>
        <p style={{fontSize: '14px'}}>▶ กำลังเล่น: คอร์ด {selectedChord} (Playback)</p>
        {/* นี่คือจุดที่คุณจะเอา Video/Audio Tag มาใส่และเชื่อมกับ State */}
      </div>
    </div>
  );
}

// Component: เฟรตบอร์ดกีตาร์ (เขียนด้วย CSS/JS ง่ายๆ แทน SVG)
function FretboardVisualizer({ fingers }) {
  return (
    <div style={{ background: '#0a3d62', borderRadius: '8px', padding: '20px', position: 'relative' }}>
      <div style={{ color: '#aaa', fontSize: '12px', marginBottom: '5px' }}>Fretboard: {fingers.join(' - ')}</div>
      <div style={{ display: 'flex', gap: '8px', justifyContent: 'center', height: '100px' }}>
        {/* สร้าง 6 สายกีตาร์ในแนวตั้ง */}
        {fingers.map((fret, index) => (
          <div key={index} style={{ width: '6px', height: '90px', background: '#888', position: 'relative' }}>
            {/* ถ้า fret > 0 ให้วาดจุดนิ้ว (ตำแหน่งกด) */}
            {fret > 0 && (
              <div style={{
                position: 'absolute', top: `${(fret - 1) * 25}px`, 
                left: '-8px', width: '22px', height: '22px', 
                background: '#f1c40f', borderRadius: '50%',
                display: 'flex', justifyContent: 'center', alignItems: 'center',
                fontSize: '12px', fontWeight: 'bold', color: '#000'
              }}>
                {fret}
              </div>
            )}
            {/* ถ้า fret = 0 ให้วาดวงกลมเปิดสาย */}
            {fret === 0 && (
               <div style={{
                position: 'absolute', top: '-15px', left: '-8px', width: '22px', height: '22px', 
                border: '2px solid #f1c40f', borderRadius: '50%',
              }}></div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}