"use client";

import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";

type TopMarket = {
  id: string;
  assetTitle: string;
  crypto: string;
  assetImage: string;
  price: number;
  priceChangeIn24Hrs: string;
};

function LearnMoreButton({ href = "#" }: { href?: string }) {
  return (
    <Link
      href={href}
      className="inline-flex items-center justify-center rounded-lg bg-coast-ink px-5 py-2.5 text-[14px] font-semibold text-white transition hover:bg-coast-ink/90"
    >
      Learn More
    </Link>
  );
}

function CheckBadge() {
  return (
    <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-coast-blue-soft">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden>
        <path
          d="M5 12.5L10 17L19 8"
          stroke="#1f5cff"
          strokeWidth="2.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    </span>
  );
}

function TransactionNotification({
  title,
  body,
}: {
  title: string;
  body: string;
}) {
  return (
    <div className="flex w-full items-start gap-3 rounded-2xl bg-white p-4 shadow-[0_10px_30px_-12px_rgba(5,26,71,0.18)]">
      <CheckBadge />
      <div className="min-w-0 flex-1">
        <p className="text-[14px] font-semibold text-coast-ink">{title}</p>
        <p className="mt-1 text-[12px] leading-snug text-coast-ink/60">{body}</p>
      </div>
    </div>
  );
}

function CryptoCard({
  icon,
  name,
  ticker,
  price,
  change,
}: {
  icon: string;
  name: string;
  ticker: string;
  price: string;
  change: string;
}) {
  return (
    <div className="flex w-full items-center gap-3 rounded-2xl bg-white p-4 shadow-[0_10px_30px_-12px_rgba(5,26,71,0.18)]">
      <Image src={icon} alt={name} width={40} height={40} className="h-10 w-10 shrink-0" />
      <div className="flex min-w-0 flex-1 items-center justify-between gap-3">
        <div>
          <p className="text-[15px] font-semibold text-coast-ink">{name}</p>
          <p className="text-[12px] font-medium text-coast-ink/50">{ticker}</p>
        </div>
        <div className="text-right">
          <p className="text-[15px] font-semibold text-coast-ink">{price}</p>
          <p className="text-[12px] font-semibold text-emerald-500">
            <span aria-hidden>↑ </span>
            {change}
          </p>
        </div>
      </div>
    </div>
  );
}

function ComingSoonBadge() {
  return (
    <span className="inline-flex items-center rounded-md bg-coast-blue px-3 py-1 text-[10px] font-bold uppercase tracking-[0.08em] text-white">
      Coming Soon
    </span>
  );
}

function EsimCard() {
  return (
    <div className="w-full max-w-[320px] rounded-2xl bg-white p-5 shadow-[0_10px_30px_-12px_rgba(5,26,71,0.18)]">
      <p className="text-[13px] font-medium text-coast-ink/70">
        Select country to activate E sim
      </p>
      <div className="mt-3 h-px w-full bg-coast-ink/10" />
      <ul className="mt-3 space-y-3">
        <li className="flex items-center gap-3">
          <span className="flex h-7 w-7 items-center justify-center overflow-hidden rounded-full bg-white text-[14px]">
            🇨🇦
          </span>
          <span className="text-[14px] font-medium text-coast-ink">Canda</span>
        </li>
        <li className="flex items-center gap-3">
          <span className="flex h-7 w-7 items-center justify-center overflow-hidden rounded-full bg-white text-[14px]">
            🇬🇧
          </span>
          <span className="text-[14px] font-medium text-coast-ink">United Kingdom</span>
        </li>
      </ul>
    </div>
  );
}



function Card({
  title,
  description,
  illustration,
  className = "",
}: {
  title: string;
  description: string;
  illustration: React.ReactNode;
  className?: string;
}) {
  return (
    <article
      className={`relative flex flex-col overflow-hidden rounded-3xl bg-[#E2F2FF] p-7 md:p-8 ${className}`}
    >
      <h3 className="text-[22px] font-bold leading-tight text-coast-ink md:text-[26px]">
        {title}
      </h3>
      <p className="mt-3 max-w-[360px] text-[14px] leading-relaxed text-coast-ink/70 md:text-[15px]">
        {description}
      </p>
      <div className="mt-5">
        <LearnMoreButton />
      </div>
      <div className="flex flex-1 flex-col justify-end pt-0">{illustration}</div>
    </article>
  );
}

