import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { Info, ShieldCheck, Lock } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { PageHero } from "@/components/site/Bits";
import { campaigns, cryptos, images } from "@/lib/site";
import { cn } from "@/lib/utils";

export const Route = createFileRoute("/donate")({
  validateSearch: (s: Record<string, unknown>): { campaign?: string | undefined } => ({
    campaign: typeof s["campaign"] === "string" ? s["campaign"] : undefined,
  }),
  head: () => ({
    meta: [
      { title: "Donate Crypto — CareShare Initiative" },
      { name: "description", content: "Donate Bitcoin, Ethereum, USDT or USDC to support women and children. Every transaction is verified on-chain." },
      { property: "og:title", content: "Donate Crypto — CareShare Initiative" },
      { property: "og:description", content: "Give with BTC, ETH, USDT or USDC." },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: Donate,
});

const presets = [25, 50, 100, 250, 500];

function Donate() {
  const search = Route.useSearch();
  const [campaign, setCampaign] = useState(search.campaign ?? "general");
  const [amount, setAmount] = useState("100");
  const [coin, setCoin] = useState("USDT");
  const coinInfo = cryptos.find((c) => c.symbol === coin)!;
  const [network, setNetwork] = useState<string>(coinInfo.networks[0] ?? "");

  return (
    <>
      <PageHero eyebrow="Donate" title="Your gift, verified on-chain." text="Choose a campaign, an amount and a cryptocurrency. We'll show you exactly where to send it." image={images.hero} />
      <section className="py-16">
        <div className="container-page grid gap-10 lg:grid-cols-[1fr_360px]">
          <form
            className="space-y-8 rounded-3xl border border-border bg-card p-7 shadow-elegant md:p-10"
            onSubmit={(e) => {
              e.preventDefault();
              const n = Number(amount);
              if (!Number.isFinite(n) || n < 1 || n > 1_000_000) { toast.error("Enter an amount between $1 and $1,000,000."); return; }
              toast.info("Crypto checkout opens soon — wallet payments are being set up. No funds have been requested.");
            }}
          >
            <div className="space-y-2">
              <Label>Campaign</Label>
              <Select value={campaign} onValueChange={setCampaign}>
                <SelectTrigger className="h-12 rounded-xl"><SelectValue /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="general">General donation — where it's needed most</SelectItem>
                  {campaigns.map((c) => <SelectItem key={c.id} value={c.id}>{c.title}</SelectItem>)}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-3">
              <Label htmlFor="amt">Amount (USD equivalent)</Label>
              <div className="flex flex-wrap gap-2">
                {presets.map((p) => (
                  <button type="button" key={p} onClick={() => setAmount(String(p))}
                    className={cn("rounded-full px-5 py-2 text-sm font-semibold transition-all", amount === String(p) ? "bg-gradient-primary text-primary-foreground shadow-soft" : "bg-secondary text-secondary-foreground hover:bg-accent")}>
                    ${p}
                  </button>
                ))}
              </div>
              <Input id="amt" type="number" min={1} max={1000000} inputMode="decimal" value={amount} onChange={(e) => setAmount(e.target.value)} className="h-12 rounded-xl text-lg" />
            </div>
            <div className="space-y-3">
              <Label>Cryptocurrency</Label>
              <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
                {cryptos.map((c) => (
                  <button type="button" key={c.symbol} onClick={() => { setCoin(c.symbol); setNetwork(c.networks[0] ?? ""); }}
                    className={cn("rounded-2xl border-2 p-4 text-left transition-all", coin === c.symbol ? "border-primary bg-secondary" : "border-border hover:border-primary/40")}>
                    <div className="font-display text-xl font-semibold text-primary">{c.symbol}</div>
                    <div className="text-xs text-muted-foreground">{c.name}</div>
                  </button>
                ))}
              </div>
            </div>
            <div className="space-y-2">
              <Label>Blockchain network</Label>
              <Select value={network} onValueChange={setNetwork}>
                <SelectTrigger className="h-12 rounded-xl"><SelectValue /></SelectTrigger>
                <SelectContent>{coinInfo.networks.map((n) => <SelectItem key={n} value={n}>{n}</SelectItem>)}</SelectContent>
              </Select>
              <p className="flex gap-2 text-xs text-muted-foreground"><Info className="size-4 shrink-0" /> Send {coin} only on the {network} network. Funds sent on the wrong network may be lost.</p>
            </div>
            <Button type="submit" variant="hero" size="xl" className="w-full">Continue to payment</Button>
          </form>
          <aside className="space-y-5">
            <div className="rounded-3xl bg-gradient-warm p-7">
              <ShieldCheck className="size-9 text-primary" />
              <h3 className="mt-4 text-xl font-semibold text-primary-deep">How verification works</h3>
              <ol className="mt-3 list-decimal space-y-2 pl-5 text-sm text-muted-foreground">
                <li>You send crypto to our published wallet address.</li>
                <li>Our server checks the transaction on the blockchain.</li>
                <li>Only after enough confirmations is it recorded as confirmed.</li>
                <li>You receive a receipt and see it in your dashboard.</li>
              </ol>
            </div>
            <div className="rounded-3xl border border-border p-7 text-sm text-muted-foreground">
              <Lock className="mb-3 size-6 text-primary" />
              We never ask for private keys or seed phrases. Crypto donations are generally non-refundable once confirmed — see our donation policy.
            </div>
          </aside>
        </div>
      </section>
    </>
  );
}