import React, { useState, useEffect } from 'react';

const MusicApp = () => {
  const [songs, setSongs] = useState([
    {
      id: 1,
      title: "Hallelujah",
      artist: "Leonard Cohen",
      year: "1984",
      lyrics: "Well, maybe there's a God above, but all I've ever learned from love...",
      description: "A beautiful song about love and spirituality"
    },
    {
      id: 2,
      title: "Bohemian Rhapsody",
      artist: "Queen",
      year: "1975",
      lyrics: "Is this the real life? Is this just fantasy?",
      description: "Epic rock masterpiece"
    }
  ]);

  const [searchTerm, setSearchTerm] = useState('');
  const [selectedSong, setSelectedSong] = useState(null);
  const [filteredSongs, setFilteredSongs] = useState(songs);

  // Filter songs based on search
  useEffect(() => {
    const results = songs.filter(song =>
      song.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      song.artist.toLowerCase().includes(searchTerm.toLowerCase())
    );
    setFilteredSongs(results);
  }, [searchTerm, songs]);

  const handleSearch = (e) => {
    setSearchTerm(e.target.value);
  };

  const createSongImage = (song) => {
    const canvas = document.createElement('canvas');
    canvas.width = 600;
    canvas.height = 400;
    const ctx = canvas.getContext('2d');

    // Background
    ctx.fillStyle = '#1a202c';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Title
    ctx.fillStyle = 'white';
    ctx.font = 'bold 30px Arial';
    ctx.fillText(song.title, 50, 100);

    // Artist and year
    ctx.font = '20px Arial';
    ctx.fillText(`${song.artist} - ${song.year}`, 50, 140);

    // Lyrics snippet
    ctx.font = 'italic 18px Arial';
    ctx.fillText(`"${song.lyrics.substring(0, 100)}..."`, 50, 200);

    // Convert to image and download
    const image = canvas.toDataURL('image/png');
    const link = document.createElement('a');
    link.download = `${song.title}.png`;
    link.href = image;
    link.click();
  };

  return (
    <div className="min-h-screen bg-gray-900 text-white p-4">
      {/* Header */}
      <header className="text-center mb-8">
        <h1 className="text-4xl font-bold mb-2">Music Collection</h1>
        <p className="text-gray-400">Discover beautiful songs</p>
      </header>

      {/* Search */}
      <div className="max-w-md mx-auto mb-8">
        <input
          type="text"
          placeholder="Search songs or artists..."
          value={searchTerm}
          onChange={handleSearch}
          className="w-full p-3 rounded-lg bg-gray-800 text-white border border-gray-700 focus:outline-none focus:border-blue-500"
        />
      </div>

      {/* Songs Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
        {filteredSongs.map(song => (
          <div
            key={song.id}
            className="bg-gray-800 rounded-lg p-6 hover:bg-gray-700 transition cursor-pointer"
            onClick={() => setSelectedSong(song)}
          >
            <h3 className="text-xl font-bold mb-2">{song.title}</h3>
            <p className="text-gray-400 mb-2">{song.artist} • {song.year}</p>
            <p className="text-gray-300 italic">"{song.lyrics.substring(0, 80)}..."</p>
            <button
              onClick={(e) => {
                e.stopPropagation();
                createSongImage(song);
              }}
              className="mt-4 bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded transition"
            >
              Save as Image
            </button>
          </div>
        ))}
      </div>

      {/* Song Detail Modal */}
      {selectedSong && (
        <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center p-4">
          <div className="bg-gray-800 rounded-lg max-w-2xl w-full max-h-[80vh] overflow-y-auto">
            <div className="p-6">
              <div className="flex justify-between items-start mb-4">
                <div>
                  <h2 className="text-3xl font-bold">{selectedSong.title}</h2>
                  <p className="text-gray-400 text-lg">{selectedSong.artist} • {selectedSong.year}</p>
                </div>
                <button
                  onClick={() => setSelectedSong(null)}
                  className="text-gray-400 hover:text-white text-2xl"
                >
                  ×
                </button>
              </div>
              
              <div className="mb-6">
                <h3 className="text-xl font-semibold mb-2">Lyrics Excerpt</h3>
                <p className="text-gray-300 italic text-lg">"{selectedSong.lyrics}"</p>
              </div>

              <div className="mb-6">
                <h3 className="text-xl font-semibold mb-2">About</h3>
                <p className="text-gray-300">{selectedSong.description}</p>
              </div>

              <button
                onClick={() => createSongImage(selectedSong)}
                className="w-full bg-blue-600 hover:bg-blue-700 py-3 rounded-lg font-semibold transition"
              >
                Download Song Card
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Footer */}
      <footer className="text-center mt-12 text-gray-400">
        <p>© 2024 Music App. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default MusicApp;