"use client";

import { useState } from "react";

const PALETTE = ["#fef08a", "#86efac", "#93c5fd", "#f9a8d4", "#c4b5fd"];

type Note = {
  id: string;
  title: string;
  content: string;
  color: string;
  pinned: boolean;
};

export default function NoteForm({
  initial,
  onSave,
  onCancel,
}: {
  initial: Note | null;
  onSave: (data: { title: string; content: string; color: string; pinned: boolean }) => void;
  onCancel: () => void;
}) {
  const [title, setTitle] = useState(initial?.title ?? "");
  const [content, setContent] = useState(initial?.content ?? "");
  const [color, setColor] = useState(initial?.color ?? PALETTE[0]);
  const [pinned, setPinned] = useState(!!initial?.pinned);

  const submit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!title.trim()) return;
    onSave({ title: title.trim(), content: content.trim(), color, pinned });
  };

  return (
    <form onSubmit={submit} className="bg-zinc-900 border border-zinc-800 rounded-xl p-5 mb-6 space-y-4">
      <input
        autoFocus
        placeholder="Title"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        className="w-full bg-transparent text-lg font-semibold focus:outline-none placeholder:text-zinc-600"
      />
      <textarea
        placeholder="Write something..."
        value={content}
        onChange={(e) => setContent(e.target.value)}
        rows={4}
        className="w-full bg-transparent text-sm text-zinc-300 focus:outline-none resize-none placeholder:text-zinc-600"
      />
      <div className="flex items-center justify-between">
        <div className="flex gap-2 items-center">
          {PALETTE.map((c) => (
            <button
              key={c}
              type="button"
              onClick={() => setColor(c)}
              className={`w-6 h-6 rounded-full transition ${color === c ? "ring-2 ring-white scale-110" : "opacity-60 hover:opacity-100"}`}
              style={{ backgroundColor: c }}
            />
          ))}
          <label className="flex items-center gap-1.5 ml-3 text-xs text-zinc-400 cursor-pointer">
            <input
              type="checkbox"
              checked={pinned}
              onChange={(e) => setPinned(e.target.checked)}
              className="accent-emerald-500"
            />
            Pin
          </label>
        </div>
        <div className="flex gap-2">
          <button type="button" onClick={onCancel} className="px-3 py-1.5 text-sm text-zinc-400 hover:text-white transition">
            Cancel
          </button>
          <button type="submit" className="px-4 py-1.5 bg-emerald-600 hover:bg-emerald-500 rounded-lg text-sm font-medium transition">
            {initial ? "Update" : "Create"}
          </button>
        </div>
      </div>
    </form>
  );
}