import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { getLogs, getLogsByEntity } from '../api/logsApi'
import { getEntities } from '../api/entitiesApi'

export default function LogsPage() {
  const [selectedEntityId, setSelectedEntityId] = useState<string>('')

  const { data: entities = [] } = useQuery({ queryKey: ['entities'], queryFn: getEntities })
  const { data: logs = [] } = useQuery({
    queryKey: ['logs', selectedEntityId],
    queryFn: () => selectedEntityId ? getLogsByEntity(selectedEntityId) : getLogs(),
  })

  return (
    <div className="p-8">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-slate-100">Dispatch Logs</h1>
        <select
          value={selectedEntityId}
          onChange={(e) => setSelectedEntityId(e.target.value)}
          className="rounded border border-slate-700 bg-slate-800 px-3 py-2 text-sm text-slate-100"
        >
          <option value="">All Entities</option>
          {entities.map((entity) => (
            <option key={entity.id} value={entity.id}>
              {entity.name}
            </option>
          ))}
        </select>
      </div>

      <div className="mt-6 overflow-hidden rounded-lg border border-slate-800 bg-slate-900/70 shadow-sm">
        <table className="w-full text-sm">
          <thead className="bg-slate-800/50 text-left text-xs font-medium uppercase tracking-wide text-slate-400">
            <tr>
              <th className="px-4 py-3">Subject</th>
              <th className="px-4 py-3">Entity</th>
              <th className="px-4 py-3">Status</th>
              <th className="px-4 py-3">Dispatched At</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-800">
            {logs.map((log) => (
              <tr key={log.id}>
                <td className="px-4 py-3 font-medium text-slate-100">{log.emailSubject}</td>
                <td className="px-4 py-3 text-slate-400">{log.entityName}</td>
                <td className="px-4 py-3">
                  <span
                    className={`rounded-full px-2 py-0.5 text-xs font-medium ${
                      log.status === 'SENT'
                        ? 'bg-green-900/40 text-green-400'
                        : log.status === 'FAILED'
                        ? 'bg-red-900/40 text-red-400'
                        : 'bg-yellow-900/40 text-yellow-400'
                    }`}
                  >
                    {log.status}
                  </span>
                </td>
                <td className="px-4 py-3 text-slate-500">
                  {new Date(log.dispatchedAt).toLocaleString()}
                </td>
              </tr>
            ))}
            {logs.length === 0 && (
              <tr>
                <td colSpan={4} className="px-4 py-6 text-center text-slate-400">
                  No logs found.
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  )
}