import Link from 'next/link'
import { prisma } from '@/lib/prisma'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Plus, Settings } from 'lucide-react'

export default async function ClientsPage() {
  const clients = await prisma.client.findMany({
    orderBy: { createdAt: 'desc' },
    include: {
      _count: { select: { smsQueue: true, smsLogs: true } },
    },
  })

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Clients</h1>
          <p className="text-gray-500 mt-1">Manage schools and organizations</p>
        </div>
        <Link href="/dashboard/clients/new">
          <Button>
            <Plus className="h-4 w-4 mr-2" />
            Add Client
          </Button>
        </Link>
      </div>

      {clients.length === 0 ? (
        <Card>
          <CardContent className="text-center py-16">
            <p className="text-gray-500 mb-4">No clients yet</p>
            <Link href="/dashboard/clients/new">
              <Button>
                <Plus className="h-4 w-4 mr-2" />
                Add Your First Client
              </Button>
            </Link>
          </CardContent>
        </Card>
      ) : (
        <div className="grid gap-4">
          {clients.map(client => (
            <Card key={client.id}>
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div className="flex-1">
                    <div className="flex items-center gap-3">
                      <h3 className="font-semibold text-lg">{client.name}</h3>
                      <Badge variant={client.isActive ? 'success' : 'secondary'}>
                        {client.isActive ? 'Active' : 'Inactive'}
                      </Badge>
                      {client.semaphoreKey ? (
                        <Badge variant="outline" className="text-xs">SMS Configured</Badge>
                      ) : (
                        <Badge variant="warning" className="text-xs">⚠ No SMS Key</Badge>
                      )}
                    </div>
                    <div className="mt-2 space-y-1">
                      <p className="text-sm text-gray-500">
                        <span className="font-medium">API Key:</span>{' '}
                        <code className="bg-gray-100 px-2 py-0.5 rounded text-xs">{client.apiKey}</code>
                      </p>
                      <p className="text-sm text-gray-500">
                        <span className="font-medium">Sender:</span> {client.senderName || 'NFC-HUB'} ·{' '}
                        <span className="font-medium">SMS sent:</span> {client._count.smsLogs}
                      </p>
                    </div>
                  </div>
                  <Link href={`/dashboard/clients/${client.id}`}>
                    <Button variant="outline" size="sm">
                      <Settings className="h-4 w-4 mr-2" />
                      Settings
                    </Button>
                  </Link>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  )
}