"use client";

import { useUser } from "@/lib/context";
import { User, Flame, Coins, CheckCircle, Smartphone, ArrowRight, Share2, Compass, ChevronRight, Activity, TrendingUp } from "lucide-react";

export default function DashboardPreview() {
  const { profile } = useUser();

  // Dynamic calculations based on user's steps
  const caloriesBurned = Math.round(profile.stepsToday * 0.04);
  const distanceKm = (profile.stepsToday * 0.00076).toFixed(2);
  const activeMinutes = Math.round(profile.stepsToday * 0.008);

  const stepPercentage = Math.min(100, Math.round((profile.stepsToday / profile.stepGoal) * 100));

  // Weekly steps dummy data
  const weeklySteps = [
    { day: "Mon", steps: 8200 },
    { day: "Tue", steps: 9400 },
    { day: "Wed", steps: 6100 },
    { day: "Thu", steps: 7800 },
    { day: "Fri", steps: 11200 },
    { day: "Sat", steps: 9000 },
    { day: "Sun", steps: profile.stepsToday },
  ];

  const maxWeeklySteps = Math.max(...weeklySteps.map((d) => d.steps));

  // Transaction history dummy data
  const transactions = [
    { id: 1, type: "Walk Reward", detail: "6,420 steps synced", amount: "+16 LYT", time: "2 hours ago", isEarn: true },
    { id: 2, type: "Redeemed Brand", detail: "Starbucks $10 Voucher", amount: "-150 LYT", time: "5 hours ago", isEarn: false },
    { id: 3, type: "Referral Bonus", detail: "Invited Marcus Lee", amount: "+50 LYT", time: "1 day ago", isEarn: true },
    { id: 4, type: "Game Catch", detail: "LYT Catcher Score: 45", amount: "+45 LYT", time: "1 day ago", isEarn: true },
  ];

  return (
    <section id="dashboard" className="py-24 bg-dark relative overflow-hidden">
      {/* Background visual glows */}
      <div className="absolute top-1/2 left-1/4 -translate-y-1/2 w-96 h-96 rounded-full bg-accent-purple/10 blur-[130px] pointer-events-none" />
      <div className="absolute bottom-0 right-1/4 w-96 h-96 rounded-full bg-accent-pink/5 blur-[130px] pointer-events-none" />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        {/* Section Header */}
        <div className="text-center max-w-3xl mx-auto mb-20 space-y-4">
          <span className="text-accent-lime font-extrabold text-xs tracking-widest uppercase">
            Platform Preview
          </span>
          <h2 className="text-3xl sm:text-5xl font-extrabold font-sora text-white leading-tight">
            Manage Assets on <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-pink text-glow-yellow">Your Dashboard</span>
          </h2>
          <p className="text-white/60 text-base sm:text-lg">
            Track walking logs, check voucher redemption codes, and review points transaction history in your unified portal.
          </p>
        </div>

        {/* Contents Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
          
          {/* Left Block: Weekly Progress Charts (col-span-3) */}
          <div className="lg:col-span-3 space-y-6 hidden lg:block">
            <div className="glassmorphism rounded-3xl p-6 space-y-6">
              <div className="flex items-center justify-between">
                <span className="text-sm font-bold text-white font-sora flex items-center gap-1.5">
                  <Activity className="w-4 h-4 text-accent-lime" />
                  <span>Activity Logs</span>
                </span>
                <span className="text-[10px] text-white/40 font-bold uppercase">Weekly</span>
              </div>

              {/* Steps Chart */}
              <div className="h-44 flex items-end justify-between gap-2.5 pt-4">
                {weeklySteps.map((d, idx) => {
                  const pct = Math.max(15, Math.round((d.steps / maxWeeklySteps) * 100));
                  const isToday = idx === weeklySteps.length - 1;
                  return (
                    <div key={idx} className="flex-1 flex flex-col items-center gap-2">
                      <div className="w-full relative group">
                        <div
                          style={{ height: `${pct}%` }}
                          className={`w-full rounded-t-lg transition-all duration-500 min-h-[15px] ${
                            isToday
                              ? "bg-gradient-to-t from-accent-pink to-accent-purple shadow-[0_0_10px_rgba(255,46,136,0.2)]"
                              : "bg-white/10 hover:bg-white/20"
                          }`}
                        />
                        {/* Tooltip */}
                        <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 hidden group-hover:block bg-dark border border-white/10 px-2 py-0.5 rounded text-[9px] font-mono text-white z-10 whitespace-nowrap">
                          {d.steps.toLocaleString()}
                        </div>
                      </div>
                      <span className={`text-[10px] font-bold ${isToday ? "text-accent-pink" : "text-white/40"}`}>
                        {d.day}
                      </span>
                    </div>
                  );
                })}
              </div>

              <div className="border-t border-white/5 pt-4 text-xs text-white/50 leading-relaxed">
                🎉 Your weekly walk step frequency has increased by <span className="text-accent-lime font-bold">12.4%</span> since last week. Keep it up!
              </div>
            </div>
          </div>

          {/* Center Block: Mobile iOS Phone Mockup (col-span-5) */}
          <div className="lg:col-span-5 flex justify-center">
            {/* Phone Shell */}
            <div className="relative w-[320px] h-[640px] rounded-[48px] border-[8px] border-white/10 bg-[#090909] p-3.5 shadow-[0_25px_60px_-15px_rgba(0,0,0,0.9)] overflow-hidden flex flex-col justify-between">
              
              {/* Dynamic Island Notch */}
              <div className="absolute top-3.5 left-1/2 -translate-x-1/2 w-28 h-6 rounded-full bg-black z-30 flex items-center justify-center">
                <div className="w-2.5 h-2.5 rounded-full bg-zinc-900 ml-auto mr-4" />
              </div>

              {/* Status Header */}
              <div className="flex justify-between items-center text-[10px] text-white/70 font-semibold px-4 pt-1.5 z-20">
                <span>9:41</span>
                <div className="flex space-x-1.5">
                  <span>5G</span>
                  <span>100%</span>
                </div>
              </div>

              {/* App Internal Body (Scrollable mock container) */}
              <div className="flex-grow overflow-y-auto px-1.5 py-4 space-y-5 scrollbar-none mt-2">
                
                {/* User Header */}
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-2.5">
                    <div className="w-8 h-8 rounded-full bg-gradient-to-tr from-accent-pink to-accent-purple p-0.5 flex items-center justify-center">
                      <div className="w-full h-full rounded-full bg-dark flex items-center justify-center text-xs font-bold text-white">
                        AS
                      </div>
                    </div>
                    <div>
                      <span className="text-white font-bold text-xs block">{profile.name}</span>
                      <span className="text-[9px] text-white/40 block">Level {profile.level} Premium Member</span>
                    </div>
                  </div>

                  {/* Streak tag */}
                  <div className="flex items-center space-x-1 px-2.5 py-1 rounded-full bg-white/5 border border-white/10 text-accent-orange font-bold text-[10px]">
                    <Flame className="w-3 h-3 fill-current" />
                    <span>{profile.streak} Days</span>
                  </div>
                </div>

                {/* Circular Step Tracker */}
                <div className="bg-white/3 border border-white/5 rounded-3xl p-5 flex flex-col items-center justify-center text-center relative overflow-hidden">
                  
                  {/* Gauge */}
                  <div className="relative w-36 h-36 flex items-center justify-center">
                    
                    {/* SVG circular track */}
                    <svg className="w-full h-full transform -rotate-90">
                      <circle
                        cx="72"
                        cy="72"
                        r="60"
                        className="stroke-white/5 fill-transparent"
                        strokeWidth="8"
                      />
                      <circle
                        cx="72"
                        cy="72"
                        r="60"
                        className="stroke-primary fill-transparent"
                        strokeWidth="8"
                        strokeDasharray={377}
                        strokeDashoffset={377 - (377 * stepPercentage) / 100}
                        strokeLinecap="round"
                      />
                    </svg>

                    {/* Step values */}
                    <div className="absolute inset-0 flex flex-col items-center justify-center">
                      <span className="text-2xl font-extrabold font-sora text-white">
                        {profile.stepsToday.toLocaleString()}
                      </span>
                      <span className="text-[9px] text-white/40 font-bold uppercase tracking-wider">
                        Steps Today
                      </span>
                    </div>
                  </div>

                  <span className="text-[10px] text-white/50 font-bold mt-2">
                    Goal: {profile.stepGoal.toLocaleString()} steps ({stepPercentage}%)
                  </span>

                  {/* Stats split */}
                  <div className="grid grid-cols-3 gap-2 w-full pt-4 mt-4 border-t border-white/5">
                    <div>
                      <span className="text-white font-extrabold text-xs block">{caloriesBurned}</span>
                      <span className="text-[8px] text-white/40 block">Kcal</span>
                    </div>
                    <div className="border-x border-white/5">
                      <span className="text-white font-extrabold text-xs block">{distanceKm}</span>
                      <span className="text-[8px] text-white/40 block">Km</span>
                    </div>
                    <div>
                      <span className="text-white font-extrabold text-xs block">{activeMinutes}</span>
                      <span className="text-[8px] text-white/40 block">Mins</span>
                    </div>
                  </div>
                </div>

                {/* Balance & Send Row */}
                <div className="bg-gradient-to-tr from-accent-purple/20 to-accent-pink/10 border border-accent-purple/20 rounded-2xl p-4 flex items-center justify-between">
                  <div className="space-y-1">
                    <span className="text-[9px] text-white/40 font-bold uppercase tracking-wider block">Wallet Balance</span>
                    <span className="text-lg font-extrabold font-sora text-primary flex items-center gap-1">
                      <Coins className="w-4.5 h-4.5" />
                      <span>{profile.lytBalance} LYTs</span>
                    </span>
                  </div>
                  
                  <button className="px-3.5 py-1.5 bg-primary text-dark font-extrabold text-[10px] tracking-wide rounded-xl">
                    Redeem
                  </button>
                </div>

                {/* Challenges Panel */}
                <div className="space-y-2">
                  <h4 className="text-[10px] font-bold text-white/40 uppercase tracking-widest px-1">Daily Missions</h4>
                  <div className="bg-white/3 border border-white/5 rounded-2xl p-3 space-y-2">
                    <div className="flex items-center justify-between p-2 hover:bg-white/2 rounded-lg text-xs">
                      <div className="flex items-center space-x-2">
                        <CheckCircle className="w-4 h-4 text-accent-lime" />
                        <span className="text-white/80">Log 5,000 steps today</span>
                      </div>
                      <span className="text-accent-lime font-bold text-[10px]">+10 LYT</span>
                    </div>

                    <div className="flex items-center justify-between p-2 hover:bg-white/2 rounded-lg text-xs">
                      <div className="flex items-center space-x-2">
                        <CheckCircle className="w-4 h-4 text-accent-lime" />
                        <span className="text-white/80">Check in at Brew & Co</span>
                      </div>
                      <span className="text-accent-lime font-bold text-[10px]">+5 LYT</span>
                    </div>
                  </div>
                </div>

              </div>

              {/* Bottom Nav Bar */}
              <div className="border-t border-white/5 pt-2 pb-1.5 flex justify-around items-center z-20">
                <div className="flex flex-col items-center text-primary">
                  <Activity className="w-4.5 h-4.5" />
                  <span className="text-[8px] font-bold mt-0.5">Track</span>
                </div>
                <div className="flex flex-col items-center text-white/40 hover:text-white transition-colors">
                  <Compass className="w-4.5 h-4.5" />
                  <span className="text-[8px] font-bold mt-0.5">Explore</span>
                </div>
                <div className="flex flex-col items-center text-white/40 hover:text-white transition-colors">
                  <Coins className="w-4.5 h-4.5" />
                  <span className="text-[8px] font-bold mt-0.5">Wallet</span>
                </div>
              </div>

            </div>
          </div>

          {/* Right Block: Transaction Log Feed (col-span-4) */}
          <div className="lg:col-span-4 space-y-6">
            <div className="glassmorphism rounded-3xl p-6 space-y-6">
              <div className="flex items-center justify-between">
                <span className="text-sm font-bold text-white font-sora flex items-center gap-1.5">
                  <TrendingUp className="w-4 h-4 text-accent-pink" />
                  <span>Wallet Transaction Ledger</span>
                </span>
                <span className="text-[10px] text-white/40 font-bold uppercase">Real-Time</span>
              </div>

              {/* Transaction list */}
              <div className="space-y-4">
                {transactions.map((tx) => (
                  <div key={tx.id} className="flex justify-between items-center p-3 rounded-xl bg-white/2 border border-white/5">
                    <div className="space-y-0.5">
                      <span className="text-xs font-bold text-white block">{tx.type}</span>
                      <span className="text-[10px] text-white/40 block">{tx.detail}</span>
                    </div>

                    <div className="text-right">
                      <span className={`text-xs font-bold block ${tx.isEarn ? "text-accent-lime" : "text-red-400"}`}>
                        {tx.amount}
                      </span>
                      <span className="text-[8px] text-white/30">{tx.time}</span>
                    </div>
                  </div>
                ))}
              </div>

              <div className="pt-2">
                <a
                  href="#spend"
                  className="w-full py-3 rounded-xl bg-white/5 hover:bg-white/10 text-white font-extrabold text-xs tracking-wider flex items-center justify-center gap-1 border border-white/10 hover:border-white/20 transition-all cursor-pointer"
                >
                  <span>Redeem Store Vouchers</span>
                  <ChevronRight className="w-4 h-4" />
                </a>
              </div>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}