"use client";
import * as React from "react";
import { Copy, Folder, Pencil, Play, Star, Trash2 } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { RowMenu } from "@/components/projects/row-menu";
import { useApp } from "@/components/app/store";
import { useIsMobile, useLongPress } from "@/lib/client/hooks";
import { formatRelative, truncate, cn } from "@/lib/utils";
import type { PublicPrompt } from "@/lib/client/types";
import type { ActionSheetItem } from "@/components/ui/sheet";
import { PROMPT_KIND_META } from "./prompt-kind";

export interface PromptCardActions {
  onUse: (p: PublicPrompt) => void;
  onEdit: (p: PublicPrompt) => void;
  onDuplicate?: (p: PublicPrompt) => void;
  onToggleFavorite: (p: PublicPrompt) => void;
  onDelete: (p: PublicPrompt) => void;
}

/** Prompt card (grid) or compact row (`compact`, used on project pages). Long-press on phones opens the actions. */
export function PromptCard({ prompt: p, actions, compact, className }: { prompt: PublicPrompt; actions: PromptCardActions; compact?: boolean; className?: string }) {
  const { modelsByKey } = useApp();
  const isMobile = useIsMobile();
  const [menu, setMenu] = React.useState(false);
  const press = useLongPress({ onLongPress: () => setMenu(true), disabled: !isMobile });
  const meta = PROMPT_KIND_META[p.kind];
  const model = p.defaultModelKey ? modelsByKey.get(p.defaultModelKey) : null;

  const items: (ActionSheetItem | "separator")[] = [
    { key: "use", label: "Use in chat", icon: <Play />, onSelect: () => actions.onUse(p) },
    { key: "edit", label: "Edit", icon: <Pencil />, onSelect: () => actions.onEdit(p) },
    ...(actions.onDuplicate ? [{ key: "dup", label: "Duplicate", icon: <Copy />, onSelect: () => actions.onDuplicate!(p) } as ActionSheetItem] : []),
    { key: "fav", label: p.favorite ? "Remove from favourites" : "Add to favourites", icon: <Star />, onSelect: () => actions.onToggleFavorite(p) },
    "separator",
    { key: "delete", label: "Delete", icon: <Trash2 />, destructive: true, onSelect: () => actions.onDelete(p) },
  ];

  if (compact) {
    return (
      <li className={cn("group flex min-h-[56px] items-center gap-3 px-3 py-2", className)} {...press}>
        <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-bg-muted text-fg-muted [&_svg]:size-4" aria-hidden>
          {meta.icon}
        </span>
        <button type="button" onClick={() => actions.onUse(p)} className="min-w-0 flex-1 text-left">
          <span className="flex items-center gap-1.5">
            <span className="truncate text-[14px] font-medium leading-5">{p.name}</span>
            {p.favorite ? <Star className="size-3 shrink-0 fill-warning text-warning" aria-label="Favourite" /> : null}
          </span>
          <span className="block truncate text-[12px] leading-4 text-fg-subtle">
            {meta.short}
            {p.variables.length ? ` · ${p.variables.length} variable${p.variables.length === 1 ? "" : "s"}` : ""}
            {p.uses ? ` · used ${p.uses}×` : ""} · {formatRelative(p.updatedAt)}
          </span>
        </button>
        <Button size="sm" variant="secondary" className="hidden sm:inline-flex" onClick={() => actions.onUse(p)}>
          <Play /> Use
        </Button>
        <RowMenu items={items} title={p.name} open={menu} onOpenChange={setMenu} />
      </li>
    );
  }

  return (
    <li className={cn("group flex h-full flex-col rounded-xl border border-border bg-bg-elevated p-4 transition-colors hover:border-border-strong", className)} {...press}>
      <div className="flex items-start gap-3">
        <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-bg-muted text-fg-muted [&_svg]:size-4" aria-hidden>
          {meta.icon}
        </span>
        <div className="min-w-0 flex-1">
          <h3 className="flex items-center gap-1.5 text-[15px] font-semibold leading-6">
            <span className="truncate">{p.name}</span>
            <button type="button" onClick={() => actions.onToggleFavorite(p)} className={cn("tap shrink-0 rounded p-0.5", p.favorite ? "text-warning" : "text-fg-subtle/60 hover:text-fg-muted")} aria-label={p.favorite ? "Remove from favourites" : "Add to favourites"} aria-pressed={p.favorite}>
              <Star className={cn("size-3.5", p.favorite && "fill-current")} />
            </button>
          </h3>
          {p.description ? <p className="mt-0.5 line-clamp-2 text-[13px] text-fg-muted">{p.description}</p> : null}
        </div>
        <RowMenu items={items} title={p.name} open={menu} onOpenChange={setMenu} />
      </div>
      <button type="button" onClick={() => actions.onEdit(p)} className="mt-3 block w-full text-left" aria-label={`Edit ${p.name}`}>
        <pre className="max-h-24 overflow-hidden whitespace-pre-wrap break-words rounded-md border border-border bg-bg-subtle/70 px-3 py-2 font-mono text-[12px] leading-5 text-fg-muted">{truncate(p.content, 280)}</pre>
      </button>
      <div className="mt-3 flex flex-wrap items-center gap-1.5">
        <Badge variant={meta.badge}>{meta.short}</Badge>
        {p.variables.slice(0, 3).map((v) => (
          <Badge key={v.name} variant="outline" className="font-mono">
            {`{{${v.name}}}`}
          </Badge>
        ))}
        {p.variables.length > 3 ? <Badge variant="outline">+{p.variables.length - 3}</Badge> : null}
        {model ? (
          <Badge variant="outline" className="gap-1.5">
            <ProviderIcon provider={model.provider} size={11} /> {model.displayName}
          </Badge>
        ) : null}
        {p.folder ? (
          <Badge className="gap-1">
            <Folder className="size-3" /> {p.folder}
          </Badge>
        ) : null}
        {p.tags.slice(0, 3).map((t) => (
          <Badge key={t}>#{t}</Badge>
        ))}
      </div>
      <div className="mt-3 flex items-center justify-between gap-2 border-t border-border pt-3">
        <span className="text-[11px] text-fg-subtle tabular-nums">{p.uses ? `Used ${p.uses}× · ` : ""}Updated {formatRelative(p.updatedAt)}</span>
        <Button size="sm" variant="secondary" onClick={() => actions.onUse(p)}>
          <Play /> Use
        </Button>
      </div>
    </li>
  );
}