"use client"

import { Check } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"

interface Props {
  pledge: { id: string; reference: string }
  amount: number
  rail: string
  eventName: string
}

export function ConfirmationStep({ pledge, amount, rail, eventName }: Props) {
  const railLabels: Record<string, string> = {
    bank: "Bank Transfer",
    gocardless: "Direct Debit",
    card: "Card Payment",
    fpx: "FPX Online Banking",
  }

  const currencySymbol = rail === "fpx" ? "RM" : "£"

  const nextStepMessages: Record<string, string> = {
    bank: "We've sent you payment instructions. Transfer at your convenience — we'll confirm once received.",
    gocardless: "Your Direct Debit mandate has been set up. The payment of " + currencySymbol + (amount / 100).toFixed(2) + " will be collected automatically in 3-5 working days. You'll receive email confirmation from GoCardless.",
    card: "Your card payment is being processed. You'll receive a confirmation email shortly.",
    fpx: "Your FPX payment has been received and is being verified. You'll receive a confirmation email once the payment is confirmed by your bank.",
  }

  return (
    <div className="max-w-md mx-auto pt-8 text-center space-y-6">
      <div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-success-green/10">
        <Check className="h-10 w-10 text-success-green" />
      </div>

      <div className="space-y-2">
        <h1 className="text-2xl font-extrabold text-gray-900">
          {rail === "fpx" ? "Payment Successful!" : rail === "gocardless" ? "Mandate Set Up!" : "Pledge Received!"}
        </h1>
        <p className="text-muted-foreground">
          Thank you for your generous {rail === "fpx" ? "donation" : "pledge"} to{" "}
          <span className="font-semibold text-foreground">{eventName}</span>
        </p>
      </div>

      <Card>
        <CardContent className="pt-6 space-y-3 text-sm">
          <div className="flex justify-between">
            <span className="text-muted-foreground">Amount</span>
            <span className="font-bold">{currencySymbol}{(amount / 100).toFixed(2)}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-muted-foreground">Payment Method</span>
            <span>{railLabels[rail] || rail}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-muted-foreground">Reference</span>
            <span className="font-mono font-bold">{pledge.reference}</span>
          </div>
          {rail === "gocardless" && (
            <div className="flex justify-between">
              <span className="text-muted-foreground">Collection</span>
              <span className="text-sm">3-5 working days</span>
            </div>
          )}
          {rail === "fpx" && (
            <div className="flex justify-between">
              <span className="text-muted-foreground">Status</span>
              <span className="text-success-green font-semibold">Paid ✓</span>
            </div>
          )}
        </CardContent>
      </Card>

      <div className="rounded-2xl bg-trust-blue/5 border border-trust-blue/20 p-4 space-y-2">
        <p className="text-sm font-medium text-trust-blue">What happens next?</p>
        <p className="text-sm text-muted-foreground">
          {nextStepMessages[rail] || nextStepMessages.bank}
        </p>
      </div>

      <p className="text-xs text-muted-foreground">
        Need help? Contact the charity directly. Ref: {pledge.reference}
      </p>
    </div>
  )
}
