podzahr/app/admin/purchases/page.tsx

'use client';

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

export default function AdminPurchasesPage() {
  const { albums } = useAlbums();
  const [purchases, setPurchases] = useState<Purchase[]>([]);
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    const savedPurchases = localStorage.getItem('purchases');
    if (savedPurchases) {
      setPurchases(JSON.parse(savedPurchases).reverse());
    }
  }, []);

  const filteredPurchases = purchases.filter((purchase) => {
    const album = albums.find((a) => a.id === purchase.albumId);
    return (
      album?.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      purchase.transactionId.toLowerCase().includes(searchTerm.toLowerCase())
    );
  });

  const totalRevenue = purchases.reduce((total, purchase) => {
    const album = albums.find((a) => a.id === purchase.albumId);
    return total + (album?.price || 0);
  }, 0);

  const exportToCSV = () => {
    const headers = ['Date', 'Time', 'Transaction ID', 'Album', 'Price'];
    const rows = purchases.map((purchase) => {
      const album = albums.find((a) => a.id === purchase.albumId);
      const date = new Date(purchase.purchaseDate);
      return [
        date.toLocaleDateString(),
        date.toLocaleTimeString(),
        purchase.transactionId,
        album?.title || 'Unknown',
        `$${album?.price || 0}`,
      ];
    });

    const csvContent = [headers, ...rows].map((row) => row.join(',')).join('\n');
    const blob = new Blob([csvContent], { type: 'text/csv' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `purchases-${new Date().toISOString().split('T')[0]}.csv`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  return (
    <AdminLayout>
      <div className="p-8">
        {/* Header */}
        <div className="flex items-center justify-between mb-8">
          <div>
            <h1 className="text-3xl font-bold text-white mb-2">Purchase History</h1>
            <p className="text-gray-400">
              {purchases.length} total purchases • ${totalRevenue.toFixed(2)} revenue
            </p>
          </div>
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            onClick={exportToCSV}
            className="px-6 py-3 bg-gradient-to-r from-accent-orange to-accent-orange/80 hover:from-accent-orange/90 hover:to-accent-orange/70 rounded-lg font-semibold text-white transition-all glow-orange flex items-center gap-2"
          >
            <FaDownload />
            Export CSV
          </motion.button>
        </div>

        {/* Search */}
        <div className="mb-6">
          <div className="relative">
            <FaSearch className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400" />
            <input
              type="text"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              placeholder="Search by album name or transaction ID..."
              className="w-full pl-12 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:border-accent-cyan focus:outline-none focus:ring-2 focus:ring-accent-cyan/50 text-white placeholder-gray-500"
            />
          </div>
        </div>

        {/* Purchases Table */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="glass-effect rounded-xl border border-white/10 overflow-hidden"
        >
          {filteredPurchases.length > 0 ? (
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-white/5 border-b border-white/10">
                  <tr>
                    <th className="text-left p-4 text-sm font-semibold text-gray-400">Date & Time</th>
                    <th className="text-left p-4 text-sm font-semibold text-gray-400">Transaction ID</th>
                    <th className="text-left p-4 text-sm font-semibold text-gray-400">Album</th>
                    <th className="text-left p-4 text-sm font-semibold text-gray-400">Genre</th>
                    <th className="text-right p-4 text-sm font-semibold text-gray-400">Price</th>
                  </tr>
                </thead>
                <tbody>
                  {filteredPurchases.map((purchase, index) => {
                    const album = albums.find((a) => a.id === purchase.albumId);
                    const date = new Date(purchase.purchaseDate);

                    return (
                      <motion.tr
                        key={purchase.transactionId}
                        initial={{ opacity: 0, x: -20 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ delay: index * 0.05 }}
                        className="border-b border-white/5 hover:bg-white/5 transition-colors"
                      >
                        <td className="p-4 text-white">
                          <div className="text-sm">{date.toLocaleDateString()}</div>
                          <div className="text-xs text-gray-500">{date.toLocaleTimeString()}</div>
                        </td>
                        <td className="p-4">
                          <code className="text-xs text-accent-cyan bg-accent-cyan/10 px-2 py-1 rounded">
                            {purchase.transactionId}
                          </code>
                        </td>
                        <td className="p-4">
                          <div className="text-white font-medium">{album?.title || 'Unknown'}</div>
                          <div className="text-xs text-gray-500">{album?.songs.length} tracks</div>
                        </td>
                        <td className="p-4 text-gray-400 text-sm">{album?.genre}</td>
                        <td className="p-4 text-right">
                          <span className="text-accent-orange font-bold">${album?.price || 0}</span>
                        </td>
                      </motion.tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          ) : (
            <div className="p-12 text-center">
              <p className="text-gray-400">
                {searchTerm ? 'No purchases found matching your search' : 'No purchases yet'}
              </p>
            </div>
          )}
        </motion.div>
      </div>
    </AdminLayout>
  );
}