import { useState } from 'react';
import { Search, Plus, Trash2, Save, Book, Tag } from 'lucide-react';

export default function NotesApp() {
  const categories = [
    { id: 'homework', label: 'Homework', color: 'bg-blue-100 text-blue-800' },
    { id: 'lecture', label: 'Lecture Notes', color: 'bg-green-100 text-green-800' },
    { id: 'exam', label: 'Exam Prep', color: 'bg-purple-100 text-purple-800' },
    { id: 'project', label: 'Projects', color: 'bg-yellow-100 text-yellow-800' },
    { id: 'research', label: 'Research', color: 'bg-pink-100 text-pink-800' },
  ];

  const [notes, setNotes] = useState([]);
  const [currentNote, setCurrentNote] = useState({ 
    title: '', 
    content: '', 
    subject: '',
    category: ''
  });
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('');

  const addNote = () => {
    if (currentNote.title.trim() && currentNote.content.trim()) {
      setNotes([...notes, { ...currentNote, id: Date.now() }]);
      setCurrentNote({ title: '', content: '', subject: '', category: '' });
    }
  };

  const deleteNote = (id) => {
    setNotes(notes.filter(note => note.id !== id));
  };

  const filteredNotes = notes.filter(note => {
    const matchesSearch = (
      note.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      note.content.toLowerCase().includes(searchTerm.toLowerCase()) ||
      note.subject.toLowerCase().includes(searchTerm.toLowerCase())
    );
    const matchesCategory = selectedCategory ? note.category === selectedCategory : true;
    return matchesSearch && matchesCategory;
  });

  const getCategoryColor = (categoryId) => {
    return categories.find(cat => cat.id === categoryId)?.color || 'bg-gray-100 text-gray-800';
  };

  const getCategoryLabel = (categoryId) => {
    return categories.find(cat => cat.id === categoryId)?.label || 'Uncategorized';
  };

  return (
    <div className="min-h-screen bg-gray-50 py-8 px-4 sm:px-6 lg:px-8">
      <div className="max-w-6xl mx-auto">
        <div className="flex items-center justify-between mb-8">
          <div className="flex items-center space-x-2">
            <Book className="h-8 w-8 text-indigo-600" />
            <h1 className="text-3xl font-bold text-gray-900">Student Notes</h1>
          </div>
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
            <input
              type="text"
              placeholder="Search notes..."
              className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
        </div>

        {/* Category Filter */}
        <div className="mb-6 flex flex-wrap gap-2">
          <button
            onClick={() => setSelectedCategory('')}
            className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
              selectedCategory === '' ? 'bg-indigo-100 text-indigo-800' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
            }`}
          >
            All Notes
          </button>
          {categories.map((category) => (
            <button
              key={category.id}
              onClick={() => setSelectedCategory(category.id)}
              className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
                selectedCategory === category.id ? category.color : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
              }`}
            >
              {category.label}
            </button>
          ))}
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Note Editor */}
          <div className="lg:col-span-2">
            <div className="bg-white rounded-lg shadow-sm p-6 space-y-4">
              <input
                type="text"
                placeholder="Note Title"
                className="w-full text-xl font-semibold border-b border-gray-200 pb-2 focus:outline-none focus:border-indigo-500"
                value={currentNote.title}
                onChange={(e) => setCurrentNote({ ...currentNote, title: e.target.value })}
              />
              <div className="flex gap-4">
                <input
                  type="text"
                  placeholder="Subject"
                  className="flex-1 text-sm text-gray-600 border-b border-gray-200 pb-2 focus:outline-none focus:border-indigo-500"
                  value={currentNote.subject}
                  onChange={(e) => setCurrentNote({ ...currentNote, subject: e.target.value })}
                />
                <select
                  value={currentNote.category}
                  onChange={(e) => setCurrentNote({ ...currentNote, category: e.target.value })}
                  className="flex-1 text-sm text-gray-600 border-b border-gray-200 pb-2 focus:outline-none focus:border-indigo-500"
                >
                  <option value="">Select Category</option>
                  {categories.map((category) => (
                    <option key={category.id} value={category.id}>
                      {category.label}
                    </option>
                  ))}
                </select>
              </div>
              <textarea
                placeholder="Start typing your notes here..."
                className="w-full h-64 resize-none focus:outline-none"
                value={currentNote.content}
                onChange={(e) => setCurrentNote({ ...currentNote, content: e.target.value })}
              />
              <button
                onClick={addNote}
                className="flex items-center justify-center w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              >
                <Plus className="h-5 w-5 mr-2" />
                Save Note
              </button>
            </div>
          </div>

          {/* Notes List */}
          <div className="space-y-4">
            {filteredNotes.map((note) => (
              <div key={note.id} className="bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition-shadow">
                <div className="flex justify-between items-start mb-2">
                  <div>
                    <h3 className="text-lg font-semibold text-gray-900">{note.title}</h3>
                    <div className="flex items-center gap-2 mt-1">
                      <span className="text-sm text-indigo-600">{note.subject}</span>
                      {note.category && (
                        <span className={`text-xs px-2 py-1 rounded-full ${getCategoryColor(note.category)}`}>
                          {getCategoryLabel(note.category)}
                        </span>
                      )}
                    </div>
                  </div>
                  <button
                    onClick={() => deleteNote(note.id)}
                    className="text-gray-400 hover:text-red-500 transition-colors"
                  >
                    <Trash2 className="h-5 w-5" />
                  </button>
                </div>
                <p className="text-gray-600 text-sm line-clamp-3">{note.content}</p>
              </div>
            ))}
            {filteredNotes.length === 0 && (
              <div className="text-center text-gray-500 py-8">
                {searchTerm || selectedCategory ? 'No matching notes found' : 'No notes yet. Create your first note!'}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}