import React, { useState, useEffect, useRef } from 'react';
import { Play, ChevronLeft, ChevronRight, Music, Volume2, Info, Settings } from 'lucide-react';

// --- BANCO DE DADOS COMPLETO (12 TONS) ---
// Estrutura: Cordas de baixo (E grave) para cima (e aguda).
// -1 = Não toca (X)
// 0 = Corda solta
// 1, 2, 3... = Casa
const CHORD_DATA = {
  'C': {
    'Maior': [
      { name: 'C7M', desc: 'O Elegante', detail: 'Som sofisticado (Bossa/Jazz).', frets: [-1, 3, 2, 0, 0, 0], fingers: [0, 3, 2, 0, 0, 0] },
      { name: 'Cadd9', desc: 'O Brilhante', detail: 'O famoso C9. Moderno e Pop.', frets: [-1, 3, 2, 0, 3, 0], fingers: [0, 2, 1, 0, 3, 0] },
      { name: 'C6/9', desc: 'O Brasileiro', detail: 'A cara do Samba e Bossa Nova.', frets: [-1, 3, 2, 2, 3, 3], fingers: [0, 2, 1, 1, 3, 4] }
    ],
    'Menor': [
      { name: 'Cm7', desc: 'O Suave', detail: 'Menos tenso que o Cm natural.', frets: [-1, 3, 5, 3, 4, 3], fingers: [0, 1, 3, 1, 2, 1] },
      { name: 'Cm11', desc: 'O Profundo', detail: 'Som cheio, ótimo para Worship.', frets: [-1, 3, 3, 3, 4, 3], fingers: [0, 1, 1, 1, 2, 1] }
    ]
  },
  'C#': {
    'Maior': [
      { name: 'Db7M', desc: 'O Flutuante', detail: 'Requinte imediato. Use no lugar do Db.', frets: [-1, 4, 6, 5, 6, 4], fingers: [0, 1, 3, 2, 4, 1] },
      { name: 'Db(add9)', desc: 'O Doce', detail: 'Lindo dedilhado. Evite distorção.', frets: [-1, 4, 3, 1, 4, 1], fingers: [0, 3, 2, 1, 4, 1] }
    ],
    'Menor': [
      { name: 'C#m7', desc: 'O Clássico', detail: 'Pestana padrão na 4ª casa.', frets: [-1, 4, 6, 4, 5, 4], fingers: [0, 1, 3, 1, 2, 1] },
      { name: 'C#m9', desc: 'O Jazzy', detail: 'Som aberto e misterioso.', frets: [-1, 4, 2, 4, 4, 0], fingers: [0, 2, 1, 3, 4, 0] }
    ]
  },
  'D': {
    'Maior': [
      { name: 'D7M', desc: 'O Romântico', detail: 'Muito usado em baladas.', frets: [-1, -1, 0, 2, 2, 2], fingers: [0, 0, 0, 1, 2, 3] },
      { name: 'D9', desc: 'O Pop', detail: 'Substituto número 1 do Ré maior.', frets: [-1, -1, 0, 2, 3, 0], fingers: [0, 0, 0, 1, 2, 0] },
      { name: 'D/F#', desc: 'O Baixo', detail: 'Inversão essencial para conexões.', frets: [2, 0, 0, 2, 3, 2], fingers: [1, 0, 0, 2, 3, 4] }
    ],
    'Menor': [
      { name: 'Dm7', desc: 'O Padrão', detail: 'Simples e eficaz.', frets: [-1, -1, 0, 2, 1, 1], fingers: [0, 0, 0, 2, 1, 1] },
      { name: 'Dm6', desc: 'O MPB', detail: 'Som de choro e bossa.', frets: [-1, -1, 0, 2, 0, 1], fingers: [0, 0, 0, 2, 0, 1] }
    ]
  },
  'D#': {
    'Maior': [
      { name: 'Eb7M', desc: 'O Aveludado', detail: 'Pestana na 6ª casa.', frets: [-1, 6, 8, 7, 8, 6], fingers: [0, 1, 3, 2, 4, 1] },
      { name: 'Eb(add9)', desc: 'O Moderno', detail: 'Som limpo e inspirador.', frets: [-1, 6, 5, 3, 6, 3], fingers: [0, 3, 2, 1, 4, 1] }
    ],
    'Menor': [
      { name: 'Ebm7', desc: 'O Noturno', detail: 'Pestana completa na 6ª casa.', frets: [-1, 6, 8, 6, 7, 6], fingers: [0, 1, 3, 1, 2, 1] },
      { name: 'Ebm9', desc: 'O Soul', detail: 'Sofisticação pura.', frets: [-1, 6, 4, 6, 6, -1], fingers: [0, 2, 1, 3, 4, 0] }
    ]
  },
  'E': {
    'Maior': [
      { name: 'E7M', desc: 'O Quente', detail: 'Ótimo para iniciar músicas.', frets: [0, 2, 1, 1, 0, 0], fingers: [0, 2, 1, 1, 0, 0] }, // Dedilhado adaptado
      { name: 'E(add9)', desc: 'O Aberto', detail: 'Poderoso para Worship.', frets: [0, 2, 4, 1, 0, 0], fingers: [0, 2, 4, 1, 0, 0] },
      { name: 'E/G#', desc: 'A Escada', detail: 'Usado para subir para o Lá (A).', frets: [4, 2, 2, 1, 0, 0], fingers: [4, 2, 3, 1, 0, 0] }
    ],
    'Menor': [
      { name: 'Em7', desc: 'O Fácil', detail: 'Apenas um dedo ou nenhum.', frets: [0, 2, 0, 0, 0, 0], fingers: [0, 1, 0, 0, 0, 0] },
      { name: 'Em9', desc: 'O Celestial', detail: 'Som muito lindo e aberto.', frets: [0, 2, 4, 0, 0, 0], fingers: [0, 1, 4, 0, 0, 0] }
    ]
  },
  'F': {
    'Maior': [
      { name: 'F7M', desc: 'O Fácil', detail: 'Substituto do F (sem pestana!).', frets: [-1, -1, 3, 2, 1, 0], fingers: [0, 0, 3, 2, 1, 0] },
      { name: 'Fadd9', desc: 'O Pop', detail: 'Andy Summers (Police) adorava.', frets: [-1, -1, 3, 2, 1, 3], fingers: [0, 0, 3, 2, 1, 4] }
    ],
    'Menor': [
      { name: 'Fm7', desc: 'O Triste', detail: 'Pestana na 1ª casa.', frets: [1, 3, 1, 1, 1, 1], fingers: [1, 3, 1, 1, 1, 1] },
      { name: 'Fm9', desc: 'O Rico', detail: 'Som de Jazz Ballad.', frets: [-1, 8, 6, 8, 8, -1], fingers: [0, 2, 1, 3, 4, 0] }
    ]
  },
  'F#': {
    'Maior': [
      { name: 'F#7M', desc: 'O Litorâneo', detail: 'Som de fim de tarde.', frets: [-1, 9, 11, 10, 11, 9], fingers: [0, 1, 3, 2, 4, 1] },
      { name: 'F#add9', desc: 'O Poderoso', detail: 'Ótimo com Chorus/Delay.', frets: [2, 4, 6, 3, 2, 2], fingers: [1, 3, 4, 2, 1, 1] }
    ],
    'Menor': [
      { name: 'F#m7', desc: 'O Parceiro', detail: 'Parceiro inseparável do A e E.', frets: [2, 4, 2, 2, 2, 2], fingers: [1, 3, 1, 1, 1, 1] },
      { name: 'F#m11', desc: 'O Profundo', detail: 'Use para dar clima.', frets: [2, 4, 2, 2, 0, 0], fingers: [1, 3, 1, 1, 0, 0] }
    ]
  },
  'G': {
    'Maior': [
      { name: 'G(add9)', desc: 'O Moderno', detail: 'O som do violão pop atual.', frets: [3, 2, 0, 2, 0, 3], fingers: [2, 1, 0, 3, 0, 4] },
      { name: 'G7M', desc: 'O Jazzista', detail: 'Aveludado e calmo.', frets: [3, -1, 4, 4, 3, -1], fingers: [1, 0, 3, 4, 2, 0] },
      { name: 'G/B', desc: 'A Passagem', detail: 'Inversão para ir para C.', frets: [-1, 2, 0, 0, 0, 3], fingers: [0, 1, 0, 0, 0, 4] }
    ],
    'Menor': [
      { name: 'Gm7', desc: 'O Melancólico', detail: 'Pestana na 3ª casa.', frets: [3, 5, 3, 3, 3, 3], fingers: [1, 3, 1, 1, 1, 1] },
      { name: 'Gm9', desc: 'O Sofisticado', detail: 'Avançado. Use em Soul.', frets: [3, -1, 3, 3, 3, 5], fingers: [2, 0, 2, 2, 2, 4] }
    ]
  },
  'G#': {
    'Maior': [
      { name: 'Ab7M', desc: 'O Doce', detail: 'Pestana na 4ª casa.', frets: [4, -1, 5, 5, 4, -1], fingers: [1, 0, 3, 4, 2, 0] },
      { name: 'Ab/C', desc: 'A Inversão', detail: 'Ótimo para linhas de baixo.', frets: [-1, 3, 6, 5, 4, -1], fingers: [0, 1, 4, 3, 2, 0] }
    ],
    'Menor': [
      { name: 'G#m7', desc: 'O Tenso', detail: 'Relativo de Si Maior (B).', frets: [4, 6, 4, 4, 4, 4], fingers: [1, 3, 1, 1, 1, 1] },
      { name: 'G#m(add9)', desc: 'O Arpejo', detail: 'Lindo para dedilhar.', frets: [4, 6, 8, 4, 4, 4], fingers: [1, 3, 4, 1, 1, 1] }
    ]
  },
  'A': {
    'Maior': [
      { name: 'A7M', desc: 'O Elegante', detail: 'Clássico da MPB.', frets: [-1, 0, 2, 1, 2, 0], fingers: [0, 0, 2, 1, 3, 0] },
      { name: 'A9', desc: 'O Pop', detail: 'Brilho instantâneo.', frets: [-1, 0, 2, 2, 0, 0], fingers: [0, 0, 2, 3, 0, 0] },
      { name: 'A/C#', desc: 'A Base', detail: 'Fundamental no Worship.', frets: [-1, 4, 2, 2, 2, 0], fingers: [0, 4, 1, 2, 3, 0] }
    ],
    'Menor': [
      { name: 'Am7', desc: 'O Padrão', detail: 'Solte o dedo 3 do Am.', frets: [-1, 0, 2, 0, 1, 0], fingers: [0, 0, 2, 0, 1, 0] },
      { name: 'Am9', desc: 'O Tenso', detail: 'Mistério e profundidade.', frets: [-1, 0, 2, 4, 1, 0], fingers: [0, 0, 2, 4, 1, 0] }
    ]
  },
  'A#': {
    'Maior': [
      { name: 'Bb9', desc: 'O Soul', detail: 'Groove garantido.', frets: [-1, 1, 3, 3, 1, 1], fingers: [0, 1, 3, 4, 1, 1] },
      { name: 'Bb7M', desc: 'O Jazz', detail: 'Pestana na 1ª (forma de A).', frets: [-1, 1, 3, 2, 3, 1], fingers: [0, 1, 3, 2, 4, 1] }
    ],
    'Menor': [
      { name: 'Bbm7', desc: 'O Escuro', detail: 'Pestana na 6ª casa.', frets: [6, 8, 6, 6, 6, 6], fingers: [1, 3, 1, 1, 1, 1] },
      { name: 'Bbm9', desc: 'O Frio', detail: 'Som de inverno.', frets: [6, -1, 6, 6, 6, 8], fingers: [1, 0, 1, 1, 1, 4] }
    ]
  },
  'B': {
    'Maior': [
      { name: 'B9', desc: 'O Aberto', detail: 'Evita a pestana difícil do B.', frets: [-1, 2, 4, 4, 2, 2], fingers: [0, 1, 3, 4, 1, 1] },
      { name: 'B7M', desc: 'O Rico', detail: 'Som muito "cheio".', frets: [-1, 2, 4, 3, 4, 2], fingers: [0, 1, 3, 2, 4, 1] }
    ],
    'Menor': [
      { name: 'Bm7', desc: 'O Padrão', detail: 'Pestana na 2ª casa.', frets: [-1, 2, 4, 2, 3, 2], fingers: [0, 1, 3, 1, 2, 1] },
      { name: 'Bm11', desc: 'O Lindo', detail: 'Mágico. Apenas toque.', frets: [-1, 2, 2, 2, 3, 0], fingers: [0, 1, 1, 1, 2, 0] }
    ]
  }
};

