import React, { useState, useEffect } from 'react';
import { Save, Trash2, Calendar, Tag } from 'lucide-react';

export default function MemoryBank() {
  const [entries, setEntries] = useState([]);
  const [currentEntry, setCurrentEntry] = useState('');
  const [category, setCategory] = useState('general');
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    loadEntries();
  }, []);

  const loadEntries = async () => {
    try {
      const stored = await window.storage.list('memory:', false);
      if (stored && stored.keys) {
        const loadedEntries = await Promise.all(
          stored.keys.map(async (key) => {
            const result = await window.storage.get(key, false);
            return result ? JSON.parse(result.value) : null;
          })
        );
        setEntries(loadedEntries.filter(e => e !== null).sort((a, b) => b.timestamp - a.timestamp));
      }
    } catch (error) {
      console.log('No existing entries or error loading:', error);
      setEntries([]);
    }
    setIsLoading(false);
  };

  const saveEntry = async () => {
    if (!currentEntry.trim()) return;

    const entry = {
      id: Date.now(),
      text: currentEntry,
      category: category,
      timestamp: Date.now(),
      date: new Date().toLocaleString()
    };

    try {
      await window.storage.set(`memory:${entry.id}`, JSON.stringify(entry), false);
      setEntries([entry, ...entries]);
      setCurrentEntry('');
    } catch (error) {
      alert('Error saving entry: ' + error.message);
    }
  };

  const deleteEntry = async (id) => {
    if (!confirm('Delete this memory entry?')) return;
    
    try {
      await window.storage.delete(`memory:${id}`, false);
      setEntries(entries.filter(e => e.id !== id));
    } catch (error) {
      alert('Error deleting entry: ' + error.message);
    }
  };

  const clearAll = async () => {
    if (!confirm('Delete ALL memory entries? This cannot be undone!')) return;
    
    try {
      for (const entry of entries) {
        await window.storage.delete(`memory:${entry.id}`, false);
      }
      setEntries([]);
    } catch (error) {
      alert('Error clearing entries: ' + error.message);
    }
  };

  const exportEntries = () => {
    const text = entries.map(e => 
      `[${e.date}] [${e.category}]\n${e.text}\n${'='.repeat(80)}\n`
    ).join('\n');
    
    const blob = new Blob([text], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `claude-memories-${Date.now()}.txt`;
    a.click();
  };

  const categories = ['general', 'cube-solving', 'hexy-patterns', 'programming', 'ideas', 'solutions'];
  const categoryColors = {
    'general': 'bg-gray-100',
    'cube-solving': 'bg-blue-100',
    'hexy-patterns': 'bg-purple-100',
    'programming': 'bg-green-100',
    'ideas': 'bg-yellow-100',
    'solutions': 'bg-red-100'
  };

  if (isLoading) {
    return <div className="flex items-center justify-center h-screen">Loading memories...</div>;
  }

  return (
    <div className="max-w-4xl mx-auto p-6 bg-gray-50 min-h-screen">
      <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
        <h1 className="text-3xl font-bold mb-2 text-gray-800">Claude Memory Bank</h1>
        <p className="text-gray-600 mb-4">
          A persistent memory system for our conversations. Save insights, solutions, and ideas here.
          They'll be waiting next time we talk.
        </p>
        
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Category
            </label>
            <select 
              value={category}
              onChange={(e) => setCategory(e.target.value)}
              className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            >
              {categories.map(cat => (
                <option key={cat} value={cat}>{cat}</option>
              ))}
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Memory Entry
            </label>
            <textarea
              value={currentEntry}
              onChange={(e) => setCurrentEntry(e.target.value)}
              placeholder="What should I remember for next time?..."
              className="w-full h-32 p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
            />
          </div>

          <div className="flex gap-2">
            <button
              onClick={saveEntry}
              disabled={!currentEntry.trim()}
              className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
            >
              <Save size={16} />
              Save Memory
            </button>
            
            {entries.length > 0 && (
              <>
                <button
                  onClick={exportEntries}
                  className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
                >
                  Export All
                </button>
                <button
                  onClick={clearAll}
                  className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"
                >
                  Clear All
                </button>
              </>
            )}
          </div>
        </div>
      </div>

      <div className="space-y-4">
        <h2 className="text-2xl font-bold text-gray-800">
          Saved Memories ({entries.length})
        </h2>
        
        {entries.length === 0 ? (
          <div className="bg-white rounded-lg shadow p-8 text-center text-gray-500">
            No memories saved yet. Start by saving an insight above!
          </div>
        ) : (
          entries.map(entry => (
            <div key={entry.id} className={`bg-white rounded-lg shadow p-4 ${categoryColors[entry.category]}`}>
              <div className="flex justify-between items-start mb-2">
                <div className="flex items-center gap-2 text-sm text-gray-600">
                  <Calendar size={14} />
                  <span>{entry.date}</span>
                  <Tag size={14} className="ml-2" />
                  <span className="font-medium">{entry.category}</span>
                </div>
                <button
                  onClick={() => deleteEntry(entry.id)}
                  className="text-red-600 hover:text-red-800 transition-colors"
                  title="Delete entry"
                >
                  <Trash2 size={16} />
                </button>
              </div>
              <p className="text-gray-800 whitespace-pre-wrap">{entry.text}</p>
            </div>
          ))
        )}
      </div>
    </div>
  );
}