import React, { useMemo, useState } from "react";
import { Link as LinkIcon, Search, Loader2, CheckCircle2, XCircle, ExternalLink } from "lucide-react";

/**
 * ENV REQUIRED (add these to your Replit / Vite env):
 *  VITE_GODADDY_BASE_URL   => https://api.ote-godaddy.com   (sandbox) OR https://api.godaddy.com (prod)
 *  VITE_GODADDY_API_KEY    => your key
 *  VITE_GODADDY_API_SECRET => your secret
 *  VITE_RESELLER_STORE_URL => e.g. https://shop.yourbrand.com (white-label storefront)
 */

const BASE_URL   = import.meta.env.VITE_GODADDY_BASE_URL as string;
const API_KEY    = import.meta.env.VITE_GODADDY_API_KEY as string;
const API_SECRET = import.meta.env.VITE_GODADDY_API_SECRET as string;
const STORE_URL  = (import.meta.env.VITE_RESELLER_STORE_URL as string) || "#";

type Availability = {
  domain: string;
  available: boolean;
  currency?: string;
  price?: number;   // usually minor units (e.g., cents)
};

type Suggestion = {
  domain: string;
  score?: number;
  price?: number;
  currency?: string;
  available?: boolean;
};

function formatPrice(cents?: number, currency: string = "USD") {
  if (typeof cents !== "number") return "—";
  return new Intl.NumberFormat(undefined, { style: "currency", currency }).format(cents / 100);
}

async function gdFetch<T>(path: string): Promise<T> {
  const res = await fetch(`${BASE_URL}${path}`, {
    headers: {
      Authorization: `sso-key ${API_KEY}:${API_SECRET}`,
      Accept: "application/json",
    },
  });
  if (!res.ok) {
    const text = await res.text().catch(() => "");
    throw new Error(`GoDaddy API ${res.status}: ${text || res.statusText}`);
  }
  return res.json();
}

async function checkAvailability(domain: string): Promise<Availability> {
  const q = encodeURIComponent(domain.trim());
  return gdFetch<Availability>(`/v1/domains/available?domain=${q}&checkType=FAST`);
}

async function suggestDomains(query: string, tlds = "com,net,org,io,co,ai"): Promise<Suggestion[]> {
  const q = encodeURIComponent(query.trim());
  return gdFetch<Suggestion[]>(`/v1/domains/suggest?query=${q}&tlds=${tlds}&limit=20`);
}

export default function DomainsPage() {
  const [query, setQuery] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const [result, setResult] = useState<Availability | null>(null);
  const [suggestions, setSuggestions] = useState<Suggestion[]>([]);

  const cleanQuery = useMemo(() => query.trim().toLowerCase(), [query]);

  async function onSearch(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    setResult(null);
    setSuggestions([]);
    if (!cleanQuery) return;

    setBusy(true);
    try {
      // If user typed "brand" without a TLD, try .com as primary query & use raw for suggestions
      const hasDot = cleanQuery.includes(".");
      const primary = hasDot ? cleanQuery : `${cleanQuery}.com`;

      const [avail, sugg] = await Promise.all([
        checkAvailability(primary),
        suggestDomains(hasDot ? cleanQuery.split(".")[0] : cleanQuery),
      ]);

      setResult(avail);
      setSuggestions(sugg);
    } catch (err: any) {
      setError(err?.message || "Something went wrong talking to GoDaddy.");
    } finally {
      setBusy(false);
    }
  }

  function buyHref(domain: string) {
    // 🔗 Replace this with the exact path/param your reseller storefront accepts.
    // Common patterns: /search?domain= or /cart/add?domain=
    const u = new URL(STORE_URL);
    u.pathname = "/search";
    u.searchParams.set("domain", domain);
    return u.toString();
  }

  return (
    <div className="p-6">
      {/* Header */}
      <div className="mb-6 flex items-center gap-3">
        <div className="p-2 rounded-xl bg-gray-100">
          <LinkIcon className="w-5 h-5" />
        </div>
        <div>
          <h1 className="text-2xl font-semibold">Domains</h1>
          <p className="text-sm text-gray-500">Search and buy domains via the GoDaddy API (sandbox or production).</p>
        </div>
      </div>

      {/* Search */}
      <form onSubmit={onSearch} className="flex gap-2 max-w-xl">
        <div className="relative flex-1">
          <input
            type="text"
            placeholder="e.g., yourbrand or yourbrand.com"
            className="w-full rounded-xl border px-10 py-3 outline-none focus:ring-2 focus:ring-indigo-500"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
          />
          <Search className="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
        </div>
        <button
          type="submit"
          disabled={busy || !cleanQuery}
          className="rounded-xl px-4 py-3 bg-indigo-600 text-white disabled:opacity-50 hover:bg-indigo-700 transition"
        >
          {busy ? <span className="inline-flex items-center gap-2"><Loader2 className="w-4 h-4 animate-spin" />Searching</span> : "Search"}
        </button>
      </form>

      {/* Error */}
      {error && (
        <div className="mt-4 rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700">
          {error}
        </div>
      )}

      {/* Availability Result */}
      {result && (
        <div className="mt-8 max-w-3xl">
          <h2 className="text-lg font-semibold mb-3">Result</h2>
          <div className="rounded-2xl border p-4 flex items-center justify-between">
            <div className="flex items-center gap-3">
              {result.available ? (
                <CheckCircle2 className="w-5 h-5 text-emerald-600" />
              ) : (
                <XCircle className="w-5 h-5 text-rose-600" />
              )}
              <div>
                <div className="font-medium">{result.domain}</div>
                <div className="text-xs text-gray-500">
                  {result.available ? "Available" : "Not available"}
                </div>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <div className="text-sm text-gray-700">
                {formatPrice(result.price, result.currency)}
              </div>
              {result.available ? (
                <a
                  href={buyHref(result.domain)}
                  target="_blank"
                  rel="noreferrer"
                  className="inline-flex items-center gap-2 rounded-xl bg-black text-white px-4 py-2 hover:opacity-90"
                  title="Buy via reseller storefront"
                >
                  Buy <ExternalLink className="w-4 h-4" />
                </a>
              ) : null}
            </div>
          </div>
        </div>
      )}

      {/* Suggestions */}
      {suggestions.length > 0 && (
        <div className="mt-10 max-w-3xl">
          <h2 className="text-lg font-semibold mb-3">Suggestions</h2>
          <div className="grid gap-3">
            {suggestions.map((s) => (
              <div key={s.domain} className="rounded-2xl border p-4 flex items-center justify-between">
                <div className="flex flex-col">
                  <span className="font-medium">{s.domain}</span>
                  <span className="text-xs text-gray-500">
                    {typeof s.score === "number" ? `Match score: ${Math.round((s.score || 0) * 100)}/100` : "Suggested"}
                  </span>
                </div>
                <div className="flex items-center gap-3">
                  <span className="text-sm text-gray-700">{formatPrice(s.price, s.currency)}</span>
                  <a
                    href={buyHref(s.domain)}
                    target="_blank"
                    rel="noreferrer"
                    className="inline-flex items-center gap-2 rounded-xl bg-white border px-4 py-2 hover:bg-gray-50"
                    title="Buy via reseller storefront"
                  >
                    Buy <ExternalLink className="w-4 h-4" />
                  </a>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Helpful note */}
      <div className="mt-10 text-xs text-gray-500">
        * Prices are returned in minor currency units by GoDaddy (e.g., cents). Displayed values are formatted locally.
      </div>
    </div>
  );
}
