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 { formatPrice } from '@/lib/utils';
import AdminLayout from '@/components/AdminLayout';

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

  useEffect(() => {
    const loadStats = async () => {
      const response = await fetch('/api/purchases');
      if (!response.ok) return;
      const allPurchases = await response.json() as Purchase[];
      const totalRevenue = allPurchases
        .filter((purchase) => purchase.approvalStatus === 'approved')
        .reduce((total, purchase) => {
          const ids = purchase.albumIds || [purchase.albumId];
          return total + albums
            .filter((album) => ids.includes(album.id))
            .reduce((subtotal, album) => subtotal + album.price, 0);
        }, 0);
      setStats({
        totalAlbums: albums.length,
        totalPurchases: allPurchases.length,
        totalRevenue,
        recentPurchases: allPurchases.slice(0, 5),
      });
    };
    void loadStats();
  }, [albums]);

  const statCards = [
    {
      icon: FaMusic,
      label: 'Total Albums',
      value: stats.totalAlbums,
      color: 'bg-paper-brown',
      iconBg: 'bg-paper-brown/20',
    },
    {
      icon: FaShoppingCart,
      label: 'Total Purchases',
      value: stats.totalPurchases,
      color: 'bg-paper-dark',
      iconBg: 'bg-paper-dark/20',
    },
    {
      icon: FaDollarSign,
      label: 'Total Revenue',
      value: formatPrice(stats.totalRevenue),
      color: 'bg-paper-gray',
      iconBg: 'bg-paper-gray/20',
    },
    {
      icon: FaUsers,
      label: 'Active Users',
      value: stats.totalPurchases > 0 ? Math.ceil(stats.totalPurchases / 2) : 0,
      color: 'bg-paper-brown',
      iconBg: 'bg-paper-brown/30',
    },
  ];

  return (
    <AdminLayout>
      <div className="p-8">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-paper-dark mb-2 border-b-4 border-paper-dark inline-block pb-1">Dashboard</h1>
          <p className="text-paper-gray mt-4">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="paper-card p-6 border-2 border-paper-brown shadow-paper"
              >
                <div className="flex items-center gap-4">
                  <div className={`p-3 ${stat.iconBg} border-2 border-paper-brown`}>
                    <Icon className="text-2xl text-paper-dark" />
                  </div>
                  <div>
                    <p className="text-sm text-paper-gray">{stat.label}</p>
                    <p className="text-2xl font-bold text-paper-dark">{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="paper-card p-6 border-2 border-paper-brown shadow-paper"
        >
          <h2 className="text-xl font-bold text-paper-dark mb-4 border-b-2 border-paper-dark pb-2">Recent Purchases</h2>
          {stats.recentPurchases.length > 0 ? (
            <div className="space-y-3">
              {stats.recentPurchases.map((purchase) => {
                const ids = purchase.albumIds || [purchase.albumId];
                const purchaseAlbums = albums.filter((album) => ids.includes(album.id));
                return (
                  <div
                    key={purchase.transactionId}
                    className="flex items-center justify-between p-4 bg-paper-light border-2 border-paper-brown/30"
                  >
                    <div>
                      <p className="text-paper-dark font-medium">
                        {purchaseAlbums.map((album) => album.title).join(', ') || 'Unknown Album'}
                      </p>
                      <p className="text-sm text-paper-gray">
                        {new Date(purchase.purchaseDate).toLocaleDateString()} at{' '}
                        {new Date(purchase.purchaseDate).toLocaleTimeString()}
                      </p>
                    </div>
                    <div className="text-right">
                      <p className="text-paper-brown font-bold">
                        {formatPrice(purchaseAlbums.reduce((total, album) => total + album.price, 0))}
                      </p>
                      <p className="text-xs text-paper-gray font-mono">{purchase.transactionId.slice(0, 12)}...</p>
                    </div>
                  </div>
                );
              })}
            </div>
          ) : (
            <p className="text-paper-gray text-center py-8">No purchases yet</p>
          )}
        </motion.div>
      </div>
    </AdminLayout>
  );
}