import { prisma } from '@/lib/prisma'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'

const statusColors: Record<string, string> = {
  PENDING: 'bg-yellow-100 text-yellow-700',
  PROCESSING: 'bg-blue-100 text-blue-700',
  SENT: 'bg-green-100 text-green-700',
  FAILED: 'bg-red-100 text-red-700',
  RETRYING: 'bg-orange-100 text-orange-700',
}

export default async function SmsQueuePage() {
  const queue = await prisma.smsQueue.findMany({
    orderBy: { createdAt: 'desc' },
    take: 100,
    include: { client: { select: { name: true } } },
  })

  const counts = {
    PENDING: queue.filter(q => q.status === 'PENDING').length,
    PROCESSING: queue.filter(q => q.status === 'PROCESSING').length,
    SENT: queue.filter(q => q.status === 'SENT').length,
    FAILED: queue.filter(q => q.status === 'FAILED').length,
    RETRYING: queue.filter(q => q.status === 'RETRYING').length,
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-gray-900">SMS Queue</h1>
        <p className="text-gray-500 mt-1">Monitor SMS delivery status</p>
      </div>

      <div className="flex gap-3 flex-wrap">
        {Object.entries(counts).map(([status, count]) => (
          <div key={status} className={`px-4 py-2 rounded-full text-sm font-medium ${statusColors[status]}`}>
            {status}: {count}
          </div>
        ))}
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Recent Queue (last 100)</CardTitle>
        </CardHeader>
        <CardContent className="p-0">
          {queue.length === 0 ? (
            <p className="text-center text-gray-500 py-8">No SMS in queue</p>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead className="bg-gray-50 border-b">
                  <tr>
                    <th className="text-left px-4 py-3 font-medium text-gray-600">Student</th>
                    <th className="text-left px-4 py-3 font-medium text-gray-600">Client</th>
                    <th className="text-left px-4 py-3 font-medium text-gray-600">Phone</th>
                    <th className="text-left px-4 py-3 font-medium text-gray-600">Event</th>
                    <th className="text-left px-4 py-3 font-medium text-gray-600">Status</th>
                    <th className="text-left px-4 py-3 font-medium text-gray-600">Attempts</th>
                    <th className="text-left px-4 py-3 font-medium text-gray-600">Created</th>
                  </tr>
                </thead>
                <tbody className="divide-y">
                  {queue.map(item => (
                    <tr key={item.id} className="hover:bg-gray-50">
                      <td className="px-4 py-3">
                        <div className="font-medium">{item.studentName}</div>
                        <div className="text-xs text-gray-500">{item.studentId}</div>
                      </td>
                      <td className="px-4 py-3 text-gray-600">{item.client.name}</td>
                      <td className="px-4 py-3 text-gray-600">{item.parentPhone}</td>
                      <td className="px-4 py-3">
                        <span className={`px-2 py-1 rounded-full text-xs font-medium ${
                          item.event === 'time_in'
                            ? 'bg-green-100 text-green-700'
                            : 'bg-orange-100 text-orange-700'
                        }`}>
                          {item.event === 'time_in' ? '✅ In' : '🔴 Out'}
                        </span>
                      </td>
                      <td className="px-4 py-3">
                        <span className={`px-2 py-1 rounded-full text-xs font-medium ${statusColors[item.status]}`}>
                          {item.status}
                        </span>
                      </td>
                      <td className="px-4 py-3 text-center">{item.attempts}/3</td>
                      <td className="px-4 py-3 text-gray-500 text-xs">
                        {new Date(item.createdAt).toLocaleString('en-PH', { timeZone: 'Asia/Manila' })}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}