export default function Features() {
  const [markets, setMarkets] = useState<TopMarket[]>([]);

  useEffect(() => {
    fetch("https://web-api.coast.ng/crypto/top-markets")
      .then((res) => res.json())
      .then((json) => setMarkets(json.data ?? []))
      .catch(() => { });
  }, []);

  return (
    <section className="bg-white">
      <div className="mx-auto max-w-[1280px] px-5 py-16 md:px-0 md:py-10">
        <div className="mx-auto max-w-[550px] text-center">
          <h2 className="text-[28px] font-bold text-coast-ink md:text-[34px]">
            All you need in one place
          </h2>
          <p className="mt-2 text-[15px] leading-relaxed text-coast-ink/70 md:text-base">
            At Coast, we are 100% committed to providing you swift and secured exchange of your
            digital assets and cryptocurrencies.
          </p>
        </div>

        <div className="mt-12 grid gap-5 md:grid-cols-12 md:gap-6">
          <Card
            className="md:col-span-7"
            title="Trade your giftcards seamlessly"
            description="Sell your Amazon, Nordstrom, Sephora, Steam, Razer Gold, and other gift cards at the best rates."
            illustration={
              <div className="relative -mx-7 -mb-7 aspect-[3044/1484] max-h-[220px] md:-mx-8 md:-mb-8 md:max-h-[360px]">
                <Image
                  src="/assets/images/giftcard-images.png"
                  alt="Giftcards"
                  fill
                  quality={95}
                  sizes="(max-width: 768px) 100vw, (max-width: 1280px) 60vw, 760px"
                  className="object-cover object-bottom"
                />
              </div>
            }
          />

          <Card
            className="md:col-span-5"
            title="Efficiently pay bills and utilities with convenience"
            description="Pay your electricity, airtime, cable TV, and other utilities seamlessly."
            illustration={
              <div className="relative -mx-7 -mb-7 aspect-[2040/1444] max-h-[260px] md:-mx-8 md:-mb-8 md:max-h-[360px]">
                <Image
                  src="/assets/images/utilities-images.png"
                  alt="Utilities"
                  fill
                  quality={95}
                  sizes="(max-width: 768px) 100vw, (max-width: 1280px) 42vw, 540px"
                  className="object-cover object-bottom"
                />
              </div>
            }
          />

          <Card
            className="md:col-span-5"
            title="Send and receive money with ease"
            description="Pay your bills and utilities conveniently from the comfort of your home with just a few easy steps."
            illustration={
              <div className="relative -mx-7 -mb-7 aspect-[2277/1168] max-h-[220px] md:-mx-8 md:-mb-8 md:max-h-[300px]">
                <Image
                  src="/assets/images/deposit.png"
                  alt="Deposit and withdrawal notifications"
                  fill
                  quality={95}
                  sizes="(max-width: 768px) 100vw, (max-width: 1280px) 42vw, 540px"
                  className="object-cover object-bottom"
                />
              </div>
            }
          />

          <Card
            className="md:col-span-7"
            title="Convert your crypto to cash"
            description="Sell your bitcoin, ethereum, USDT, and more in just a few minutes. Our secure and seamless trading platform ensures an effortless experience."
            illustration={(() => {
              const btc = markets.find((m) => m.crypto === "BTC");
              const usdt = markets.find((m) => m.crypto === "USDT");
              const formatPrice = (p: number) =>
                `$${p.toLocaleString("en-US")}`;
              const formatChange = (c: string) =>
                `${Number(c) * 100}%`;
              return (
                <div className="relative -mx-7 -mb-7 mt-4 md:-mx-8 md:-mb-8">
                  <Image
                    src="/assets/images/bg-cash.png"
                    alt=""
                    fill
                    aria-hidden
                    className="object-cover object-bottom"
                    sizes="(max-width: 768px) 100vw, (max-width: 1280px) 60vw, 760px"
                  />
                  <div className="relative z-10 flex flex-col gap-3 px-6 py-6 md:px-8 md:py-8">
                    <div className="mr-12 md:mr-24">
                      <CryptoCard
                        icon="/assets/images/btc.png"
                        name="Bitcoin"
                        ticker="BTC"
                        price={btc ? formatPrice(btc.price) : "—"}
                        change={btc ? formatChange(btc.priceChangeIn24Hrs) : "—"}
                      />
                    </div>
                    <div className="ml-8 md:ml-16">
                      <CryptoCard
                        icon="/assets/images/tether.png"
                        name="Tether USD"
                        ticker="USDT"
                        price={usdt ? formatPrice(usdt.price) : "—"}
                        change={usdt ? formatChange(usdt.priceChangeIn24Hrs) : "—"}
                      />
                    </div>
                  </div>
                </div>
              );
            })()}
          />

          <article className="relative overflow-hidden rounded-3xl bg-[#E2F2FF] p-7 md:col-span-12 md:p-10">
            <div className="grid gap-10 md:grid-cols-2 md:items-center md:gap-8">
              <div>
                <ComingSoonBadge />
                <h3 className="mt-4 text-[22px] font-bold leading-tight text-coast-ink md:text-[28px]">
                  Stay connected wherever you go
                </h3>
                <p className="mt-3 max-w-[480px] text-[14px] leading-relaxed text-coast-ink/70 md:text-[15px]">
                  Get instant eSIM data plans activated in 30 seconds, directly from your Coast app.
                  No physical SIM. No visiting any store. Just data when you land.
                </p>
              </div>

              <div className="relative min-h-[120px] md:min-h-[180px]">
                <div className="pointer-events-none absolute -right-7 -top-7 -bottom-7 z-0 aspect-[1905/1496] md:-right-10 md:-top-10 md:-bottom-10">
                  <Image
                    src="/assets/images/polygon.png"
                    alt=""
                    fill
                    sizes="(max-width: 768px) 80vw, 420px"
                    className="object-contain object-right"
                  />
                </div>

                <div className="relative z-10 mx-auto w-full max-w-[380px]">
                  <div className="relative aspect-[2449/1420] w-full">
                    <Image
                      src="/assets/images/country.png"
                      alt="Select country to activate eSIM"
                      fill
                      quality={95}
                      sizes="(max-width: 768px) 100vw, 520px"
                      className="object-contain"
                    />
                  </div>
                </div>
              </div>
            </div>
          </article>
        </div>
      </div>
    </section>
  );
}