import React from 'react';
import { CheckCircle, XCircle, Clock } from 'lucide-react';
import type { Timesheet } from '../../types/index.js';

interface TimesheetApprovalsProps {
  timesheets?: Timesheet[];
  onApprove?: (id: string) => void;
  onReject?: (id: string) => void;
}

export const TimesheetApprovals: React.FC<TimesheetApprovalsProps> = ({
  timesheets = [],
  onApprove,
  onReject,
}) => {
  const pending = timesheets.filter(t => t.status === 'SUBMITTED');
  const approved = timesheets.filter(t => t.status === 'APPROVED');
  const rejected = timesheets.filter(t => t.status === 'REJECTED');

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

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div className="bg-yellow-50 p-4 rounded-lg">
          <div className="flex items-center gap-2 mb-2">
            <Clock className="w-6 h-6 text-yellow-600" />
            <span className="font-semibold">Pending</span>
          </div>
          <p className="text-3xl font-bold text-yellow-600">{pending.length}</p>
        </div>
        
        <div className="bg-green-50 p-4 rounded-lg">
          <div className="flex items-center gap-2 mb-2">
            <CheckCircle className="w-6 h-6 text-green-600" />
            <span className="font-semibold">Approved</span>
          </div>
          <p className="text-3xl font-bold text-green-600">{approved.length}</p>
        </div>
        
        <div className="bg-red-50 p-4 rounded-lg">
          <div className="flex items-center gap-2 mb-2">
            <XCircle className="w-6 h-6 text-red-600" />
            <span className="font-semibold">Rejected</span>
          </div>
          <p className="text-3xl font-bold text-red-600">{rejected.length}</p>
        </div>
      </div>

      <div className="space-y-4">
        <h3 className="font-semibold text-lg">Pending Approvals</h3>
        {pending.length === 0 ? (
          <p className="text-gray-500 text-center py-8">No pending timesheets</p>
        ) : (
          pending.map((timesheet) => (
            <div key={timesheet.id} className="border rounded-lg p-4">
              <div className="flex items-start justify-between mb-3">
                <div>
                  <h4 className="font-semibold">Employee ID: {timesheet.employeeId}</h4>
                  <p className="text-sm text-gray-600">
                    {timesheet.periodStart} to {timesheet.periodEnd}
                  </p>
                </div>
                <div className="text-right">
                  <p className="text-2xl font-bold text-blue-600">{timesheet.totalHours}</p>
                  <p className="text-sm text-gray-500">hours</p>
                </div>
              </div>

              {timesheet.entries && timesheet.entries.length > 0 && (
                <div className="bg-gray-50 rounded p-3 mb-3">
                  <p className="text-sm font-medium mb-2">{timesheet.entries.length} entries</p>
                  <div className="grid grid-cols-2 gap-2 text-xs">
                    {timesheet.entries.slice(0, 4).map((entry, idx) => (
                      <div key={idx} className="flex justify-between">
                        <span>{entry.date}</span>
                        <span className="font-medium">{entry.hours}h</span>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              <div className="flex gap-2">
                <button
                  onClick={() => onApprove?.(timesheet.id)}
                  className="flex-1 bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2 transition"
                >
                  <CheckCircle className="w-4 h-4" />
                  Approve
                </button>
                <button
                  onClick={() => onReject?.(timesheet.id)}
                  className="flex-1 bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2 transition"
                >
                  <XCircle className="w-4 h-4" />
                  Reject
                </button>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
};
