import { Metadata } from "next";
import Link from "next/link";
import { getUser } from "@/lib/auth";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { LogoutButton } from "@/components/auth/logout-button";
import { prisma } from "@/lib/prisma";

export const metadata: Metadata = {
  title: "Dashboard - Stones Database",
  description: "Dashboard for the Stones Database",
};

export default async function DashboardPage() {
  const user = await getUser();
  
  // Get counts from database
  const contactsCount = await prisma.contact.count();
  const nftHoldingsCount = await prisma.nftHolding.count();
  const daoMembershipsCount = await prisma.daoMembership.count();
  const tokenHoldingsCount = await prisma.tokenHolding.count();

  return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-14 items-center justify-between">
          <div className="mr-4 flex">
            <Link href="/" className="mr-6 flex items-center space-x-2">
              <span className="font-bold">Stones Database</span>
            </Link>
          </div>
          <nav className="flex items-center space-x-4">
            <Link href="/contacts" className="text-sm font-medium">
              Contacts
            </Link>
            <Link href="/dashboard" className="text-sm font-medium">
              Dashboard
            </Link>
            {user && (
              <div className="flex items-center gap-4">
                <span className="text-sm text-muted-foreground">
                  Hello, {user.name}
                </span>
                <LogoutButton />
              </div>
            )}
          </nav>
        </div>
      </header>
      <main className="flex-1 container py-6">
        <div className="flex items-center justify-between mb-6">
          <h1 className="text-3xl font-bold">Dashboard</h1>
          <div className="flex gap-2">
            <Link href="/api/contacts/export">
              <Button variant="outline">
                Export All Contacts
              </Button>
            </Link>
          </div>
        </div>
        
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">
                Total Contacts
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{contactsCount}</div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">
                NFT Holdings
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{nftHoldingsCount}</div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">
                DAO Memberships
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{daoMembershipsCount}</div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">
                Token Holdings
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{tokenHoldingsCount}</div>
            </CardContent>
          </Card>
        </div>
        
        <div className="mt-8">
          <Card>
            <CardHeader>
              <CardTitle>Quick Actions</CardTitle>
            </CardHeader>
            <CardContent className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
              <Link href="/contacts">
                <Button className="w-full">Browse Contacts</Button>
              </Link>
              <Link href="/contacts?page=1">
                <Button variant="outline" className="w-full">View Recent Contacts</Button>
              </Link>
              <Link href="/contacts/new">
                <Button variant="outline" className="w-full">
                  Add New Contact
                </Button>
              </Link>
              <Link href="/contacts/import">
                <Button variant="outline" className="w-full">
                  Import Contacts
                </Button>
              </Link>
            </CardContent>
          </Card>
        </div>
      </main>
      <footer className="w-full border-t py-6">
        <div className="container flex justify-center items-center">
          <p className="text-center text-sm leading-loose text-muted-foreground">
            © 2025 BoilerHaus. All rights reserved.
          </p>
        </div>
      </footer>
    </div>
  );
}