import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Target, ChevronRight, Search } from 'lucide-react';
import { getCursosList } from '../data/quizzes';

export default function SelectCourse() {
  const navigate = useNavigate();
  const cursos = getCursosList();
  const [searchTerm, setSearchTerm] = useState('');

  const handleSelect = (course) => {
    const lead = JSON.parse(localStorage.getItem('currentLead') || '{}');
    lead.curso = course.id;
    lead.cursoNome = course.name;
    localStorage.setItem('currentLead', JSON.stringify(lead));
    navigate('/quiz');
  };

  const filteredCursos = cursos.filter(course => 
    course.name.toLowerCase().includes(searchTerm.toLowerCase()) || 
    course.area.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div className="glass-panel animate-fade-in delay-100 flex flex-col items-center">
      <Target size={48} className="mb-4" style={{ color: 'var(--primary-color)' }} />
      <h2 className="text-2xl font-bold mb-2 text-center">Escolha sua Posição</h2>
      <p className="text-muted text-sm text-center mb-6">
        Selecione o curso que você quer testar seus conhecimentos hoje.
      </p>

      {/* Search Bar */}
      <div className="w-full mb-6 relative">
        <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none" style={{ position: 'absolute', top: '50%', transform: 'translateY(-50%)', left: '12px' }}>
          <Search size={18} className="text-muted" style={{ color: 'var(--text-muted)' }} />
        </div>
        <input
          type="text"
          placeholder="Buscar curso (ex: Eng, Saúde...)"
          className="form-input"
          style={{ paddingLeft: '2.5rem' }}
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
      </div>

      <div className="w-full flex flex-col gap-3" style={{ maxHeight: '400px', overflowY: 'auto', paddingRight: '5px' }}>
        {filteredCursos.length > 0 ? (
          filteredCursos.map(course => (
            <button 
              key={course.id} 
              onClick={() => handleSelect(course)}
              className="quiz-option justify-between hover:border-[var(--primary-color)]"
              style={{ width: '100%', marginBottom: '0.5rem' }}
            >
              <div className="text-left">
                <div className="font-bold text-sm md:text-base text-gradient" style={{ display: 'inline-block' }}>{course.name}</div>
                <div className="text-xs text-muted mt-1">{course.area}</div>
              </div>
              <ChevronRight size={20} className="text-muted" style={{ flexShrink: 0 }} />
            </button>
          ))
        ) : (
          <div className="text-center text-muted p-4">
            Nenhum curso encontrado para "{searchTerm}".<br/><br/>
            <button 
              onClick={() => handleSelect({ id: 'generico', name: searchTerm, area: 'Diversos' })}
              className="btn-secondary" style={{ padding: '0.5rem 1rem', fontSize: '0.875rem' }}
            >
              Tentar Quiz Geral
            </button>
          </div>
        )}
      </div>
    </div>
  );
}
