meet-hub/src/pages/Checkout.tsx

import { useState } from "react";
import { useNavigate } 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 { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Input } from "@/components/ui/input";
import { toast } from "@/hooks/use-toast";
import { formatIDR } from "@/lib/format";
import { Trash2, CreditCard, Loader2, QrCode } from "lucide-react";

// 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 CheckoutStep = "cart" | "payment";

export default function Checkout() {
  const { items, removeItem, clearCart, total } = useCart();
  const { user, signIn, signUp } = useAuth();
  const navigate = useNavigate();

  const [loading, setLoading] = useState(false);
  const [step, setStep] = useState<CheckoutStep>("cart");

  // Auth modal state
  const [authModalOpen, setAuthModalOpen] = useState(false);
  const [authLoading, setAuthLoading] = useState(false);
  const [authEmail, setAuthEmail] = useState("");
  const [authPassword, setAuthPassword] = useState("");
  const [authName, setAuthName] = useState("");

  const checkPaymentStatus = async (oid: string) => {
    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(`/orders/${oid}`);
    }
  };

  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: "qris",
        })
        .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");

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

      // Call edge function to create QRIS payment
      const { data: paymentData, error: paymentError } = await supabase.functions.invoke('create-payment', {
        body: {
          order_id: order.id,
          amount: amountInRupiah,
          description: productTitles,
        },
      });

      if (paymentError) {
        console.error('Payment creation error:', paymentError);
        throw new Error(paymentError.message || 'Gagal membuat pembayaran');
      }

      // Clear cart and redirect to order detail page to show QR code
      clearCart();
      navigate(`/orders/${order.id}`);
    } 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 () => {
    // This function is now handled in OrderDetail page
    // Kept for backwards compatibility but no longer used
    toast({ title: "Info", description: "Status pembayaran diupdate otomatis" });
  };

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!authEmail || !authPassword) {
      toast({ title: "Error", description: "Email dan password wajib diisi", variant: "destructive" });
      return;
    }

    setAuthLoading(true);
    const { error } = await signIn(authEmail, authPassword);

    if (error) {
      toast({
        title: "Login gagal",
        description: error.message || "Email atau password salah",
        variant: "destructive",
      });
      setAuthLoading(false);
    } else {
      toast({ title: "Login berhasil", description: "Silakan lanjutkan pembayaran" });
      setAuthModalOpen(false);
      setAuthLoading(false);
    }
  };

  const handleRegister = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!authEmail || !authPassword || !authName) {
      toast({ title: "Error", description: "Semua field wajib diisi", variant: "destructive" });
      return;
    }

    if (authPassword.length < 6) {
      toast({ title: "Error", description: "Password minimal 6 karakter", variant: "destructive" });
      return;
    }

    setAuthLoading(true);
    const { error, data } = await signUp(authEmail, authPassword, authName);

    if (error) {
      toast({
        title: "Registrasi gagal",
        description: error.message || "Gagal membuat akun",
        variant: "destructive",
      });
      setAuthLoading(false);
    } else {
      toast({
        title: "Registrasi berhasil",
        description: "Silakan cek email untuk verifikasi akun Anda",
      });
      setAuthModalOpen(false);
      setAuthLoading(false);
    }
  };

  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>
                  <div className="flex items-center space-x-3 p-3 border-2 border-border rounded-none bg-muted">
                    <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>
                  </div>
                </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>
                  <div className="space-y-3 pt-2 border-t">
                    {user ? (
                      <Button onClick={handleCheckout} className="w-full shadow-sm" disabled={loading}>
                        {loading ? (
                          <>
                            <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                            Memproses...
                          </>
                        ) : (
                          <>
                            <CreditCard className="w-4 h-4 mr-2" />
                            Bayar dengan QRIS
                          </>
                        )}
                      </Button>
                    ) : (
                      <Dialog open={authModalOpen} onOpenChange={setAuthModalOpen}>
                        <DialogTrigger asChild>
                          <Button className="w-full shadow-sm">
                            Login atau Daftar untuk Checkout
                          </Button>
                        </DialogTrigger>
                        <DialogContent className="sm:max-w-md">
                          <DialogHeader>
                            <DialogTitle>Login atau Daftar</DialogTitle>
                          </DialogHeader>
                          <Tabs defaultValue="login" className="w-full">
                            <TabsList className="grid w-full grid-cols-2">
                              <TabsTrigger value="login">Login</TabsTrigger>
                              <TabsTrigger value="register">Daftar</TabsTrigger>
                            </TabsList>
                            <TabsContent value="login">
                              <form onSubmit={handleLogin} className="space-y-4 mt-4">
                                <div className="space-y-2">
                                  <label htmlFor="login-email" className="text-sm font-medium">
                                    Email
                                  </label>
                                  <Input
                                    id="login-email"
                                    type="email"
                                    placeholder="nama@email.com"
                                    value={authEmail}
                                    onChange={(e) => setAuthEmail(e.target.value)}
                                    required
                                  />
                                </div>
                                <div className="space-y-2">
                                  <label htmlFor="login-password" className="text-sm font-medium">
                                    Password
                                  </label>
                                  <Input
                                    id="login-password"
                                    type="password"
                                    placeholder="••••••••"
                                    value={authPassword}
                                    onChange={(e) => setAuthPassword(e.target.value)}
                                    required
                                  />
                                </div>
                                <Button type="submit" className="w-full" disabled={authLoading}>
                                  {authLoading ? (
                                    <>
                                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                                      Memproses...
                                    </>
                                  ) : (
                                    "Login"
                                  )}
                                </Button>
                              </form>
                            </TabsContent>
                            <TabsContent value="register">
                              <form onSubmit={handleRegister} className="space-y-4 mt-4">
                                <div className="space-y-2">
                                  <label htmlFor="register-name" className="text-sm font-medium">
                                    Nama Lengkap
                                  </label>
                                  <Input
                                    id="register-name"
                                    type="text"
                                    placeholder="John Doe"
                                    value={authName}
                                    onChange={(e) => setAuthName(e.target.value)}
                                    required
                                  />
                                </div>
                                <div className="space-y-2">
                                  <label htmlFor="register-email" className="text-sm font-medium">
                                    Email
                                  </label>
                                  <Input
                                    id="register-email"
                                    type="email"
                                    placeholder="nama@email.com"
                                    value={authEmail}
                                    onChange={(e) => setAuthEmail(e.target.value)}
                                    required
                                  />
                                </div>
                                <div className="space-y-2">
                                  <label htmlFor="register-password" className="text-sm font-medium">
                                    Password (minimal 6 karakter)
                                  </label>
                                  <Input
                                    id="register-password"
                                    type="password"
                                    placeholder="••••••••"
                                    value={authPassword}
                                    onChange={(e) => setAuthPassword(e.target.value)}
                                    required
                                    minLength={6}
                                  />
                                </div>
                                <Button type="submit" className="w-full" disabled={authLoading}>
                                  {authLoading ? (
                                    <>
                                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                                      Memproses...
                                    </>
                                  ) : (
                                    "Daftar"
                                  )}
                                </Button>
                              </form>
                            </TabsContent>
                          </Tabs>
                        </DialogContent>
                      </Dialog>
                    )}
                    <div className="space-y-1">
                      <p className="text-xs text-muted-foreground text-center">Pembayaran aman dengan standar QRIS dari Bank Indonesia</p>
                      <p className="text-xs text-muted-foreground text-center">Diproses oleh mitra pembayaran terpercaya</p>
                    </div>
                    <p className="text-xs text-muted-foreground text-center pt-1">Didukung oleh Pakasir | QRIS terdaftar oleh Bank Indonesia</p>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        )}
      </div>
    </AppLayout>
  );
}