import { dgptPremiumPrice, dgptPrice, dgptStatus } from "@/lib/data";
import StatusPill from "../StatusPill";
import Icon from "../../Icon";
import useAppStore from "@/store/useAppStore";
import { useAffiliateLink } from "@/lib/affiliate";
export const FEATURED_TLDS = [
  "com",
  "net",
  "org",
  "info",
  "pro",
  "biz",
  "cc",
  "uk",
  "app",
  "dev",
  "xyz",
  "tech",
  //   "design",
];
export default function PrimaryResult({}) {
  const { query, domains } = useAppStore();
  const getAffiliateLink = useAffiliateLink();

  const firstDomain =
    domains?.length > 1 ? domains?.filter((x) => x?.token === "com") : domains;

  const name = query?.split(".")?.[0] || "";

  const tld = firstDomain?.[0]?.token || "com";

  const status = firstDomain?.[0]?.availability || "checking";

  const featuredTlds =
    domains?.filter((d) => FEATURED_TLDS.includes(d.token)) || [];

  //   console.log(status);

  const standardPrice = name ? dgptPrice(name, tld) : "—";
  const premiumPrice = name ? dgptPremiumPrice(name, tld) : 0;

  const headline = {
    available: "Great news — this domain is available.",
    premium: "Available as a premium domain.",
    registered: "This one is already taken.",
    checking: "Type a name to start checking…",
  }[status];

  const canBuy = status === "available" || status === "premium";
  const affiliateUrl =
    canBuy && name ? getAffiliateLink(`${name}.${tld}`) : null;

  return (
    <div className="relative rounded-3xl border border-ink-200 dark:border-ink-800 bg-white dark:bg-ink-900 p-6 md:p-8 shadow-soft theme-trans overflow-hidden">
      <div
        className={
          "absolute left-0 top-0 bottom-0 w-1 " +
          (status === "available"
            ? "bg-emerald-500"
            : status === "premium"
              ? "bg-amber-500"
              : status === "registered"
                ? "bg-rose-500"
                : "bg-ink-300 dark:bg-ink-700")
        }
      />
      <div className="flex flex-wrap items-start gap-y-4 gap-x-6">
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2 mb-2">
            <span className="text-[11px] uppercase tracking-[0.18em] text-ink-400 dark:text-ink-500">
              Top match
            </span>
            <span className="h-1 w-1 rounded-full bg-ink-300 dark:bg-ink-700" />
            <StatusPill status={status} size="sm" />
          </div>
          <div className="font-mono text-3xl md:text-5xl font-semibold tracking-tight text-ink-900 dark:text-ink-50 truncate">
            {name || "yourname"}
            <span className="text-brand-500 dark:text-brand-300">.{tld}</span>
          </div>
          <div className="mt-3 text-ink-500 dark:text-ink-400 text-sm md:text-base">
            {headline}
          </div>
        </div>
        <div className="flex items-end gap-5">
          {/* <div>
            <div className="text-[11px] uppercase tracking-[0.18em] text-ink-400 dark:text-ink-500">
              {status === "premium" ? "Premium price" : "Yearly price"}
            </div>
            <div className="font-mono text-2xl md:text-3xl font-semibold text-ink-900 dark:text-ink-50">
              {status === "premium" ? (
                "$" + premiumPrice.toLocaleString()
              ) : status === "registered" ? (
                <span className="text-ink-400 dark:text-ink-600">—</span>
              ) : (
                <>
                  $<span>{standardPrice}</span>
                  <span className="text-base text-ink-400 dark:text-ink-500">
                    /yr
                  </span>
                </>
              )}
            </div>
          </div> */}
          {affiliateUrl ? (
            <a
              href={affiliateUrl}
              target="_blank"
              rel="sponsored noopener noreferrer"
              className="inline-flex items-center gap-1.5 px-5 py-3 rounded-xl text-sm font-medium transition shadow-pop bg-ink-900 text-ink-50 dark:bg-brand-500 dark:text-white hover:bg-ink-700 dark:hover:bg-brand-400"
            >
              <Icon.Cart className="w-4 h-4" />
              {status === "premium" ? "Buy now" : "Register"}
            </a>
          ) : (
            <button
              disabled={status === "registered" || status === "checking"}
              className={
                "inline-flex items-center gap-1.5 px-5 py-3 rounded-xl text-sm font-medium transition shadow-pop " +
                (status === "registered" || status === "checking"
                  ? "bg-ink-100 dark:bg-ink-800 text-ink-400 dark:text-ink-600 cursor-not-allowed shadow-none"
                  : "bg-ink-900 text-ink-50 dark:bg-brand-500 dark:text-white hover:bg-ink-700 dark:hover:bg-brand-400")
              }
            >
              <Icon.Cart className="w-4 h-4" />
              {status === "registered"
                ? "Unavailable"
                : status === "premium"
                  ? "Buy now"
                  : "Register"}
            </button>
          )}
        </div>
      </div>

      <div className="mt-7 pt-6 border-t border-ink-100 dark:border-ink-800">
        <div className="flex items-center justify-between mb-3">
          <div className="text-[11px] uppercase tracking-[0.18em] text-ink-400 dark:text-ink-500">
            Featured TLDs
          </div>
          <a
            href="#tlds"
            className="text-xs font-medium text-brand-600 dark:text-brand-300 hover:underline inline-flex items-center gap-1"
          >
            View all 1,147 <Icon.ArrowRight className="w-3 h-3" />
          </a>
        </div>
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-2">
          {featuredTlds.map((t) => {
            const isAvail = t?.availability || "checking";
            // const isAvail = s === "available" || s === "registered";
            const tldAffiliateUrl =
              name && (isAvail === "available" || isAvail === "premium")
                ? getAffiliateLink(`${name}.${t?.token}`)
                : null;
            const tileClassName =
              "group relative rounded-xl border px-3 py-2.5 flex items-center justify-between text-sm theme-trans " +
              (isAvail === "available"
                ? "border-emerald-200 bg-emerald-50/40 dark:border-emerald-500/30 dark:bg-emerald-500/5"
                : "border-ink-200 bg-ink-50 dark:border-ink-800 dark:bg-ink-800/40") +
              (tldAffiliateUrl ? " hover:border-brand-300 dark:hover:border-brand-500/50" : "");
            const tileContent = (
              <>
                <span className="font-mono truncate">
                  <span className="text-ink-500 dark:text-ink-400">.</span>
                  <span className="text-ink-900 dark:text-ink-100 font-medium">
                    {t?.token}
                  </span>
                </span>
                <span
                  className={
                    isAvail === "available"
                      ? "w-2 h-2 rounded-full bg-emerald-500"
                      : isAvail === "premium"
                        ? "w-2 h-2 rounded-full bg-amber-500"
                        : isAvail === "registered"
                          ? "w-2 h-2 rounded-full bg-rose-500"
                          : "w-2 h-2 rounded-full bg-ink-300 dark:bg-ink-700"
                  }
                />
              </>
            );
            return tldAffiliateUrl ? (
              <a
                key={t?.token}
                href={tldAffiliateUrl}
                target="_blank"
                rel="sponsored noopener noreferrer"
                className={tileClassName}
              >
                {tileContent}
              </a>
            ) : (
              <div key={t?.token} className={tileClassName}>
                {tileContent}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}