export const dynamic = "force-dynamic";

import type { Metadata } from "next";
import Link from "next/link";
import { ChevronRight, PlayCircle } from "lucide-react";
import { getConfig } from "@/lib/config/load";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export const metadata: Metadata = { title: "Scripts" };

export default function DashboardPage() {
  const { config } = getConfig();

  if (config.scripts.length === 0) {
    return (
      <div className="text-muted-foreground py-24 text-center">
        No scripts configured yet. Add entries under{" "}
        <code className="bg-muted rounded px-1.5 py-0.5">scripts:</code> in your
        config file.
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-4">
      <h1 className="text-2xl font-semibold tracking-tight">Scripts</h1>
      <div className="grid gap-3 sm:grid-cols-2">
        {config.scripts.map((script) => (
          <Link key={script.id} href={`/scripts/${script.id}`}>
            <Card className="hover:border-foreground/30 h-full transition-colors">
              <CardHeader className="flex flex-row items-start justify-between gap-2 space-y-0">
                <div className="flex items-center gap-2">
                  <PlayCircle className="text-muted-foreground size-4.5 shrink-0" />
                  <CardTitle className="text-base">{script.name}</CardTitle>
                </div>
                <ChevronRight className="text-muted-foreground size-4 shrink-0" />
              </CardHeader>
              {script.description && (
                <CardContent className="text-muted-foreground text-sm">
                  {script.description}
                </CardContent>
              )}
            </Card>
          </Link>
        ))}
      </div>
    </div>
  );
}