import Link from 'next/link';
import { Bookmark, FolderPlus, GitCompareArrows, Sparkles } from 'lucide-react';
import { toggleWatchAction } from '@/lib/account/actions';
import { cn } from '@/lib/format';

/**
 * Asset actions: Watch (server action, signs in first when anonymous), Add to collection, Compare,
 * Ask AI. Rendered inline on desktop and as a sticky bottom bar on phones (§165).
 */
export function AssetActions({ assetId, slug, watched = false, variant = 'inline', className }: { assetId: string; slug: string; watched?: boolean; variant?: 'inline' | 'bar'; className?: string }) {
  const back = `/asset/${slug}`;
  const btn = variant === 'bar' ? 'flex flex-1 flex-col items-center justify-center gap-0.5 rounded-md py-1.5 text-[10px] font-medium text-muted active:bg-inset' : 'inline-flex h-9 items-center gap-1.5 rounded-md border border-border bg-elevated px-3 text-[12px] font-medium text-fg hover:bg-inset';
  const icon = variant === 'bar' ? 'h-5 w-5' : 'h-3.5 w-3.5';
  return (
    <div className={cn(variant === 'bar' ? 'fixed inset-x-0 z-40 border-t border-border bg-elevated/95 backdrop-blur supports-[backdrop-filter]:bg-elevated/85 md:hidden' : 'flex flex-wrap gap-2', className)} style={variant === 'bar' ? { bottom: 'calc(var(--ri-tabbar-h, 0px) + env(safe-area-inset-bottom))' } : undefined}>
      <div className={cn(variant === 'bar' ? 'mx-auto flex max-w-lg items-stretch gap-1 px-2 py-1' : 'contents')}>
        <form action={toggleWatchAction} className={variant === 'bar' ? 'flex flex-1' : 'contents'}>
          <input type="hidden" name="targetType" value="asset" />
          <input type="hidden" name="targetId" value={assetId} />
          <input type="hidden" name="back" value={back} />
          <button type="submit" className={cn(btn, watched && (variant === 'bar' ? 'text-fg' : 'border-fg'))} aria-pressed={watched}>
            <Bookmark className={cn(icon, watched && 'fill-current')} />
            {watched ? 'Watching' : 'Watch'}
          </button>
        </form>
        <Link href={`/collections?add=${assetId}`} className={btn}>
          <FolderPlus className={icon} />
          {variant === 'bar' ? 'Collect' : 'Add to collection'}
        </Link>
        <Link href={`/compare?a=${slug}`} className={btn}>
          <GitCompareArrows className={icon} />
          Compare
        </Link>
        <Link href={`/research?asset=${slug}`} className={cn(btn, variant === 'inline' && 'border-transparent bg-accent text-accent-fg hover:opacity-90')}>
          <Sparkles className={icon} />
          Ask AI
        </Link>
      </div>
    </div>
  );
}