"use client";

import { useEffect, useState } from "react";
import { Play, Smartphone, Download } from "lucide-react";
import { fetchLinks, FALLBACK_LINKS, type SiteLinks } from "@/lib/links";
import { APP_URL } from "@/lib/site";

function BazaarIcon() {
  return <span className="text-lg">🛒</span>;
}
function MyketIcon() {
  return <span className="text-lg">🟢</span>;
}

export function DownloadButtons({ variant = "hero" }: { variant?: "hero" | "full" }) {
  const [links, setLinks] = useState<SiteLinks>(FALLBACK_LINKS);

  useEffect(() => {
    let on = true;
    fetchLinks().then((l) => on && setLinks(l));
    return () => {
      on = false;
    };
  }, []);

  const webUrl = links.webPlayUrl || APP_URL;

  return (
    <div className={variant === "hero" ? "flex flex-wrap gap-3" : "grid gap-3 sm:grid-cols-2"}>
      {/* Always available: play in browser */}
      <a href={webUrl} className="flex items-center justify-center gap-2 rounded-2xl btn-gold px-6 py-3.5 text-base">
        <Play size={18} /> بازی در مرورگر (رایگان)
      </a>

      {links.bazaarEnabled && links.bazaarUrl && (
        <a
          href={links.bazaarUrl}
          target="_blank"
          rel="noopener"
          className="flex items-center justify-center gap-2 rounded-2xl glass px-6 py-3.5 text-base text-cream hover:border-gold/40"
        >
          <BazaarIcon /> کافه‌بازار
        </a>
      )}

      {links.myketEnabled && links.myketUrl && (
        <a
          href={links.myketUrl}
          target="_blank"
          rel="noopener"
          className="flex items-center justify-center gap-2 rounded-2xl glass px-6 py-3.5 text-base text-cream hover:border-gold/40"
        >
          <MyketIcon /> مایکت
        </a>
      )}

      {links.iosPwaEnabled && (
        <a
          href="/download#ios"
          className="flex items-center justify-center gap-2 rounded-2xl glass px-6 py-3.5 text-base text-cream hover:border-gold/40"
        >
          <span className="text-lg">🍏</span> نصب روی آیفون (iOS)
        </a>
      )}

      {variant === "full" && links.iosPwaEnabled && (
        <a
          href="/download#android"
          className="flex items-center justify-center gap-2 rounded-2xl glass px-6 py-3.5 text-base text-cream hover:border-gold/40"
        >
          <Smartphone size={18} /> نصب روی اندروید (PWA)
        </a>
      )}

      {links.directApkEnabled && links.directApkUrl && (
        <a
          href={links.directApkUrl}
          className="flex items-center justify-center gap-2 rounded-2xl glass px-6 py-3.5 text-base text-cream hover:border-gold/40"
        >
          <Download size={18} /> دانلود مستقیم APK
        </a>
      )}
    </div>
  );
}