"use client";

import Image from "next/image";
import { useEffect, useMemo, useState } from "react";
import Navbar from "@/components/layout/Navbar";
import Footer from "@/components/layout/Footer";
import FAQTabs from "@/components/sections/FAQTabs";
import JoinCTA from "@/components/sections/JoinCTA";

type Mode = "Giftcard" | "Crypto";

type CryptoAsset = {
  crypto: string;
  assetTitle: string;
  assetImage: string;
  bitSystemUSDNGNRate: number;
  bulkSystemUSDNGNRate: number;
  minimumDeposit: string;
};

type GiftcardRate = {
  id: string;
  giftcardType: string;
  rate: string;
  giftcard: { id: string; name: string; image: string };
  country: { id: string; country: string; image: string };
  range: { id: string; from: number; to: number; range: string };
};

const GIFTCARD_API = "https://web-api.coast.ng/giftcard";
const CRYPTO_API = "https://web-api.coast.ng/crypto/rates-and-assets";

function FieldLabel({ children }: { children: React.ReactNode }) {
  return <label className="text-[13px] font-semibold text-coast-navy">{children}</label>;
}

function ChevronDownIcon() {
  return (
    <svg
      width="14"
      height="14"
      viewBox="0 0 14 14"
      fill="none"
      aria-hidden
      className="pointer-events-none absolute right-4 top-1/2 -translate-y-1/2"
    >
      <path
        d="M3 5L7 9L11 5"
        stroke="#7c8aa6"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function CalculatorCard() {
  const [mode, setMode] = useState<Mode>("Giftcard");
  const [giftcard, setGiftcard] = useState("");
  const [country, setCountry] = useState("");
  const [type, setType] = useState("");
  const [range, setRange] = useState("");
  const [quantity, setQuantity] = useState("");
  const [amount, setAmount] = useState("");
  const [assetTicker, setAssetTicker] = useState<string>("");

  const [rates, setRates] = useState<GiftcardRate[]>([]);
  const [loadingRates, setLoadingRates] = useState(false);
  const [ratesError, setRatesError] = useState<string | null>(null);

  const [cryptoAssets, setCryptoAssets] = useState<CryptoAsset[]>([]);
  const [loadingCrypto, setLoadingCrypto] = useState(false);
  const [cryptoError, setCryptoError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    setLoadingCrypto(true);
    setCryptoError(null);
    fetch(CRYPTO_API)
      .then((r) => {
        if (!r.ok) throw new Error(`HTTP ${r.status}`);
        return r.json();
      })
      .then((json) => {
        if (cancelled) return;
        const list: CryptoAsset[] = Array.isArray(json?.data) ? json.data : [];
        setCryptoAssets(list);
        if (list.length > 0) setAssetTicker((prev) => prev || list[0].crypto);
      })
      .catch((err) => {
        if (cancelled) return;
        setCryptoError(err?.message ?? "Failed to load crypto rates");
      })
      .finally(() => {
        if (!cancelled) setLoadingCrypto(false);
      });
    return () => {
      cancelled = true;
    };
  }, []);

  useEffect(() => {
    let cancelled = false;
    setLoadingRates(true);
    setRatesError(null);
    fetch(GIFTCARD_API)
      .then((r) => {
        if (!r.ok) throw new Error(`HTTP ${r.status}`);
        return r.json();
      })
      .then((json) => {
        if (cancelled) return;
        setRates(Array.isArray(json?.data) ? json.data : []);
      })
      .catch((err) => {
        if (cancelled) return;
        setRatesError(err?.message ?? "Failed to load rates");
      })
      .finally(() => {
        if (!cancelled) setLoadingRates(false);
      });
    return () => {
      cancelled = true;
    };
  }, []);

  const giftcardNames = useMemo(
    () => Array.from(new Set(rates.map((r) => r.giftcard.name))).sort(),
    [rates],
  );

  const ratesForGiftcard = useMemo(
    () => rates.filter((r) => r.giftcard.name === giftcard),
    [rates, giftcard],
  );

  const countries = useMemo(
    () => Array.from(new Set(ratesForGiftcard.map((r) => r.country.country))).sort(),
    [ratesForGiftcard],
  );

  const types = useMemo(
    () =>
      Array.from(
        new Set(
          ratesForGiftcard
            .filter((r) => r.country.country === country)
            .map((r) => r.giftcardType),
        ),
      ).sort(),
    [ratesForGiftcard, country],
  );

  const ranges = useMemo(
    () =>
      Array.from(
        new Set(
          ratesForGiftcard
            .filter(
              (r) => r.country.country === country && r.giftcardType === type,
            )
            .map((r) => r.range.range),
        ),
      ).sort(),
    [ratesForGiftcard, country, type],
  );

  const matchedRate = useMemo(
    () =>
      rates.find(
        (r) =>
          r.giftcard.name === giftcard &&
          r.country.country === country &&
          r.giftcardType === type &&
          r.range.range === range,
      ),
    [rates, giftcard, country, type, range],
  );

  const selectedAsset = useMemo(
    () => cryptoAssets.find((a) => a.crypto === assetTicker) ?? cryptoAssets[0],
    [cryptoAssets, assetTicker],
  );

  const selectedGiftcardImage = useMemo(
    () => rates.find((r) => r.giftcard.name === giftcard)?.giftcard.image,
    [rates, giftcard],
  );

  const youReceive = useMemo(() => {
    const qty = parseFloat(quantity) || 0;
    let total = 0;
    if (mode === "Giftcard") {
      const amt = parseFloat(amount) || 0;
      const rateNum = matchedRate ? parseFloat(matchedRate.rate) || 0 : 0;
      total = qty * amt * rateNum;
    } else if (selectedAsset) {
      total = qty * selectedAsset.bitSystemUSDNGNRate;
    }
    if (!total) return "₦0.00";
    return `₦${total.toLocaleString("en-NG", {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    })}`;
  }, [quantity, amount, mode, selectedAsset, matchedRate]);

  const inputClass =
    "w-full rounded-lg border border-coast-navy/10 bg-white px-3 py-2.5 text-[13px] text-coast-navy placeholder:text-coast-navy/40 focus:border-coast-blue focus:outline-none focus:ring-2 focus:ring-coast-blue/20";

  return (
    <div className="w-full max-w-[400px] rounded-2xl bg-white p-5 shadow-[0_30px_60px_-20px_rgba(2,16,58,0.18)] md:p-6">
      <div className="grid grid-cols-2 gap-2 rounded-full bg-coast-blue-soft/40 p-1">
        {(["Giftcard", "Crypto"] as Mode[]).map((m) => {
          const active = mode === m;
          return (
            <button
              key={m}
              type="button"
              onClick={() => {
                setMode(m);
                setQuantity("");
                setAmount("");
              }}
              className={`rounded-full py-2.5 text-[13px] font-semibold transition md:text-[14px] ${active ? "bg-coast-blue text-white" : "text-coast-navy"
                }`}
            >
              {m}
            </button>
          );
        })}
      </div>

      {mode === "Giftcard" ? (
        <>

          <div className="mt-4 flex flex-col gap-2">
            <FieldLabel>Giftcard</FieldLabel>
            <div className="relative">
              {selectedGiftcardImage && (
                <span className="pointer-events-none absolute left-3 top-1/2 z-10 flex -translate-y-1/2 items-center">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    src={selectedGiftcardImage}
                    alt=""
                    width={20}
                    height={20}
                    className="h-5 w-5 rounded object-contain"
                  />
                </span>
              )}
              <select
                value={giftcard}
                onChange={(e) => {
                  setGiftcard(e.target.value);
                  setCountry("");
                  setType("");
                  setRange("");
                }}
                disabled={loadingRates || !!ratesError}
                className={`${inputClass} appearance-none pr-10 disabled:opacity-60 ${selectedGiftcardImage ? "pl-10" : ""
                  }`}
              >
                <option value="">
                  {loadingRates
                    ? "Loading giftcards…"
                    : ratesError
                      ? "Failed to load"
                      : "Select giftcard"}
                </option>
                {giftcardNames.map((g) => (
                  <option key={g} value={g}>
                    {g}
                  </option>
                ))}
              </select>
              <ChevronDownIcon />
            </div>
            {ratesError && (
              <p className="text-[12px] text-red-500">{ratesError}</p>
            )}
          </div>

          <div className="mt-6 grid gap-4 md:grid-cols-2">
            <div className="flex flex-col gap-2">
              <FieldLabel>Country</FieldLabel>
              <div className="relative">
                <select
                  value={country}
                  onChange={(e) => {
                    setCountry(e.target.value);
                    setType("");
                    setRange("");
                  }}
                  disabled={!giftcard}
                  className={`${inputClass} appearance-none pr-10 disabled:opacity-60`}
                >
                  <option value="">Select country</option>
                  {countries.map((c) => (
                    <option key={c} value={c}>
                      {c}
                    </option>
                  ))}
                </select>
                <ChevronDownIcon />
              </div>
            </div>

            <div className="flex flex-col gap-2">
              <FieldLabel>Card type</FieldLabel>
              <div className="relative">
                <select
                  value={type}
                  onChange={(e) => {
                    setType(e.target.value);
                    setRange("");
                  }}
                  disabled={!country}
                  className={`${inputClass} appearance-none pr-10 disabled:opacity-60`}
                >
                  <option value="">Choose card type</option>
                  {types.map((t) => (
                    <option key={t} value={t}>
                      {t}
                    </option>
                  ))}
                </select>
                <ChevronDownIcon />
              </div>
            </div>
          </div>

          <div className="mt-4 flex flex-col gap-2">
            <FieldLabel>Range</FieldLabel>
            <div className="relative">
              <select
                value={range}
                onChange={(e) => setRange(e.target.value)}
                disabled={!type}
                className={`${inputClass} appearance-none pr-10 disabled:opacity-60`}
              >
                <option value="">Select range</option>
                {ranges.map((r) => (
                  <option key={r} value={r}>
                    {r}
                  </option>
                ))}
              </select>
              <ChevronDownIcon />
            </div>
          </div>

          <div className="mt-4 flex flex-col gap-2">
            <FieldLabel>Quantity</FieldLabel>
            <input
              type="number"
              min="0"
              value={quantity}
              onChange={(e) => setQuantity(e.target.value)}
              placeholder="Enter quantity"
              className={inputClass}
            />
          </div>

          <div className="mt-4 flex flex-col gap-2">
            <FieldLabel>Rate</FieldLabel>
            <div
              className={`${inputClass} cursor-not-allowed bg-coast-blue-soft/30 text-coast-navy/80`}
            >
              {matchedRate ? `N${matchedRate.rate}/$` : "—"}
            </div>
          </div>

          <div className="mt-4 flex flex-col gap-2">
            <FieldLabel>Amount</FieldLabel>
            <input
              type="number"
              min="0"
              value={amount}
              onChange={(e) => setAmount(e.target.value)}
              placeholder="Enter amount"
              className={inputClass}
            />
          </div>
        </>
      ) : (
        <>
          <div className="mt-6 flex flex-col gap-2">
            <FieldLabel>Asset</FieldLabel>
            <div className="relative">
              {selectedAsset?.assetImage && (
                <span className="pointer-events-none absolute left-3 top-1/2 z-10 flex -translate-y-1/2 items-center">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    src={selectedAsset.assetImage}
                    alt=""
                    width={20}
                    height={20}
                    className="h-5 w-5 rounded-full object-contain"
                  />
                </span>
              )}
              <select
                value={assetTicker}
                onChange={(e) => setAssetTicker(e.target.value)}
                disabled={loadingCrypto || !!cryptoError}
                className={`${inputClass} appearance-none pr-10 disabled:opacity-60 ${selectedAsset?.assetImage ? "pl-10" : ""
                  }`}
              >
                <option value="">
                  {loadingCrypto
                    ? "Loading assets…"
                    : cryptoError
                      ? "Failed to load"
                      : "Select asset"}
                </option>
                {cryptoAssets.map((a) => (
                  <option key={a.crypto} value={a.crypto}>
                    {a.assetTitle} ({a.crypto})
                  </option>
                ))}
              </select>
              <ChevronDownIcon />
            </div>
            {cryptoError && (
              <p className="text-[12px] text-red-500">{cryptoError}</p>
            )}
          </div>

          <div className="mt-4 flex flex-col gap-2">
            <FieldLabel>Quantity</FieldLabel>
            <div className="relative">
              <input
                type="number"
                min="0"
                value={quantity}
                onChange={(e) => setQuantity(e.target.value)}
                placeholder="Enter quantity"
                className={`${inputClass} pl-7`}
              />
              <span className="pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-[13px] text-coast-navy">
                $
              </span>
            </div>
          </div>

          <div className="mt-4 flex flex-col gap-2">
            <FieldLabel>Rate</FieldLabel>
            <div
              className={`${inputClass} cursor-not-allowed bg-coast-blue-soft/30 text-coast-navy/80`}
            >
              {selectedAsset
                ? `1 USD = ${selectedAsset.bitSystemUSDNGNRate.toLocaleString(
                  "en-NG",
                )} NGN`
                : "—"}
            </div>
          </div>
        </>
      )}

      <div className="mt-5 flex items-center justify-between">
        <span className="text-[13px] font-medium text-coast-navy/70 md:text-[14px]">
          You will receive
        </span>
        <span className="text-[16px] font-bold text-coast-navy md:text-[18px]">{youReceive}</span>
      </div>

      <button
        type="button"
        className="mt-4 w-full rounded-lg bg-coast-blue py-3 text-[14px] font-semibold text-white transition hover:bg-coast-blue/90"
      >
        Start Trading
      </button>
    </div>
  );
}

function CalculatorHero() {
  return (
    <section className="relative overflow-hidden bg-white text-coast-navy">
      <div className="absolute inset-0 z-0">
        <Image
          src="/assets/images/about-bg.png"
          alt=""
          fill
          quality={95}
          sizes="100vw"
          className="object-cover object-center"
        />
      </div>

      <div className="relative z-10">
        <Navbar />

        <div className="mx-auto max-w-[1280px] px-5 pt-4 pb-8 md:px-10 md:pt-4 md:pb-10">
          <div className="grid items-center gap-6 lg:grid-cols-[1fr_1fr] lg:gap-10">
            <div className="max-w-[520px]">
              <h1 className="text-[32px] font-bold leading-[1.1] tracking-[-0.01em] sm:text-[40px] md:text-[48px] lg:text-[52px]">
                Know how much you stand to gain
              </h1>
              <p className="mt-5 max-w-[500px] text-[15px] leading-relaxed text-coast-navy/75 md:mt-6 md:text-base">
                Coast combines the best rates, insane speed, and zero issue — whether you&rsquo;re
                selling gift cards, cashing out crypto, paying bills at midnight, or buying data
                that never disappoints.
              </p>
            </div>

            <div className="flex justify-center lg:justify-end">
              <CalculatorCard />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export default function CalculatorPage() {
  return (
    <main className="flex-1">
      <CalculatorHero />
      <FAQTabs showHeading categories={["Giftcard", "Crypto"]} />
      <JoinCTA />
      <Footer />
    </main>
  );
}