import type { Metadata } from "next";
import Link from "next/link";
import { Checksum, Download } from "@/components/download";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { formatDate, latestRelease, nightlyRelease, releasesPage } from "@/lib/releases";

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

export default async function DownloadPage() {
  const [release, nightly] = await Promise.all([latestRelease(), nightlyRelease()]);
  return (
    <div className="space-y-12">
      <section className="max-w-2xl space-y-5">
        <h1 className="text-3xl font-semibold tracking-tight">Download T5DE</h1>
        <p className="text-muted-foreground">
          For Windows. Install IMVU Classic{release?.imvu && <> {release.imvu}</>} from imvu.com first, then run
          T5DE-Setup.exe.
        </p>
        <Download release={release} />
      </section>

      <section className="grid gap-4 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>Windows Protected Your PC?</CardTitle>
          </CardHeader>
          <CardContent className="space-y-2 text-sm text-muted-foreground">
            <p>
              T5DE&apos;s setup isn&apos;t code-signed yet, so Windows may warn about it. Click{" "}
              <strong className="text-foreground">More info</strong>, then{" "}
              <strong className="text-foreground">Run anyway</strong>.
            </p>
            <p>To check the file first, compare its checksum with the one above in PowerShell:</p>
            <code className="block rounded bg-muted px-2 py-1.5 font-mono text-xs text-foreground">
              Get-FileHash .\T5DE-Setup.exe
            </code>
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardDescription>For Testers</CardDescription>
            <CardTitle>Nightly Build</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3 text-sm text-muted-foreground">
            <p>
              The latest changes, built every time they land. It may break, and it uses the staging hub
              (hub.staging.t5de.dev) unless you choose another in Settings.
            </p>
            {nightly?.setup ? (
              <>
                <p>
                  <a href={nightly.setup.url} className="text-foreground underline underline-offset-4">
                    Download the nightly
                  </a>{" "}
                  · {nightly.version} · {formatDate(nightly.date)}
                </p>
                {nightly.sha256 && <Checksum sha256={nightly.sha256} />}
              </>
            ) : (
              <a href={releasesPage} className="text-foreground underline underline-offset-4">
                Releases on git.t5de.dev
              </a>
            )}
          </CardContent>
        </Card>
      </section>

      <p className="text-sm text-muted-foreground">
        Older versions are on{" "}
        <a href={releasesPage} className="text-foreground underline underline-offset-4">
          git.t5de.dev
        </a>
        . What changed:{" "}
        <Link href="/changelog" className="text-foreground underline underline-offset-4">
          changelog
        </Link>
        .
      </p>
    </div>
  );
}