podzahr/app/admin/dashboard/page.tsx

'use client';

import { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import { FaMusic, FaShoppingCart, FaDollarSign, FaUsers } from 'react-icons/fa';
import { useAlbums } from '@/lib/AlbumsContext';
import { Purchase } from '@/lib/types';
import AdminLayout from '@/components/AdminLayout';

export default function AdminDashboard() {
  const { albums } = useAlbums();
  const [purchases, setPurchases] = useState<Purchase[]>([]);
  const [stats, setStats] = useState({
    totalAlbums: 0,
    totalPurchases: 0,
    totalRevenue: 0,
    recentPurchases: [] as Purchase[],
  });

  useEffect(() => {
    // Load purchases from localStorage
    const savedPurchases = localStorage.getItem('purchases');
    if (savedPurchases) {
      const parsedPurchases = JSON.parse(savedPurchases);
      setPurchases(parsedPurchases);

      // Calculate stats
      const totalRevenue = parsedPurchases.reduce((total: number, purchase: Purchase) => {
        const album = albums.find((a) => a.id === purchase.albumId);
        return total + (album?.price || 0);
      }, 0);

      setStats({
        totalAlbums: albums.length,
        totalPurchases: parsedPurchases.length,
        totalRevenue,
        recentPurchases: parsedPurchases.slice(-5).reverse(),
      });
    } else {
      setStats({
        totalAlbums: albums.length,
        totalPurchases: 0,
        totalRevenue: 0,
        recentPurchases: [],
      });
    }
  }, []);

  const statCards = [
    {
      icon: FaMusic,
      label: 'Total Albums',
      value: stats.totalAlbums,
      color: 'from-accent-cyan to-accent-cyan/80',
      iconBg: 'bg-accent-cyan/20',
    },
    {
      icon: FaShoppingCart,
      label: 'Total Purchases',
      value: stats.totalPurchases,
      color: 'from-accent-orange to-accent-orange/80',
      iconBg: 'bg-accent-orange/20',
    },
    {
      icon: FaDollarSign,
      label: 'Total Revenue',
      value: `$${stats.totalRevenue.toFixed(2)}`,
      color: 'from-green-500 to-green-600',
      iconBg: 'bg-green-500/20',
    },
    {
      icon: FaUsers,
      label: 'Active Users',
      value: stats.totalPurchases > 0 ? Math.ceil(stats.totalPurchases / 2) : 0,
      color: 'from-purple-500 to-purple-600',
      iconBg: 'bg-purple-500/20',
    },
  ];

  return (
    <AdminLayout>
      <div className="p-8">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-white mb-2">Dashboard</h1>
          <p className="text-gray-400">Overview of your music store</p>
        </div>

        {/* Stats Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          {statCards.map((stat, index) => {
            const Icon = stat.icon;
            return (
              <motion.div
                key={stat.label}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: index * 0.1 }}
                className="glass-effect rounded-xl p-6 border border-white/10"
              >
                <div className="flex items-center gap-4">
                  <div className={`p-3 ${stat.iconBg} rounded-lg`}>
                    <Icon className="text-2xl text-white" />
                  </div>
                  <div>
                    <p className="text-sm text-gray-400">{stat.label}</p>
                    <p className="text-2xl font-bold text-white">{stat.value}</p>
                  </div>
                </div>
              </motion.div>
            );
          })}
        </div>

        {/* Recent Purchases */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.4 }}
          className="glass-effect rounded-xl p-6 border border-white/10"
        >
          <h2 className="text-xl font-bold text-white mb-4">Recent Purchases</h2>
          {stats.recentPurchases.length > 0 ? (
            <div className="space-y-3">
              {stats.recentPurchases.map((purchase) => {
                const album = albums.find((a) => a.id === purchase.albumId);
                return (
                  <div
                    key={purchase.transactionId}
                    className="flex items-center justify-between p-4 bg-white/5 rounded-lg"
                  >
                    <div>
                      <p className="text-white font-medium">{album?.title || 'Unknown Album'}</p>
                      <p className="text-sm text-gray-400">
                        {new Date(purchase.purchaseDate).toLocaleDateString()} at{' '}
                        {new Date(purchase.purchaseDate).toLocaleTimeString()}
                      </p>
                    </div>
                    <div className="text-right">
                      <p className="text-accent-orange font-bold">${album?.price || 0}</p>
                      <p className="text-xs text-gray-500 font-mono">{purchase.transactionId.slice(0, 12)}...</p>
                    </div>
                  </div>
                );
              })}
            </div>
          ) : (
            <p className="text-gray-400 text-center py-8">No purchases yet</p>
          )}
        </motion.div>
      </div>
    </AdminLayout>
  );
}