"use client"

import type React from "react"
import { useEffect, useMemo, useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { Loader2, Copy, Check } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

type RatePayload = {
  conversion_rate: number
  min_amount: number | null
  max_amount: number | null
  youtube_url: string | null
  contract_address: string | null
}

function extractYouTubeId(url: string): string | null {
  try {
    const u = new URL(url)
    if (u.hostname.includes("youtu.be")) {
      const id = u.pathname.split("/").filter(Boolean)[0]
      return id || null
    }
    if (u.searchParams.get("v")) {
      return u.searchParams.get("v")
    }
    const parts = u.pathname.split("/").filter(Boolean)
    const idx = parts.findIndex((p) => p === "embed" || p === "shorts")
    if (idx >= 0 && parts[idx + 1]) {
      return parts[idx + 1]
    }
    const last = parts[parts.length - 1]
    if (last && last.length >= 8) return last
    return null
  } catch {
    return null
  }
}

function toYouTubeEmbed(url: string | null | undefined): string | null {
  if (!url) return null
  const id = extractYouTubeId(url)
  if (!id) return null
  return `https://www.youtube.com/embed/${id}?rel=0`
}

export default function LandingPage() {
  const [name, setName] = useState("")
  const [email, setEmail] = useState("")
  const [amount, setAmount] = useState("")
  const [wallet, setWallet] = useState("")
  const [loading, setLoading] = useState(false)

  const [rateInfo, setRateInfo] = useState<RatePayload | null>(null)
  const [rateLoading, setRateLoading] = useState<boolean>(true)
  const [rateError, setRateError] = useState<string | null>(null)

  const [copied, setCopied] = useState(false)

  useEffect(() => {
    let mounted = true
    async function fetchRate() {
      setRateLoading(true)
      setRateError(null)
      try {
        const res = await fetch("/api/conversion-rate", { method: "GET" })
        const body = await res.json()
        if (!res.ok) throw new Error(body?.error ?? "Failed to fetch conversion rate")
        const d = body?.data as RatePayload
        if (!d || typeof d.conversion_rate !== "number" || !(d.conversion_rate > 0)) {
          throw new Error("Invalid conversion rate")
        }
        if (mounted) setRateInfo(d)
      } catch (err: any) {
        if (mounted) {
          setRateInfo(null)
          setRateError(err?.message ?? "Unable to load rate")
        }
      } finally {
        if (mounted) setRateLoading(false)
      }
    }
    fetchRate()
    return () => {
      mounted = false
    }
  }, [])

  const tokensYouGet = useMemo(() => {
    const amt = Number(amount)
    const rate = rateInfo?.conversion_rate ?? null
    if (!Number.isFinite(amt) || !rate || rate <= 0) return ""
    const tokens = amt * rate
    return tokens.toLocaleString(undefined, { maximumFractionDigits: 6 })
  }, [amount, rateInfo])

  const min_amount = rateInfo?.min_amount ?? null
  const max_amount = rateInfo?.max_amount ?? null
  const numericAmount = Number(amount)
  const amountIsNumber = Number.isFinite(numericAmount)
  const belowMin = amountIsNumber && min_amount != null ? numericAmount < min_amount : false
  const aboveMax = amountIsNumber && max_amount != null ? numericAmount > max_amount : false
  const isOutOfRange = belowMin || aboveMax

  const canSubmit =
    !loading &&
    !rateLoading &&
    !rateError &&
    amountIsNumber &&
    numericAmount > 0 &&
    !isOutOfRange &&
    Boolean(wallet) &&
    Boolean(name) &&
    Boolean(email)

  const embedUrl = useMemo(() => toYouTubeEmbed(rateInfo?.youtube_url), [rateInfo?.youtube_url])

  // Pretty display for contract address, keep full for copying
  const displayContract = useMemo(() => {
    const addr = rateInfo?.contract_address?.trim()
    if (!addr) return ""
    const prefix = 10 // show first N chars
    const suffix = 6  // show last N chars
    if (addr.length <= prefix + suffix + 5) return addr
    return `${addr.slice(0, prefix)}.....${addr.slice(-suffix)}`
  }, [rateInfo?.contract_address])

  const copyContract = async () => {
    const addr = rateInfo?.contract_address
    if (!addr) return
    try {
      await navigator.clipboard.writeText(addr)
      setCopied(true)
      setTimeout(() => setCopied(false), 1200)
    } catch {
      const ta = document.createElement("textarea")
      ta.value = addr
      document.body.appendChild(ta)
      ta.select()
      document.execCommand("copy")
      document.body.removeChild(ta)
      setCopied(true)
      setTimeout(() => setCopied(false), 1200)
    }
  }

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault()
    if (!canSubmit) return
    setLoading(true)
    try {
      const fd = new FormData()
      fd.append("name", name)
      fd.append("email", email)
      fd.append("amount", amount)
      fd.append("wallet", wallet)

      const res = await fetch("/api/pay", { method: "POST", body: fd })
      const data = await res.json()
      if (!res.ok) {
        alert(`Payment failed: ${data?.message ?? res.statusText}`)
        return
      }
      const paymentUrl =
        (data && typeof data === "object" && (data.payment_url as string)) ||
        (data?.data && typeof data.data === "object" && (data.data.payment_url as string)) ||
        ""
      if (paymentUrl && typeof paymentUrl === "string") {
        window.location.href = paymentUrl
        return
      }
      alert(data?.data?.message ?? data?.message ?? "No payment URL returned from the server.")
    } catch (err: any) {
      alert(`Error: ${err?.message ?? "unknown error"}`)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="brand-bg min-h-[100svh]">
      <header className="text-white">
        <div className="mx-auto flex max-w-6xl items-center justify-between p-4 sm:p-6">
          <div className="flex items-center gap-3">
            <Image
              src="/images/takapay-logo.png"
              width={130}
              height={40}
              alt="Takapay logo"
              priority
              style={{ height: "40px", width: "auto", objectFit: "contain" }}
            />
          </div>
          <nav className="text-sm">
            <Link className="underline underline-offset-4" href="/login">
              Login
            </Link>
          </nav>
        </div>

        <div className="mx-auto max-w-6xl p-4 sm:p-6 md:py-12">
          <div className="space-y-3 py-2 sm:space-y-4 sm:py-4">
            <h1 className="text-2xl sm:text-3xl md:text-4xl font-semibold tracking-tight">
              Empowering Bangladesh&apos;s Digital Economy
            </h1>
            <p className="text-sm sm:text-base text-white/85 max-w-2xl">
              Buy TK Token securely with seamless checkout. Transparent rates and instant redirects to payment.
            </p>
          </div>
        </div>
      </header>

      <main className="mx-auto grid max-w-6xl grid-cols-1 gap-6 p-4 sm:gap-8 sm:p-6 md:grid-cols-2 md:py-10">
        <div className="space-y-4 sm:space-y-5 py-2 sm:py-3 text-white">
          <h2 className="text-xl sm:text-2xl font-semibold tracking-tight">Buy TK Token</h2>
          <p className="text-sm sm:text-base text-white/80">
            Use this form to purchase TK Token using the payment provider.
          </p>
          <div className="text-xs text-white/75">
            {rateLoading
              ? "Fetching rate..."
              : rateError
              ? "Rate unavailable"
              : `Rate: ${rateInfo?.conversion_rate} | Min: ${min_amount ?? "—"} | Max: ${max_amount ?? "—"}`}
          </div>

          {embedUrl ? (
            <div className="rounded-lg overflow-hidden border border-white/15 bg-black/20">
              <div className="relative w-full pt-[56.25%]">
                <iframe
                  className="absolute left-0 top-0 h-full w-full"
                  src={embedUrl}
                  title="YouTube video"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                  allowFullScreen
                />
              </div>
            </div>
          ) : null}
        </div>

        <Card className="w-full">
          {/* Header with gap and right-aligned contract address */}
          <CardHeader className="pb-2 sm:pb-4">
            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-8">
              <CardTitle>Pay</CardTitle>

              {rateInfo?.contract_address ? (
                <div className="sm:ml-auto flex items-center gap-2 max-w-full">
                  <span className="text-xs text-muted-foreground whitespace-nowrap">
                    Contract Address:
                  </span>
                  <span
                    className="text-xs font-mono font-semibold truncate max-w-[180px] sm:max-w-[260px]"
                    title={rateInfo.contract_address}
                  >
                    {displayContract}
                  </span>
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    className="h-7 px-2"
                    onClick={copyContract}
                    aria-label="Copy contract address"
                  >
                    {copied ? (
                      <>
                        <Check className="mr-1 h-3.5 w-3.5" />
                        Copied
                      </>
                    ) : (
                      <>
                        <Copy className="mr-1 h-3.5 w-3.5" />
                        Copy
                      </>
                    )}
                  </Button>
                </div>
              ) : null}
            </div>
          </CardHeader>

          <form onSubmit={onSubmit} noValidate>
            <CardContent className="grid gap-3 sm:gap-4">
              <div className="space-y-2">
                <Label htmlFor="name">Name</Label>
                <Input
                  id="name"
                  placeholder="Your Name"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  required
                  autoComplete="name"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <Input
                  id="email"
                  type="email"
                  placeholder="you@example.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                  autoComplete="email"
                />
              </div>

              <div className="space-y-1">
                <div className="flex items-center justify-between">
                  <Label htmlFor="amount">Amount</Label>
                  {isOutOfRange ? (
                    <span className="text-xs text-red-600">
                      {belowMin && min_amount != null ? `Minimum is ${min_amount}` : null}
                      {aboveMax && max_amount != null ? `${belowMin ? " • " : ""}Maximum is ${max_amount}` : null}
                    </span>
                  ) : (
                    <span className="text-xs text-muted-foreground">
                      {min_amount != null || max_amount != null
                        ? `Min: ${min_amount ?? "—"} | Max: ${max_amount ?? "—"}`
                        : "Enter an amount"}
                    </span>
                  )}
                </div>
                <Input
                  id="amount"
                  type="number"
                  min={min_amount ?? 0}
                  max={max_amount ?? undefined}
                  step="0.01"
                  placeholder="0 BDT"
                  value={amount}
                  onChange={(e) => setAmount(e.target.value)}
                  required
                  aria-invalid={isOutOfRange ? "true" : "false"}
                />
              </div>

              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <Label htmlFor="tokens">TK PAY you will get</Label>
                  <span className="text-xs text-muted-foreground" aria-live="polite" aria-atomic="true">
                    {rateLoading || rateError ? "" : String(rateInfo?.conversion_rate ?? "")}
                  </span>
                </div>
                <Input id="tokens" value={tokensYouGet} disabled readOnly placeholder="0 TK" />
              </div>

              <div className="space-y-2">
                <Label htmlFor="wallet">BNB Smart Chain Wallet Address</Label>
                <Input
                  id="wallet"
                  placeholder="0x..."
                  value={wallet}
                  onChange={(e) => setWallet(e.target.value)}
                  required
                  autoComplete="off"
                />
              </div>
            </CardContent>
            <CardFooter className="pt-2 sm:pt-4">
              <Button className="w-full sm:w-auto" type="submit" disabled={!canSubmit}>
                {loading ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Submitting...
                  </>
                ) : (
                  "Buy TK Token Now"
                )}
              </Button>
            </CardFooter>
          </form>
        </Card>
      </main>
    </div>
  )
}