ClaudeMarketing/components/asset-card.tsx

"use client";

import { useState, useEffect } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Play, Copy, Sparkles, Send, ThumbsUp, ThumbsDown } from "lucide-react";
import { RepurposeModal } from "./repurpose-modal";
import { VariationModal } from "./variation-modal";
import { ThumbsDownModal } from "./thumbs-down-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;
  onRefresh?: () => void;
}

export function AssetCard({
  asset,
  selected,
  onSelect,
  onPushToPostiz,
  onRefresh,
}: AssetCardProps) {
  const [repurposeOpen, setRepurposeOpen] = useState(false);
  const [variationOpen, setVariationOpen] = useState(false);
  const [thumbsDownOpen, setThumbsDownOpen] = useState(false);
  const [vote, setVote] = useState<"up" | "down" | null>(null);

  let metadata: Record<string, unknown> = {};
  if (asset.metadata) {
    try {
      metadata = JSON.parse(asset.metadata);
    } catch {
      // metadata may be truncated — ignore parse errors
    }
  }
  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 isVisual = isImage || isVideo;

  useEffect(() => {
    if (!isVisual) return;
    fetch(`/api/assets/${asset.id}/preference`)
      .then((r) => r.json())
      .then((data) => setVote(data.vote ?? null))
      .catch(() => {});
  }, [asset.id, isVisual]);

  async function handleThumbsUp() {
    const newVote = vote === "up" ? null : "up";
    setVote(newVote); // Optimistic
    try {
      const res = await fetch(`/api/assets/${asset.id}/preference`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ vote: "up" }),
      });
      if (res.ok) {
        const data = await res.json();
        setVote(data.vote);
      }
    } catch (err) {
      console.error("Preference API failed:", err);
    }
  }

  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>

        {typeof metadata.caption === "string" && (
          <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>

        {/* Style Preference Buttons */}
        {isVisual && (
          <div className="flex items-center gap-1.5">
            <button
              onClick={handleThumbsUp}
              className={`flex items-center gap-1 rounded-md border px-2 py-1 text-xs transition-colors ${
                vote === "up"
                  ? "border-green-300 bg-green-50 text-green-700"
                  : "border-border text-muted-foreground hover:bg-muted/50"
              }`}
            >
              <ThumbsUp className="h-3 w-3" />
              {vote === "up" ? "Liked" : "Like"}
            </button>
            <button
              onClick={() => {
                if (vote === "down") {
                  // Toggle off — optimistic
                  setVote(null);
                  fetch(`/api/assets/${asset.id}/preference`, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ vote: "down" }),
                  })
                    .then((r) => r.json())
                    .then((data) => setVote(data.vote))
                    .catch(() => {});
                } else {
                  setThumbsDownOpen(true);
                }
              }}
              className={`flex items-center gap-1 rounded-md border px-2 py-1 text-xs transition-colors ${
                vote === "down"
                  ? "border-red-300 bg-red-50 text-red-700"
                  : "border-border text-muted-foreground hover:bg-muted/50"
              }`}
            >
              <ThumbsDown className="h-3 w-3" />
              {vote === "down" ? "Disliked" : "Dislike"}
            </button>
          </div>
        )}

        {/* Actions */}
        {(isImage || isVideo) && (
          <div className="flex flex-col gap-1.5">
            {onPushToPostiz && (
              <Button
                size="sm"
                variant="outline"
                className="w-full"
                onClick={() => onPushToPostiz([asset.id])}
              >
                <Send className="h-3 w-3" />
                Push to Postiz
              </Button>
            )}
            {isImage && (
              <>
                <Button
                  size="sm"
                  variant="outline"
                  className="w-full"
                  onClick={() => setRepurposeOpen(true)}
                >
                  <Copy className="h-3 w-3" />
                  Repurpose
                </Button>
                <Button
                  size="sm"
                  variant="outline"
                  className="w-full"
                  onClick={() => setVariationOpen(true)}
                >
                  <Sparkles className="h-3 w-3" />
                  Spawn Variations
                </Button>
              </>
            )}
          </div>
        )}
      </div>

      {/* Modals */}
      {repurposeOpen && (
        <RepurposeModal
          assetId={asset.id}
          onClose={() => {
            setRepurposeOpen(false);
            onRefresh?.();
          }}
        />
      )}
      {variationOpen && (
        <VariationModal
          assetId={asset.id}
          assetName={asset.fileName}
          onClose={() => setVariationOpen(false)}
        />
      )}
      {thumbsDownOpen && (
        <ThumbsDownModal
          assetId={asset.id}
          onClose={() => setThumbsDownOpen(false)}
          onSubmitted={() => setVote("down")}
        />
      )}
    </div>
  );
}