"use client";

import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
import { formatRelativeDate, formatFileSize } from "@/lib/utils";
import {
  Film,
  Clock,
  MoreHorizontal,
  ExternalLink,
  CheckCircle2,
  XCircle,
  AlertCircle,
  Star,
  ChevronDown,
  ChevronUp,
  MessageSquare,
} from "lucide-react";
import type { VersionWithDetails } from "@/types";
import { submitApproval } from "@/actions/approvals";
import { useToast } from "@/components/ui/use-toast";

interface VersionListProps {
  shotId: string;
  versions: VersionWithDetails[];
  currentVersionId?: string;
  onVersionSelect?: (versionId: string) => void;
  canApprove?: boolean;
}

const APPROVAL_STATUS_STYLES: Record<string, string> = {
  PENDING_REVIEW: "bg-amber-500/10 text-amber-400 border-amber-500/20",
  APPROVED: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
  REJECTED: "bg-red-500/10 text-red-400 border-red-500/20",
  NEEDS_CHANGES: "bg-orange-500/10 text-orange-400 border-orange-500/20",
};

const APPROVAL_ICONS: Record<string, React.ElementType> = {
  PENDING_REVIEW: Clock,
  APPROVED: CheckCircle2,
  REJECTED: XCircle,
  NEEDS_CHANGES: AlertCircle,
};

function getApprovalLabel(status: string) {
  switch (status) {
    case "PENDING_REVIEW": return "Pending";
    case "APPROVED": return "Approved";
    case "REJECTED": return "Rejected";
    case "NEEDS_CHANGES": return "Needs Changes";
    default: return status;
  }
}

