meet-hub/src/pages/Checkout.tsx

import { useState, useEffect } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { AppLayout } from "@/components/AppLayout";
import { useCart } from "@/contexts/CartContext";
import { useAuth } from "@/hooks/useAuth";
import { supabase } from "@/integrations/supabase/client";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Label } from "@/components/ui/label";
import { toast } from "@/hooks/use-toast";
import { formatIDR } from "@/lib/format";
import { Trash2, CreditCard, Loader2, QrCode, Wallet } from "lucide-react";
import { QRCodeSVG } from "qrcode.react";

// Pakasir configuration
const PAKASIR_PROJECT_SLUG = import.meta.env.VITE_PAKASIR_PROJECT_SLUG || "dewengoding";
const SANDBOX_API_KEY = "iP13osgh7lAzWWIPsj7TbW5M3iGEAQMo";

// Centralized API key retrieval - uses env var with sandbox fallback
const getPakasirApiKey = (): string => {
  return import.meta.env.VITE_PAKASIR_API_KEY || SANDBOX_API_KEY;
};

// Edge function base URL - configurable via env with sensible default
const getEdgeFunctionBaseUrl = (): string => {
  return import.meta.env.VITE_SUPABASE_EDGE_URL || "https://lovable.backoffice.biz.id/functions/v1";
};

const PAKASIR_CALLBACK_URL = `${getEdgeFunctionBaseUrl()}/pakasir-webhook`;

type PaymentMethod = "qris" | "paypal";
type CheckoutStep = "cart" | "payment" | "waiting";

interface PaymentData {
  qr_string?: string;
  payment_url?: string;
  expired_at?: string;
  order_id?: string;
}

