import { FaTimes } from 'react-icons/fa'
import { format } from 'date-fns'

const STATUS_CLASSES = {
  'Open': 'bg-red',
  'Occupied': 'bg-blue-grey',
  'Assigned': 'bg-teal',
  'Awaiting': 'bg-amber',
  'Closed': 'bg-grey'
}

const PRIORITY_CLASSES = {
  0: 'bg-blue',
  1: 'bg-green',
  2: 'bg-amber',
  3: 'bg-orange',
  4: 'bg-red'
}

const PRIORITY_LABELS = {
  0: 'NONE',
  1: 'LOW',
  2: 'MEDIUM',
  3: 'HIGH',
  4: 'CRITICAL'
}

export default function QuickOverviewModal({ isOpen, onClose, workorders = [] }) {
  if (!isOpen) return null

  return (
    <div className="overlay">
      <span className="overlay-close" onClick={onClose}>
        <FaTimes />
      </span>
      <div className="overlay-content">
        <h3 className="mb-2">WOMS Ticket Quick Overview</h3>
        
        <table className="table" style={{ background: '#fff', color: '#000' }}>
          <thead>
            <tr className="bg-dark-grey text-white">
              <th>WOID</th>
              <th>Created</th>
              <th>Type</th>
              <th>System</th>
              <th>CID & CLO</th>
              <th>Requested by</th>
              <th>Topic</th>
              <th className="text-center">Priority</th>
              <th className="text-right">Status</th>
              <th>Editor</th>
            </tr>
          </thead>
          <tbody>
            {workorders.map(wo => (
              <tr key={wo.$id} className="bg-white">
                <td className="bg-dark-grey text-white text-small">
                  {wo.woid || wo.$id?.slice(-5)}
                </td>
                <td className="bg-light-grey text-small">
                  {format(new Date(wo.$createdAt || wo.createdAt), 'dd.MM.yyyy, HH:mm')}h
                </td>
                <td className="bg-light-grey text-small">{wo.type}</td>
                <td className="bg-light-grey text-small">{wo.systemType || 'n/a'}</td>
                <td className="text-small">{wo.customerCode} {wo.customerLocation}</td>
                <td className="text-small">{wo.requestedBy}</td>
                <td className="text-small">{wo.topic}</td>
                <td className={`text-small text-center ${PRIORITY_CLASSES[wo.priority]}`}>
                  {PRIORITY_LABELS[wo.priority]}
                </td>
                <td className={`text-small text-right ${STATUS_CLASSES[wo.status]}`}>
                  {wo.status?.toUpperCase()}
                </td>
                <td className={`text-small ${STATUS_CLASSES[wo.status]}`}>
                  {wo.assignedTo || '-'}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        
        <p className="mt-2 text-center">
          Summary: Listed a total of {workorders.length} Workorders!
          <br />EOL =)
        </p>
      </div>
    </div>
  )
}
