import Link from 'next/link'
import { Download, LogOut } from 'lucide-react'
import { PageShell, PageHeader } from '@/components/page-shell'
import { BackButton } from '@/components/back-button'
import { db } from '@/lib/db'
import { getSession } from '@/lib/auth'

export const dynamic = 'force-dynamic'

export default async function SettingsPage() {
  const session = await getSession()
  const [itemCount, locationCount, photoCount, pendingJobs] = await Promise.all([
    db.item.count(),
    db.location.count(),
    db.photo.count(),
    db.identificationJob.count({ where: { status: 'PENDING' } }),
  ])

  return (
    <PageShell>
      <div className="pt-2">
        <PageHeader
          title="Settings"
          back={<BackButton fallbackHref="/" />}
        />

        <div className="space-y-4">
          {session && (
            <div className="rounded-xl border bg-card p-3 text-sm">
              <div className="text-muted-foreground text-xs uppercase tracking-wide">Signed in as</div>
              <div className="font-medium">{session.name}</div>
              <div className="text-muted-foreground">{session.email}</div>
            </div>
          )}

          <dl className="grid grid-cols-2 gap-3">
            <Stat label="Items" value={itemCount} />
            <Stat label="Locations" value={locationCount} />
            <Stat label="Photos" value={photoCount} />
            <Stat label="Pending IDs" value={pendingJobs} />
          </dl>

          <a
            href="/api/export"
            className="flex items-center justify-between gap-2 p-3 rounded-xl border bg-card text-sm font-medium hover:bg-accent/40"
          >
            <span className="inline-flex items-center gap-2">
              <Download className="size-4" /> Export data (JSON)
            </span>
            <span className="text-xs text-muted-foreground">.json</span>
          </a>

          <form action="/logout" method="post">
            <button
              type="submit"
              className="w-full h-11 rounded-xl border bg-card text-destructive text-sm font-medium hover:bg-destructive/10 inline-flex items-center justify-center gap-2"
            >
              <LogOut className="size-4" /> Sign out
            </button>
          </form>
        </div>
      </div>
    </PageShell>
  )
}

function Stat({ label, value }: { label: string; value: number }) {
  return (
    <div className="rounded-xl border bg-card p-3">
      <div className="text-xs uppercase tracking-wide text-muted-foreground">{label}</div>
      <div className="text-2xl font-semibold tabular-nums">{value}</div>
    </div>
  )
}