import React from 'react';
import { Plus, Search, MoreVertical } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { useDatabase } from '../../../hooks/useDatabase';

interface Class {
  id: string;
  name: string;
  grade: string;
  year: number;
  teacher_count: number;
  student_count: number;
}

export function ClassesPage() {
  const navigate = useNavigate();
  const { loading, error } = useDatabase();
  const [classes, setClasses] = React.useState<Class[]>([]);
  const [searchTerm, setSearchTerm] = React.useState('');

  React.useEffect(() => {
    // Implementar busca de turmas
  }, []);

  const handleCreateClass = () => {
    navigate('/dashboard/turmas/nova');
  };

  const handleClassClick = (classId: string) => {
    navigate(`/dashboard/turmas/${classId}`);
  };

  const filteredClasses = classes.filter(c => 
    c.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    c.grade.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div>
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold text-gray-900">Turmas</h1>
        <button
          onClick={handleCreateClass}
          className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition"
        >
          <Plus className="h-5 w-5" />
          Nova Turma
        </button>
      </div>

      {error && (
        <div className="mb-4 p-4 bg-red-50 text-red-600 rounded-lg">
          {error}
        </div>
      )}

      <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div className="p-4 border-b border-gray-200">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
            <input
              type="text"
              placeholder="Buscar turmas..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500"
            />
          </div>
        </div>

        {loading ? (
          <div className="p-8 text-center text-gray-500">Carregando...</div>
        ) : filteredClasses.length === 0 ? (
          <div className="p-8 text-center text-gray-500">
            Nenhuma turma encontrada
          </div>
        ) : (
          <div className="divide-y divide-gray-200">
            {filteredClasses.map((classItem) => (
              <div
                key={classItem.id}
                className="p-4 hover:bg-gray-50 cursor-pointer"
                onClick={() => handleClassClick(classItem.id)}
              >
                <div className="flex justify-between items-center">
                  <div>
                    <h3 className="text-lg font-medium text-gray-900">
                      {classItem.name}
                    </h3>
                    <p className="text-sm text-gray-500">
                      {classItem.grade} - {classItem.year}
                    </p>
                  </div>
                  <div className="flex items-center gap-6">
                    <div className="text-sm text-gray-500">
                      <span className="font-medium text-gray-900">
                        {classItem.teacher_count}
                      </span>{' '}
                      professores
                    </div>
                    <div className="text-sm text-gray-500">
                      <span className="font-medium text-gray-900">
                        {classItem.student_count}
                      </span>{' '}
                      alunos
                    </div>
                    <button className="p-2 hover:bg-gray-100 rounded-full">
                      <MoreVertical className="h-5 w-5 text-gray-400" />
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}