"use client";

import { useState } from "react";

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

const COLORS: Record<string, string> = {
  "#fef08a": "bg-yellow-200/10 border-yellow-500/30",
  "#86efac": "bg-emerald-200/10 border-emerald-500/30",
  "#93c5fd": "bg-blue-200/10 border-blue-500/30",
  "#f9a8d4": "bg-pink-200/10 border-pink-500/30",
  "#c4b5fd": "bg-violet-200/10 border-violet-500/30",
};

export default function NoteCard({
  note,
  onEdit,
  onDelete,
  onPin,
}: {
  note: Note;
  onEdit: () => void;
  onDelete: () => void;
  onPin: () => void;
}) {
  const [showActions, setShowActions] = useState(false);
  const cls = COLORS[note.color] ?? "bg-zinc-800/50 border-zinc-700";
  const ago = timeAgo(note.updatedAt);

  return (
    <div
      className={`border rounded-xl p-4 ${cls} transition hover:scale-[1.02] group`}
      onClick={() => setShowActions((v) => !v)}
    >
      <div className="flex items-start justify-between mb-2">
        <h3 className="font-semibold text-sm leading-tight flex-1 mr-2">
          {note.pinned ? "📌 " : ""}{note.title}
        </h3>
        <div className={`flex gap-1 transition ${showActions ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`}>
          <Btn onClick={(e) => { e.stopPropagation(); onPin(); }} title={note.pinned ? "Unpin" : "Pin"}>
            {note.pinned ? "◇" : "◆"}
          </Btn>
          <Btn onClick={(e) => { e.stopPropagation(); onEdit(); }} title="Edit">✎</Btn>
          <Btn onClick={(e) => { e.stopPropagation(); onDelete(); }} title="Delete">✕</Btn>
        </div>
      </div>
      {note.content && (
        <p className="text-xs text-zinc-400 leading-relaxed line-clamp-4 mb-3">{note.content}</p>
      )}
      <div className="flex items-center justify-between">
        <span
          className="w-3 h-3 rounded-full inline-block"
          style={{ backgroundColor: note.color }}
        />
        <span className="text-[10px] text-zinc-500">{ago}</span>
      </div>
    </div>
  );
}

function Btn({ onClick, title, children }: { onClick: (e: React.MouseEvent) => void; title: string; children: React.ReactNode }) {
  return (
    <button
      onClick={onClick}
      title={title}
      className="w-7 h-7 flex items-center justify-center rounded-lg text-sm text-zinc-400 hover:text-white hover:bg-zinc-700 active:bg-zinc-600 transition"
    >
      {children}
    </button>
  );
}

function timeAgo(d: Date | string): string {
  const t = new Date(d).getTime();
  if (isNaN(t)) return "";
  const diff = Date.now() - t;
  const mins = Math.floor(diff / 60000);
  if (mins < 1) return "just now";
  if (mins < 60) return `${mins}m ago`;
  const hrs = Math.floor(mins / 60);
  if (hrs < 24) return `${hrs}h ago`;
  return `${Math.floor(hrs / 24)}d ago`;
}