vfxreview/components/clients/ReviewSessionList.tsx

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { ExternalLink, Copy, Check, Trash2, Clock } from "lucide-react";
import { Button } from "@/components/ui/button";
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;
  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 { toast } = useToast();
  const router = useRouter();

  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>
                <p className="font-mono text-xs text-zinc-600 truncate mt-1">{portalUrl}</p>
              </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>
                <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>
  );
}