"use client";

import { useState } from "react";
import { useUser } from "@/lib/context";
import { Footprints, Check, RefreshCw } from "lucide-react";
import { motion } from "framer-motion";

export default function WalkToEarn() {
  const { profile, addLyts, incrementSteps } = useUser();
  const [simSteps, setSimSteps] = useState(2500);
  const [walkClaimed, setWalkClaimed] = useState(false);
  const walkReward = Math.floor(simSteps / 500); // 1 LYT / 500 steps

  const handleSimulateWalk = () => {
    incrementSteps(simSteps);
    addLyts(walkReward);
    setWalkClaimed(true);
    setTimeout(() => {
      setWalkClaimed(false);
      setSimSteps(2500);
    }, 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-primary/10 shadow-[0_0_50px_rgba(255,199,44,0.05)]">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
            
            {/* Left side: Information */}
            <div className="space-y-6 text-left">
              <div className="w-12 h-12 rounded-2xl bg-primary/10 border border-primary/20 flex items-center justify-center text-primary">
                <Footprints className="w-6 h-6 animate-pulse" />
              </div>

              <div className="space-y-2">
                <span className="text-primary font-bold text-xs uppercase tracking-wider">Section 05 • Walk-to-Earn</span>
                <h3 className="text-2xl sm:text-4xl font-extrabold font-sora text-white">
                  Step Sync & <br />
                  <span className="text-glow-yellow text-primary">Points Generation</span>
                </h3>
                <p className="text-white/60 text-sm leading-relaxed">
                  Go about your day. Next.js integration syncs steps in the background from your phone's Health API. Convert them to tradeable LYTs.
                </p>
              </div>
            </div>

            {/* Right side: Step Simulator Panel */}
            <div className="bg-white/3 border border-white/5 rounded-2xl p-6 space-y-6">
              <div className="flex justify-between items-end">
                <div>
                  <span className="text-white/40 text-[10px] font-bold tracking-wider uppercase block">Simulate Distance</span>
                  <span className="text-2xl font-extrabold font-sora text-white">
                    +{simSteps.toLocaleString()} <span className="text-xs text-white/40 font-medium">Steps</span>
                  </span>
                </div>
                <div className="text-right">
                  <span className="text-white/40 text-[10px] font-bold tracking-wider uppercase block">Rewards Wallet</span>
                  <span className="text-xl font-extrabold text-primary font-sora flex items-center justify-end gap-1">
                    +{walkReward} <span className="text-xs font-semibold text-white/60">LYTs</span>
                  </span>
                </div>
              </div>

              {/* Slider */}
              <input
                type="range"
                min="500"
                max="10000"
                step="500"
                value={simSteps}
                onChange={(e) => setSimSteps(parseInt(e.target.value))}
                disabled={walkClaimed}
                className="w-full h-1.5 bg-white/10 rounded-lg appearance-none cursor-pointer accent-primary"
              />

              <div className="flex justify-between text-[10px] text-white/40 font-bold">
                <span>500 Steps</span>
                <span>5,000 Steps</span>
                <span>10,000 Steps</span>
              </div>

              <button
                onClick={handleSimulateWalk}
                disabled={walkClaimed}
                className={`w-full py-3.5 rounded-xl font-extrabold text-sm tracking-wider flex items-center justify-center gap-2 cursor-pointer transition-all ${
                  walkClaimed
                    ? "bg-accent-lime text-dark shadow-[0_0_20px_rgba(200,255,55,0.3)]"
                    : "bg-white/5 hover:bg-primary hover:text-dark text-white border border-white/10 hover:border-primary"
                }`}
              >
                {walkClaimed ? (
                  <>
                    <Check className="w-4 h-4" />
                    <span>Reward Added! +{walkReward} LYTs</span>
                  </>
                ) : (
                  <>
                    <RefreshCw className="w-4 h-4 animate-spin-slow" />
                    <span>Sync Walk Distance</span>
                  </>
                )}
              </button>
            </div>

          </div>
        </div>

      </div>
    </section>
  );
}
