import { useState } from 'react';

interface Note {
  id: string;
  text: string;
  done: boolean;
}

export default function Notes() {
  const [notes, setNotes] = useState<Note[]>([]);
  const [input, setInput] = useState('');

  const addNote = () => {
    if (!input.trim()) return;
    setNotes([...notes, { id: crypto.randomUUID(), text: input.trim(), done: false }]);
    setInput('');
  };

  const toggle = (id: string) => {
    setNotes(notes.map((n) => (n.id === id ? { ...n, done: !n.done } : n)));
  };

  const remove = (id: string) => {
    setNotes(notes.filter((n) => n.id !== id));
  };

  return (
    <div className="p-4">
      <h3 className="text-sm font-bold text-kira-plum mb-3 flex items-center gap-2">
        <span>📝</span> Notes
      </h3>

      <div className="flex gap-2 mb-3">
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => e.key === 'Enter' && addNote()}
          placeholder="what are you working on?"
          className="flex-1 bg-white/60 rounded-xl px-3 py-2 text-sm text-kira-plum placeholder-kira-plum/30 border border-kira-pink/20 focus:outline-none focus:border-kira-pink/50"
        />
        <button onClick={addNote} className="btn-kira px-3 text-sm">+</button>
      </div>

      <div className="space-y-1.5 max-h-32 overflow-y-auto scrollbar-thin">
        {notes.length === 0 && (
          <p className="text-xs text-kira-plum/30 text-center py-3">nothing yet</p>
        )}
        {notes.map((note) => (
          <div
            key={note.id}
            className={`flex items-center gap-2 px-3 py-2 rounded-xl text-sm transition-all cursor-pointer ${
              note.done ? 'bg-kira-mint/30 line-through text-kira-plum/40' : 'bg-white/40 hover:bg-kira-glow'
            }`}
            onClick={() => toggle(note.id)}
          >
            <span className="text-xs">{note.done ? '✅' : '⬜'}</span>
            <span className="flex-1 truncate">{note.text}</span>
            <button
              onClick={(e) => { e.stopPropagation(); remove(note.id); }}
              className="text-kira-plum/20 hover:text-red-300 text-xs"
            >
              ✕
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}
