"use client";

import Link from "next/link";
import { Pin, MoreHorizontal, 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 type { NoteWithRelations } from "@/hooks/use-notes";

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

function extractPreview(content: Record<string, unknown>): string {
  try {
    const doc = content as { content?: Array<{ content?: Array<{ text?: string }> }> };
    if (!doc.content) return "";
    const texts: string[] = [];
    for (const block of doc.content) {
      if (block.content) {
        for (const inline of block.content) {
          if (inline.text) texts.push(inline.text);
        }
      }
      if (texts.length > 0) break; // First paragraph only
    }
    return texts.join("").slice(0, 120);
  } catch {
    return "";
  }
}

export function NoteCard({
  note,
  onTogglePin,
  onDelete,
  canManage = true,
}: NoteCardProps) {
  const preview = extractPreview(note.content);

  return (
    <div
      className={cn(
        "group relative rounded-xl border bg-card hover:border-foreground/10 transition-colors",
        note.is_pinned ? "border-primary/20" : "border-border"
      )}
    >
      <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 opacity-0 group-hover:opacity-100 transition-opacity">
          <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>
  );
}