import { Link } from 'react-router-dom';
import { useBriefs } from '../../hooks/useJob';

const STATUS_BADGE: Record<string, string> = {
  draft: 'bg-gray-100 text-gray-700',
  submitted: 'bg-blue-100 text-blue-700',
  approved: 'bg-green-100 text-green-700',
  rejected: 'bg-red-100 text-red-700',
  fulfilled: 'bg-purple-100 text-purple-700',
};

export function BriefsList() {
  const { data: briefs = [], isLoading, error } = useBriefs();

  if (isLoading) {
    return (
      <div className="container mx-auto px-4 py-8 animate-pulse space-y-4">
        <div className="h-8 bg-gray-200 rounded w-1/4"></div>
        {[...Array(4)].map((_, i) => <div key={i} className="h-14 bg-gray-200 rounded"></div>)}
      </div>
    );
  }

  if (error) {
    return (
      <div className="container mx-auto px-4 py-8">
        <div className="bg-red-50 border border-red-200 rounded-md p-4">
          <p className="text-red-600">Failed to load briefs.</p>
        </div>
      </div>
    );
  }

  const open = briefs.filter(b => ['submitted'].includes(b.status)).length;

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Job Briefs</h1>
          {open > 0 && (
            <p className="text-sm text-blue-600 mt-1">{open} awaiting approval</p>
          )}
        </div>
        <Link
          to="/briefs/new"
          className="px-4 py-2 bg-indigo-600 text-white text-sm rounded hover:bg-indigo-700"
        >
          New Brief
        </Link>
      </div>

      {briefs.length === 0 ? (
        <div className="bg-gray-50 border border-gray-200 rounded-md p-8 text-center">
          <p className="text-gray-500">No briefs yet.</p>
          <Link to="/briefs/new" className="text-indigo-600 hover:underline text-sm mt-2 block">
            Create your first brief
          </Link>
        </div>
      ) : (
        <div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
          <table className="w-full text-sm">
            <thead className="bg-gray-50 text-xs text-gray-500 uppercase">
              <tr>
                <th className="px-4 py-3 text-left">Title</th>
                <th className="px-4 py-3 text-left">Status</th>
                <th className="px-4 py-3 text-left">Languages</th>
                <th className="px-4 py-3 text-left">Deadline</th>
                <th className="px-4 py-3 text-left">Created</th>
                <th className="px-4 py-3"></th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-100">
              {briefs.map(brief => (
                <tr key={brief.id} className="hover:bg-gray-50">
                  <td className="px-4 py-3 font-medium text-gray-900">{brief.title}</td>
                  <td className="px-4 py-3">
                    <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${STATUS_BADGE[brief.status] ?? 'bg-gray-100 text-gray-700'}`}>
                      {brief.status}
                    </span>
                  </td>
                  <td className="px-4 py-3 text-gray-500">
                    {brief.languages.length > 0 ? brief.languages.join(', ') : '—'}
                  </td>
                  <td className="px-4 py-3 text-gray-500">
                    {brief.deadline ? new Date(brief.deadline).toLocaleDateString() : '—'}
                  </td>
                  <td className="px-4 py-3 text-gray-400 text-xs">
                    {new Date(brief.created_at).toLocaleDateString()}
                  </td>
                  <td className="px-4 py-3 text-right">
                    <Link to={`/briefs/${brief.id}`} className="text-indigo-600 hover:text-indigo-800 text-xs">
                      View
                    </Link>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}
