import React, { useState, useEffect } from 'react';
import { Heart, X, BookOpen, Users, User, ChevronLeft, ChevronRight, MessageSquare } from 'lucide-react';

export default function BookDatingApp() {
  // Sample book data
  const initialBooks = [
    {
      id: 1,
      title: "Pride and Prejudice",
      author: "Jane Austen",
      year: 1813,
      genre: ["Romance", "Classic"],
      personality: ["Witty", "Romantic", "Social Commentary"],
      description: "A romantic novel of manners that follows the character development of Elizabeth Bennet, who learns about the repercussions of hasty judgments.",
      lookingFor: ["Historical Fiction", "Social Commentary", "Character-driven"],
      image: "https://images.unsplash.com/photo-1544947950-fa07a98d237f?q=80&w=1000&auto=format&fit=crop"
    },
    {
      id: 2,
      title: "1984",
      author: "George Orwell",
      year: 1949,
      genre: ["Dystopian", "Political Fiction"],
      personality: ["Dark", "Thought-provoking", "Political"],
      description: "A dystopian social science fiction novel that examines the consequences of totalitarianism, mass surveillance, and repressive regimentation.",
      lookingFor: ["Philosophical", "Dystopian", "Political"],
      image: "https://images.unsplash.com/photo-1541963463532-d68292c34b19?q=80&w=1000&auto=format&fit=crop"
    },
    {
      id: 3,
      title: "The Great Gatsby",
      author: "F. Scott Fitzgerald",
      year: 1925,
      genre: ["Tragedy", "Social Commentary"],
      personality: ["Glamorous", "Melancholic", "Observant"],
      description: "A novel that depicts the lavish lifestyle of wealthy Americans during the Jazz Age, exploring themes of decadence, idealism, and the American Dream.",
      lookingFor: ["Period Drama", "Character Study", "Literary Fiction"],
      image: "https://images.unsplash.com/photo-1543002588-bfa74002ed7e?q=80&w=1000&auto=format&fit=crop"
    },
    {
      id: 4,
      title: "To Kill a Mockingbird",
      author: "Harper Lee",
      year: 1960,
      genre: ["Coming-of-age", "Legal Drama"],
      personality: ["Compassionate", "Moral", "Insightful"],
      description: "A novel examining racial injustice and moral growth in the American South during the 1930s, told through the eyes of a young girl.",
      lookingFor: ["Historical Fiction", "Social Justice", "Southern Gothic"],
      image: "https://images.unsplash.com/photo-1476275466078-4007374efbbe?q=80&w=1000&auto=format&fit=crop"
    },
    {
      id: 5,
      title: "The Hobbit",
      author: "J.R.R. Tolkien",
      year: 1937,
      genre: ["Fantasy", "Adventure"],
      personality: ["Adventurous", "Whimsical", "Brave"],
      description: "A fantasy novel about the quest of home-loving Bilbo Baggins, who is convinced by the wizard Gandalf to join a group of dwarves to reclaim their mountain home.",
      lookingFor: ["Epic Fantasy", "Adventure", "Hero's Journey"],
      image: "https://images.unsplash.com/photo-1629992101753-56d196c8aabb?q=80&w=1000&auto=format&fit=crop"
    },
    {
      id: 6,
      title: "Moby-Dick",
      author: "Herman Melville",
      year: 1851,
      genre: ["Adventure", "Epic"],
      personality: ["Obsessive", "Philosophical", "Complex"],
      description: "The narrative tells the story of the obsessive quest of Captain Ahab for revenge on Moby Dick, the white whale that bit off his leg.",
      lookingFor: ["Philosophical", "Epic", "Maritime"],
      image: "https://images.unsplash.com/photo-1589998059171-988d887df646?q=80&w=1000&auto=format&fit=crop"
    },
    {
      id: 7,
      title: "Jane Eyre",
      author: "Charlotte Brontë",
      year: 1847,
      genre: ["Gothic", "Romance"],
      personality: ["Independent", "Passionate", "Resilient"],
      description: "A novel that follows the emotions and experiences of its title character, including her growth to adulthood and her love for Mr. Rochester.",
      lookingFor: ["Gothic Romance", "Character-driven", "Victorian"],
      image: "https://images.unsplash.com/photo-1512820790803-83ca734da794?q=80&w=1000&auto=format&fit=crop"
    }
  ];

  // State
  const [books, setBooks] = useState(initialBooks);
  const [currentIndex, setCurrentIndex] = useState(0);
  const [matches, setMatches] = useState([]);
  const [likedBooks, setLikedBooks] = useState([]);
  const [activeTab, setActiveTab] = useState('browse');
  const [selectedMatch, setSelectedMatch] = useState(null);
  const [newBook, setNewBook] = useState({
    title: "",
    author: "",
    year: "",
    genre: [],
    personality: [],
    description: "",
    lookingFor: [],
    image: "https://images.unsplash.com/photo-1543002588-bfa74002ed7e?q=80&w=1000&auto=format&fit=crop"
  });
  const [showNewBookForm, setShowNewBookForm] = useState(false);
  const [newGenre, setNewGenre] = useState("");
  const [newPersonality, setNewPersonality] = useState("");
  const [newLookingFor, setNewLookingFor] = useState("");
  const [messages, setMessages] = useState({});

  // Load data from localStorage on initial render
  useEffect(() => {
    const savedLikedBooks = localStorage.getItem('likedBooks');
    const savedMatches = localStorage.getItem('matches');
    const savedMessages = localStorage.getItem('messages');
    
    if (savedLikedBooks) setLikedBooks(JSON.parse(savedLikedBooks));
    if (savedMatches) setMatches(JSON.parse(savedMatches));
    if (savedMessages) setMessages(JSON.parse(savedMessages));
  }, []);

  // Save data to localStorage when it changes
  useEffect(() => {
    localStorage.setItem('likedBooks', JSON.stringify(likedBooks));
    localStorage.setItem('matches', JSON.stringify(matches));
    localStorage.setItem('messages', JSON.stringify(messages));
  }, [likedBooks, matches, messages]);

  // Calculate compatibility between two books
  const calculateCompatibility = (book1, book2) => {
    let score = 0;
    
    // Check genre compatibility
    const genreMatch = book1.lookingFor.some(g => book2.genre.includes(g));
    if (genreMatch) score += 30;
    
    // Check personality compatibility
    const personalityMatch = book1.personality.some(p => book2.lookingFor.includes(p));
    if (personalityMatch) score += 30;
    
    // Time period compatibility (books from similar eras)
    const yearDiff = Math.abs(book1.year - book2.year);
    if (yearDiff < 20) score += 20;
    else if (yearDiff < 50) score += 10;
    
    // Add some randomness
    score += Math.floor(Math.random() * 20);
    
    // Cap at 100
    return Math.min(score, 100);
  };

  // Handle like action
  const handleLike = () => {
    const currentBook = books[currentIndex];
    
    // Add to liked books
    setLikedBooks(prev => [...prev, currentBook]);
    
    // Check for matches with other books
    books.forEach(book => {
      if (book.id !== currentBook.id) {
        const compatibility = calculateCompatibility(currentBook, book);
        if (compatibility > 70) {
          // It's a match!
          const matchExists = matches.some(
            m => (m.book1.id === currentBook.id && m.book2.id === book.id) || 
                 (m.book1.id === book.id && m.book2.id === currentBook.id)
          );
          
          if (!matchExists) {
            const newMatch = {
              id: `${currentBook.id}-${book.id}`,
              book1: currentBook,
              book2: book,
              compatibility: compatibility,
              date: new Date().toISOString()
            };
            setMatches(prev => [...prev, newMatch]);
            
            // Initialize empty message thread for this match
            setMessages(prev => ({
              ...prev,
              [newMatch.id]: []
            }));
          }
        }
      }
    });
    
    // Move to next book
    if (currentIndex < books.length - 1) {
      setCurrentIndex(currentIndex + 1);
    }
  };

  // Handle dislike action
  const handleDislike = () => {
    if (currentIndex < books.length - 1) {
      setCurrentIndex(currentIndex + 1);
    }
  };

  // Handle adding a new book
  const handleAddBook = (e) => {
    e.preventDefault();
    
    const bookToAdd = {
      ...newBook,
      id: Date.now(),
    };
    
    setBooks(prev => [...prev, bookToAdd]);
    setNewBook({
      title: "",
      author: "",
      year: "",
      genre: [],
      personality: [],
      description: "",
      lookingFor: [],
      image: "https://images.unsplash.com/photo-1543002588-bfa74002ed7e?q=80&w=1000&auto=format&fit=crop"
    });
    setShowNewBookForm(false);
  };

  // Handle adding tags to new book
  const handleAddGenre = () => {
    if (newGenre.trim() !== "") {
      setNewBook(prev => ({
        ...prev,
        genre: [...prev.genre, newGenre.trim()]
      }));
      setNewGenre("");
    }
  };

  const handleAddPersonality = () => {
    if (newPersonality.trim() !== "") {
      setNewBook(prev => ({
        ...prev,
        personality: [...prev.personality, newPersonality.trim()]
      }));
      setNewPersonality("");
    }
  };

  const handleAddLookingFor = () => {
    if (newLookingFor.trim() !== "") {
      setNewBook(prev => ({
        ...prev,
        lookingFor: [...prev.lookingFor, newLookingFor.trim()]
      }));
      setNewLookingFor("");
    }
  };

  // Handle sending a message
  const handleSendMessage = (matchId, message) => {
    if (message.trim() === "") return;
    
    setMessages(prev => ({
      ...prev,
      [matchId]: [...(prev[matchId] || []), {
        id: Date.now(),
        text: message,
        sender: "user",
        timestamp: new Date().toISOString()
      }]
    }));
    
    // Simulate a response from the matched book
    setTimeout(() => {
      const match = matches.find(m => m.id === matchId);
      const respondingBook = match.book1.id === books[currentIndex]?.id ? match.book2 : match.book1;
      
      let response;
      switch (respondingBook.personality[0]) {
        case "Witty":
          response = "How delightfully unexpected to receive your message! Shall we discuss the finer points of societal expectations?";
          break;
        case "Dark":
          response = "Your message has been recorded by the Ministry of Truth. Thoughtcrime is death. But hello to you too.";
          break;
        case "Glamorous":
          response = "Old sport! Wonderful to hear from you. Care to join me for a party at my West Egg mansion?";
          break;
        case "Compassionate":
          response = "It's a sin to kill a mockingbird, but never a sin to chat with a fellow book. How are you?";
          break;
        case "Adventurous":
          response = "I wasn't expecting visitors or adventures today, but I suppose a good conversation is its own adventure!";
          break;
        case "Obsessive":
          response = "Call me interested. Let us dive deep into the white waters of literary conversation.";
          break;
        case "Independent":
          response = "Reader, I'm glad to make your acquaintance. Let us converse as equals.";
          break;
        default:
          response = "How lovely to receive your message! What shall we discuss today?";
      }
      
      setMessages(prev => ({
        ...prev,
        [matchId]: [...prev[matchId], {
          id: Date.now(),
          text: response,
          sender: "match",
          timestamp: new Date().toISOString()
        }]
      }));
    }, 1000);
  };

  // Render book browsing interface
  const renderBrowseBooks = () => {
    if (books.length === 0 || currentIndex >= books.length) {
      return (
        <div className="flex flex-col items-center justify-center h-full p-6 text-center">
          <h2 className="text-2xl font-serif mb-4">No more books to browse!</h2>
          <p className="mb-6">You've seen all the available books. Add more books or check your matches.</p>
          <button 
            onClick={() => setShowNewBookForm(true)}
            className="px-4 py-2 bg-[#7D1D3F] text-white rounded-lg hover:bg-[#5a1530] transition-colors"
          >
            Add a New Book
          </button>
        </div>
      );
    }

    const currentBook = books[currentIndex];

    return (
      <div className="flex flex-col h-full">
        <div className="relative flex-grow overflow-hidden rounded-lg shadow-lg bg-white">
          <img 
            src={currentBook.image} 
            alt={currentBook.title}
            className="w-full h-64 object-cover"
          />
          <div className="p-6">
            <div className="flex justify-between items-start mb-2">
              <h2 className="text-2xl font-serif font-bold">{currentBook.title}</h2>
              <span className="text-[#7D1D3F] font-semibold">{currentBook.year}</span>
            </div>
            <h3 className="text-lg text-gray-700 mb-4">by {currentBook.author}</h3>
            
            <p className="text-gray-600 mb-4">{currentBook.description}</p>
            
            <div className="mb-4">
              <h4 className="font-semibold mb-1">Genre:</h4>
              <div className="flex flex-wrap gap-2">
                {currentBook.genre.map((g, i) => (
                  <span key={i} className="px-2 py-1 bg-[#F8F0E3] text-[#7D1D3F] rounded-full text-sm">
                    {g}
                  </span>
                ))}
              </div>
            </div>
            
            <div className="mb-4">
              <h4 className="font-semibold mb-1">Personality:</h4>
              <div className="flex flex-wrap gap-2">
                {currentBook.personality.map((p, i) => (
                  <span key={i} className="px-2 py-1 bg-[#102542] text-white rounded-full text-sm">
                    {p}
                  </span>
                ))}
              </div>
            </div>
            
            <div>
              <h4 className="font-semibold mb-1">Looking for:</h4>
              <div className="flex flex-wrap gap-2">
                {currentBook.lookingFor.map((l, i) => (
                  <span key={i} className="px-2 py-1 bg-[#8DAA91] text-white rounded-full text-sm">
                    {l}
                  </span>
                ))}
              </div>
            </div>
          </div>
        </div>
        
        <div className="flex justify-center gap-6 mt-6">
          <button 
            onClick={handleDislike}
            className="p-4 bg-gray-200 rounded-full hover:bg-gray-300 transition-colors"
          >
            <X size={24} className="text-gray-700" />
          </button>
          <button 
            onClick={handleLike}
            className="p-4 bg-[#7D1D3F] rounded-full hover:bg-[#5a1530] transition-colors"
          >
            <Heart size={24} className="text-white" />
          </button>
        </div>
      </div>
    );
  };

  // Render matches interface
  const renderMatches = () => {
    if (matches.length === 0) {
      return (
        <div className="flex flex-col items-center justify-center h-full p-6 text-center">
          <h2 className="text-2xl font-serif mb-4">No matches yet!</h2>
          <p>Keep browsing to find perfect matches for your books.</p>
        </div>
      );
    }

    if (selectedMatch) {
      return renderMatchDetail();
    }

    return (
      <div className="h-full overflow-y-auto p-4">
        <h2 className="text-2xl font-serif mb-6 text-center">Your Book Matches</h2>
        <div className="grid gap-4">
          {matches.map(match => (
            <div 
              key={match.id}
              onClick={() => setSelectedMatch(match)}
              className="bg-white rounded-lg shadow-md p-4 cursor-pointer hover:shadow-lg transition-shadow"
            >
              <div className="flex items-center gap-4">
                <div className="w-16 h-16 flex-shrink-0">
                  <img 
                    src={match.book1.image} 
                    alt={match.book1.title}
                    className="w-full h-full object-cover rounded"
                  />
                </div>
                <div className="flex-grow">
                  <h3 className="font-semibold">{match.book1.title}</h3>
                  <p className="text-sm text-gray-600">by {match.book1.author}</p>
                </div>
                <div className="text-2xl font-serif text-[#7D1D3F]">❤</div>
                <div className="flex-grow">
                  <h3 className="font-semibold">{match.book2.title}</h3>
                  <p className="text-sm text-gray-600">by {match.book2.author}</p>
                </div>
                <div className="w-16 h-16 flex-shrink-0">
                  <img 
                    src={match.book2.image} 
                    alt={match.book2.title}
                    className="w-full h-full object-cover rounded"
                  />
                </div>
              </div>
              <div className="mt-3 flex justify-between items-center">
                <span className="text-sm text-gray-500">
                  Matched {new Date(match.date).toLocaleDateString()}
                </span>
                <span className="px-2 py-1 bg-[#F8F0E3] text-[#7D1D3F] rounded-full text-sm">
                  {match.compatibility}% Compatible
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  };

  // Render match detail view
  const renderMatchDetail = () => {
    if (!selectedMatch) return null;
    
    const [messageInput, setMessageInput] = useState("");
    const matchMessages = messages[selectedMatch.id] || [];
    
    return (
      <div className="h-full flex flex-col">
        <div className="p-4 border-b flex items-center">
          <button 
            onClick={() => setSelectedMatch(null)}
            className="mr-4"
          >
            <ChevronLeft size={20} />
          </button>
          <h2 className="text-xl font-serif">Match Details</h2>
        </div>
        
        <div className="flex-grow overflow-y-auto">
          <div className="p-4">
            <div className="flex justify-between items-center mb-6">
              <div className="flex items-center gap-3">
                <img 
                  src={selectedMatch.book1.image} 
                  alt={selectedMatch.book1.title}
                  className="w-12 h-12 object-cover rounded"
                />
                <div>
                  <h3 className="font-semibold">{selectedMatch.book1.title}</h3>
                  <p className="text-sm text-gray-600">by {selectedMatch.book1.author}</p>
                </div>
              </div>
              
              <div className="px-3 py-1 bg-[#F8F0E3] text-[#7D1D3F] rounded-full text-sm font-semibold">
                {selectedMatch.compatibility}% Match
              </div>
              
              <div className="flex items-center gap-3">
                <div className="text-right">
                  <h3 className="font-semibold">{selectedMatch.book2.title}</h3>
                  <p className="text-sm text-gray-600">by {selectedMatch.book2.author}</p>
                </div>
                <img 
                  src={selectedMatch.book2.image} 
                  alt={selectedMatch.book2.title}
                  className="w-12 h-12 object-cover rounded"
                />
              </div>
            </div>
            
            <div className="bg-[#F8F0E3] p-4 rounded-lg mb-6">
              <h3 className="font-semibold mb-2">Why They Match</h3>
              <p className="text-sm">
                These books share complementary themes and styles. 
                {selectedMatch.book1.genre.some(g => selectedMatch.book2.lookingFor.includes(g)) && 
                  ` ${selectedMatch.book1.title} offers the ${selectedMatch.book1.genre.find(g => selectedMatch.book2.lookingFor.includes(g))} 
                  that ${selectedMatch.book2.title} is looking for.`}
                {selectedMatch.book2.genre.some(g => selectedMatch.book1.lookingFor.includes(g)) && 
                  ` ${selectedMatch.book2.title} provides the ${selectedMatch.book2.genre.find(g => selectedMatch.book1.lookingFor.includes(g))} 
                  elements that ${selectedMatch.book1.title} desires.`}
                {Math.abs(selectedMatch.book1.year - selectedMatch.book2.year) < 50 && 
                  ` They were published in similar time periods, only ${Math.abs(selectedMatch.book1.year - selectedMatch.book2.year)} years apart.`}
              </p>
            </div>
            
            <div className="mb-6">
              <h3 className="font-semibold mb-3">Conversation</h3>
              
              {matchMessages.length === 0 ? (
                <div className="text-center py-6 text-gray-500">
                  No messages yet. Start a conversation!
                </div>
              ) : (
                <div className="space-y-3">
                  {matchMessages.map(msg => (
                    <div 
                      key={msg.id}
                      className={`p-3 rounded-lg max-w-[80%] ${
                        msg.sender === "user" 
                          ? "bg-[#7D1D3F] text-white ml-auto" 
                          : "bg-gray-200 text-gray-800"
                      }`}
                    >
                      <p>{msg.text}</p>
                      <p className="text-xs mt-1 opacity-70">
                        {new Date(msg.timestamp).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
                      </p>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
        
        <div className="p-4 border-t">
          <div className="flex gap-2">
            <input
              type="text"
              value={messageInput}
              onChange={(e) => setMessageInput(e.target.value)}
              placeholder="Type a message..."
              className="flex-grow p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#7D1D3F]"
            />
            <button
              onClick={() => {
                handleSendMessage(selectedMatch.id, messageInput);
                setMessageInput("");
              }}
              className="px-4 py-2 bg-[#7D1D3F] text-white rounded-lg hover:bg-[#5a1530] transition-colors"
            >
              Send
            </button>
          </div>
        </div>
      </div>
    );
  };

  // Render profile interface
  const renderProfile = () => {
    return (
      <div className="h-full overflow-y-auto p-4">
        <h2 className="text-2xl font-serif mb-6 text-center">Your Book Collection</h2>
        
        <button 
          onClick={() => setShowNewBookForm(true)}
          className="w-full mb-6 px-4 py-2 bg-[#7D1D3F] text-white rounded-lg hover:bg-[#5a1530] transition-colors"
        >
          Add a New Book
        </button>
        
        {likedBooks.length === 0 ? (
          <div className="text-center py-6 text-gray-500">
            You haven't liked any books yet. Start browsing!
          </div>
        ) : (
          <div className="grid gap-4 md:grid-cols-2">
            {likedBooks.map(book => (
              <div 
                key={book.id}
                className="bg-white rounded-lg shadow-md overflow-hidden"
              >
                <img 
                  src={book.image} 
                  alt={book.title}
                  className="w-full h-40 object-cover"
                />
                <div className="p-4">
                  <h3 className="font-semibold">{book.title}</h3>
                  <p className="text-sm text-gray-600 mb-2">by {book.author}</p>
                  <div className="flex flex-wrap gap-1 mb-2">
                    {book.genre.map((g, i) => (
                      <span key={i} className="px-2 py-0.5 bg-[#F8F0E3] text-[#7D1D3F] rounded-full text-xs">
                        {g}
                      </span>
                    ))}
                  </div>
                  <p className="text-sm text-gray-600 line-clamp-2">{book.description}</p>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    );
  };

  // Render new book form
  const renderNewBookForm = () => {
    return (
      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
        <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
          <div className="p-6">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-2xl font-serif">Add a New Book</h2>
              <button 
                onClick={() => setShowNewBookForm(false)}
                className="text-gray-500 hover:text-gray-700"
              >
                <X size={20} />
              </button>
            </div>
            
            <form onSubmit={handleAddBook}>
              <div className="grid gap-4 md:grid-cols-2">
                <div className="md:col-span-2">
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Book Title
                  </label>
                  <input
                    type="text"
                    value={newBook.title}
                    onChange={(e) => setNewBook({...newBook, title: e.target.value})}
                    required
                    className="w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#7D1D3F]"
                  />
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Author
                  </label>
                  <input
                    type="text"
                    value={newBook.author}
                    onChange={(e) => setNewBook({...newBook, author: e.target.value})}
                    required
                    className="w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#7D1D3F]"
                  />
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Publication Year
                  </label>
                  <input
                    type="number"
                    value={newBook.year}
                    onChange={(e) => setNewBook({...newBook, year: e.target.value})}
                    required
                    className="w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#7D1D3F]"
                  />
                </div>
                
                <div className="md:col-span-2">
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Description
                  </label>
                  <textarea
                    value={newBook.description}
                    onChange={(e) => setNewBook({...newBook, description: e.target.value})}
                    required
                    rows={3}
                    className="w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#7D1D3F]"
                  />
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Genres
                  </label>
                  <div className="flex gap-2 mb-2">
                    <input
                      type="text"
                      value={newGenre}
                      onChange={(e) => setNewGenre(e.target.value)}
                      className="flex-grow p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#7D1D3F]"
                      placeholder="Add a genre"
                    />
                    <button
                      type="button"
                      onClick={handleAddGenre}
                      className="px-3 py-2 bg-[#7D1D3F] text-white rounded-lg hover:bg-[#5a1530] transition-colors"
                    >
                      Add
                    </button>
                  </div>
                  <div className="flex flex-wrap gap-2">
                    {newBook.genre.map((g, i) => (
                      <span key={i} className="px-2 py-1 bg-[#F8F0E3] text-[#7D1D3F] rounded-full text-sm flex items-center">
                        {g}
                        <button
                          type="button"
                          onClick={() => setNewBook({
                            ...newBook,
                            genre: newBook.genre.filter((_, index) => index !== i)
                          })}
                          className="ml-1 text-[#7D1D3F] hover:text-[#5a1530]"
                        >
                          <X size={14} />
                        </button>
                      </span>
                    ))}
                  </div>
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Personality Traits
                  </label>
                  <div className="flex gap-2 mb-2">
                    <input
                      type="text"
                      value={newPersonality}
                      onChange={(e) => setNewPersonality(e.target.value)}
                      className="flex-grow p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#7D1D3F]"
                      placeholder="Add a personality trait"
                    />
                    <button
                      type="button"
                      onClick={handleAddPersonality}
                      className="px-3 py-2 bg-[#7D1D3F] text-white rounded-lg hover:bg-[#5a1530] transition-colors"
                    >
                      Add
                    </button>
                  </div>
                  <div className="flex flex-wrap gap-2">
                    {newBook.personality.map((p, i) => (
                      <span key={i} className="px-2 py-1 bg-[#102542] text-white rounded-full text-sm flex items-center">
                        {p}
                        <button
                          type="button"
                          onClick={() => setNewBook({
                            ...newBook,
                            personality: newBook.personality.filter((_, index) => index !== i)
                          })}
                          className="ml-1 text-white hover:text-gray-200"
                        >
                          <X size={14} />
                        </button>
                      </span>
                    ))}
                  </div>
                </div>
                
                <div className="md:col-span-2">
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Looking For
                  </label>
                  <div className="flex gap-2 mb-2">
                    <input
                      type="text"
                      value={newLookingFor}
                      onChange={(e) => setNewLookingFor(e.target.value)}
                      className="flex-grow p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#7D1D3F]"
                      placeholder="Add what this book is looking for"
                    />
                    <button
                      type="button"
                      onClick={handleAddLookingFor}
                      className="px-3 py-2 bg-[#7D1D3F] text-white rounded-lg hover:bg-[#5a1530] transition-colors"
                    >
                      Add
                    </button>
                  </div>
                  <div className="flex flex-wrap gap-2">
                    {newBook.lookingFor.map((l, i) => (
                      <span key={i} className="px-2 py-1 bg-[#8DAA91] text-white rounded-full text-sm flex items-center">
                        {l}
                        <button
                          type="button"
                          onClick={() => setNewBook({
                            ...newBook,
                            lookingFor: newBook.lookingFor.filter((_, index) => index !== i)
                          })}
                          className="ml-1 text-white hover:text-gray-200"
                        >
                          <X size={14} />
                        </button>
                      </span>
                    ))}
                  </div>
                </div>
                
                <div className="md:col-span-2">
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Cover Image URL
                  </label>
                  <input
                    type="text"
                    value={newBook.image}
                    onChange={(e) => setNewBook({...newBook, image: e.target.value})}
                    className="w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#7D1D3F]"
                    placeholder="https://example.com/image.jpg"
                  />
                </div>
              </div>
              
              <div className="mt-6 flex justify-end gap-3">
                <button
                  type="button"
                  onClick={() => setShowNewBookForm(false)}
                  className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="px-4 py-2 bg-[#7D1D3F] text-white rounded-lg hover:bg-[#5a1530] transition-colors"
                >
                  Add Book
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    );
  };

  return (
    <div className="min-h-screen bg-[#F8F0E3] font-sans">
      {/* Header */}
      <header className="bg-[#7D1D3F] text-white p-4 shadow-md">
        <div className="container mx-auto flex justify-between items-center">
          <h1 className="text-2xl font-serif font-bold">BookMate</h1>
          <p className="text-sm">Where books find their perfect match</p>
        </div>
      </header>
      
      {/* Main Content */}
      <main className="container mx-auto p-4">
        <div className="bg-white rounded-lg shadow-lg overflow-hidden max-w-2xl mx-auto" style={{height: "80vh"}}>
          <div className="h-full flex flex-col">
            {/* Content Area */}
            <div className="flex-grow overflow-hidden">
              {activeTab === 'browse' && renderBrowseBooks()}
              {activeTab === 'matches' && renderMatches()}
              {activeTab === 'profile' && renderProfile()}
            </div>
            
            {/* Navigation */}
            <nav className="bg-white border-t p-2">
              <div className="flex justify-around">
                <button 
                  onClick={() => setActiveTab('browse')}
                  className={`p-2 rounded-lg flex flex-col items-center ${
                    activeTab === 'browse' ? 'text-[#7D1D3F]' : 'text-gray-500 hover:text-gray-700'
                  }`}
                >
                  <BookOpen size={20} />
                  <span className="text-xs mt-1">Browse</span>
                </button>
                <button 
                  onClick={() => setActiveTab('matches')}
                  className={`p-2 rounded-lg flex flex-col items-center ${
                    activeTab === 'matches' ? 'text-[#7D1D3F]' : 'text-gray-500 hover:text-gray-700'
                  }`}
                >
                  <Users size={20} />
                  <span className="text-xs mt-1">Matches</span>
                </button>
                <button 
                  onClick={() => setActiveTab('profile')}
                  className={`p-2 rounded-lg flex flex-col items-center ${
                    activeTab === 'profile' ? 'text-[#7D1D3F]' : 'text-gray-500 hover:text-gray-700'
                  }`}
                >
                  <User size={20} />
                  <span className="text-xs mt-1">Collection</span>
                </button>
              </div>
            </nav>
          </div>
        </div>
      </main>
      
      {/* New Book Form Modal */}
      {showNewBookForm && renderNewBookForm()}
    </div>
  );
}