import { useState, useEffect } from 'react';
import { Database, Plus, Trash2 } from 'lucide-react';

export default function PocketBase() {
  const [items, setItems] = useState([]);
  const [newItem, setNewItem] = useState('');
  const [loading, setLoading] = useState(false);

  // Simulate fetching data on mount
  useEffect(() => {
    fetchItems();
  }, []);

  const fetchItems = async () => {
    try {
      const res = await fetch('/api/pocketbase');
      const data = await res.json();
      setItems(data.items || []);
    } catch (error) {
      console.error('Failed to fetch items');
    }
  };

  const addItem = async () => {
    if (!newItem.trim()) return;
    setLoading(true);
    try {
      const res = await fetch('/api/pocketbase', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: newItem }),
      });
      if (res.ok) {
        setNewItem('');
        fetchItems();
      }
    } catch (error) {
      console.error('Failed to add item');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="bg-slate-800 rounded-xl p-6 shadow-xl border border-slate-700">
      <div className="flex items-center gap-2 mb-4">
        <Database className="w-5 h-5 text-emerald-500" />
        <h2 className="text-lg font-semibold text-white">PocketBase Manager</h2>
      </div>

      <div className="flex gap-2 mb-6">
        <input
          type="text"
          value={newItem}
          onChange={(e) => setNewItem(e.target.value)}
          placeholder="Add new record..."
          className="flex-1 bg-slate-900 border border-slate-600 rounded-lg px-4 py-2 text-white placeholder-slate-500 focus:ring-2 focus:ring-emerald-500 focus:border-transparent outline-none"
        />
        <button
          onClick={addItem}
          disabled={loading}
          className="bg-emerald-600 hover:bg-emerald-500 text-white px-4 py-2 rounded-lg transition-colors disabled:opacity-50"
        >
          <Plus className="w-5 h-5" />
        </button>
      </div>

      <div className="space-y-2 max-h-64 overflow-y-auto">
        {items.length === 0 ? (
          <p className="text-slate-500 text-sm text-center py-4">No records found</p>
        ) : (
          items.map((item, index) => (
            <div 
              key={index} 
              className="flex items-center justify-between bg-slate-900 p-3 rounded-lg border border-slate-700 group hover:border-slate-500 transition-colors"
            >
              <span className="text-slate-300">{item.name || item.id}</span>
              <button className="text-red-400 opacity-0 group-hover:opacity-100 transition-opacity hover:text-red-300">
                <Trash2 className="w-4 h-4" />
              </button>
            </div>
          ))
        )}
      </div>
    </div>
  );
}