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 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-white mb-2">Album Management</h1>
            <p className="text-gray-400">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-gradient-to-r from-accent-cyan to-accent-cyan/80 hover:from-accent-cyan/90 hover:to-accent-cyan/70 rounded-lg font-semibold text-white transition-all glow-cyan 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="glass-effect rounded-xl p-6 border border-white/10"
            >
              <div className="flex gap-4">
                {/* Album Cover */}
                <div className="w-24 h-24 rounded-lg bg-gradient-to-br from-accent-cyan/20 to-accent-orange/20 flex items-center justify-center flex-shrink-0">
                  <span className="text-xs text-white/50 font-bold text-center px-2">
                    {album.title}
                  </span>
                </div>

                {/* Album Info */}
                <div className="flex-1">
                  <h3 className="text-xl font-bold text-white mb-1">{album.title}</h3>
                  <p className="text-sm text-gray-400 mb-2">
                    {album.year} • {album.genre}
                  </p>
                  <p className="text-sm text-gray-500 mb-3 line-clamp-2">
                    {album.description}
                  </p>
                  <div className="flex items-center gap-4 text-sm text-gray-400">
                    <span>{album.songs.length} tracks</span>
                    <span className="text-accent-orange font-bold">${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-accent-cyan/20 hover:bg-accent-cyan/30 rounded-lg text-accent-cyan 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-500/20 hover:bg-red-500/30 rounded-lg text-red-400 transition-colors"
                    aria-label="Delete album"
                  >
                    <FaTrash />
                  </motion.button>
                </div>
              </div>

              {/* Track List */}
              <div className="mt-4 pt-4 border-t border-white/10">
                <p className="text-sm font-semibold text-gray-400 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-gray-300">
                        {idx + 1}. {song.title}
                      </span>
                      <span className="text-gray-500 font-mono">{song.duration}</span>
                    </div>
                  ))}
                  {album.songs.length > 3 && (
                    <p className="text-xs text-gray-500">+{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>
  );
}