// --- COMPONENTE DE ÁUDIO (SINTETIZADOR) ---
const playChordSound = (frets) => {
  const AudioContext = window.AudioContext || window.webkitAudioContext;
  if (!AudioContext) return;
  
  const ctx = new AudioContext();
  const now = ctx.currentTime;
  
  const baseFreqs = [82.41, 110.00, 146.83, 196.00, 246.94, 329.63];
  
  frets.forEach((fret, stringIndex) => {
    if (fret === -1) return; 

    const osc = ctx.createOscillator();
    const gain = ctx.createGain();
    
    const frequency = baseFreqs[stringIndex] * Math.pow(2, fret / 12);
    
    osc.type = 'triangle';
    osc.frequency.value = frequency;
    
    gain.gain.setValueAtTime(0, now);
    const strumDelay = stringIndex * 0.05; 
    
    gain.gain.linearRampToValueAtTime(0.2, now + 0.05 + strumDelay);
    gain.gain.exponentialRampToValueAtTime(0.001, now + 2.0 + strumDelay);
    
    osc.connect(gain);
    gain.connect(ctx.destination);
    
    osc.start(now + strumDelay);
    osc.stop(now + 2.5 + strumDelay);
  });
};

// --- COMPONENTE DE DIAGRAMA DO BRAÇO ---
const Fretboard = ({ chord }) => {
  if (!chord) return null; 

  const minFret = Math.min(...chord.frets.filter(f => f > 0));
  const maxFret = Math.max(...chord.frets);
  // Lógica inteligente para definir onde começa o desenho
  // Se o acorde usa casas muito agudas (ex: casa 9), desenha a partir dali
  const startFret = maxFret > 4 ? minFret : 1; 

  return (
    <div className="relative w-full max-w-[280px] mx-auto bg-slate-800 rounded-xl p-4 shadow-2xl border border-slate-700 select-none">
      {/* Nut (Pestana) ou Indicação de Casa */}
      <div className="flex justify-between text-xs text-slate-400 mb-1 px-3">
        <span className={startFret === 1 ? 'font-bold text-amber-500' : ''}>
          {startFret === 1 ? 'NUT (Pestana)' : `${startFret}ª Casa`}
        </span>
      </div>

      <div className="relative bg-amber-900/40 rounded-lg p-2 border border-amber-900/50">
        {/* Cordas */}
        <div className="flex justify-between h-56 px-2 relative z-10">
          {[0, 1, 2, 3, 4, 5].map((str) => (
            <div key={str} className="w-0.5 h-full bg-slate-400/60 relative">
               {/* Indicação de X ou O no topo */}
               <div className="absolute -top-6 left-1/2 transform -translate-x-1/2">
                {chord.frets[str] === -1 && <span className="text-red-500 font-bold text-sm">✕</span>}
                {chord.frets[str] === 0 && startFret === 1 && <span className="text-slate-300 font-bold text-sm">○</span>}
              </div>
            </div>
          ))}
        </div>

        {/* Trastes (Linhas Horizontais) */}
        <div className="absolute top-2 left-0 w-full h-56 flex flex-col justify-between pointer-events-none px-2">
          {[0, 1, 2, 3, 4].map((fret) => (
            <div key={fret} className="w-full h-0.5 bg-slate-500/50"></div>
          ))}
        </div>

        {/* Bolinhas (Dedos) e Pestanas */}
        {chord.frets.map((fret, stringIndex) => {
          if (fret <= 0) return null; 
          
          const relativeFret = fret - startFret + 1;
          // Se o fret for menor que o startFret (bug de lógica), ignora
          if (relativeFret < 1) return null; 
          
          const topPos = (relativeFret * 20) - 10; 
          
          return (
            <div 
              key={stringIndex}
              className="absolute w-7 h-7 bg-amber-400 rounded-full flex items-center justify-center shadow-lg transform -translate-x-1/2 z-20 transition-all duration-300"
              style={{
                top: `${topPos}%`,
                left: `${(stringIndex * 20) + 7}%` 
              }}
            >
              <span className="text-slate-900 font-bold text-sm">{chord.fingers[stringIndex]}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default function App() {
  const [root, setRoot] = useState('C');
  const [type, setType] = useState('Maior');
  const [index, setIndex] = useState(0);

  // Notas Cromáticas (Ordenadas)
  const roots = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
  const types = ['Maior', 'Menor'];

  useEffect(() => {
    setIndex(0);
  }, [root, type]);

  const availableChords = CHORD_DATA[root]?.[type] || [];
  const safeIndex = index < availableChords.length ? index : 0;
  const currentChord = availableChords[safeIndex];

  const handleNext = () => {
    if (index < availableChords.length - 1) setIndex(index + 1);
  };

  const handlePrev = () => {
    if (index > 0) setIndex(index - 1);
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 font-sans flex flex-col items-center justify-start py-6 px-4">
      
      {/* CABEÇALHO */}
      <header className="w-full max-w-md flex justify-between items-center mb-6 border-b border-slate-800 pb-4">
        <div className="flex items-center gap-2">
          <div className="bg-amber-500 p-2 rounded-lg shadow-lg shadow-amber-500/20">
            <Music size={24} className="text-slate-900" />
          </div>
          <div>
            <h1 className="font-bold text-xl tracking-tight text-white">Acorde Upgrade</h1>
            <p className="text-xs text-amber-500 font-medium">Edição Ultimate</p>
          </div>
        </div>
        <Settings size={20} className="text-slate-600" />
      </header>

      {/* SELETORES (Interface Aprimorada) */}
      <section className="w-full max-w-md bg-slate-900 p-5 rounded-2xl mb-6 shadow-xl border border-slate-800">
        <div className="flex gap-4">
          <div className="flex-1 flex flex-col gap-2">
            <label className="text-[10px] text-slate-400 uppercase font-bold tracking-widest text-center">Tom</label>
            <div className="relative">
              <select 
                value={root} 
                onChange={(e) => setRoot(e.target.value)}
                className="w-full bg-slate-800 text-white text-lg font-bold py-3 rounded-xl border-2 border-slate-700 focus:border-amber-500 outline-none appearance-none text-center transition-colors cursor-pointer hover:border-slate-600"
              >
                {roots.map(r => <option key={r} value={r}>{r}</option>)}
              </select>
            </div>
          </div>

          <div className="flex-1 flex flex-col gap-2">
            <label className="text-[10px] text-slate-400 uppercase font-bold tracking-widest text-center">Modo</label>
            <div className="relative">
              <select 
                value={type} 
                onChange={(e) => setType(e.target.value)}
                className="w-full bg-slate-800 text-white text-lg font-bold py-3 rounded-xl border-2 border-slate-700 focus:border-amber-500 outline-none appearance-none text-center transition-colors cursor-pointer hover:border-slate-600"
              >
                {types.map(t => <option key={t} value={t}>{t}</option>)}
              </select>
            </div>
          </div>
        </div>
      </section>

      {/* CONTEÚDO PRINCIPAL (CARD) */}
      <main className="w-full max-w-md flex-1 flex flex-col items-center relative animate-fade-in">
        
        {availableChords.length > 0 && currentChord ? (
          <>
            {/* Navegação e Títulos */}
            <div className="w-full flex justify-between items-center mb-6 px-1">
              <button 
                onClick={handlePrev} 
                disabled={safeIndex === 0}
                className={`p-3 rounded-full transition-all ${safeIndex === 0 ? 'text-slate-800 opacity-50 cursor-not-allowed' : 'text-amber-400 hover:bg-slate-900 hover:scale-110 active:scale-95'}`}
              >
                <ChevronLeft size={36} />
              </button>

              <div className="text-center flex-1">
                <h2 className="text-5xl font-black text-white mb-2 tracking-tighter drop-shadow-lg">{currentChord.name}</h2>
                <span className="inline-block px-4 py-1.5 bg-slate-800 text-amber-400 text-sm font-bold rounded-full border border-slate-700 shadow-inner">
                  {currentChord.desc}
                </span>
              </div>

              <button 
                onClick={handleNext} 
                disabled={safeIndex === availableChords.length - 1}
                className={`p-3 rounded-full transition-all ${safeIndex === availableChords.length - 1 ? 'text-slate-800 opacity-50 cursor-not-allowed' : 'text-amber-400 hover:bg-slate-900 hover:scale-110 active:scale-95'}`}
              >
                <ChevronRight size={36} />
              </button>
            </div>

            {/* DIAGRAMA */}
            <div className="transform hover:scale-[1.02] transition-transform duration-300">
              <Fretboard chord={currentChord} />
            </div>

            {/* Controles de Ação */}
            <div className="w-full mt-8 flex flex-col gap-4">
              <button 
                onClick={() => playChordSound(currentChord.frets)}
                className="w-full flex items-center justify-center gap-3 bg-gradient-to-r from-amber-500 to-orange-600 text-slate-950 font-extrabold py-4 px-8 rounded-2xl shadow-lg shadow-orange-500/20 hover:shadow-orange-500/40 hover:-translate-y-1 transition-all active:translate-y-0 active:scale-95"
              >
                <Volume2 size={24} strokeWidth={3} />
                <span className="tracking-wide">OUVIR SONORIDADE</span>
              </button>

              {/* Dica/Detalhe */}
              <div className="bg-slate-900/80 p-5 rounded-2xl border border-slate-800 flex gap-4 items-start shadow-md backdrop-blur-sm">
                <div className="bg-blue-500/10 p-2 rounded-lg">
                  <Info className="text-blue-400" size={20} />
                </div>
                <div>
                  <h3 className="text-blue-400 font-bold text-sm mb-1 uppercase tracking-wider">Dica do Mestre</h3>
                  <p className="text-slate-300 text-sm leading-relaxed font-medium">
                    {currentChord.detail}
                  </p>
                </div>
              </div>
            </div>

            {/* Paginação (Bolinhas) */}
            <div className="flex gap-2 mt-8 mb-4">
              {availableChords.map((_, i) => (
                <button
                  key={i}
                  onClick={() => setIndex(i)}
                  className={`h-2 rounded-full transition-all duration-300 ${i === safeIndex ? 'bg-amber-500 w-8' : 'bg-slate-800 w-2 hover:bg-slate-700'}`} 
                />
              ))}
            </div>
          </>
        ) : (
          <div className="text-center py-20 text-slate-500 bg-slate-900/50 rounded-3xl w-full border border-slate-800 border-dashed">
            <p>Selecione um tom para começar.</p>
          </div>
        )}

      </main>
    </div>
  );
}