"use client";

import { useState } from "react";
import { useUser } from "@/lib/context";
import { ShoppingBag, Check } from "lucide-react";

export default function ShopToEarn() {
  const { addLyts } = useUser();
  const [selectedItems, setSelectedItems] = useState<string[]>(["coffee"]);
  const [shopClaimed, setShopClaimed] = useState(false);

  const shopItems = [
    { id: "coffee", name: "Starbucks Iced Caramel Macchiato", cost: "$6.20", reward: 12 },
    { id: "sneakers", name: "Nike Pegasus Running Shoes", cost: "$130.00", reward: 260 },
    { id: "tee", name: "Gymshark Seamless Tee", cost: "$38.00", reward: 76 },
  ];

  const totalReward = shopItems
    .filter((item) => selectedItems.includes(item.id))
    .reduce((sum, item) => sum + item.reward, 0);

  const handleShopClaim = () => {
    if (totalReward > 0) {
      addLyts(totalReward);
      setShopClaimed(true);
      setTimeout(() => {
        setShopClaimed(false);
        setSelectedItems([]);
      }, 3000);
    }
  };

  return (
    <section className="py-24 bg-dark relative overflow-hidden">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        <div className="glassmorphism rounded-3xl p-8 sm:p-12 border border-accent-pink/10 shadow-[0_0_50px_rgba(255,46,136,0.05)]">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
            
            {/* Simulator box */}
            <div className="bg-[#0b0b0b] border border-white/5 rounded-2xl p-6 space-y-4 order-2 md:order-1">
              <h4 className="text-[10px] font-bold text-white/40 uppercase tracking-widest">Select items purchased:</h4>
              <div className="space-y-2.5">
                {shopItems.map((item) => (
                  <div
                    key={item.id}
                    onClick={() => {
                      if (shopClaimed) return;
                      setSelectedItems((prev) =>
                        prev.includes(item.id)
                          ? prev.filter((id) => id !== item.id)
                          : [...prev, item.id]
                      );
                    }}
                    className={`flex items-center justify-between p-3.5 rounded-xl border cursor-pointer transition-all ${
                      selectedItems.includes(item.id)
                        ? "bg-accent-pink/5 border-accent-pink/30 text-white"
                        : "bg-white/3 border-white/5 text-white/60 hover:border-white/10"
                    }`}
                  >
                    <div className="flex items-center space-x-3">
                      <div
                        className={`w-4 h-4 rounded flex items-center justify-center border transition-all ${
                          selectedItems.includes(item.id)
                            ? "bg-accent-pink border-accent-pink"
                            : "border-white/20"
                        }`}
                      >
                        {selectedItems.includes(item.id) && <Check className="w-3.5 h-3.5 text-white" />}
                      </div>
                      <span className="text-xs font-semibold">{item.name}</span>
                    </div>
                    <div className="text-right">
                      <span className="text-xs font-extrabold text-white block">{item.cost}</span>
                      <span className="text-[9px] text-accent-pink font-bold">+{item.reward} LYTs</span>
                    </div>
                  </div>
                ))}
              </div>

              <button
                onClick={handleShopClaim}
                disabled={shopClaimed || totalReward === 0}
                className={`w-full py-3 rounded-xl font-extrabold text-xs tracking-wider flex items-center justify-center gap-2 cursor-pointer transition-all ${
                  shopClaimed
                    ? "bg-accent-lime text-dark shadow-[0_0_20px_rgba(200,255,55,0.3)]"
                    : totalReward === 0
                    ? "bg-white/5 text-white/20 border border-white/5 cursor-not-allowed"
                    : "bg-white/5 hover:bg-accent-pink hover:text-white text-white border border-white/10 hover:border-accent-pink"
                }`}
              >
                {shopClaimed ? (
                  <>
                    <Check className="w-4 h-4" />
                    <span>Cashback Claimed! +{totalReward} LYTs</span>
                  </>
                ) : (
                  <span>Claim Receipt Cashback (+{totalReward} LYTs)</span>
                )}
              </button>
            </div>

            {/* Information */}
            <div className="space-y-6 text-left order-1 md:order-2 md:pl-6">
              <div className="w-12 h-12 rounded-2xl bg-accent-pink/10 border border-accent-pink/20 flex items-center justify-center text-accent-pink">
                <ShoppingBag className="w-6 h-6" />
              </div>

              <div className="space-y-2">
                <span className="text-accent-pink font-bold text-xs uppercase tracking-wider">Section 06 • Shop-to-Earn</span>
                <h3 className="text-2xl sm:text-4xl font-extrabold font-sora text-white">
                  Cashback & <br />
                  <span className="text-glow-pink text-accent-pink">Instant Rebates</span>
                </h3>
                <p className="text-white/60 text-sm leading-relaxed">
                  Earn high cashback rates when shopping with retail partners. Submit digital checks or verify loyalty IDs to earn LYT social tokens.
                </p>
              </div>
            </div>

          </div>
        </div>

      </div>
    </section>
  );
}
