'use client'

import { useState } from 'react'
import {
  Plus,
  KeyRound,
  ShieldCheck,
  AlertTriangle,
  CalendarClock,
  RefreshCw,
  CheckCircle2,
  XCircle,
  PauseCircle,
} from 'lucide-react'
import { useFetch } from '@/hooks/use-fetch'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Skeleton } from '@/components/ui/skeleton'
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
import { PageHeader } from '../primitives'
import { formatEuro, formatDate, daysUntil } from '@/lib/format'
import { cn } from '@/lib/utils'

interface License {
  id: string
  key: string
  product: string
  plan: string
  status: string
  maxActivations: number
  validUntil: string | null
  createdAt: string
  company: { id: string; name: string }
  activations: { id: string; domain: string; environment: string; version: string | null; lastCheck: string }[]
}
interface Asset {
  id: string
  name: string
  type: string
  provider: string | null
  costCentsPerMonth: number | null
  renewalDate: string
  rebill: boolean
  markupPct: number
  status: string
}
interface LicensesData {
  licenses: License[]
  assets: Asset[]
  stats: {
    activeLicenses: number
    suspended: number
    expired: number
    totalActivations: number
    expiringSoon: number
    expiredAssets: number
    monthlyRebill: number
  }
}

const LIC_STATUS: Record<string, { label: string; icon: typeof CheckCircle2 }> = {
  active: { label: 'Aktiv', icon: CheckCircle2 },
  suspended: { label: 'Suspendiert', icon: PauseCircle },
  expired: { label: 'Abgelaufen', icon: XCircle },
  revoked: { label: 'Widerrufen', icon: XCircle },
}

const ASSET_TYPE_LABELS: Record<string, string> = {
  domain: 'Domain',
  hosting: 'Hosting',
  ssl: 'SSL',
  'plugin-seat': 'Plugin-Seat',
  saas: 'SaaS',
}

