"use client";

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

export default function VisitToEarn() {
  const { addLyts } = useUser();
  const [visitedStores, setVisitedStores] = useState<string[]>([]);
  const [mapClaimed, setMapClaimed] = useState<string | null>(null);

  const checkinLocations = [
    { id: "cafe", name: "Brew & Co Cafe", reward: 8 },
    { id: "hm", name: "H&M旗舰店 Retail Store", reward: 15 },
    { id: "gym", name: "Core Fitness Gym", reward: 20 },
  ];

  const handleCheckin = (id: string, name: string, reward: number) => {
    if (visitedStores.includes(id)) return;
    setVisitedStores((prev) => [...prev, id]);
    addLyts(reward);
    setMapClaimed(name);
    setTimeout(() => setMapClaimed(null), 3000);
  };

  return (
    <section className="py-24 bg-[#090909] 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-purple/10 shadow-[0_0_50px_rgba(139,61,255,0.05)]">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
            
            {/* Information */}
            <div className="space-y-6 text-left">
              <div className="w-12 h-12 rounded-2xl bg-accent-purple/10 border border-accent-purple/20 flex items-center justify-center text-accent-purple">
                <MapPin className="w-6 h-6" />
              </div>

              <div className="space-y-2">
                <span className="text-accent-purple font-bold text-xs uppercase tracking-wider">Section 08 • Visit-to-Earn</span>
                <h3 className="text-2xl sm:text-4xl font-extrabold font-sora text-white">
                  Location Check-Ins & <br />
                  <span className="text-glow-purple text-accent-purple">GPS Rewards</span>
                </h3>
                <p className="text-white/60 text-sm leading-relaxed">
                  Earn points simply by visiting local spaces. Confirm your location status via GPS check-ins at restaurants, parks, concerts, and malls.
                </p>
              </div>
            </div>

            {/* Map Simulator */}
            <div className="bg-[#0b0b0b] border border-white/5 rounded-2xl p-6 space-y-4 relative overflow-hidden min-h-[220px]">
              {mapClaimed && (
                <div className="absolute inset-0 bg-dark/95 flex items-center justify-center z-10 p-4 text-center animate-in fade-in duration-200">
                  <div className="space-y-2">
                    <Sparkles className="w-8 h-8 text-accent-purple mx-auto animate-bounce" />
                    <p className="text-sm font-semibold text-white">Checked in at {mapClaimed}!</p>
                    <p className="text-xs text-accent-lime font-bold">LYT reward added directly to wallet</p>
                  </div>
                </div>
              )}
              
              <h4 className="text-[10px] font-bold text-white/40 uppercase tracking-widest">Active nodes near you:</h4>
              <div className="space-y-2.5">
                {checkinLocations.map((loc) => {
                  const visited = visitedStores.includes(loc.id);
                  return (
                    <div
                      key={loc.id}
                      className={`flex items-center justify-between p-3 rounded-xl border transition-all ${
                        visited
                          ? "bg-white/2 border-white/5 opacity-55"
                          : "bg-white/3 border-white/5 hover:border-accent-purple/35"
                      }`}
                    >
                      <div className="flex items-center space-x-3">
                        <MapPin className={`w-4 h-4 ${visited ? "text-white/40" : "text-accent-purple animate-bounce"}`} />
                        <span className="text-xs font-semibold text-white">{loc.name}</span>
                      </div>
                      <button
                        onClick={() => handleCheckin(loc.id, loc.name, loc.reward)}
                        disabled={visited}
                        className={`px-3 py-1.5 rounded-lg text-[10px] font-bold transition-all cursor-pointer ${
                          visited
                            ? "bg-white/5 text-white/40 cursor-not-allowed"
                            : "bg-accent-purple text-white hover:bg-accent-purple/90"
                        }`}
                      >
                        {visited ? "Visited" : `Check In (+${loc.reward} LYT)`}
                      </button>
                    </div>
                  );
                })}
              </div>
            </div>

          </div>
        </div>

      </div>
    </section>
  );
}
