"use client";

import React, { useState } from "react";
import { CardNumberElement, CardExpiryElement, CardCvcElement } from "@stripe/react-stripe-js";
import { Lock } from "lucide-react";

interface StripePaymentFieldsProps {
  cardName: string;
  setCardName: (name: string) => void;
  saveCard: boolean;
  setSaveCard: (save: boolean) => void;
  error?: string | null;
  onCardChange?: (complete: boolean) => void;
}

const ELEMENT_OPTIONS = {
  style: {
    base: {
      fontSize: "16px",
      color: "#828282",
      fontFamily: "inherit",
      "::placeholder": {
        color: "#828282",
        fontWeight: "300",
      },
    },
    invalid: {
      color: "#e53e3e",
    },
  },
};

export default function StripePaymentFields({ cardName, setCardName, saveCard, setSaveCard, error, onCardChange }: StripePaymentFieldsProps) {
  const [focusedField, setFocusedField] = useState<string | null>(null);
  const [isNumberComplete, setIsNumberComplete] = useState(false);
  const [isExpiryComplete, setIsExpiryComplete] = useState(false);
  const [isCvcComplete, setIsCvcComplete] = useState(false);

  React.useEffect(() => {
    onCardChange?.(isNumberComplete && isExpiryComplete && isCvcComplete);
  }, [isNumberComplete, isExpiryComplete, isCvcComplete, onCardChange]);

  return (
    <div className="mt-4 space-y-4 animate-in fade-in slide-in-from-top-2 duration-300">
      <div className="flex items-center gap-3 text-[#828282] text-[14px] mb-4 bg-blue-50/50 p-4 rounded-[15px] border border-blue-100/50">
        <Lock size={16} className="text-[#0097DC] flex-shrink-0" />
        <span className="leading-relaxed">Your card details are safe. We don't store your information, and all payments are processed securely.</span>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 payment-grid">
        {/* Name on Card */}
        <div className="flex flex-col gap-2 card-1">
          <input
            type="text"
            placeholder="Name on card"
            value={cardName}
            onChange={(e) => setCardName(e.target.value)}
            className="h-[50px] px-[20px] md:px-[30px] rounded-full border border-[#58585A] text-[16px] md:text-[16px] text-[#828282] outline-none transition-all bg-white placeholder:text-[#828282] focus:border-[#0097DC] max-[767px]:font-medium max-[767px]:font-['Open_Sans'] "
          />
        </div>

        {/* Card Number */}
        <div className="flex flex-col gap-2 card-2">
          <div className={`h-[50px] px-[20px] md:px-[30px] rounded-full border ${focusedField === "cardNumber" ? "border-[#0097DC]" : "border-[#58585A]"} flex items-center bg-white transition-all`}>
            <div className="w-full">
              <CardNumberElement
                options={ELEMENT_OPTIONS}
                onChange={(e) => setIsNumberComplete(e.complete)}
                onFocus={() => setFocusedField("cardNumber")}
                onBlur={() => setFocusedField(null)}
              />
            </div>
          </div>
        </div>

        {/* Expiry */}
        <div className="flex flex-col gap-2 card-3">
          <div className={`h-[50px] px-[20px] md:px-[30px] rounded-full border ${focusedField === "cardExpiry" ? "border-[#0097DC]" : "border-[#58585A]"} flex items-center bg-white transition-all`}>
            <div className="w-full">
              <CardExpiryElement 
                options={ELEMENT_OPTIONS} 
                onChange={(e) => setIsExpiryComplete(e.complete)}
                onFocus={() => setFocusedField("cardExpiry")}
                onBlur={() => setFocusedField(null)}
              />
            </div>
          </div>
        </div>

        {/* CVC */}
        <div className="flex flex-col gap-2 card-4">
          <div className={`h-[50px] px-[20px] md:px-[30px] rounded-full border ${focusedField === "cardCvc" ? "border-[#0097DC]" : "border-[#58585A]"} flex items-center bg-white transition-all`}>
            <div className="w-full">
              <CardCvcElement 
                options={ELEMENT_OPTIONS} 
                onChange={(e) => setIsCvcComplete(e.complete)}
                onFocus={() => setFocusedField("cardCvc")}
                onBlur={() => setFocusedField(null)}
              />
            </div>
          </div>
        </div>
      </div>

      {/* Save Card Checkbox */}
      <div
         className="flex items-center gap-2 px-1 mt-4 cursor-pointer select-none group"
         onClick={() => setSaveCard(!saveCard)}
       >
         {/* Checkbox */}
         <div
           className={`
             relative w-[20px] h-[20px] rounded-[6px] border-1 flex items-center justify-center
             transition-all duration-200
             ${
               saveCard
                 ? "border-[#58585A] bg-white"
                 : "border-[#58585A] bg-white"
             }
           `}
         >
           {/* Inner blue square */}
           {saveCard && (
             <div className="w-[12px] h-[12px] rounded-[4px] bg-[#0097DC]" />
           )}
         </div>

         {/* Text */}
         <span className="text-[14px] text-[#828282]">Save my card details for future payments</span>
       </div>

      {error && (
        <p className="text-red-500 text-sm mt-2 font-medium px-2">{error}</p>
      )}
    </div>
  );
}