import React from 'react';
import { Briefcase, MapPin, Clock, Users } from 'lucide-react';
import type { Job } from '../../types/index.js';

interface JobBoardProps {
  jobs?: Job[];
  onApply?: (jobId: string) => void;
}

export const JobBoard: React.FC<JobBoardProps> = ({
  jobs = [],
  onApply,
}) => {
  const openJobs = jobs.filter(j => j.status === 'OPEN');
  const totalOpenings = openJobs.reduce((sum, j) => sum + (j.openings || 0), 0);

  return (
    <div className="p-6 bg-white rounded-lg shadow">
      <h2 className="text-2xl font-bold mb-6">Job Board</h2>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
        <div className="bg-blue-50 p-4 rounded-lg">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-600">Open Positions</p>
              <p className="text-3xl font-bold text-blue-600">{openJobs.length}</p>
            </div>
            <Briefcase className="w-10 h-10 text-blue-400" />
          </div>
        </div>

        <div className="bg-green-50 p-4 rounded-lg">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-600">Total Openings</p>
              <p className="text-3xl font-bold text-green-600">{totalOpenings}</p>
            </div>
            <Users className="w-10 h-10 text-green-400" />
          </div>
        </div>
      </div>

      <div className="space-y-4">
        {openJobs.map((job) => (
          <div key={job.id} className="border rounded-lg p-5 hover:shadow-md transition">
            <div className="flex items-start justify-between mb-3">
              <div className="flex-1">
                <h3 className="text-xl font-bold mb-2">{job.title}</h3>
                
                <div className="flex flex-wrap gap-3 text-sm text-gray-600 mb-3">
                  {job.department && (
                    <div className="flex items-center gap-1">
                      <Briefcase className="w-4 h-4" />
                      <span>{job.department}</span>
                    </div>
                  )}
                  
                  {job.location && (
                    <div className="flex items-center gap-1">
                      <MapPin className="w-4 h-4" />
                      <span>{job.location}</span>
                    </div>
                  )}
                  
                  {job.employmentType && (
                    <div className="flex items-center gap-1">
                      <Clock className="w-4 h-4" />
                      <span>{job.employmentType.replace('_', ' ')}</span>
                    </div>
                  )}
                </div>
              </div>

              {job.openings && job.openings > 1 && (
                <span className="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium">
                  {job.openings} openings
                </span>
              )}
            </div>

            {job.description && (
              <p className="text-gray-700 mb-3 line-clamp-3">{job.description}</p>
            )}

            {job.requirements && (
              <div className="mb-3">
                <p className="text-sm font-semibold mb-1">Requirements:</p>
                <p className="text-sm text-gray-600 line-clamp-2">{job.requirements}</p>
              </div>
            )}

            <div className="flex items-center justify-between pt-3 border-t">
              <div className="text-xs text-gray-500">
                Posted {job.createdAt ? new Date(job.createdAt).toLocaleDateString() : 'Recently'}
              </div>
              
              <button
                onClick={() => onApply?.(job.id)}
                className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition font-medium"
              >
                Apply Now
              </button>
            </div>
          </div>
        ))}

        {openJobs.length === 0 && (
          <p className="text-center text-gray-500 py-12">No open positions at this time</p>
        )}
      </div>
    </div>
  );
};
