import { Link } from "@tanstack/react-router";
import { ArrowRight } from "lucide-react";
import { useEffect, useRef, useState, type ReactNode } from "react";
import { Progress } from "@/components/ui/progress";
import { cn } from "@/lib/utils";
import { categoryLabels, fmtUsd, type Campaign } from "@/lib/site";

export function Reveal({ children, className, delay = 0 }: { children: ReactNode; className?: string; delay?: number }) {
  const ref = useRef<HTMLDivElement>(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => { if (e?.isIntersecting) { setShown(true); io.disconnect(); } }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <div ref={ref} style={{ animationDelay: `${delay}ms` }} className={cn(shown ? "animate-fade-up" : "opacity-0", className)}>
      {children}
    </div>
  );
}

export function Eyebrow({ children }: { children: ReactNode }) {
  return <span className="inline-block rounded-full bg-gold-soft px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.2em] text-gold-foreground">{children}</span>;
}

export function SectionHeading({ eyebrow, title, text, center = true }: { eyebrow?: string; title: string; text?: string; center?: boolean }) {
  return (
    <Reveal className={cn("mb-12 max-w-2xl space-y-4", center && "mx-auto text-center")}>
      {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
      <h2 className="text-4xl font-semibold text-primary-deep md:text-5xl">{title}</h2>
      {text && <p className="text-lg text-muted-foreground">{text}</p>}
    </Reveal>
  );
}

export function PageHero({ eyebrow, title, text, image }: { eyebrow: string; title: string; text: string; image?: string }) {
  return (
    <section className="relative overflow-hidden bg-gradient-deep text-primary-foreground">
      {image && <img src={image} alt="" className="absolute inset-0 h-full w-full object-cover opacity-25" />}
      <div className="container-page relative py-24 md:py-32">
        <div className="max-w-3xl space-y-5 animate-fade-up">
          <span className="text-xs font-semibold uppercase tracking-[0.3em] text-gold">{eyebrow}</span>
          <h1 className="text-5xl font-semibold leading-tight md:text-6xl">{title}</h1>
          <p className="text-lg text-primary-foreground/80">{text}</p>
        </div>
      </div>
    </section>
  );
}

// Raised amounts come only from verified donations (wired up in the payments stage). Until then: 0.
export function CampaignCard({ c, raised = 0 }: { c: Campaign; raised?: number }) {
  const pct = Math.min(100, Math.round((raised / c.goalUsd) * 100));
  return (
    <Link to="/campaigns/$id" params={{ id: c.id }} className="group card-lift flex flex-col overflow-hidden rounded-3xl border border-border bg-card shadow-soft">
      <div className="relative aspect-[4/3] overflow-hidden">
        <img src={c.image} alt={c.title} loading="lazy" className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105" />
        <span className="absolute left-4 top-4 rounded-full bg-background/90 px-3 py-1 text-xs font-semibold text-primary">{categoryLabels[c.category]}</span>
      </div>
      <div className="flex flex-1 flex-col gap-4 p-6">
        <h3 className="text-xl font-semibold text-primary-deep">{c.title}</h3>
        <p className="flex-1 text-sm text-muted-foreground">{c.summary}</p>
        <div className="space-y-2">
          <Progress value={pct} className="h-2 bg-secondary" />
          <div className="flex justify-between text-xs">
            <span className="font-semibold text-primary">{fmtUsd(raised)} verified</span>
            <span className="text-muted-foreground">Goal {fmtUsd(c.goalUsd)}</span>
          </div>
        </div>
        <span className="inline-flex items-center gap-1 text-sm font-semibold text-primary">Support this campaign <ArrowRight className="size-4 transition-transform group-hover:translate-x-1" /></span>
      </div>
    </Link>
  );
}

export function SiteLayout({ children }: { children: ReactNode }) {
  return <main className="min-h-[60vh]">{children}</main>;
}