// BEGIN CHANGE: pagina Download (portable launchers OTC + CIP Extended) + scan seguro
"use client";

import { useEffect, useState } from "react";
import { useI18n } from "@/i18n/LanguageProvider";
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { apiUrl } from "@/lib/api";

const DL_BASE = "https://ot.whiteantidote.com/Downloads";

type ScanKey = "otc" | "custom" | "android";

export default function DownloadPage() {
  const { t } = useI18n();
  // BEGIN CHANGE: VirusTotal links from CMS (download-info.php)
  const [vtLinks, setVtLinks] = useState<Record<ScanKey, string>>({
    otc: "",
    custom: "",
    android: "",
  });

  useEffect(() => {
    fetch(apiUrl("download-info.php"))
      .then((r) => (r.ok ? r.json() : null))
      .then((json) => {
        const vt = json?.virusTotal;
        if (!vt || typeof vt !== "object") return;
        setVtLinks({
          otc: typeof vt.otc === "string" ? vt.otc.trim() : "",
          custom: typeof vt.custom === "string" ? vt.custom.trim() : "",
          android: typeof vt.android === "string" ? vt.android.trim() : "",
        });
      })
      .catch(() => {
        /* ignore - badge still shows without link */
      });
  }, []);
  // END CHANGE

  const items: {
    title: string;
    desc: string;
    href: string;
    scanKey: ScanKey;
    androidHint?: boolean;
  }[] = [
    {
      title: t.download.custom,
      desc: t.download.customDesc,
      href: `${DL_BASE}/WA-OTC-Setup.exe`,
      scanKey: "otc",
    },
    {
      title: t.download.windows,
      desc: t.download.windowsDesc,
      href: `${DL_BASE}/WA-CustomClient-Setup.exe`,
      scanKey: "custom",
    },
    {
      title: t.download.android,
      desc: t.download.androidDesc,
      href: `${DL_BASE}/whiteantidote-android.apk`,
      scanKey: "android",
      androidHint: true,
    },
  ];

  return (
    <div className="flex min-h-screen flex-col">
      <Navbar />
      <main className="mx-auto w-full max-w-4xl flex-1 px-6 py-14">
        <h1 className="text-3xl font-semibold tracking-tight">{t.download.title}</h1>
        <p className="mt-2 text-muted">{t.download.subtitle}</p>
        <p className="mt-3 text-sm text-muted">{t.download.qolHint}</p>

        <div className="mt-8 grid grid-cols-1 gap-5 sm:grid-cols-3">
          {items.map((it) => {
            const vtHref = vtLinks[it.scanKey];
            return (
              <div
                key={it.title}
                className="flex flex-col rounded-xl border border-border bg-panel p-6"
              >
                <h2 className="text-base font-semibold">{it.title}</h2>
                <p className="mt-2 flex-1 text-sm text-muted">{it.desc}</p>
                {it.androidHint && (
                  <p className="mt-2 text-xs text-muted">
                    {t.download.androidInstallHint}
                  </p>
                )}
                {/* BEGIN CHANGE: selo verificado em OTC + Classic Extended + Android */}
                <div className="mt-3 rounded-lg border border-border/80 bg-background/40 px-3 py-2">
                  <p className="text-xs font-semibold text-brand">
                    {t.download.scanSafeLabel}
                  </p>
                  <p className="mt-1 text-xs text-muted">{t.download.scanSafeNote}</p>
                  {vtHref ? (
                    <a
                      href={vtHref}
                      target="_blank"
                      rel="noreferrer"
                      className="mt-2 inline-block text-xs font-medium text-brand hover:underline"
                    >
                      {t.download.virusTotal}
                    </a>
                  ) : null}
                </div>
                {/* END CHANGE */}
                <a
                  href={it.href}
                  target="_blank"
                  rel="noreferrer"
                  className="mt-5 rounded-lg bg-brand px-4 py-2 text-center text-sm font-medium text-background transition-opacity hover:opacity-90"
                >
                  {t.download.getIt}
                </a>
              </div>
            );
          })}
        </div>
      </main>
      <Footer />
    </div>
  );
}
// END CHANGE