vfxreview/components/assets/AssetCard.tsx

"use client";

import { useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { TaskList } from "@/components/tasks/TaskList";
import { NewTaskDialog } from "@/components/tasks/NewTaskDialog";
import { cn } from "@/lib/utils";
import { getInitials } from "@/lib/utils";
import {
  ChevronDown,
  ChevronRight,
  Package,
  CalendarDays,
  CheckCircle2,
} from "lucide-react";
import { ShotStatus } from "@prisma/client";
import { formatDistanceToNow } from "date-fns";

const STATUS_CONFIG: Record<
  ShotStatus,
  { label: string; color: string }
> = {
  WAITING: { label: "Waiting", color: "bg-zinc-500/10 text-zinc-400 border-zinc-500/20" },
  IN_PROGRESS: { label: "In Progress", color: "bg-blue-500/10 text-blue-400 border-blue-500/20" },
  IN_REVIEW: { label: "In Review", color: "bg-purple-500/10 text-purple-400 border-purple-500/20" },
  REVISIONS: { label: "Revisions", color: "bg-orange-500/10 text-orange-400 border-orange-500/20" },
  COMPLETE: { label: "Complete", color: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20" },
};

const PRIORITY_DOT: Record<string, string> = {
  LOW: "bg-zinc-500", NORMAL: "bg-blue-500", HIGH: "bg-amber-500", URGENT: "bg-red-500",
};

interface Artist {
  id: string;
  name: string | null;
  email: string;
}

interface AssetCardProps {
  asset: {
    id: string;
    assetCode: string;
    name: string;
    description: string | null;
    status: ShotStatus;
    priority: string;
    dueDate: Date | null;
    lead?: { id: string; name: string | null; email: string; image: string | null } | null;
    tasks: any[];
    _count?: { tasks: number };
  };
  projectId: string;
  artists: Artist[];
  canManage?: boolean;
}

export function AssetCard({ asset, projectId, artists, canManage = false }: AssetCardProps) {
  const [expanded, setExpanded] = useState(false);
  const statusCfg = STATUS_CONFIG[asset.status] ?? STATUS_CONFIG.WAITING;
  const doneTasks = asset.tasks.filter((t: any) => t.status === "DONE").length;

  return (
    <div className="rounded-lg border border-border bg-card overflow-hidden">
      {/* Header */}
      <button
        type="button"
        onClick={() => setExpanded(!expanded)}
        className="w-full flex items-center gap-3 px-4 py-3 hover:bg-zinc-800/50 transition-colors text-left"
      >
        <div className={cn("w-1.5 h-1.5 rounded-full shrink-0", PRIORITY_DOT[asset.priority] ?? "bg-zinc-500")} />

        <Package className="h-4 w-4 text-zinc-400 shrink-0" />

        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <span className="font-mono text-sm font-medium text-zinc-300">{asset.assetCode}</span>
            <span className="text-sm text-white">{asset.name}</span>
          </div>
          {asset.description && (
            <p className="text-xs text-zinc-500 truncate">{asset.description}</p>
          )}
        </div>

        <div className="flex items-center gap-3 shrink-0">
          {asset.tasks.length > 0 && (
            <span className="text-xs text-zinc-500">
              <CheckCircle2 className="h-3 w-3 inline mr-1" />
              {doneTasks}/{asset.tasks.length}
            </span>
          )}

          <Badge className={cn("text-xs border px-1.5 py-0 h-5", statusCfg.color)}>
            {statusCfg.label}
          </Badge>

          {asset.dueDate && (
            <span className="text-xs text-zinc-500 hidden sm:flex items-center gap-1">
              <CalendarDays className="h-3 w-3" />
              {formatDistanceToNow(new Date(asset.dueDate), { addSuffix: true })}
            </span>
          )}

          {asset.lead && (
            <Avatar className="h-6 w-6">
              <AvatarImage src={asset.lead.image ?? undefined} />
              <AvatarFallback className="text-[10px]">
                {getInitials(asset.lead.name ?? asset.lead.email)}
              </AvatarFallback>
            </Avatar>
          )}

          {expanded ? (
            <ChevronDown className="h-4 w-4 text-zinc-500" />
          ) : (
            <ChevronRight className="h-4 w-4 text-zinc-500" />
          )}
        </div>
      </button>

      {/* Expanded task list */}
      {expanded && (
        <div className="px-4 pb-4 pt-2 border-t border-border bg-zinc-900/50">
          <TaskList
            tasks={asset.tasks}
            projectId={projectId}
            assetId={asset.id}
            artists={artists}
            canManage={canManage}
          />
        </div>
      )}
    </div>
  );
}