"use client";
import { useEffect, useState } from "react";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Copy, Tag, ShoppingBag, Calendar, Clock, Check } from "lucide-react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import PriceDisplay from "@/components/ui/formattedPrice";

const statusStyles = {
  true: {
    className: "bg-green-100 text-green-800",
    label: "Active",
  },
  false: {
    className: "bg-gray-100 text-gray-800",
    label: "Inactive",
  },
};


export function CouponList() {
  const [copiedCoupon, setCopiedCoupon] = useState<string | null>(null);

  const [activeCoupons, setActiveCoupons] = useState<Coupon[]>([])

  const fetchAllCoupons = async () => {

    const response = await fetch("/api/user/coupons")

    console.log(response)

    const data = await response.json()

    console.log(data)
    setActiveCoupons(data.coupons)

  }
  useEffect(() => {
    fetchAllCoupons()
  }, [])


  const handleCopyCode = (code: string) => {
    navigator.clipboard.writeText(code).then(() => {
      setCopiedCoupon(code);
      setTimeout(() => {
        setCopiedCoupon(null);
      }, 3000);
    });
  };

  const formatDate = (date?: Date | string | null) => {
    if (!date) return "No Expiry";

    return new Intl.DateTimeFormat("en-US", {
      year: "numeric",
      month: "long",
      day: "numeric",
    }).format(new Date(date));
  };


  return (
    <Tabs defaultValue="active" className="w-full">
      <TabsList className="grid w-full max-w-md grid-cols-2">
        <TabsTrigger value="active">Active Coupons</TabsTrigger>
      </TabsList>

      <TabsContent value="active" className="mt-6">
        {activeCoupons.length === 0 ? (
          <div className="rounded-lg border border-dashed p-8 text-center">
            <h3 className="text-lg font-medium">No active coupons</h3>
            <p className="mt-1 text-sm text-muted-foreground">
              You don&apos;t have any active coupons at the moment.
            </p>
          </div>
        ) : (
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {activeCoupons.map((coupon) => (
              <CouponCard
                key={coupon.id}
                coupon={coupon}
                copiedCoupon={copiedCoupon}
                onCopyCode={handleCopyCode}
                formatDate={formatDate}
              />
            ))}
          </div>
        )}
      </TabsContent>
    </Tabs>
  );
}

interface CouponCardProps {
  coupon: Coupon;
  copiedCoupon: string | null;
  onCopyCode: (code: string) => void;
  formatDate: (date?: Date | string | null) => string;
}

function CouponCard({
  coupon,
  copiedCoupon,
  onCopyCode,
  formatDate,
}: CouponCardProps) {
  return (
    <Card className="overflow-hidden">
      <div className="bg-muted p-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Tag className="h-4 w-4" />
            <span className="text-sm font-medium">
              {coupon.type.replace("_", " ").toUpperCase()}
            </span>
          </div>
          <Badge
            className={
              statusStyles[String(coupon.isActive) as "true" | "false"].className
            }
          >
            {statusStyles[String(coupon.isActive) as "true" | "false"].label}
          </Badge>
        </div>
        <div className="mt-4">
          <h3 className="text-2xl font-bold"><PriceDisplay price={coupon.value} /></h3>
          {coupon.minPurchaseAmount && (<p className="text-sm text-muted-foreground mt-1">
            Min. Purchase Amount:  <b><PriceDisplay price={coupon.minPurchaseAmount} /></b>
          </p>)}
        </div>
      </div>
      <CardContent className="p-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center bg-muted rounded-md px-3 py-1 text-sm font-mono">
            {coupon.code}
          </div>
          <Button
            variant="ghost"
            size="sm"
            onClick={() => onCopyCode(coupon.code)}
            disabled={coupon.isActive !== true}
          >
            {copiedCoupon === coupon.code ? (
              <Check className="h-4 w-4" />
            ) : (
              <Copy className="h-4 w-4" />
            )}
            <span className="sr-only">Copy code</span>
          </Button>
        </div>
        <div className="mt-4 grid grid-cols-2 gap-2 text-sm">
          <div className="flex items-center">
            <ShoppingBag className="mr-2 h-4 w-4 text-muted-foreground" />
            <span>Min: {coupon.minPurchaseAmount}</span>
          </div>
          <div className="flex items-center justify-end">
            <Calendar className="mr-2 h-4 w-4 text-muted-foreground" />
            <span>Exp: {formatDate(coupon.endDate)}</span>
          </div>
        </div>
      </CardContent>
      <CardFooter className="border-t bg-muted/50 p-4">
        <Dialog>
          <DialogTrigger asChild>
            <Button
              variant="outline"
              className="w-full hover:bg-gray-300"
              disabled={coupon.isActive !== true}
            >
              View Details
            </Button>
          </DialogTrigger>
          <DialogContent className="bg-white">
            <DialogHeader>
              <DialogTitle>Coupon Details</DialogTitle>
              <DialogDescription>
                Information about your coupon and how to use it.
              </DialogDescription>
            </DialogHeader>
            <div className="space-y-4 py-4">
              <div className="bg-muted rounded-md p-4">
                <h3 className="text-xl font-bold"><PriceDisplay price={coupon.value} /></h3>
              </div>

              <div className="grid gap-3">
                <div className="flex justify-between items-center">
                  <span className="text-sm font-medium">Coupon Code:</span>
                  <div className="flex items-center space-x-2 font-mono">
                    {coupon.code}
                    <Button
                      size="icon"
                      variant="ghost"
                      onClick={() => onCopyCode(coupon.code)}
                    >
                      {copiedCoupon === coupon.code ? (
                        <Check className="h-4 w-4" />
                      ) : (
                        <Copy className="h-4 w-4" />
                      )}
                    </Button>
                  </div>
                </div>

                <div className="flex justify-between items-center">
                  <span className="text-sm font-medium">Minimum Purchase Amount:</span>
                  <span><PriceDisplay price={coupon.minPurchaseAmount ?? 0} /></span>
                </div>

                <div className="flex justify-between items-center">
                  <span className="text-sm font-medium">Expiration Date:</span>
                  <span>{formatDate(coupon.endDate ? coupon.endDate : null)}</span>
                </div>

                <div className="flex justify-between items-center">
                  <span className="text-sm font-medium">Status:</span>
                  <Badge
                    className={
                      statusStyles[String(coupon.isActive) as "true" | "false"].className
                    }
                  >
                    {statusStyles[String(coupon.isActive) as "true" | "false"].label}
                  </Badge>
                </div>

                <div className="flex justify-between items-center">
                  <span className="text-sm font-medium">Type:</span>
                  <span className="capitalize">{coupon.type}</span>
                </div>
              </div>

              <div className="rounded-md bg-muted/50 p-4 mt-4">
                <h4 className="text-sm font-medium mb-2">How to use:</h4>
                <ol className="text-sm text-muted-foreground space-y-2 pl-4 list-decimal">
                  <li>Add items to your cart</li>
                  <li>Proceed to checkout</li>
                  <li>Enter this coupon code in the designated field</li>
                  <li>The discount will be applied to you if it&apos;s valid.</li>
                </ol>
              </div>
            </div>
          </DialogContent>
        </Dialog>
      </CardFooter>
    </Card>
  );
}