vfxreview/components/clients/ReviewSessionList.tsx

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { ExternalLink, Copy, Check, Trash2, Clock, Film, RotateCcw, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useToast } from "@/components/ui/use-toast";
import { cn, formatRelativeDate } from "@/lib/utils";

interface ReviewSession {
  id: string;
  token: string;
  label: string | null;
  email: string | null;
  expiresAt: Date | string | null;
  accessCount: number;
  isActive: boolean;
  allowedEpisodes: string[];
  project: { name: string };
}

interface ReviewSessionListProps {
  sessions: ReviewSession[];
}

const APP_URL = process.env.NEXT_PUBLIC_APP_URL ?? "";

export function ReviewSessionList({ sessions }: ReviewSessionListProps) {
  const [copiedId, setCopiedId] = useState<string | null>(null);
  const [deletingId, setDeletingId] = useState<string | null>(null);
  const [reactivatingId, setReactivatingId] = useState<string | null>(null);
  const { toast } = useToast();
  const router = useRouter();

  // Same token, new expiry — the URL the client already has starts working again.
  const handleReactivate = async (id: string, days: number) => {
    setReactivatingId(id);
    try {
      const res = await fetch(`/api/review-sessions?id=${id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ expiresInDays: days }),
      });
      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        throw new Error(body.error);
      }
      toast({ title: "Review link reactivated", description: `Valid for ${days} more days — same URL.` });
      router.refresh();
    } catch (e) {
      toast({
        title: "Failed to reactivate link",
        description: e instanceof Error && e.message ? e.message : undefined,
        variant: "destructive",
      });
    } finally {
      setReactivatingId(null);
    }
  };

  const handleCopy = async (token: string, id: string) => {
    const url = `${APP_URL}/client/${token}`;
    await navigator.clipboard.writeText(url);
    setCopiedId(id);
    setTimeout(() => setCopiedId(null), 2000);
  };

  const handleDeactivate = async (id: string) => {
    setDeletingId(id);
    try {
      const res = await fetch(`/api/review-sessions?id=${id}`, { method: "DELETE" });
      if (!res.ok) throw new Error();
      toast({ title: "Review link deactivated" });
      router.refresh();
    } catch {
      toast({ title: "Failed to deactivate link", variant: "destructive" });
    } finally {
      setDeletingId(null);
    }
  };

  if (sessions.length === 0) return null;

  return (
    <div>
      <h2 className="text-base font-semibold text-white mb-3">
        Active Review Links ({sessions.length})
      </h2>
      <div className="space-y-2">
        {sessions.map((session) => {
          const portalUrl = `${APP_URL}/client/${session.token}`;
          const expired =
            session.expiresAt && new Date(session.expiresAt) < new Date();

          return (
            <div
              key={session.id}
              className={cn(
                "flex items-center gap-4 p-4 rounded-xl border transition-all",
                expired
                  ? "border-zinc-800 bg-zinc-900/50 opacity-60"
                  : "border-zinc-800 bg-zinc-900"
              )}
            >
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2">
                  <p className="font-medium text-white text-sm">{session.label || "Untitled Review"}</p>
                  {expired && (
                    <span className="text-xs px-1.5 py-0.5 rounded bg-red-500/10 text-red-400">
                      Expired
                    </span>
                  )}
                </div>
                <div className="flex items-center gap-3 mt-1">
                  <span className="text-xs text-zinc-500">{session.project.name}</span>
                  {session.email && (
                    <>
                      <span className="text-zinc-700">·</span>
                      <span className="text-xs text-zinc-500">{session.email}</span>
                    </>
                  )}
                  {session.expiresAt && (
                    <>
                      <span className="text-zinc-700">·</span>
                      <span className="text-xs text-zinc-500 flex items-center gap-1">
                        <Clock className="h-3 w-3" />
                        {expired ? "Expired" : `Expires ${formatRelativeDate(session.expiresAt)}`}
                      </span>
                    </>
                  )}
                </div>
                <div className="font-mono text-xs text-zinc-600 truncate mt-1">{portalUrl}</div>
                {session.allowedEpisodes && session.allowedEpisodes.length > 0 && (
                  <div className="flex items-center gap-1.5 mt-1.5 flex-wrap">
                    <Film className="h-3 w-3 text-violet-400 shrink-0" />
                    {session.allowedEpisodes.map((ep) => (
                      <span
                        key={ep}
                        className="text-xs px-1.5 py-0.5 rounded bg-violet-500/10 text-violet-300 border border-violet-500/20"
                      >
                        {ep}
                      </span>
                    ))}
                  </div>
                )}
              </div>

              <div className="flex items-center gap-1.5 shrink-0">
                <span className="text-xs text-zinc-500 mr-2">
                  {session.accessCount} view{session.accessCount !== 1 ? "s" : ""}
                </span>
                {expired && (
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button
                        size="sm"
                        variant="outline"
                        className="h-7 px-2.5 gap-1.5 text-emerald-400 hover:bg-emerald-500/10 border-emerald-500/30"
                        disabled={reactivatingId === session.id}
                      >
                        {reactivatingId === session.id ? (
                          <Loader2 className="h-3.5 w-3.5 animate-spin" />
                        ) : (
                          <RotateCcw className="h-3.5 w-3.5" />
                        )}
                        Reactivate
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuLabel className="text-xs text-zinc-500">Valid for</DropdownMenuLabel>
                      {[7, 14, 30, 60, 90].map((d) => (
                        <DropdownMenuItem key={d} onClick={() => handleReactivate(session.id, d)}>
                          {d} days
                        </DropdownMenuItem>
                      ))}
                    </DropdownMenuContent>
                  </DropdownMenu>
                )}
                <Button
                  size="sm"
                  variant="outline"
                  className="h-7 px-2.5 gap-1.5"
                  onClick={() => handleCopy(session.token, session.id)}
                >
                  {copiedId === session.id ? (
                    <Check className="h-3.5 w-3.5 text-emerald-400" />
                  ) : (
                    <Copy className="h-3.5 w-3.5" />
                  )}
                  {copiedId === session.id ? "Copied" : "Copy"}
                </Button>
                <a href={portalUrl} target="_blank" rel="noopener noreferrer">
                  <Button size="sm" variant="outline" className="h-7 px-2">
                    <ExternalLink className="h-3.5 w-3.5" />
                  </Button>
                </a>
                <Button
                  size="sm"
                  variant="outline"
                  className="h-7 px-2 text-red-400 hover:bg-red-500/10 border-red-500/20"
                  onClick={() => handleDeactivate(session.id)}
                  disabled={deletingId === session.id}
                >
                  <Trash2 className="h-3.5 w-3.5" />
                </Button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}