import { Suspense } from 'react'
import Link from 'next/link'
import { api } from '@/lib/trpc/server'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
} from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import {
  Plus,
  Pencil,
  ExternalLink,
  Building2,
  Eye,
  EyeOff,
  Globe,
} from 'lucide-react'

const visibilityIcons = {
  ADMIN_ONLY: EyeOff,
  JURY_VISIBLE: Eye,
  PUBLIC: Globe,
}

const partnerTypeColors = {
  SPONSOR: 'bg-yellow-100 text-yellow-800',
  PARTNER: 'bg-blue-100 text-blue-800',
  SUPPORTER: 'bg-green-100 text-green-800',
  MEDIA: 'bg-purple-100 text-purple-800',
  OTHER: 'bg-gray-100 text-gray-800',
}

async function PartnersList() {
  const caller = await api()
  const { data: partners } = await caller.partner.list({
    perPage: 50,
  })

  if (partners.length === 0) {
    return (
      <Card>
        <CardContent className="flex flex-col items-center justify-center py-12">
          <Building2 className="h-12 w-12 text-muted-foreground mb-4" />
          <h3 className="text-lg font-medium mb-2">No partners yet</h3>
          <p className="text-muted-foreground mb-4">
            Start by adding your first partner organization
          </p>
          <Link href="/admin/partners/new">
            <Button>
              <Plus className="mr-2 h-4 w-4" />
              Add Partner
            </Button>
          </Link>
        </CardContent>
      </Card>
    )
  }

  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      {partners.map((partner) => {
        const VisibilityIcon = visibilityIcons[partner.visibility]
        return (
          <Card key={partner.id} className={!partner.isActive ? 'opacity-60' : ''}>
            <CardContent className="p-4">
              <div className="flex items-start gap-4">
                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-muted shrink-0">
                  <Building2 className="h-6 w-6" />
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2">
                    <h3 className="font-medium truncate">{partner.name}</h3>
                    {!partner.isActive && (
                      <Badge variant="secondary">Inactive</Badge>
                    )}
                  </div>
                  <div className="flex items-center gap-2 mt-1">
                    <Badge className={partnerTypeColors[partner.partnerType]} variant="outline">
                      {partner.partnerType}
                    </Badge>
                    <VisibilityIcon className="h-3 w-3 text-muted-foreground" />
                  </div>
                  {partner.description && (
                    <p className="text-sm text-muted-foreground mt-2 line-clamp-2">
                      {partner.description}
                    </p>
                  )}
                </div>
              </div>
              <div className="flex items-center justify-end gap-2 mt-4 pt-4 border-t">
                {partner.website && (
                  <a
                    href={partner.website}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <Button variant="ghost" size="sm">
                      <ExternalLink className="h-4 w-4 mr-1" />
                      Website
                    </Button>
                  </a>
                )}
                <Link href={`/admin/partners/${partner.id}`}>
                  <Button variant="ghost" size="sm">
                    <Pencil className="h-4 w-4 mr-1" />
                    Edit
                  </Button>
                </Link>
              </div>
            </CardContent>
          </Card>
        )
      })}
    </div>
  )
}

function LoadingSkeleton() {
  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      {[1, 2, 3, 4, 5, 6].map((i) => (
        <Card key={i}>
          <CardContent className="p-4">
            <div className="flex items-start gap-4">
              <Skeleton className="h-12 w-12 rounded-lg" />
              <div className="flex-1 space-y-2">
                <Skeleton className="h-5 w-32" />
                <Skeleton className="h-4 w-20" />
                <Skeleton className="h-4 w-full" />
              </div>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}

export default function PartnersPage() {
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">Partners</h1>
          <p className="text-muted-foreground">
            Manage partner and sponsor organizations
          </p>
        </div>
        <Link href="/admin/partners/new">
          <Button>
            <Plus className="mr-2 h-4 w-4" />
            Add Partner
          </Button>
        </Link>
      </div>

      <Suspense fallback={<LoadingSkeleton />}>
        <PartnersList />
      </Suspense>
    </div>
  )
}