Dashboard.jsx

import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { 
  Leaf, TrendingDown, Target, Award, Flame, Zap, Car, 
  Home, Utensils, Recycle, Trophy, Star, Gift, Plus, BarChart3, Activity,
  CheckCircle, Clock, Globe, TreePine, Coins, Crown, LogOut
} from 'lucide-react';

const Dashboard = ({ user, onLogout }) => {
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState('overview');
  const [showCelebration, setShowCelebration] = useState(false);

  // Fallback demo user for local/dev if no user prop passed
  const demoUser = {
    name: 'Techmuse',
    carbonFootprint: 1247,
    monthlyGoal: 1500,
    treesPlanted: 23,
    goalsCompleted: 7,
    totalGoals: 10,
    weeklyReduction: 8.5,
    carbonCredits: 158,
    level: 12,
    xp: 2840,
    nextLevelXp: 3000,
    streak: 15,
    longestStreak: 28,
    totalSaved: 342
  };
  const u = user || demoUser;

  const handleLogout = () => {
    onLogout?.();
    navigate('/');
  };

  const stats = [
    {
      title: 'Carbon Footprint',
      value: `${u.carbonFootprint}`,
      unit: 'kg CO₂',
      subtitle: 'This month',
      color: 'from-blue-500 to-blue-600',
      trend: -8.5,
      icon: Globe,
      bgColor: 'bg-blue-50'
    },
    {
      title: 'Carbon Credits',
      value: u.carbonCredits,
      unit: 'credits',
      subtitle: 'Available to spend',
      color: 'from-emerald-500 to-emerald-600',
      trend: 12.3,
      icon: Coins,
      bgColor: 'bg-emerald-50'
    },
    {
      title: 'Current Streak',
      value: u.streak,
      unit: 'days',
      subtitle: `Best: ${u.longestStreak} days`,
      color: 'from-orange-500 to-red-500',
      trend: null,
      icon: Flame,
      bgColor: 'bg-orange-50'
    },
    {
      title: 'Trees Planted',
      value: u.treesPlanted,
      unit: 'trees',
      subtitle: 'Environmental impact',
      color: 'from-green-500 to-green-600',
      trend: 15.2,
      icon: TreePine,
      bgColor: 'bg-green-50'
    }
  ];

  const activities = [
    {
      id: 1,
      type: 'transport',
      title: 'Biked to work',
      description: 'Chose cycling over driving',
      impact: -15,
      credits: 8,
      xp: 25,
      time: '2 hours ago',
      icon: Car,
      color: 'text-blue-600',
      bgColor: 'bg-blue-100'
    },
    {
      id: 2,
      type: 'energy',
      title: 'Solar panels active',
      description: 'Generated clean energy today',
      impact: -22,
      credits: 12,
      xp: 35,
      time: '4 hours ago',
      icon: Zap,
      color: 'text-yellow-600',
      bgColor: 'bg-yellow-100'
    },
    {
      id: 3,
      type: 'food',
      title: 'Plant-based meal',
      description: 'Vegetarian lunch with family',
      impact: -8,
      credits: 5,
      xp: 15,
      time: '6 hours ago',
      icon: Utensils,
      color: 'text-green-600',
      bgColor: 'bg-green-100'
    },
    {
      id: 4,
      type: 'recycling',
      title: 'Recycled waste',
      description: 'Sorted and recycled household items',
      impact: -5,
      credits: 3,
      xp: 10,
      time: '1 day ago',
      icon: Recycle,
      color: 'text-purple-600',
      bgColor: 'bg-purple-100'
    }
  ];

  const weeklyData = [
    { day: 'Mon', saved: 45, target: 50 },
    { day: 'Tue', saved: 38, target: 50 },
    { day: 'Wed', saved: 52, target: 50 },
    { day: 'Thu', saved: 41, target: 50 },
    { day: 'Fri', saved: 48, target: 50 },
    { day: 'Sat', saved: 55, target: 50 },
    { day: 'Sun', saved: 39, target: 50 }
  ];

  const achievements = [
    { title: 'Week Warrior', description: '7 days streak', icon: Trophy, unlocked: true },
    { title: 'Carbon Crusher', description: 'Save 1000kg CO₂', icon: Award, unlocked: true },
    { title: 'Green Commuter', description: 'Bike 50 times', icon: Car, unlocked: false },
    { title: 'Energy Master', description: 'Solar powered month', icon: Zap, unlocked: false }
  ];

  useEffect(() => {
    if (u.streak > 0 && u.streak % 7 === 0) {
      setShowCelebration(true);
      const t = setTimeout(() => setShowCelebration(false), 3000);
      return () => clearTimeout(t);
    }
  }, [u.streak]);

  const StatCard = ({ title, value, unit, subtitle, color, trend, icon, bgColor }) => {
    const IconComponent = icon;
    return (
      <div className={`${bgColor} rounded-2xl p-6 border border-white/20 backdrop-blur-sm hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl`}>
        <div className="flex items-start justify-between mb-4">
          <div className={`p-3 rounded-xl bg-gradient-to-r ${color} shadow-lg`}>
            <IconComponent className="h-6 w-6 text-white" />
          </div>
          {trend !== null && (
            <div className={`flex items-center text-sm font-medium ${trend > 0 ? 'text-green-600' : 'text-red-600'}`}>
              <TrendingDown className={`h-4 w-4 mr-1 ${trend > 0 ? 'rotate-180' : ''}`} />
              {Math.abs(trend)}%
            </div>
          )}
        </div>
        <div className="space-y-1">
          <p className="text-sm font-medium text-gray-600">{title}</p>
          <div className="flex items-baseline space-x-1">
            <p className="text-3xl font-bold text-gray-900">{value}</p>
            <p className="text-sm text-gray-500">{unit}</p>
          </div>
          <p className="text-xs text-gray-500">{subtitle}</p>
        </div>
      </div>
    );
  };

  const ActivityCard = ({ activity }) => (
    <div className="flex items-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-200 border border-gray-100 hover:border-emerald-200">
      <div className={`p-3 rounded-xl ${activity.bgColor} mr-4`}>
        <activity.icon className={`h-5 w-5 ${activity.color}`} />
      </div>
      <div className="flex-1 min-w-0">
        <div className="flex items-center justify-between mb-1">
          <h4 className="text-sm font-semibold text-gray-900 truncate">{activity.title}</h4>
          <div className="flex items-center space-x-2">
            <span className="text-xs text-emerald-600 font-medium">+{activity.credits} credits</span>
            <span className="text-xs text-purple-600 font-medium">+{activity.xp} XP</span>
          </div>
        </div>
        <p className="text-xs text-gray-600 mb-1">{activity.description}</p>
        <div className="flex items-center justify-between">
          <span className="text-xs text-gray-500">{activity.time}</span>
          <span className="text-sm font-bold text-green-600">{activity.impact} kg CO₂</span>
        </div>
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-gradient-to-br from-emerald-50 via-teal-50 to-cyan-50">
      {/* Celebration Modal */}
      {showCelebration && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
          <div className="bg-white rounded-2xl p-8 text-center max-w-md mx-4 animate-pulse">
            <div className="text-6xl mb-4">🎉</div>
            <h2 className="text-2xl font-bold text-gray-900 mb-2">Streak Milestone!</h2>
            <p className="text-gray-600 mb-4">You've maintained your streak for {u.streak} days!</p>
            <div className="flex justify-center space-x-2">
              <span className="px-3 py-1 bg-emerald-100 text-emerald-800 rounded-full text-sm font-medium">+50 XP</span>
              <span className="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm font-medium">+25 Credits</span>
            </div>
          </div>
        </div>
      )}

      {/* Header */}
      <div className="bg-white/80 backdrop-blur-lg border-b border-white/20 sticky top-0 z-40">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <div className="flex items-center space-x-4">
              <div className="p-2 bg-gradient-to-r from-emerald-600 to-teal-600 rounded-xl">
                <Leaf className="h-6 w-6 text-white" />
              </div>
              <div>
                <h1 className="text-xl font-bold text-gray-900">Klymate Dashboard</h1>
              </div>
            </div>
            <div className="flex items-center space-x-4">
              {/* Level Badge */}
              <div className="flex items-center space-x-2 bg-gradient-to-r from-purple-100 to-pink-100 px-4 py-2 rounded-full">
                <Crown className="h-4 w-4 text-purple-600" />
                <span className="text-sm font-semibold text-purple-800">Level {u.level}</span>
              </div>
              {/* XP Progress */}
              <div className="flex items-center space-x-2">
                <div className="w-24 h-2 bg-gray-200 rounded-full overflow-hidden">
                  <div 
                    className="h-full bg-gradient-to-r from-emerald-500 to-teal-500 transition-all duration-500"
                    style={{ width: `${(u.xp / u.nextLevelXp) * 100}%` }}
                  ></div>
                </div>
                <span className="text-xs text-gray-600">{u.xp}/{u.nextLevelXp}</span>
              </div>
              {/* Logout Button */}
              <button 
                onClick={handleLogout}
                className="flex items-center space-x-2 px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-xl transition-all duration-200"
              >
                <LogOut className="h-4 w-4" />
                <span>Logout</span>
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Body */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Welcome Section */}
        <div className="mb-8">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold text-gray-900 mb-2">
                Welcome back, {u.name}! 👋
              </h1>
              <p className="text-lg text-gray-600">
                Ready to make a positive impact today? You're on a {u.streak}-day streak! 🔥
              </p>
            </div>
            <div className="text-right">
              <div className="text-2xl font-bold text-emerald-600">{u.totalSaved} kg CO₂</div>
              <div className="text-sm text-gray-500">Total saved this month</div>
            </div>
          </div>
        </div>

        {/* Navigation Tabs */}
        <div className="flex space-x-1 bg-white/60 backdrop-blur-sm rounded-2xl p-1 mb-8 border border-white/20">
          {[
            { id: 'overview', label: 'Overview', icon: Home },
            { id: 'activity', label: 'Activity', icon: Activity },
            { id: 'tracker', label: 'Tracker', icon: BarChart3 },
            { id: 'rewards', label: 'Rewards', icon: Gift }
          ].map((tab) => (
            <button
              key={tab.id}
              className={`flex items-center space-x-2 px-6 py-3 rounded-xl font-medium transition-all duration-200 ${
                activeTab === tab.id
                  ? 'bg-gradient-to-r from-emerald-600 to-teal-600 text-white shadow-lg'
                  : 'text-gray-600 hover:text-gray-900 hover:bg-white/60'
              }`}
              onClick={() => setActiveTab(tab.id)}
            >
              <tab.icon className="h-4 w-4" />
              <span>{tab.label}</span>
            </button>
          ))}
        </div>

        {/* Overview Tab */}
        {activeTab === 'overview' && (
          <div className="space-y-8">
            {/* Stats Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {stats.map((stat, index) => (
                <StatCard key={index} {...stat} />
              ))}
            </div>

            {/* Weekly Progress Chart */}
            <div className="bg-white/80 backdrop-blur-lg rounded-2xl p-6 border border-white/20 shadow-lg">
              <h3 className="text-xl font-bold text-gray-900 mb-6">Weekly Carbon Savings</h3>
              <div className="flex items-end justify-between space-x-2 h-48">
                {weeklyData.map((day) => (
                  <div key={day.day} className="flex flex-col items-center flex-1">
                    <div className="relative w-full max-w-12 mb-2">
                      <div className="bg-gray-200 rounded-full h-32 relative overflow-hidden">
                        <div 
                          className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-emerald-500 to-emerald-400 rounded-full transition-all duration-1000"
                          style={{ height: `${(day.saved / day.target) * 100}%` }}
                        />
                      </div>
                      <div className="absolute -top-6 left-1/2 transform -translate-x-1/2 text-xs font-semibold text-gray-700">
                        {day.saved}
                      </div>
                    </div>
                    <span className="text-xs font-medium text-gray-600">{day.day}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Quick Actions */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              {[
                { title: 'Log Activity', desc: "Track today's actions", icon: Plus, color: 'from-blue-500 to-blue-600' },
                { title: 'View Streaks', desc: 'Check your progress', icon: Flame, color: 'from-orange-500 to-red-500' },
                { title: 'Spend Credits', desc: 'Redeem rewards', icon: Gift, color: 'from-purple-500 to-pink-500' },
                { title: 'Set Goals', desc: 'Plan your impact', icon: Target, color: 'from-emerald-500 to-teal-500' }
              ].map((action, index) => (
                <button key={index} className="p-6 bg-white/60 backdrop-blur-sm rounded-2xl border border-white/20 hover:bg-white/80 transition-all duration-200 hover:scale-105 text-left group">
                  <div className={`p-3 rounded-xl bg-gradient-to-r ${action.color} mb-4 inline-block group-hover:scale-110 transition-transform duration-200`}>
                    <action.icon className="h-6 w-6 text-white" />
                  </div>
                  <h4 className="font-semibold text-gray-900 mb-1">{action.title}</h4>
                  <p className="text-sm text-gray-600">{action.desc}</p>
                </button>
              ))}
            </div>
          </div>
        )}

        {/* Activity Tab */}
        {activeTab === 'activity' && (
          <div className="space-y-6">
            {/* Activity Header */}
            <div className="flex items-center justify-between">
              <h2 className="text-2xl font-bold text-gray-900">Recent Activities</h2>
              <button className="flex items-center space-x-2 px-4 py-2 bg-gradient-to-r from-emerald-600 to-teal-600 text-white rounded-xl hover:from-emerald-700 hover:to-teal-700 transition-colors duration-200">
                <Plus className="h-4 w-4" />
                <span>Log Activity</span>
              </button>
            </div>

            {/* Activity List */}
            <div className="space-y-4">
              {activities.map((activity) => (
                <ActivityCard key={activity.id} activity={activity} />
              ))}
            </div>

            {/* Activity Summary */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="bg-green-50 rounded-2xl p-6 border border-green-100">
                <div className="flex items-center mb-4">
                  <CheckCircle className="h-6 w-6 text-green-600 mr-3" />
                  <h3 className="font-semibold text-green-800">Today's Impact</h3>
                </div>
                <div className="text-2xl font-bold text-green-900 mb-1">-50 kg CO₂</div>
                <p className="text-sm text-green-600">4 activities logged</p>
              </div>
              <div className="bg-blue-50 rounded-2xl p-6 border border-blue-100">
                <div className="flex items-center mb-4">
                  <Clock className="h-6 w-6 text-blue-600 mr-3" />
                  <h3 className="font-semibold text-blue-800">This Week</h3>
                </div>
                <div className="text-2xl font-bold text-blue-900 mb-1">-318 kg CO₂</div>
                <p className="text-sm text-blue-600">28 activities logged</p>
              </div>
              <div className="bg-purple-50 rounded-2xl p-6 border border-purple-100">
                <div className="flex items-center mb-4">
                  <Star className="h-6 w-6 text-purple-600 mr-3" />
                  <h3 className="font-semibold text-purple-800">Best Day</h3>
                </div>
                <div className="text-2xl font-bold text-purple-900 mb-1">-87 kg CO₂</div>
                <p className="text-sm text-purple-600">Last Tuesday</p>
              </div>
            </div>
          </div>
        )}

        {/* Rewards Tab */}
        {activeTab === 'rewards' && (
          <div className="space-y-8">
            {/* Credits Balance */}
            <div className="bg-gradient-to-r from-yellow-400 to-orange-500 rounded-2xl p-6 text-white">
              <div className="flex items-center justify-between">
                <div>
                  <h2 className="text-2xl font-bold mb-2">Carbon Credits</h2>
                  <div className="text-4xl font-bold">{u.carbonCredits}</div>
                  <p className="opacity-90">Available to spend</p>
                </div>
                <Coins className="h-16 w-16 opacity-80" />
              </div>
            </div>

            {/* Achievements */}
            <div>
              <h3 className="text-xl font-bold text-gray-900 mb-6">Achievements</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {achievements.map((achievement, index) => (
                  <div key={index} className={`p-6 rounded-2xl border-2 transition-all duration-200 ${
                    achievement.unlocked 
                      ? 'bg-emerald-50 border-emerald-200 hover:bg-emerald-100' 
                      : 'bg-gray-50 border-gray-200 opacity-60'
                  }`}>
                    <div className="flex items-center space-x-4">
                      <div className={`p-3 rounded-xl ${achievement.unlocked ? 'bg-emerald-200' : 'bg-gray-200'}`}>
                        <achievement.icon className={`h-6 w-6 ${achievement.unlocked ? 'text-emerald-700' : 'text-gray-500'}`} />
                      </div>
                      <div>
                        <h4 className="font-semibold text-gray-900">{achievement.title}</h4>
                        <p className="text-sm text-gray-600">{achievement.description}</p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Rewards Store */}
            <div>
              <h3 className="text-xl font-bold text-gray-900 mb-6">Rewards Store</h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                {[
                  { name: 'Tree Planting', cost: 50, desc: 'Plant a tree in your name', icon: TreePine },
                  { name: 'Solar Panel Donation', cost: 200, desc: 'Fund solar installations', icon: Zap },
                  { name: 'Carbon Offset', cost: 25, desc: 'Offset 10kg CO₂', icon: Globe }
                ].map((reward, index) => (
                  <div key={index} className="bg-white rounded-2xl p-6 border border-gray-200 hover:shadow-lg transition-all duration-200">
                    <div className="flex items-center justify-between mb-4">
                      <reward.icon className="h-8 w-8 text-emerald-600" />
                      <span className="text-lg font-bold text-emerald-600">{reward.cost} credits</span>
                    </div>
                    <h4 className="font-semibold text-gray-900 mb-2">{reward.name}</h4>
                    <p className="text-sm text-gray-600 mb-4">{reward.desc}</p>
                    <button className="w-full py-2 bg-gradient-to-r from-emerald-600 to-teal-600 text-white rounded-xl hover:from-emerald-700 hover:to-teal-700 transition-colors duration-200">
                      Redeem
                    </button>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {/* Tracker (placeholder) */}
        {activeTab === 'tracker' && (
          <div className="bg-white/80 backdrop-blur-lg rounded-2xl p-8 border border-white/20 text-center text-gray-600">
            <p>Tracker coming soon 📈</p>
          </div>
        )}
      </div>
    </div>
  );
};

export default Dashboard;