import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { BrandMark } from "@/components/layout/BrandMark";
import { listRecordings } from "@/lib/db/queries/recordings";
import { listPlaySessions } from "@/lib/db/queries/play-sessions";
import { getSessionsSummary } from "@/lib/db/queries/stats";

// Always reflects live DB state for an authenticated, single-tenant app -
// never worth prerendering (and the DB file doesn't exist at build time).
export const dynamic = "force-dynamic";

export default async function DashboardPage() {
  const [recordings, sessions, summary] = await Promise.all([
    listRecordings(),
    listPlaySessions(),
    getSessionsSummary(),
  ]);

  const recentRecordings = recordings.slice(0, 5);
  const recentSessions = [...sessions].reverse().slice(0, 5);

  return (
    <div className="flex flex-col gap-8">
      <Card className="bp-glass overflow-hidden">
        <CardContent className="flex flex-col items-start gap-4 py-8">
          <BrandMark size={48} animated className="rounded-[9px]" />
          <h1 className="font-heading text-3xl font-semibold">Welcome back</h1>
          <p className="max-w-xl text-sm text-muted-foreground">
            Scan for nearby devices, take control, and record sessions to replay later - all running
            directly from your browser over Web Bluetooth.
          </p>
          <Button asChild size="lg">
            <Link href="/control">Start a session</Link>
          </Button>
        </CardContent>
      </Card>

      <div className="grid gap-4 sm:grid-cols-3">
        <Card className="bp-glass">
          <CardHeader>
            <CardTitle className="text-sm text-muted-foreground">Completed sessions</CardTitle>
          </CardHeader>
          <CardContent className="bp-readout text-3xl">{summary.count}</CardContent>
        </Card>
        <Card className="bp-glass">
          <CardHeader>
            <CardTitle className="text-sm text-muted-foreground">Total play time</CardTitle>
          </CardHeader>
          <CardContent className="bp-readout text-3xl">
            {(summary.totalDurationMs / 3_600_000).toFixed(1)}h
          </CardContent>
        </Card>
        <Card className="bp-glass">
          <CardHeader>
            <CardTitle className="text-sm text-muted-foreground">Saved recordings</CardTitle>
          </CardHeader>
          <CardContent className="bp-readout text-3xl">{recordings.length}</CardContent>
        </Card>
      </div>

      <div className="grid gap-6 lg:grid-cols-2">
        <Card className="bp-glass">
          <CardHeader>
            <CardTitle>Recent recordings</CardTitle>
          </CardHeader>
          <CardContent className="flex flex-col">
            {recentRecordings.length === 0 && (
              <p className="text-sm text-muted-foreground">Nothing saved yet.</p>
            )}
            {recentRecordings.map((r, i) => (
              <Link key={r.id} href={`/recordings/${r.id}`} className="group">
                {i > 0 && <div className="bp-hairline" />}
                <div className="flex items-center justify-between px-1 py-2 text-sm">
                  <span className="group-hover:text-primary">{r.name}</span>
                  <span className="bp-readout text-xs text-muted-foreground">{r.playCount} plays</span>
                </div>
              </Link>
            ))}
          </CardContent>
        </Card>

        <Card className="bp-glass">
          <CardHeader>
            <CardTitle>Recent sessions</CardTitle>
          </CardHeader>
          <CardContent className="flex flex-col">
            {recentSessions.length === 0 && <p className="text-sm text-muted-foreground">No sessions yet.</p>}
            {recentSessions.map((s, i) => (
              <Link key={s.id} href={`/sessions/${s.id}`} className="group">
                {i > 0 && <div className="bp-hairline" />}
                <div className="flex items-center justify-between px-1 py-2 text-sm">
                  <span className="group-hover:text-primary">{s.name ?? `Session #${s.id}`}</span>
                  <span className="bp-readout text-xs text-muted-foreground">
                    {new Date(s.startedAt).toLocaleDateString()}
                  </span>
                </div>
              </Link>
            ))}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}