"use client";

import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { cn, getInitials, formatRelativeDate } from "@/lib/utils";
import {
  ArrowUpRight,
  Clock,
  CheckCircle2,
  AlertCircle,
  Film,
  MessageSquare,
} from "lucide-react";
import type { ShotWithDetails } from "@/types";

interface ShotQueueProps {
  shots: ShotWithDetails[];
  projectId?: string;
  title?: string;
}

const STATUS_STYLES: Record<string, string> = {
  WAITING: "text-zinc-400",
  IN_PROGRESS: "text-blue-400",
  IN_REVIEW: "text-purple-400",
  REVISIONS: "text-orange-400",
  COMPLETE: "text-emerald-400",
};

const STATUS_ICONS: Record<string, React.ElementType> = {
  WAITING: Clock,
  IN_PROGRESS: Film,
  IN_REVIEW: AlertCircle,
  REVISIONS: AlertCircle,
  COMPLETE: CheckCircle2,
};

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

export function ShotQueue({ shots, projectId, title = "Shot Queue" }: ShotQueueProps) {
  if (shots.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-10 text-muted-foreground">
        <Film className="h-8 w-8 mb-3 opacity-30" />
        <p className="text-sm">No shots yet</p>
      </div>
    );
  }

  return (
    <div className="space-y-1">
      {shots.map((shot) => {
        const StatusIcon = STATUS_ICONS[shot.status] ?? Clock;
        const latestVersion = shot.versions?.[0];
        const openComments = shot.versions
          ?.reduce((sum, v) => sum + (v._count?.comments ?? 0), 0) ?? 0;

        const href = projectId
          ? `/projects/${projectId}/shots/${shot.id}`
          : `/projects/${(shot as any).projectId ?? "#"}/shots/${shot.id}`;

        return (
          <div
            key={shot.id}
            className="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-zinc-800 transition-colors group"
          >
            {/* Priority dot */}
            <div
              className={cn(
                "w-2 h-2 rounded-full shrink-0",
                PRIORITY_DOT[shot.priority] ?? "bg-zinc-500"
              )}
              title={shot.priority}
            />

            {/* Shot code */}
            <span className="font-mono text-xs text-muted-foreground w-32 shrink-0">
              {shot.shotCode}
            </span>

            {/* Description / name */}
            <span className="flex-1 text-sm truncate text-foreground/90">
              {shot.description ?? shot.shotCode}
            </span>

            {/* Open comments */}
            {openComments > 0 && (
              <span className="flex items-center gap-1 text-xs text-amber-400 shrink-0">
                <MessageSquare className="h-3 w-3" />
                {openComments}
              </span>
            )}

            {/* Status */}
            <span
              className={cn(
                "flex items-center gap-1 text-xs shrink-0",
                STATUS_STYLES[shot.status] ?? "text-muted-foreground"
              )}
            >
              <StatusIcon className="h-3 w-3" />
              <span className="hidden sm:inline">
                {shot.status.replace("_", " ")}
              </span>
            </span>

            {/* Artist */}
            {shot.artist && (
              <Avatar className="h-5 w-5 shrink-0">
                {shot.artist.image && <img src={shot.artist.image} alt="" />}
                <AvatarFallback className="text-[9px]">
                  {getInitials(shot.artist.name)}
                </AvatarFallback>
              </Avatar>
            )}

            {/* Open link */}
            <Link href={href}>
              <Button
                variant="ghost"
                size="icon-sm"
                className="opacity-0 group-hover:opacity-100 transition-opacity"
              >
                <ArrowUpRight className="h-3.5 w-3.5" />
              </Button>
            </Link>
          </div>
        );
      })}
    </div>
  );
}