import React, { useState } from 'react';
import { Book, Search, Filter, Plus, Info, CheckCircle2 } from 'lucide-react';

export const Library = ({ sources, onAddToProject, activeProjectId, projects, t }) => {
  const [searchTerm, setSearchTerm] = useState('');
  const [filter, setFilter] = useState('all');

  const filteredSources = sources.filter(source => {
    const matchesSearch = source.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         source.author.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesFilter = filter === 'all' || source.category === filter;
    return matchesSearch && matchesFilter;
  });

  return (
    <div className="space-y-8">
      {/* Header & Search */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
        <div>
          <h2 className="text-2xl font-bold text-slate-900">{t.navLibrary}</h2>
          <p className="text-slate-500 text-sm">تصفح المصادر والمراجع المتاحة في المكتبة</p>
        </div>
        
        <div className="flex gap-3">
          <div className="relative">
            <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
            <input 
              type="text"
              placeholder="بحث في الكتب..."
              className="pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-emerald-500 outline-none w-64"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
          <select 
            className="bg-slate-50 border border-slate-200 rounded-xl px-4 py-2 text-sm focus:ring-2 focus:ring-emerald-500 outline-none"
            value={filter}
            onChange={(e) => setFilter(e.target.value)}
          >
            <option value="all">كل التصنيفات</option>
            <option value="khidma">الخدمة والآداب</option>
            <option value="tawhid">التوحيد</option>
            <option value="tasawwuf">التصوف العرفاني</option>
          </select>
        </div>
      </div>

      {/* Grid of Books */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {filteredSources.map((source) => (
          <div key={source.id} className="bg-white p-6 rounded-2xl border border-slate-200 hover:border-emerald-500 transition-all group shadow-sm">
            <div className="flex justify-between items-start mb-4">
              <div className="p-3 bg-emerald-50 rounded-lg group-hover:bg-emerald-600 transition-colors">
                <Book className="w-6 h-6 text-emerald-700 group-hover:text-white" />
              </div>
              <span className="text-[10px] font-bold uppercase tracking-wider bg-slate-100 px-2 py-1 rounded text-slate-500">
                {source.category}
              </span>
            </div>
            
            <h3 className="text-lg font-bold text-slate-900 mb-1">{source.title}</h3>
            <p className="text-emerald-700 text-sm font-medium mb-4">{source.author}</p>
            
            <div className="flex items-center justify-between pt-4 border-t border-slate-50">
              <button className="flex items-center gap-1 text-slate-400 hover:text-emerald-600 transition">
                <Info className="w-4 h-4" />
                <span className="text-xs">التفاصيل</span>
              </button>
              
              <button 
                onClick={() => onAddToProject(source.id)}
                className="flex items-center gap-2 bg-slate-900 text-white px-4 py-2 rounded-lg text-xs hover:bg-emerald-700 transition"
              >
                <Plus className="w-3 h-3" />
                إضافة للمشروع
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};