import { useState } from 'react';
import { useStudentStore } from '@/stores/studentStore';
import { useUIStore } from '@/stores/uiStore';
import { SearchInput, Avatar, StatusBadge, SkillLevelBadge, FAB, EmptyState } from '@/components/common';
import { Users, Plus } from 'lucide-react';

export default function StudentListScreen() {
  const { students, filters, setFilters, selectStudent } = useStudentStore();
  const { navigateTo } = useUIStore();
  const [filterTab, setFilterTab] = useState('all');

  const filtered = students.filter(s => {
    if (!s.isActive) return false;
    if (filters.search && !s.fullName.toLowerCase().includes(filters.search.toLowerCase()) && !s.studentId.toLowerCase().includes(filters.search.toLowerCase())) return false;
    if (filterTab === 'beginner' || filterTab === 'intermediate' || filterTab === 'advanced') return s.skillLevel === filterTab;
    if (filterTab === 'paid' || filterTab === 'due' || filterTab === 'pending') return s.feeStatus === filterTab;
    return true;
  });

  const filterTabs = [
    { key: 'all', label: 'All' },
    { key: 'beginner', label: 'Beginner' },
    { key: 'intermediate', label: 'Intermediate' },
    { key: 'advanced', label: 'Advanced' },
    { key: 'paid', label: 'Paid' },
    { key: 'due', label: 'Due' },
  ];

  return (
    <div className="px-4 pt-4 pb-4">
      <SearchInput placeholder="Search by name or ID..." value={filters.search} onChange={v => setFilters({ search: v })} className="mb-3" />

      {/* Filter Tabs */}
      <div className="flex gap-2 overflow-x-auto no-scrollbar mb-3">
        {filterTabs.map(tab => (
          <button key={tab.key} onClick={() => setFilterTab(tab.key)}
            className={`px-3.5 py-1.5 rounded-full text-xs font-medium whitespace-nowrap transition-all ${
              filterTab === tab.key ? 'brand-gradient text-white shadow-sm' : 'bg-gray-100 text-gray-500'
            }`}>
            {tab.label}
          </button>
        ))}
      </div>

      <p className="text-xs text-gray-400 mb-2">{filtered.length} students</p>

      {filtered.length === 0 ? (
        <EmptyState icon={<Users className="w-16 h-16 text-gray-300" />} title="No students found" description="Try adjusting your search or filters" />
      ) : (
        <div className="space-y-3">
          {filtered.map(student => (
            <button key={student.id} onClick={() => { selectStudent(student.id); navigateTo('studentDetail'); }}
              className="w-full bg-white rounded-xl p-4 card-shadow flex items-center gap-3 text-left active:scale-[0.98] transition-transform">
              <Avatar name={student.fullName} size="md" />
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2">
                  <h3 className="text-sm font-semibold text-gray-900 truncate">{student.fullName}</h3>
                  <span className="text-[10px] text-gray-400 flex-shrink-0">{student.studentId}</span>
                </div>
                <div className="flex items-center gap-2 mt-1">
                  <span className="text-xs text-gray-500">{student.batchName}</span>
                  <SkillLevelBadge level={student.skillLevel} />
                </div>
              </div>
              <StatusBadge status={student.feeStatus || 'pending'} />
            </button>
          ))}
        </div>
      )}

      <FAB onClick={() => navigateTo('addStudent')} icon={<Plus className="w-6 h-6" />} />
    </div>
  );
}
