"use client";
import { useState } from "react";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { PlusIcon, CreditCard, Edit2, Trash2, CheckCircle2 } from "lucide-react";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { AddPaymentMethodForm } from "./add-payment-method-form";

type PaymentMethod = {
  id: string;
  type: "credit" | "paypal" | "bank";
  name: string;
  last4: string;
  expiry?: string;
  default: boolean;
  image: string;
};

// Mock data for payment methods
const initialPaymentMethods: PaymentMethod[] = [
  {
    id: "pm-1",
    type: "credit",
    name: "Visa ending in 4242",
    last4: "4242",
    expiry: "12/25",
    default: true,
    image: "/payment/visa.svg",
  },
  {
    id: "pm-2",
    type: "credit",
    name: "Mastercard ending in 5555",
    last4: "5555",
    expiry: "08/24",
    default: false,
    image: "/payment/mastercard.svg",
  },
  {
    id: "pm-3",
    type: "paypal",
    name: "PayPal - john.doe@example.com",
    last4: "",
    default: false,
    image: "/payment/paypal.svg",
  },
];

export function PaymentMethods() {
  // const { toast } = useToast();
  const [paymentMethods, setPaymentMethods] = useState<PaymentMethod[]>(initialPaymentMethods);
  const [showAddForm, setShowAddForm] = useState(false);
  const [selectedMethod, setSelectedMethod] = useState<string | null>(null);

  const handleDeleteMethod = (id: string) => {
    setPaymentMethods(paymentMethods.filter(method => method.id !== id));
    // toast({
    //   title: "Payment method removed",
    //   description: "The payment method has been removed successfully."
    // });
  };

  const handleSetDefault = (id: string) => {
    setPaymentMethods(
      paymentMethods.map(method => ({
        ...method,
        default: method.id === id,
      }))
    );
    // toast({
    //   title: "Default payment method updated",
    //   description: "Your default payment method has been updated."
    // });
  };

  const getIconForType = (type: string) => {
    switch (type) {
      case "credit":
        return <CreditCard className="h-5 w-5" />;
      case "paypal":
        return <CreditCard className="h-5 w-5" />;
      default:
        return <CreditCard className="h-5 w-5" />;
    }
  };

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Your Payment Methods</CardTitle>
          <CardDescription>Manage your saved payment methods.</CardDescription>
        </CardHeader>
        <CardContent>
          {paymentMethods.length === 0 ? (
            <div className="rounded-lg border border-dashed p-8 text-center">
              <h3 className="text-lg font-medium">No payment methods</h3>
              <p className="mt-1 text-sm text-muted-foreground">
                You haven&apos;t added any payment methods yet.
              </p>
              <Button onClick={() => setShowAddForm(true)} className="mt-4 bg-primary text-white hover:bg-secondary">
                <PlusIcon className="mr-2 h-4 w-4" />
                Add Payment Method
              </Button>
            </div>
          ) : (
            <div className="space-y-4">
              {paymentMethods.map((method) => (
                <div
                  key={method.id}
                  className="flex items-center justify-between rounded-lg border p-4"
                >
                  <div className="flex items-center gap-4">
                    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
                      {getIconForType(method.type)}
                    </div>
                    <div>
                      <p className="font-medium">{method.name}</p>
                      {method.expiry && (
                        <p className="text-sm text-muted-foreground">
                          Expires {method.expiry}
                        </p>
                      )}
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    {method.default && (
                      <span className="flex items-center gap-1 rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-800">
                        <CheckCircle2 className="h-3 w-3" />
                        Default
                      </span>
                    )}
                    {!method.default && (
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => handleSetDefault(method.id)}
                      >
                        Set as default
                      </Button>
                    )}
                    <Dialog>
                      <DialogTrigger asChild>
                        <Button variant="ghost" size="icon">
                          <Edit2 className="h-4 w-4" />
                          <span className="sr-only">Edit</span>
                        </Button>
                      </DialogTrigger>
                      <DialogContent>
                        <DialogHeader>
                          <DialogTitle>Edit Payment Method</DialogTitle>
                          <DialogDescription>
                            Update your payment method details.
                          </DialogDescription>
                        </DialogHeader>
                        <div className="py-4">
                          <p className="text-center text-muted-foreground">
                            Editing functionality would be implemented here.
                          </p>
                        </div>
                      </DialogContent>
                    </Dialog>
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => handleDeleteMethod(method.id)}
                    >
                      <Trash2 className="h-4 w-4 hover:text-red-500" />
                      <span className="sr-only">Delete</span>
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
        <CardFooter className="border-t bg-muted/50 px-6 py-4">
          <Dialog open={showAddForm} onOpenChange={setShowAddForm}>
            <DialogTrigger asChild>
              <Button className="text-white">
                <PlusIcon className="mr-2 h-4 w-4 text-white" />
                Add Payment Method
              </Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-[425px] bg-white">
              <DialogHeader>
                <DialogTitle className="">Add Payment Method</DialogTitle>
                <DialogDescription>
                  Add a new payment method to your account.
                </DialogDescription>
              </DialogHeader>
              <AddPaymentMethodForm onSuccess={() => setShowAddForm(false)} />
            </DialogContent>
          </Dialog>
        </CardFooter>
      </Card>
    </div>
  );
}