'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 [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: '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 album = albums.find((a) => a.id === purchase.albumId);
                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">{album?.title || '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(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>
  );
}