import type { ActivityEntry } from '../types'

interface Props {
  entries: ActivityEntry[]
}

const EVENT_LABELS: Record<ActivityEntry['event_type'], string> = {
  checkout:       'Checked out',
  checkin:        'Checked in',
  status_clean:   'Marked clean',
  status_dirty:   'Marked dirty',
  tasks_complete: 'All tasks done',
}

const EVENT_CLASS: Record<ActivityEntry['event_type'], string> = {
  checkout:       'event-checkout',
  checkin:        'event-checkin',
  status_clean:   'event-clean',
  status_dirty:   'event-dirty',
  tasks_complete: 'event-tasks',
}

function relativeTime(iso: string) {
  const diff = Date.now() - new Date(iso).getTime()
  const mins = Math.floor(diff / 60000)
  if (mins < 1) return 'Just now'
  if (mins < 60) return `${mins}m ago`
  const hrs = Math.floor(mins / 60)
  if (hrs < 24) return `${hrs}h ago`
  return new Date(iso).toLocaleDateString()
}

export default function ActivityPanel({ entries }: Props) {
  return (
    <aside className="activity-panel">
      <div className="activity-panel-header">Recent Changes</div>
      <div className="activity-list">
        {entries.length === 0 ? (
          <div style={{ padding: '16px 12px', color: 'var(--text-muted)', fontSize: 12 }}>
            No activity yet today
          </div>
        ) : (
          entries.map(entry => (
            <div key={entry.id} className="activity-item">
              <div className="activity-room">{entry.room_id}</div>
              <div className={`activity-event ${EVENT_CLASS[entry.event_type]}`}>
                {EVENT_LABELS[entry.event_type]}
              </div>
              {entry.user_name && (
                <div className="activity-time">{entry.user_name}</div>
              )}
              <div className="activity-time">{relativeTime(entry.occurred_at)}</div>
            </div>
          ))
        )}
      </div>
    </aside>
  )
}