"use client";
import { useState } from "react";

export function CreditCardForm() {
  const [focused, setFocused] = useState(false);
  const [cardType, setCardType] = useState<"visa" | "mastercard" | "unknown">("unknown");
  const [cardNumber, setCardNumber] = useState("");

  const handleCardNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    let val = e.target.value.replace(/\D/g, ''); 
    
    if (val.startsWith('4')) {
      setCardType('visa');
    } else if (val.match(/^(5[1-5]|2[2-7])/)) {
      setCardType('mastercard');
    } else {
      setCardType('unknown');
    }

    val = val.replace(/(.{4})/g, '$1 ').trim();
    setCardNumber(val.slice(0, 19)); 
  };

  return (
    <div className="w-full max-w-sm rounded-2xl border border-border bg-[#0a0a0a] p-6 shadow-xl relative overflow-hidden">
      <div className={`absolute -right-20 -top-20 h-40 w-40 rounded-full blur-3xl transition-colors duration-500 ${focused ? "bg-blue-500/20" : "bg-transparent"}`} />
      
      <h2 className="text-lg font-medium text-foreground mb-6">Payment Method</h2>
      
      <div className="space-y-4 relative z-10">
        <div className="space-y-2">
          <label className="text-xs font-medium text-muted-foreground uppercase tracking-wider text-left block">Card Number</label>
          <div className="relative flex items-center">
            <input 
              type="text" 
              value={cardNumber}
              onChange={handleCardNumberChange}
              placeholder="0000 0000 0000 0000" 
              onFocus={() => setFocused(true)}
              onBlur={() => setFocused(false)}
              className="w-full rounded-md border border-border bg-transparent pl-3 pr-12 py-2 text-sm font-mono placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-foreground transition-shadow"
            />
            <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center pointer-events-none">
              {cardType === "visa" && (
                <svg className="h-6 w-8 text-foreground" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.2 21.5L13.8 11.5H16.4L14.7 21.5H12.2ZM24.4 11.8C23.9 11.6 23 11.5 21.9 11.5C19.4 11.5 17.6 12.9 17.6 14.8C17.6 16.2 18.9 17 19.8 17.5C20.8 17.9 21.1 18.2 21.1 18.7C21.1 19.4 20.3 19.8 19.4 19.8C18 19.8 17.2 19.4 16.5 19.1L16 21.3C16.7 21.6 17.8 21.9 19 21.9C21.7 21.9 23.6 20.6 23.6 18.3C23.6 15.3 19.4 15.1 19.4 13.8C19.4 13.3 19.9 12.8 20.8 12.8C21.5 12.8 22.2 13 22.8 13.3L23.3 11.2L24.4 11.8ZM30 11.5H27.9C27.3 11.5 26.8 11.8 26.5 12.4L22.6 21.5H25.3L25.8 20.1H29.1L29.4 21.5H31.8L29.7 11.5H30ZM26.6 18H28.4L27.5 14.6L26.6 18ZM10.5 11.5L8.2 18.3L7.3 12.7C7.1 12 6.6 11.6 6 11.5H2V12C3.1 12.3 4 12.7 4.5 13.1C5 13.4 5.2 13.8 5.3 14.5L7.2 21.5H9.9L13.2 11.5H10.5Z" fill="currentColor"/>
                </svg>
              )}
              {cardType === "mastercard" && (
                <svg className="h-6 w-8" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="11.5" cy="16" r="6.5" fill="#EB001B"/>
                  <circle cx="20.5" cy="16" r="6.5" fill="#F79E1B"/>
                </svg>
              )}
              {cardType === "unknown" && (
                <svg className="h-4 w-4 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>
              )}
            </div>
          </div>
        </div>
        
        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-2">
            <label className="text-xs font-medium text-muted-foreground uppercase tracking-wider text-left block">Expiry</label>
            <input type="text" placeholder="MM/YY" className="w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm font-mono placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-foreground" />
          </div>
          <div className="space-y-2">
            <label className="text-xs font-medium text-muted-foreground uppercase tracking-wider text-left block">CVC</label>
            <input type="text" placeholder="123" className="w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm font-mono placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-foreground" />
          </div>
        </div>
        
        <button className="w-full rounded-md bg-foreground text-background py-2.5 text-sm font-medium hover:bg-[#e0e0e0] transition-colors mt-2">
          Pay $99.00
        </button>
      </div>
    </div>
  );
}