ClaudeMarketing/components/asset-card.tsx

"use client";

import { useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Play, Copy, Sparkles, Send } from "lucide-react";
import { RepurposeModal } from "./repurpose-modal";
import { VariationModal } from "./variation-modal";

interface Asset {
  id: string;
  type: string;
  platform?: string | null;
  format?: string | null;
  fileName: string;
  filePath: string;
  dimensions?: string | null;
  metadata?: string | null;
  status: string;
  createdAt: string;
  campaign?: { name: string };
  parentAsset?: { id: string; fileName: string } | null;
}

interface AssetCardProps {
  asset: Asset;
  selected?: boolean;
  onSelect?: (id: string) => void;
  onPushToPostiz?: (assetIds: string[]) => void;
}

export function AssetCard({
  asset,
  selected,
  onSelect,
  onPushToPostiz,
}: AssetCardProps) {
  const [repurposeOpen, setRepurposeOpen] = useState(false);
  const [variationOpen, setVariationOpen] = useState(false);

  const metadata = asset.metadata ? JSON.parse(asset.metadata) : {};
  const isImage = asset.type === "image" || asset.format === "png" || asset.format === "jpg";
  const isVideo = asset.type === "video" || asset.format === "mp4";
  const fileSrc = `/api/files/${asset.filePath}`;

  const pathLower = asset.filePath.toLowerCase();
  const source = pathLower.includes("/gemini/")
    ? "Gemini"
    : pathLower.includes("/posters/")
      ? "Canvas Design"
      : isVideo
        ? "Remotion"
        : isImage
          ? "Playwright"
          : null;

  const sourceColors: Record<string, string> = {
    Gemini: "text-purple-600 border-purple-200 bg-purple-50",
    "Canvas Design": "text-amber-600 border-amber-200 bg-amber-50",
    Remotion: "text-blue-600 border-blue-200 bg-blue-50",
    Playwright: "text-emerald-600 border-emerald-200 bg-emerald-50",
  };

  return (
    <div
      className={`rounded-lg border overflow-hidden transition-colors ${
        selected ? "ring-2 ring-primary" : ""
      }`}
    >
      {/* Preview */}
      <div
        className="relative aspect-square bg-muted cursor-pointer"
        onClick={() => onSelect?.(asset.id)}
      >
        {isImage && (
          <a
            href={fileSrc}
            target="_blank"
            rel="noopener noreferrer"
            onClick={(e) => e.stopPropagation()}
          >
            <img
              src={fileSrc}
              alt={asset.fileName}
              className="h-full w-full object-cover"
            />
          </a>
        )}
        {isVideo && (
          <>
            <video
              src={`${fileSrc}#t=0.5`}
              className="h-full w-full object-cover"
              muted
              playsInline
              preload="metadata"
            />
            <a
              href={fileSrc}
              target="_blank"
              rel="noopener noreferrer"
              onClick={(e) => e.stopPropagation()}
              className="absolute inset-0 flex items-center justify-center bg-black/0 hover:bg-black/40 transition-colors group/play"
            >
              <div className="rounded-full bg-white/90 p-3 opacity-0 group-hover/play:opacity-100 transition-opacity shadow-lg">
                <Play className="h-6 w-6 text-foreground fill-foreground" />
              </div>
            </a>
          </>
        )}
        {!isImage && !isVideo && (
          <a
            href={`/api/files/render/${asset.filePath}`}
            target="_blank"
            rel="noopener noreferrer"
            onClick={(e) => e.stopPropagation()}
            className="flex h-full flex-col items-center justify-center gap-2 px-4 text-center hover:bg-muted/50 transition-colors"
          >
            <span className="text-xs font-medium text-muted-foreground/60 uppercase tracking-wider">
              {asset.type}
            </span>
            <span className="text-sm font-medium text-muted-foreground line-clamp-2">
              {asset.fileName}
            </span>
          </a>
        )}
      </div>

      {/* Info */}
      <div className="p-3 space-y-2 overflow-hidden">
        <div className="flex items-center gap-1.5 flex-wrap">
          {source && (
            <Badge variant="outline" className={`text-xs ${sourceColors[source] || ""}`}>
              {source}
            </Badge>
          )}
          {asset.platform && (
            <Badge variant="outline" className="text-xs">
              {asset.platform}
            </Badge>
          )}
          {asset.dimensions && (
            <Badge variant="secondary" className="text-xs">
              {asset.dimensions}
            </Badge>
          )}
        </div>

        {metadata.caption && (
          <p className="text-xs text-muted-foreground line-clamp-2">
            {metadata.caption}
          </p>
        )}

        {asset.parentAsset && (
          <p className="text-xs text-muted-foreground italic">
            Derived from: {asset.parentAsset.fileName}
          </p>
        )}

        <div className="flex items-center gap-2 text-xs text-muted-foreground">
          {asset.campaign && <span>{asset.campaign.name}</span>}
          {asset.campaign && asset.createdAt && <span>·</span>}
          {asset.createdAt && (
            <span>
              {new Date(asset.createdAt).toLocaleDateString(undefined, {
                month: "short",
                day: "numeric",
                year: "numeric",
              })}
            </span>
          )}
        </div>

        {/* Actions */}
        {(isImage || isVideo) && (
          <div className="flex gap-2 flex-wrap">
            {onPushToPostiz && (
              <Button
                size="sm"
                variant="outline"
                className="flex-1 min-w-0 overflow-hidden"
                onClick={() => onPushToPostiz([asset.id])}
              >
                <Send className="h-3 w-3 shrink-0" />
                <span className="truncate">Postiz</span>
              </Button>
            )}
            {isImage && (
              <>
                <Button
                  size="sm"
                  variant="outline"
                  className="flex-1 min-w-0 overflow-hidden"
                  onClick={() => setRepurposeOpen(true)}
                >
                  <Copy className="h-3 w-3 shrink-0" />
                  <span className="truncate">Repurpose</span>
                </Button>
                <Button
                  size="sm"
                  variant="outline"
                  className="flex-1 min-w-0 overflow-hidden"
                  onClick={() => setVariationOpen(true)}
                >
                  <Sparkles className="h-3 w-3 shrink-0" />
                  <span className="truncate">Variations</span>
                </Button>
              </>
            )}
          </div>
        )}
      </div>

      {/* Modals */}
      {repurposeOpen && (
        <RepurposeModal
          assetId={asset.id}
          onClose={() => setRepurposeOpen(false)}
        />
      )}
      {variationOpen && (
        <VariationModal
          assetId={asset.id}
          assetName={asset.fileName}
          onClose={() => setVariationOpen(false)}
        />
      )}
    </div>
  );
}