"use client";

import { Badge } from "@/components/ui/badge";
import { GlassCard } from "@/components/shared/glass-card";
import type { RazorpayMode } from "@/lib/payments/razorpay-client";
import { RazorpayCheckout } from "@/components/checkout/razorpay-checkout";
import { calculateTotals } from "@/lib/payments/checkout";
import { useCartStore } from "@/store/cart-store";

type Props = {
  email: string;
  userName: string;
  razorpayMode: RazorpayMode;
};

export function CheckoutClient({ email, userName, razorpayMode }: Props) {
  const lines = useCartStore((s) => s.lines);
  const coupon = useCartStore((s) => s.coupon);

  const { total } = calculateTotals(lines, coupon);

  return (
    <div className="mx-auto grid max-w-3xl gap-8 px-4 py-16 sm:px-6 lg:px-8">
      <div>
        <h1 className="font-display text-5xl tracking-wide">CHECKOUT</h1>
        {razorpayMode === "test" ? (
          <Badge variant="secondary" className="mt-3">
            Razorpay sandbox — no real charges
          </Badge>
        ) : null}
        <p className="mt-2 text-muted-foreground">
          Total due: <span className="font-semibold text-primary">₹{total}</span>
        </p>
      </div>

      <GlassCard className="space-y-6 p-8">
        <p className="text-sm text-muted-foreground">
          Signed in as{" "}
          <span className="text-foreground font-medium">
            {userName} ({email})
          </span>
          . Plans unlock on this account after payment.
        </p>

        <RazorpayCheckout email={email} />

        <p className="text-xs text-muted-foreground">
          By paying you agree to our terms. Digital goods unlock on your dashboard after
          successful verification.
        </p>
      </GlassCard>
    </div>
  );
}