podzahr/app/admin/albums/page.tsx

'use client';

import { useState } from 'react';
import { motion } from 'framer-motion';
import { FaEdit, FaTrash, FaPlus } from 'react-icons/fa';
import { useAlbums } from '@/lib/AlbumsContext';
import { Album } from '@/lib/types';
import { formatPrice } from '@/lib/utils';
import AdminLayout from '@/components/AdminLayout';
import AddAlbumModal from '@/components/AddAlbumModal';
import EditAlbumModal from '@/components/EditAlbumModal';
import DeleteConfirmationModal from '@/components/DeleteConfirmationModal';

export default function AdminAlbumsPage() {
  const { albums, addAlbum, updateAlbum, deleteAlbum } = useAlbums();
  const [showAddModal, setShowAddModal] = useState(false);
  const [showEditModal, setShowEditModal] = useState(false);
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [selectedAlbum, setSelectedAlbum] = useState<Album | null>(null);

  const handleAddAlbum = async (album: Album) => {
    try {
      await addAlbum(album);
      setShowAddModal(false);
    } catch (error) {
      console.error('Error adding album:', error);
      alert('Failed to add album');
    }
  };

  const handleEditAlbum = async (albumId: string, album: Album) => {
    try {
      await updateAlbum(albumId, album);
      setShowEditModal(false);
      setSelectedAlbum(null);
    } catch (error) {
      console.error('Error updating album:', error);
      alert('Failed to update album');
    }
  };

  const handleDeleteAlbum = async () => {
    if (selectedAlbum) {
      try {
        await deleteAlbum(selectedAlbum.id);
        setShowDeleteModal(false);
        setSelectedAlbum(null);
      } catch (error) {
        console.error('Error deleting album:', error);
        alert('Failed to delete album');
      }
    }
  };

  const openEditModal = (album: Album) => {
    setSelectedAlbum(album);
    setShowEditModal(true);
  };

  const openDeleteModal = (album: Album) => {
    setSelectedAlbum(album);
    setShowDeleteModal(true);
  };

  return (
    <AdminLayout>
      <div className="p-8">
        {/* Header */}
        <div className="flex items-center justify-between mb-8">
          <div>
            <h1 className="text-3xl font-bold text-paper-dark mb-2 border-b-4 border-paper-dark inline-block pb-1">Album Management</h1>
            <p className="text-paper-gray mt-4">Manage your music catalog • {albums.length} albums</p>
          </div>
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            onClick={() => setShowAddModal(true)}
            className="px-6 py-3 bg-paper-brown hover:bg-paper-dark border-2 border-paper-dark font-semibold text-paper-light transition-all shadow-paper-lg flex items-center gap-2"
          >
            <FaPlus />
            Add New Album
          </motion.button>
        </div>

        {/* Albums Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {albums.map((album, index) => (
            <motion.div
              key={album.id}
              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 gap-4">
                {/* Album Cover */}
                <div className="w-24 h-24 bg-paper-brown border-2 border-paper-dark flex items-center justify-center flex-shrink-0">
                  <span className="text-xs text-paper-dark/50 font-bold text-center px-2">
                    {album.title}
                  </span>
                </div>

                {/* Album Info */}
                <div className="flex-1">
                  <h3 className="text-xl font-bold text-paper-dark mb-1">{album.title}</h3>
                  <p className="text-sm text-paper-gray mb-2">
                    {album.year} • {album.genre}
                  </p>
                  <p className="text-sm text-paper-brown mb-3 line-clamp-2">
                    {album.description}
                  </p>
                  <div className="flex items-center gap-4 text-sm text-paper-gray">
                    <span>{album.songs.length} tracks</span>
                    <span className="text-paper-brown font-bold">{formatPrice(album.price)}</span>
                  </div>
                </div>

                {/* Actions */}
                <div className="flex flex-col gap-2">
                  <motion.button
                    whileHover={{ scale: 1.1 }}
                    whileTap={{ scale: 0.9 }}
                    onClick={() => openEditModal(album)}
                    className="p-2 bg-paper-light hover:bg-paper-sand border-2 border-paper-brown text-paper-brown transition-colors"
                    aria-label="Edit album"
                  >
                    <FaEdit />
                  </motion.button>
                  <motion.button
                    whileHover={{ scale: 1.1 }}
                    whileTap={{ scale: 0.9 }}
                    onClick={() => openDeleteModal(album)}
                    className="p-2 bg-red-100 hover:bg-red-200 border-2 border-red-400 text-red-700 transition-colors"
                    aria-label="Delete album"
                  >
                    <FaTrash />
                  </motion.button>
                </div>
              </div>

              {/* Track List */}
              <div className="mt-4 pt-4 border-t-2 border-paper-brown">
                <p className="text-sm font-semibold text-paper-dark mb-2">Tracks:</p>
                <div className="space-y-1">
                  {album.songs.slice(0, 3).map((song, idx) => (
                    <div key={song.id} className="flex justify-between text-sm">
                      <span className="text-paper-dark">
                        {idx + 1}. {song.title}
                      </span>
                      <span className="text-paper-gray font-mono">{song.duration}</span>
                    </div>
                  ))}
                  {album.songs.length > 3 && (
                    <p className="text-xs text-paper-gray">+{album.songs.length - 3} more tracks</p>
                  )}
                </div>
              </div>
            </motion.div>
          ))}
        </div>

        {/* Modals */}
        <AddAlbumModal show={showAddModal} onClose={() => setShowAddModal(false)} onAdd={handleAddAlbum} />
        <EditAlbumModal
          show={showEditModal}
          album={selectedAlbum}
          onClose={() => {
            setShowEditModal(false);
            setSelectedAlbum(null);
          }}
          onUpdate={handleEditAlbum}
        />
        <DeleteConfirmationModal
          show={showDeleteModal}
          album={selectedAlbum}
          onClose={() => {
            setShowDeleteModal(false);
            setSelectedAlbum(null);
          }}
          onConfirm={handleDeleteAlbum}
        />
      </div>
    </AdminLayout>
  );
}