"use client"

import { Building2, CreditCard, Landmark, Shield, CheckCircle2 } from "lucide-react"

interface Props {
  onSelect: (rail: "bank" | "gocardless" | "card") => void
  amount: number
}

export function PaymentStep({ onSelect, amount }: Props) {
  const pounds = (amount / 100).toFixed(0)
  const giftAidTotal = ((amount + amount * 0.25) / 100).toFixed(0)

  const options = [
    {
      id: "bank" as const,
      icon: Building2,
      title: "Bank Transfer",
      subtitle: "100% goes to charity — zero fees",
      tag: "Recommended",
      tagClass: "bg-success-green text-white",
      detail: "We'll give you the bank details. Transfer in your own time.",
      fee: "Free",
      feeClass: "text-success-green font-bold",
      iconBg: "from-emerald-500 to-green-600",
      highlight: true,
      benefits: ["Zero fees", "Most charities prefer this"],
    },
    {
      id: "gocardless" as const,
      icon: Landmark,
      title: "Direct Debit",
      subtitle: "Automatic collection — set and forget",
      tag: "Hassle-free",
      tagClass: "bg-trust-blue/10 text-trust-blue",
      detail: "GoCardless collects it for you. Protected by the DD Guarantee.",
      fee: "1% + 20p",
      feeClass: "text-muted-foreground",
      iconBg: "from-trust-blue to-blue-600",
      highlight: false,
      benefits: ["No action needed", "DD Guarantee"],
    },
    {
      id: "card" as const,
      icon: CreditCard,
      title: "Card Payment",
      subtitle: "Visa, Mastercard, Amex — instant",
      tag: "Instant",
      tagClass: "bg-purple-100 text-purple-700",
      detail: "Powered by Stripe. Receipt emailed instantly.",
      fee: "1.4% + 20p",
      feeClass: "text-muted-foreground",
      iconBg: "from-purple-500 to-violet-600",
      highlight: false,
      benefits: ["Instant confirmation", "All major cards"],
    },
  ]

  return (
    <div className="max-w-md mx-auto pt-2 space-y-6 animate-fade-up">
      <div className="text-center space-y-2">
        <h1 className="text-2xl font-black text-gray-900 tracking-tight">
          How would you like to pay?
        </h1>
        <p className="text-base text-muted-foreground">
          Your pledge: <span className="font-bold text-foreground">£{pounds}</span>
          <span className="text-success-green text-xs ml-1">(£{giftAidTotal} with Gift Aid)</span>
        </p>
      </div>

      <div className="space-y-3 stagger-children">
        {options.map((opt) => (
          <button
            key={opt.id}
            onClick={() => onSelect(opt.id)}
            className={`
              w-full text-left rounded-2xl border-2 bg-white p-5 transition-all duration-200 group card-hover
              ${opt.highlight
                ? "border-success-green/40 shadow-sm shadow-success-green/10 hover:border-success-green hover:shadow-lg hover:shadow-success-green/15"
                : "border-gray-200 hover:border-trust-blue/40 hover:shadow-lg hover:shadow-trust-blue/10"
              }
            `}
          >
            <div className="flex items-start gap-4">
              <div className={`rounded-xl bg-gradient-to-br ${opt.iconBg} p-3 shadow-lg shadow-trust-blue/10 group-hover:scale-105 transition-transform`}>
                <opt.icon className="h-5 w-5 text-white" />
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2 flex-wrap">
                  <span className="font-bold text-gray-900">{opt.title}</span>
                  <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full ${opt.tagClass}`}>
                    {opt.tag}
                  </span>
                </div>
                <p className="text-sm text-muted-foreground mt-0.5">{opt.subtitle}</p>
                <div className="flex items-center gap-3 mt-2">
                  {opt.benefits.map((b, i) => (
                    <span key={i} className="text-[11px] text-muted-foreground inline-flex items-center gap-1">
                      <CheckCircle2 className="h-3 w-3 text-success-green" />
                      {b}
                    </span>
                  ))}
                </div>
                <div className="flex items-center justify-between mt-2 pt-2 border-t border-gray-100">
                  <span className={`text-xs ${opt.feeClass}`}>Fee: {opt.fee}</span>
                  <span className="text-xs text-trust-blue font-medium opacity-0 group-hover:opacity-100 transition-opacity">
                    Select →
                  </span>
                </div>
              </div>
            </div>
          </button>
        ))}
      </div>

      <div className="flex items-center justify-center gap-2 text-xs text-muted-foreground animate-fade-in" style={{ animationDelay: "300ms" }}>
        <Shield className="h-3.5 w-3.5" />
        <span>All payments are encrypted and secure</span>
      </div>
    </div>
  )
}