import React from 'react';
import { useProject } from '../../context/ProjectContext';
import { MOCK_PROJECTS } from '../../services/mockData';

const PROJECT_COLORS = {
  p1: { active: 'border-blue-600 text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-500/10', dot: 'bg-blue-500' },
  p2: { active: 'border-purple-600 text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-500/10', dot: 'bg-purple-500' },
  p3: { active: 'border-red-500 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-500/10', dot: 'bg-red-500' },
  p4: { active: 'border-emerald-600 text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-500/10', dot: 'bg-emerald-500' },
};

export default function ProjectTabBar({ className = '' }) {
  const { selectedProjectId, setSelectedProjectId } = useProject();

  return (
    <div className={`flex items-center gap-1 flex-wrap ${className}`}>
      {/* "Todos" tab */}
      <button
        onClick={() => setSelectedProjectId(null)}
        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border transition-all cursor-pointer
          ${!selectedProjectId
            ? 'border-slate-400 text-slate-700 dark:text-slate-200 bg-slate-100 dark:bg-slate-700'
            : 'border-transparent text-slate-400 dark:text-slate-500 hover:text-slate-600 dark:hover:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800'
          }`}
      >
        <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 10h16M4 14h16M4 18h16"/>
        </svg>
        Todos
      </button>

      {MOCK_PROJECTS.map(p => {
        const isActive = selectedProjectId === p.id;
        const colors = PROJECT_COLORS[p.id] || PROJECT_COLORS.p1;
        return (
          <button
            key={p.id}
            onClick={() => setSelectedProjectId(p.id)}
            title={p.name}
            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border transition-all cursor-pointer max-w-[200px]
              ${isActive
                ? colors.active + ' border-current'
                : 'border-transparent text-slate-400 dark:text-slate-500 hover:text-slate-600 dark:hover:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800'
              }`}
          >
            <span className={`w-2 h-2 rounded-full flex-shrink-0 ${isActive ? colors.dot : 'bg-slate-300 dark:bg-slate-600'}`}/>
            <span className="font-mono truncate">{p.code}</span>
          </button>
        );
      })}
    </div>
  );
}