export default function Checkout() {
  const { items, removeItem, clearCart, total } = useCart();
  const { user } = useAuth();
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();

  const [loading, setLoading] = useState(false);
  const [step, setStep] = useState<CheckoutStep>("cart");
  const [paymentMethod, setPaymentMethod] = useState<PaymentMethod>("qris");
  const [paymentData, setPaymentData] = useState<PaymentData | null>(null);
  const [orderId, setOrderId] = useState<string | null>(null);
  const [checkingStatus, setCheckingStatus] = useState(false);

  // Check for returning from PayPal
  useEffect(() => {
    const returnedOrderId = searchParams.get("order_id");
    if (returnedOrderId) {
      setOrderId(returnedOrderId);
      checkPaymentStatus(returnedOrderId);
    }
  }, [searchParams]);

  const checkPaymentStatus = async (oid: string) => {
    setCheckingStatus(true);
    const { data: order } = await supabase.from("orders").select("payment_status").eq("id", oid).single();

    if (order?.payment_status === "paid") {
      toast({ title: "Pembayaran berhasil!", description: "Akses produk sudah aktif" });
      navigate("/access");
    } else {
      toast({ title: "Pembayaran pending", description: "Menunggu konfirmasi pembayaran" });
    }
    setCheckingStatus(false);
  };

  const handleCheckout = async () => {
    if (!user) {
      toast({ title: "Login diperlukan", description: "Silakan login untuk melanjutkan pembayaran" });
      navigate("/auth");
      return;
    }

    if (items.length === 0) {
      toast({
        title: "Keranjang kosong",
        description: "Tambahkan produk ke keranjang terlebih dahulu",
        variant: "destructive",
      });
      return;
    }

    setLoading(true);

    try {
      // Generate a unique order reference
      const orderRef = `ORD${Date.now().toString(36).toUpperCase()}${Math.random().toString(36).substring(2, 6).toUpperCase()}`;
      const amountInRupiah = Math.round(total);

      // Create order with pending payment status
      const { data: order, error: orderError } = await supabase
        .from("orders")
        .insert({
          user_id: user.id,
          total_amount: amountInRupiah,
          status: "pending",
          payment_provider: "pakasir",
          payment_reference: orderRef,
          payment_status: "pending",
          payment_method: paymentMethod,
        })
        .select()
        .single();

      if (orderError || !order) {
        throw new Error("Gagal membuat order");
      }

      // Create order items
      const orderItems = items.map((item) => ({
        order_id: order.id,
        product_id: item.id,
        unit_price: item.sale_price ?? item.price,
        quantity: 1,
      }));

      const { error: itemsError } = await supabase.from("order_items").insert(orderItems);
      if (itemsError) throw new Error("Gagal menambahkan item order");

      setOrderId(order.id);

        // Build description from product titles
        const productTitles = items.map(item => item.title).join(", ");

        if (paymentMethod === "qris") {
        // Call Pakasir API for QRIS
        try {
          const response = await fetch(`https://app.pakasir.com/api/transactioncreate/qris`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              project: PAKASIR_PROJECT_SLUG,
              order_id: order.id,
              amount: amountInRupiah,
              api_key: getPakasirApiKey(),
              description: productTitles,
              callback_url: PAKASIR_CALLBACK_URL,
            }),
          });

          const result = await response.json();

          if (result.qr_string || result.qr) {
            setPaymentData({
              qr_string: result.qr_string || result.qr,
              expired_at: result.expired_at,
              order_id: order.id,
            });
            setStep("waiting");
            clearCart();
          } else {
            // Fallback to redirect if API doesn't return QR
            const pakasirUrl = `https://app.pakasir.com/pay/${PAKASIR_PROJECT_SLUG}/${amountInRupiah}?order_id=${order.id}`;
            clearCart();
            window.location.href = pakasirUrl;
          }
        } catch {
          // Fallback to redirect
          const pakasirUrl = `https://app.pakasir.com/pay/${PAKASIR_PROJECT_SLUG}/${amountInRupiah}?order_id=${order.id}`;
          clearCart();
          window.location.href = pakasirUrl;
        }
      } else {
        // PayPal - redirect to Pakasir PayPal URL
        clearCart();
        const paypalUrl = `https://app.pakasir.com/paypal/${PAKASIR_PROJECT_SLUG}/${amountInRupiah}?order_id=${order.id}`;
        window.location.href = paypalUrl;
      }
    } catch (error) {
      console.error("Checkout error:", error);
      toast({
        title: "Error",
        description: error instanceof Error ? error.message : "Terjadi kesalahan saat checkout",
        variant: "destructive",
      });
    } finally {
      setLoading(false);
    }
  };

  const refreshPaymentStatus = async () => {
    if (!orderId) return;
    setCheckingStatus(true);

    const { data: order } = await supabase.from("orders").select("payment_status").eq("id", orderId).single();

    if (order?.payment_status === "paid") {
      toast({ title: "Pembayaran berhasil!", description: "Akses produk sudah aktif" });
      navigate("/access");
    } else {
      toast({ title: "Belum ada pembayaran", description: "Silakan selesaikan pembayaran" });
    }
    setCheckingStatus(false);
  };

  // Waiting for QRIS payment
  if (step === "waiting" && paymentData) {
    return (
      <AppLayout>
        <div className="container mx-auto px-4 py-8 max-w-md">
          <Card className="border-2 border-border">
            <CardHeader className="text-center">
              <CardTitle>Scan QR Code untuk Bayar</CardTitle>
            </CardHeader>
            <CardContent className="flex flex-col items-center space-y-6">
              <div className="bg-white p-4 rounded-lg">
                <QRCodeSVG value={paymentData.qr_string || ""} size={200} />
              </div>
              <div className="text-center">
                <p className="text-2xl font-bold">{formatIDR(total)}</p>
                {paymentData.expired_at && (
                  <p className="text-sm text-muted-foreground mt-2">
                    Berlaku hingga: {new Date(paymentData.expired_at).toLocaleString("id-ID")}
                  </p>
                )}
              </div>
              <div className="w-full space-y-2">
                <Button
                  onClick={refreshPaymentStatus}
                  variant="outline"
                  className="w-full border-2"
                  disabled={checkingStatus}
                >
                  {checkingStatus ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : null}
                  Cek Status Pembayaran
                </Button>
                <Button onClick={() => navigate("/dashboard")} variant="ghost" className="w-full">
                  Kembali ke Dashboard
                </Button>
              </div>
              <p className="text-xs text-muted-foreground text-center">
                Pembayaran diproses melalui Pakasir dan akan dikonfirmasi otomatis setelah berhasil.
              </p>
            </CardContent>
          </Card>
        </div>
      </AppLayout>
    );
  }

  return (
    <AppLayout>
      <div className="container mx-auto px-4 py-8">
        <h1 className="text-4xl font-bold mb-8">Checkout</h1>

        {items.length === 0 ? (
          <Card className="border-2 border-border">
            <CardContent className="py-12 text-center">
              <p className="text-muted-foreground mb-4">Keranjang belanja Anda kosong</p>
              <Button onClick={() => navigate("/products")} variant="outline" className="border-2">
                Lihat Produk
              </Button>
            </CardContent>
          </Card>
        ) : (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div className="lg:col-span-2 space-y-4">
              {items.map((item) => (
                <Card key={item.id} className="border-2 border-border">
                  <CardContent className="py-4">
                    <div className="flex items-center justify-between">
                      <div>
                        <h3 className="font-semibold">{item.title}</h3>
                        <p className="text-sm text-muted-foreground capitalize">{item.type}</p>
                      </div>
                      <div className="flex items-center gap-4">
                        <span className="font-bold">{formatIDR(item.sale_price ?? item.price)}</span>
                        <Button variant="ghost" size="sm" onClick={() => removeItem(item.id)}>
                          <Trash2 className="w-4 h-4" />
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}

              <Card className="border-2 border-border">
                <CardHeader>
                  <CardTitle>Metode Pembayaran</CardTitle>
                </CardHeader>
                <CardContent>
                  <RadioGroup
                    value={paymentMethod}
                    onValueChange={(v) => setPaymentMethod(v as PaymentMethod)}
                    className="space-y-3"
                  >
                    <div className="flex items-center space-x-3 p-3 border-2 border-border rounded-none hover:bg-muted cursor-pointer">
                      <RadioGroupItem value="qris" id="qris" />
                      <Label htmlFor="qris" className="flex items-center gap-2 cursor-pointer flex-1">
                        <QrCode className="w-5 h-5" />
                        <div>
                          <p className="font-medium">QRIS</p>
                          <p className="text-sm text-muted-foreground">
                            Scan QR dengan aplikasi e-wallet atau mobile banking
                          </p>
                        </div>
                      </Label>
                    </div>
                    <div className="flex items-center space-x-3 p-3 border-2 border-border rounded-none hover:bg-muted cursor-pointer">
                      <RadioGroupItem value="paypal" id="paypal" />
                      <Label htmlFor="paypal" className="flex items-center gap-2 cursor-pointer flex-1">
                        <Wallet className="w-5 h-5" />
                        <div>
                          <p className="font-medium">PayPal</p>
                          <p className="text-sm text-muted-foreground">Bayar dengan akun PayPal Anda</p>
                        </div>
                      </Label>
                    </div>
                  </RadioGroup>
                </CardContent>
              </Card>
            </div>

            <div>
              <Card className="border-2 border-border shadow-md sticky top-4">
                <CardHeader>
                  <CardTitle>Ringkasan Order</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex justify-between text-lg">
                    <span>Total</span>
                    <span className="font-bold">{formatIDR(total)}</span>
                  </div>
                  <Button onClick={handleCheckout} className="w-full shadow-sm" disabled={loading}>
                    {loading ? (
                      <>
                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                        Memproses...
                      </>
                    ) : user ? (
                      <>
                        <CreditCard className="w-4 h-4 mr-2" />
                        Bayar dengan {paymentMethod === "qris" ? "QRIS" : "PayPal"}
                      </>
                    ) : (
                      "Login untuk Checkout"
                    )}
                  </Button>
                  <p className="text-xs text-muted-foreground text-center">Pembayaran diproses melalui Pakasir</p>
                </CardContent>
              </Card>
            </div>
          </div>
        )}
      </div>
    </AppLayout>
  );
}