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

export default function StatusHistoryModal({ isOpen, onClose, worksheets, ticket }) {
  if (!isOpen) return null

  // Extrahiere Status-Änderungen aus Worksheets
  const statusHistory = worksheets
    .filter(ws => ws.oldStatus && ws.newStatus && ws.oldStatus !== ws.newStatus)
    .map(ws => ({
      date: ws.startDate,
      time: ws.startTime,
      from: ws.oldStatus,
      to: ws.newStatus,
      employee: ws.employeeName || ws.employeeShort || 'Unknown',
      details: ws.details,
      wsid: ws.wsid
    }))
    .sort((a, b) => {
      // Sortiere nach Datum und Zeit (älteste zuerst)
      const dateA = `${a.date} ${a.time || '0000'}`
      const dateB = `${b.date} ${b.time || '0000'}`
      return dateA.localeCompare(dateB)
    })

  // Füge aktuellen Status hinzu
  const currentStatus = ticket?.status || 'Open'

  return (
    <div className="overlay">
      <span className="overlay-close" onClick={onClose}>
        <FaTimes />
      </span>
      <div className="overlay-content">
        <h2 className="mb-2">Status History - WOID {ticket?.woid || ticket?.$id}</h2>
        
        <div style={{ marginBottom: '24px' }}>
          <div style={{
            background: 'rgba(45, 55, 72, 0.95)',
            borderRadius: '8px',
            padding: '16px',
            border: '1px solid rgba(16, 185, 129, 0.2)',
            marginBottom: '16px'
          }}>
            <strong style={{ color: 'var(--green-primary)' }}>Current Status:</strong>
            <span style={{ 
              marginLeft: '12px',
              padding: '4px 12px',
              borderRadius: '4px',
              background: 'rgba(16, 185, 129, 0.2)',
              color: 'var(--dark-text)',
              fontWeight: 'bold'
            }}>
              {currentStatus}
            </span>
          </div>
        </div>

        {statusHistory.length === 0 ? (
          <div style={{
            background: 'rgba(45, 55, 72, 0.95)',
            borderRadius: '8px',
            padding: '24px',
            textAlign: 'center',
            color: '#a0aec0'
          }}>
            No status changes recorded yet.
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
            {statusHistory.map((entry, index) => (
              <div
                key={index}
                style={{
                  background: 'rgba(45, 55, 72, 0.95)',
                  borderRadius: '8px',
                  padding: '16px',
                  border: '1px solid rgba(16, 185, 129, 0.2)',
                  borderLeft: '4px solid var(--green-primary)'
                }}
              >
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: '8px' }}>
                  <div>
                    <div style={{ fontSize: '14px', color: '#a0aec0', marginBottom: '4px' }}>
                      {entry.date} {entry.time ? `${entry.time.substring(0, 2)}:${entry.time.substring(2, 4)}` : ''}
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                      <span style={{
                        padding: '4px 8px',
                        borderRadius: '4px',
                        background: 'rgba(74, 85, 104, 0.5)',
                        color: 'var(--dark-text)',
                        fontSize: '12px'
                      }}>
                        {entry.from}
                      </span>
                      <span style={{ color: 'var(--green-primary)' }}>→</span>
                      <span style={{
                        padding: '4px 8px',
                        borderRadius: '4px',
                        background: 'rgba(16, 185, 129, 0.3)',
                        color: 'var(--dark-text)',
                        fontSize: '12px',
                        fontWeight: 'bold'
                      }}>
                        {entry.to}
                      </span>
                    </div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontSize: '12px', color: '#a0aec0' }}>by</div>
                    <div style={{ fontWeight: 'bold', color: 'var(--dark-text)' }}>{entry.employee}</div>
                    {entry.wsid && (
                      <div style={{ fontSize: '11px', color: '#718096', marginTop: '4px' }}>
                        WSID: {entry.wsid}
                      </div>
                    )}
                  </div>
                </div>
                {entry.details && (
                  <div style={{
                    marginTop: '12px',
                    padding: '12px',
                    background: 'rgba(31, 41, 55, 0.6)',
                    borderRadius: '6px',
                    fontSize: '13px',
                    color: '#cbd5e0',
                    borderLeft: '3px solid rgba(16, 185, 129, 0.4)'
                  }}>
                    {entry.details}
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}