import { Activity, Database, HardDrive, Shield, Wrench } from 'lucide-solid'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { DataRow } from '@/components/ui/data-row'
import { SectionHeading } from '@/components/ui/section-heading'

export const AdminPage = () => (
  <section class="space-y-6" data-testid="admin-page">
    <Card class="animate-stagger">
      <CardContent class="space-y-8 pt-6">
        <SectionHeading
          eyebrow="Admin"
          title="Operational controls and system diagnostics."
          description="A compact control plane for service health, storage, workers, and background operations."
          badge={<Badge variant="secondary">Admin access</Badge>}
          action={
            <div class="flex items-center gap-3">
              <Button variant="subtle" size="sm">Run health check</Button>
              <Button variant="subtle" size="sm">Sync metadata</Button>
            </div>
          }
        />

        <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
          <div class="rounded-2xl bg-surface-low p-5 transition-all duration-200 hover:bg-surface-container">
            <p class="text-[10px] font-semibold uppercase tracking-widest text-muted-fg">API</p>
            <p class="mt-3 text-2xl font-semibold text-fg">Healthy</p>
          </div>
          <div class="rounded-2xl bg-surface-low p-5 transition-all duration-200 hover:bg-surface-container">
            <p class="text-[10px] font-semibold uppercase tracking-widest text-muted-fg">Workers</p>
            <p class="mt-3 text-2xl font-semibold text-fg">2 active</p>
          </div>
          <div class="rounded-2xl bg-surface-low p-5 transition-all duration-200 hover:bg-surface-container">
            <p class="text-[10px] font-semibold uppercase tracking-widest text-muted-fg">Storage</p>
            <p class="mt-3 text-2xl font-semibold text-fg">68%</p>
          </div>
          <div class="rounded-2xl bg-surface-low p-5 transition-all duration-200 hover:bg-surface-container">
            <p class="text-[10px] font-semibold uppercase tracking-widest text-muted-fg">Queue</p>
            <p class="mt-3 text-2xl font-semibold text-fg">Stable</p>
          </div>
        </div>
      </CardContent>
    </Card>

    <div class="grid gap-6 xl:grid-cols-[minmax(0,1.05fr)_380px]">
      <Card>
        <CardContent class="space-y-6 pt-6">
          <SectionHeading
            title="Service overview"
            description="Snapshot of core runtime surfaces."
            badge={<Badge variant="neutral">Runtime telemetry</Badge>}
          />
          <div class="space-y-3">
            <DataRow
              tone="accent"
              eyebrow="Backend API"
              title="Request handling healthy"
              description="Health and readiness endpoints are responding."
              trailing={<Activity class="h-4 w-4" />}
            />
            <DataRow
              tone="neutral"
              eyebrow="Database"
              title="PostgreSQL connection stable"
              description="Primary read/write pipeline is online."
              trailing={<Database class="h-4 w-4" />}
            />
            <DataRow
              tone="secondary"
              eyebrow="Filesystem"
              title="Mounted media volume available"
              description="Library and downloader paths are writable."
              trailing={<HardDrive class="h-4 w-4" />}
            />
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent class="space-y-6 pt-6">
          <SectionHeading
            title="Guardrails"
            description="Operational safety and policy checks."
            badge={<Badge variant="secondary">Security posture</Badge>}
          />
          <div class="space-y-3">
            <DataRow
              tone="accent"
              eyebrow="Auth"
              title="Role-based access enabled"
              description="Admin routes are isolated from user routes."
              trailing={<Shield class="h-4 w-4" />}
            />
            <DataRow
              tone="neutral"
              eyebrow="Maintenance"
              title="Task runners available"
              description="Background jobs can be restarted without downtime."
              trailing={<Wrench class="h-4 w-4" />}
            />
          </div>
        </CardContent>
      </Card>
    </div>
  </section>
)