export function LicensesView() {
  const { data, loading } = useFetch<LicensesData>('/api/aos/licenses')

  if (loading || !data) {
    return (
      <div className="space-y-6 p-4 md:p-6">
        <Skeleton className="h-9 w-32" />
        <Skeleton className="h-48" />
      </div>
    )
  }

  const { licenses, assets, stats } = data

  return (
    <div className="space-y-6 p-4 md:p-6">
      <PageHeader
        title="Lizenzverwaltung"
        description="Ausgestellte Produktlizenzen mit Ed25519-signierten Tokens und Erneuerungsregister für verwaltete Assets."
        actions={
          <Button size="sm">
            <Plus className="size-4" />
            Lizenz ausstellen
          </Button>
        }
      />

      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
        <Card className="p-4">
          <div className="flex items-center justify-between">
            <p className="text-xs text-muted-foreground">Aktive Lizenzen</p>
            <KeyRound className="size-3.5 text-muted-foreground" />
          </div>
          <p className="mt-1 text-2xl font-semibold tabular-nums">{stats.activeLicenses}</p>
        </Card>
        <Card className="p-4">
          <div className="flex items-center justify-between">
            <p className="text-xs text-muted-foreground">Aktivierungen</p>
            <ShieldCheck className="size-3.5 text-muted-foreground" />
          </div>
          <p className="mt-1 text-2xl font-semibold tabular-nums">{stats.totalActivations}</p>
        </Card>
        <Card className="p-4">
          <div className="flex items-center justify-between">
            <p className="text-xs text-muted-foreground">Erneuerungen fällig</p>
            <AlertTriangle className="size-3.5 text-muted-foreground" />
          </div>
          <p className="mt-1 text-2xl font-semibold tabular-nums">{stats.expiringSoon + stats.expiredAssets}</p>
          <p className="text-[10px] text-muted-foreground">{stats.expiredAssets} abgelaufen</p>
        </Card>
        <Card className="p-4">
          <div className="flex items-center justify-between">
            <p className="text-xs text-muted-foreground">Monatl. Weiterbelastung</p>
            <CalendarClock className="size-3.5 text-muted-foreground" />
          </div>
          <p className="mt-1 text-2xl font-semibold tabular-nums">{formatEuro(stats.monthlyRebill)}</p>
        </Card>
      </div>

      <Tabs defaultValue="licenses">
        <TabsList>
          <TabsTrigger value="licenses">Ausgestellte Lizenzen</TabsTrigger>
          <TabsTrigger value="assets">Erneuerungsregister</TabsTrigger>
        </TabsList>

        <TabsContent value="licenses" className="mt-4">
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm">Produktlizenzen ({licenses.length})</CardTitle>
            </CardHeader>
            <CardContent className="p-0">
              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead className="border-y border-border bg-muted/40 text-left text-[11px] uppercase tracking-wide text-muted-foreground">
                    <tr>
                      <th className="px-4 py-2 font-medium">Lizenzschlüssel</th>
                      <th className="px-4 py-2 font-medium">Produkt / Plan</th>
                      <th className="px-4 py-2 font-medium">Kunde</th>
                      <th className="px-4 py-2 font-medium">Aktivierungen</th>
                      <th className="px-4 py-2 font-medium">Status</th>
                      <th className="px-4 py-2 font-medium">Gültig bis</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-border">
                    {licenses.map((l) => {
                      const st = LIC_STATUS[l.status] ?? LIC_STATUS.active
                      const Icon = st.icon
                      const valid = l.validUntil ? daysUntil(l.validUntil) : null
                      return (
                        <tr key={l.id} className="transition hover:bg-muted/40">
                          <td className="px-4 py-2.5">
                            <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[11px]">{l.key}</code>
                          </td>
                          <td className="px-4 py-2.5">
                            <p className="text-xs font-medium">{l.product}</p>
                            <Badge variant="outline" className="mt-0.5 text-[10px] capitalize">{l.plan}</Badge>
                          </td>
                          <td className="px-4 py-2.5 text-xs">{l.company.name}</td>
                          <td className="px-4 py-2.5">
                            <span className="text-xs tabular-nums">
                              {l.activations.length} / {l.maxActivations}
                            </span>
                            {l.activations[0] && (
                              <p className="text-[10px] text-muted-foreground">{l.activations[0].domain}</p>
                            )}
                          </td>
                          <td className="px-4 py-2.5">
                            <Badge variant="outline" className={cn('gap-1 text-[10px]', l.status === 'active' && 'border-foreground/40')}>
                              <Icon className="size-3" />{st.label}
                            </Badge>
                          </td>
                          <td className="px-4 py-2.5 text-xs">
                            {l.validUntil ? (
                              <span className={cn(valid !== null && valid < 0 && 'text-foreground')}>
                                {formatDate(l.validUntil)}
                                {valid !== null && (
                                  <span className="ml-1 text-[10px] text-muted-foreground">
                                    {valid < 0 ? `(${Math.abs(valid)} d vorbei)` : `(${valid} d)`}
                                  </span>
                                )}
                              </span>
                            ) : '—'}
                          </td>
                        </tr>
                      )
                    })}
                  </tbody>
                </table>
              </div>
            </CardContent>
          </Card>

          {/* Signing info card */}
          <Card className="mt-4">
            <CardContent className="p-4">
              <div className="flex items-start gap-3">
                <div className="flex size-9 items-center justify-center rounded-md border border-border">
                  <ShieldCheck className="size-4 text-muted-foreground" />
                </div>
                <div className="flex-1">
                  <p className="text-sm font-medium">Ed25519-signierte Lizenz-Tokens</p>
                  <p className="mt-1 text-xs text-muted-foreground">
                    Jede Lizenz hat einen menschenlesbaren Schlüssel plus einen kryptografisch signierten Token. Kunden können offline verifizieren.
                    Der private Schlüssel ist verschlüsselt (AES-256-GCM); Rotation wird unterstützt.
                  </p>
                  <div className="mt-2 flex flex-wrap gap-2">
                    <Badge variant="outline" className="text-[10px]">Public API: /api/v1/validate</Badge>
                    <Badge variant="outline" className="text-[10px]">WordPress-Updater kompatibel</Badge>
                    <Badge variant="outline" className="text-[10px]">Offline-Grace: 14 d</Badge>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="assets" className="mt-4">
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm">Asset- & Erneuerungsregister ({assets.length})</CardTitle>
            </CardHeader>
            <CardContent className="p-0">
              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead className="border-y border-border bg-muted/40 text-left text-[11px] uppercase tracking-wide text-muted-foreground">
                    <tr>
                      <th className="px-4 py-2 font-medium">Asset</th>
                      <th className="px-4 py-2 font-medium">Typ</th>
                      <th className="px-4 py-2 font-medium">Anbieter</th>
                      <th className="px-4 py-2 font-medium">Kosten/Monat</th>
                      <th className="px-4 py-2 font-medium">Erneuerung</th>
                      <th className="px-4 py-2 font-medium">Weiterbelasten</th>
                      <th className="px-4 py-2 font-medium">Status</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-border">
                    {assets.map((a) => {
                      const days = daysUntil(a.renewalDate)
                      return (
                        <tr key={a.id} className="transition hover:bg-muted/40">
                          <td className="px-4 py-2.5 text-xs font-medium">{a.name}</td>
                          <td className="px-4 py-2.5">
                            <Badge variant="secondary" className="text-[10px]">{ASSET_TYPE_LABELS[a.type] ?? a.type}</Badge>
                          </td>
                          <td className="px-4 py-2.5 text-xs text-muted-foreground">{a.provider ?? '—'}</td>
                          <td className="px-4 py-2.5 text-xs tabular-nums">
                            {a.costCentsPerMonth ? formatEuro(a.costCentsPerMonth) : '—'}
                          </td>
                          <td className="px-4 py-2.5 text-xs">
                            <span className={cn(days < 0 && 'text-foreground')}>
                              {formatDate(a.renewalDate)}
                            </span>
                            <span className="ml-1 text-[10px] text-muted-foreground">
                              {days < 0 ? `(${Math.abs(days)} d vorbei)` : `(${days} d)`}
                            </span>
                          </td>
                          <td className="px-4 py-2.5">
                            {a.rebill ? (
                              <Badge variant="outline" className="text-[10px] gap-1">
                                <RefreshCw className="size-2.5" />+{a.markupPct}%
                              </Badge>
                            ) : (
                              <span className="text-[10px] text-muted-foreground">—</span>
                            )}
                          </td>
                          <td className="px-4 py-2.5">
                            <Badge
                              variant="outline"
                              className={cn(
                                'text-[10px]',
                                a.status === 'expired' && 'border-foreground/40',
                                a.status === 'expiring' && 'border-foreground/30'
                              )}
                            >
                              {a.status === 'expired' ? 'Abgelaufen' : a.status === 'expiring' ? 'Läuft ab' : 'Aktiv'}
                            </Badge>
                          </td>
                        </tr>
                      )
                    })}
                  </tbody>
                </table>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}