"use client";

import {
  BADGE_LABELS,
  formatBytes,
  formatDate,
  NexusRelease,
  toRelativePath,
  truncateHash,
} from "@/lib/releases";
import { GlassCard } from "./GlassCard";
import { ProgressPill } from "./ProgressPill";

const badgeVariant = (badge: NexusRelease["badge"]) => {
  switch (badge) {
    case "recommended":
      return "brand" as const;
    case "deprecated-baseline":
      return "amber" as const;
    case "experimental":
      return "muted" as const;
    default:
      return "blue" as const;
  }
};

interface DownloadCardProps {
  release: NexusRelease;
}

export function DownloadCard({ release }: DownloadCardProps) {
  const zipPath = toRelativePath(release.packageUrl);
  const setupPath = toRelativePath(release.installerUrl);

  return (
    <GlassCard glow={release.badge === "recommended"} hover className="space-y-4">
      <div className="flex flex-wrap items-center gap-2">
        <h3 className="text-lg font-bold text-nexus-navy">Build {release.build}</h3>
        <span className="font-mono text-sm text-nexus-muted">{release.version}</span>
        <ProgressPill label={BADGE_LABELS[release.badge]} variant={badgeVariant(release.badge)} />
      </div>

      <dl className="grid gap-2 text-sm sm:grid-cols-2">
        <div>
          <dt className="text-nexus-muted">Udgivet</dt>
          <dd className="font-medium">{formatDate(release.publishedAt)}</dd>
        </div>
        <div>
          <dt className="text-nexus-muted">ZIP-størrelse</dt>
          <dd className="font-medium">{formatBytes(release.sizeBytes)}</dd>
        </div>
        {release.sha256 && (
          <div className="sm:col-span-2">
            <dt className="text-nexus-muted">SHA256 (ZIP)</dt>
            <dd className="font-mono text-xs break-all" title={release.sha256}>
              {truncateHash(release.sha256)}
            </dd>
          </div>
        )}
      </dl>

      {release.notes.length > 0 && (
        <ul className="list-inside list-disc space-y-1 text-sm text-nexus-muted">
          {release.notes.map((note) => (
            <li key={note}>{note}</li>
          ))}
        </ul>
      )}

      <div className="flex flex-wrap gap-2">
        <a href={zipPath} className="btn-brand rounded-xl px-4 py-2 text-sm">
          Download ZIP
        </a>
        <a href={setupPath} className="btn-brand-outline rounded-xl px-4 py-2 text-sm">
          NexusSetup.exe
        </a>
        {release.manifestPath && (
          <a
            href={release.manifestPath}
            className="rounded-xl px-4 py-2 text-sm text-nexus-muted underline-offset-2 hover:underline"
          >
            manifest.json
          </a>
        )}
      </div>
    </GlassCard>
  );
}