export function VersionList({
  shotId,
  versions,
  currentVersionId,
  onVersionSelect,
  canApprove = false,
}: VersionListProps) {
  const [expanded, setExpanded] = useState<string | null>(currentVersionId ?? null);
  const { toast } = useToast();
  const router = useRouter();

  if (versions.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 versions uploaded yet</p>
      </div>
    );
  }

  const handleApprove = async (versionId: string) => {
    try {
      await submitApproval({ versionId, status: "APPROVED", notes: "" });
      toast({ title: "Version approved" });
      router.refresh();
    } catch {
      toast({ title: "Failed to approve", variant: "destructive" });
    }
  };

  const handleReject = async (versionId: string) => {
    try {
      await submitApproval({ versionId, status: "REJECTED", notes: "Rejected from version list" });
      toast({ title: "Version rejected", variant: "destructive" });
      router.refresh();
    } catch {
      toast({ title: "Failed to reject", variant: "destructive" });
    }
  };

  return (
    <div className="space-y-2">
      {versions.map((version) => {
        const isActive = version.id === currentVersionId;
        const isExpanded = expanded === version.id;
        const StatusIcon = APPROVAL_ICONS[version.approvalStatus] ?? Clock;

        return (
          <div
            key={version.id}
            className={cn(
              "rounded-lg border transition-all",
              isActive
                ? "border-primary/40 bg-primary/5"
                : "border-border hover:border-border/80"
            )}
          >
            {/* Row */}
            <div className="flex items-center gap-3 px-3 py-2.5">
              {/* Version label + latest badge */}
              <div className="flex items-center gap-2 min-w-[80px]">
                <span className="font-mono text-sm font-semibold">
                  v{String(version.versionNumber).padStart(3, "0")}
                </span>
                {version.isLatest && (
                  <Tooltip>
                    <TooltipTrigger>
                      <Star className="h-3 w-3 text-amber-400 fill-amber-400" />
                    </TooltipTrigger>
                    <TooltipContent>Latest version</TooltipContent>
                  </Tooltip>
                )}
              </div>

              {/* Approval status */}
              <span
                className={cn(
                  "inline-flex items-center gap-1 px-2 py-0.5 rounded-full border text-xs",
                  APPROVAL_STATUS_STYLES[version.approvalStatus] ??
                    "bg-muted/30 text-muted-foreground border-border"
                )}
              >
                <StatusIcon className="h-3 w-3" />
                {getApprovalLabel(version.approvalStatus)}
              </span>

              {/* Meta */}
              <div className="flex-1 min-w-0 text-xs text-muted-foreground hidden sm:flex items-center gap-3">
                <span>{version.fps} fps</span>
                {version.duration && (
                  <span className="font-mono">{Math.round(version.duration)}s</span>
                )}
                <span>{formatRelativeDate(version.createdAt)}</span>
              </div>

              {/* Actions */}
              <div className="flex items-center gap-1.5 ml-auto">
                <Button
                  variant={isActive ? "default" : "ghost"}
                  size="sm"
                  className="h-7 text-xs"
                  onClick={() => onVersionSelect?.(version.id)}
                >
                  {isActive ? "Reviewing" : "Review"}
                </Button>

                <Button
                  variant="ghost"
                  size="icon-sm"
                  className="text-muted-foreground"
                  onClick={() => setExpanded(isExpanded ? null : version.id)}
                >
                  {isExpanded ? (
                    <ChevronUp className="h-3.5 w-3.5" />
                  ) : (
                    <ChevronDown className="h-3.5 w-3.5" />
                  )}
                </Button>

                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="icon-sm" className="text-muted-foreground">
                      <MoreHorizontal className="h-4 w-4" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    <DropdownMenuItem asChild>
                      <Link href={`/review/${version.id}`} target="_blank">
                        <ExternalLink className="h-3.5 w-3.5 mr-2" />
                        Open review page
                      </Link>
                    </DropdownMenuItem>
                    {canApprove && (
                      <>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem
                          className="text-emerald-500"
                          onClick={() => handleApprove(version.id)}
                        >
                          <CheckCircle2 className="h-3.5 w-3.5 mr-2" />
                          Approve
                        </DropdownMenuItem>
                        <DropdownMenuItem
                          className="text-red-500"
                          onClick={() => handleReject(version.id)}
                        >
                          <XCircle className="h-3.5 w-3.5 mr-2" />
                          Reject
                        </DropdownMenuItem>
                      </>
                    )}
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>
            </div>

            {/* Expanded detail */}
            {isExpanded && (
              <div className="border-t border-border/50 px-3 py-2.5 text-xs text-muted-foreground space-y-2">
                {version.notes && (
                  <p className="text-foreground/80 italic">&ldquo;{version.notes}&rdquo;</p>
                )}
                <div className="flex flex-wrap gap-x-4 gap-y-1">
                  <span>
                    <span className="text-foreground">Uploaded by</span>{" "}
                    {version.artist?.name ?? "Unknown"}
                  </span>
                  {version.frameCount && (
                    <span>
                      <span className="text-foreground">{version.frameCount}</span> frames
                    </span>
                  )}
                  {version.fileSize && (
                    <span>{formatFileSize(version.fileSize)}</span>
                  )}
                </div>

                {/* Approval history */}
                {version.approvals && version.approvals.length > 0 && (
                  <div className="mt-2 space-y-1.5 pt-2 border-t border-border/40">
                    <p className="text-[10px] uppercase tracking-wider text-muted-foreground/60 font-medium flex items-center gap-1">
                      <MessageSquare className="h-3 w-3" />
                      Review history
                    </p>
                    {version.approvals.map((approval) => {
                      const statusStyles: Record<string, string> = {
                        APPROVED: "text-emerald-400",
                        REJECTED: "text-red-400",
                        NEEDS_CHANGES: "text-orange-400",
                        PENDING_REVIEW: "text-amber-400",
                      };
                      const StatusIcon = APPROVAL_ICONS[approval.status] ?? Clock;
                      return (
                        <div key={approval.id} className="flex gap-2">
                          <StatusIcon
                            className={cn("h-3.5 w-3.5 mt-0.5 shrink-0", statusStyles[approval.status])}
                          />
                          <div className="flex-1 min-w-0">
                            <span className={cn("font-medium", statusStyles[approval.status])}>
                              {getApprovalLabel(approval.status)}
                            </span>
                            <span className="text-muted-foreground/70"> by </span>
                            <span className="text-foreground/80">
                              {approval.user.name ?? "Reviewer"}
                            </span>
                            {approval.notes && (
                              <p className="mt-0.5 text-foreground/70 italic leading-snug">
                                &ldquo;{approval.notes}&rdquo;
                              </p>
                            )}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                )}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}