import React from 'react';
import { FolderOpen, Calendar, ChevronRight, FileText, Plus } from 'lucide-react';

export const ResearchSpace = ({ projects, onSelectProject, t }) => {
  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-2xl font-bold text-slate-900">{t.navProjects || "المشاريع البحثية"}</h2>
          <p className="text-slate-500 text-sm">إدارة وتنظيم أبحاثك في التراث المريدي</p>
        </div>
        <button className="flex items-center gap-2 bg-emerald-800 text-white px-4 py-2 rounded-xl text-sm hover:bg-emerald-700 transition">
          <Plus className="w-4 h-4" />
          مشروع جديد
        </button>
      </div>

      {projects.length === 0 ? (
        <div className="bg-white border-2 border-dashed border-slate-200 rounded-3xl p-12 text-center">
          <div className="bg-slate-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
            <FolderOpen className="w-8 h-8 text-slate-300" />
          </div>
          <h3 className="text-lg font-bold text-slate-900 mb-2">لا توجد مشاريع نشطة</h3>
          <p className="text-slate-500 max-w-sm mx-auto mb-6">
            ابدأ بالبحث في "الباحث الذكي" وقم بتحويل محادثاتك إلى مشاريع بحثية منظمة.
          </p>
        </div>
      ) : (
        <div className="grid gap-4">
          {projects.map((project) => (
            <div 
              key={project.id}
              onClick={() => onSelectProject(project)}
              className="bg-white p-5 rounded-2xl border border-slate-200 hover:border-emerald-500 cursor-pointer transition-all group flex items-center justify-between"
            >
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 bg-emerald-50 rounded-xl flex items-center justify-center text-emerald-700 group-hover:bg-emerald-600 group-hover:text-white transition-colors">
                  <FileText className="w-6 h-6" />
                </div>
                <div>
                  <h3 className="font-bold text-slate-900">{project.name}</h3>
                  <div className="flex items-center gap-3 text-xs text-slate-400 mt-1">
                    <span className="flex items-center gap-1">
                      <Calendar className="w-3 h-3" />
                      {new Date(project.createdAt).toLocaleDateString(undefined, { dateStyle: 'medium' })}
                    </span>
                    <span>•</span>
                    <span>{project.sources.length} مصادر</span>
                  </div>
                </div>
              </div>
              <ChevronRight className="w-5 h-5 text-slate-300 group-hover:text-emerald-600 transition-colors" />
            </div>
          ))}
        </div>
      )}
    </div>
  );
};