"use client";

import Link from "next/link";
import { Pin, MoreHorizontal, Plus, Trash2, PinOff } from "lucide-react";
import {
  Dropdown,
  DropdownTrigger,
  DropdownContent,
  DropdownItem,
} from "@/components/ui/dropdown";
import { cn } from "@/lib/utils";
import { formatDate } from "@/lib/utils";
import { extractNotePreview } from "@/lib/notes/note-preview";
import { useNoteDesigns } from "@/hooks/use-note-designs";
import type { NoteWithRelations } from "@/hooks/use-notes";

interface NoteCardProps {
  note: NoteWithRelations;
  onTogglePin: () => void;
  onDelete: () => void;
  canManage?: boolean;
  onCreateSubPage?: () => void;
}

export function NoteCard({
  note,
  onTogglePin,
  onDelete,
  canManage = true,
  onCreateSubPage,
}: NoteCardProps) {
  const preview = extractNotePreview(note.content);
  const { getCover } = useNoteDesigns();
  const cover = getCover(note.cover_id);

  return (
    <div
      className={cn(
        "group relative overflow-hidden rounded-xl border bg-card hover:border-foreground/10 transition-colors",
        note.is_pinned ? "border-primary/20" : "border-border"
      )}
    >
      {cover && <div className="h-10 w-full" style={cover.style} />}
      <Link href={`/notes/${note.id}`} className="block p-4">
        {/* Pin indicator */}
        {note.is_pinned && (
          <Pin className="h-3 w-3 text-primary mb-2 fill-primary" />
        )}

        <h3 className="font-medium text-sm truncate">{note.title}</h3>

        {preview && (
          <p className="text-xs text-muted-foreground mt-1 line-clamp-2">
            {preview}
          </p>
        )}

        <div className="flex items-center gap-2 mt-3">
          <span className="text-[10px] text-muted-foreground">
            {formatDate(note.updated_at)}
          </span>
          {note.tags.map((tag) => (
            <span
              key={tag.id}
              className="inline-flex rounded-full px-1.5 py-0 text-[10px] font-medium"
              style={{ backgroundColor: tag.color + "18", color: tag.color }}
            >
              {tag.name}
            </span>
          ))}
        </div>
      </Link>

      {/* Actions */}
      {canManage && (
        <div className="absolute top-2 right-2 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
          {onCreateSubPage && (
            <button
              type="button"
              onClick={(e) => {
                e.preventDefault();
                onCreateSubPage();
              }}
              title="Add sub-page"
              className="p-1.5 rounded-md hover:bg-accent transition-colors"
            >
              <Plus className="h-4 w-4 text-muted-foreground" />
            </button>
          )}
          <Dropdown>
            <DropdownTrigger className="p-1.5 rounded-md hover:bg-accent transition-colors">
              <MoreHorizontal className="h-4 w-4 text-muted-foreground" />
            </DropdownTrigger>
            <DropdownContent>
              <DropdownItem onClick={onTogglePin}>
                {note.is_pinned ? (
                  <PinOff className="h-3.5 w-3.5" />
                ) : (
                  <Pin className="h-3.5 w-3.5" />
                )}
                {note.is_pinned ? "Unpin" : "Pin"}
              </DropdownItem>
              <DropdownItem onClick={onDelete} destructive>
                <Trash2 className="h-3.5 w-3.5" />
                Delete
              </DropdownItem>
            </DropdownContent>
          </Dropdown>
        </div>
      )}
    </div>
  );
}