client review by episode filter added

components/clients/ShareReviewDialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -17,7 +17,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
 import { useToast } from "@/components/ui/use-toast";
-import { Copy, Check, ExternalLink, Eye, EyeOff, Lock } from "lucide-react";
+import { Copy, Check, ExternalLink, Eye, EyeOff, Lock, Film } from "lucide-react";
 import {
   Select,
   SelectContent,
@@ -25,6 +25,319 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+const schema = z.object({
+  projectId: z.string().min(1, "Select a project"),
+  label: z.string().min(1, "Label is required"),
+  email: z.string().email("Invalid email"),
+  expiresInDays: z.number().int().positive().default(30),
+  password: z.string().optional(),
+});
+
+type FormValues = z.infer<typeof schema>;
+
+interface Project {
+  id: string;
+  name: string;
+  code: string;
+}
+
+interface ShareReviewDialogProps {
+  children: React.ReactNode;
+  clientId: string;
+  clientEmail: string;
+  projects: Project[];
+}
+
+export function ShareReviewDialog({
+  children,
+  clientEmail,
+  projects,
+}: ShareReviewDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [portalUrl, setPortalUrl] = useState<string | null>(null);
+  const [isPasswordProtected, setIsPasswordProtected] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [episodes, setEpisodes] = useState<string[]>([]);
+  const [selectedEpisodes, setSelectedEpisodes] = useState<string[]>([]);
+  const [loadingEpisodes, setLoadingEpisodes] = useState(false);
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    setValue,
+    reset,
+    formState: { errors },
+  } = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      projectId: projects[0]?.id ?? "",
+      label: "Review Round 1",
+      email: clientEmail,
+      expiresInDays: 30,
+      password: "",
+    },
+  });
+
+  const selectedProjectId = watch("projectId");
+
+  // Load episodes when project changes
+  useEffect(() => {
+    if (!selectedProjectId) return;
+    setSelectedEpisodes([]);
+    setLoadingEpisodes(true);
+    fetch(`/api/projects/${selectedProjectId}/episodes`)
+      .then((r) => r.json())
+      .then((data) => setEpisodes(data.episodes ?? []))
+      .catch(() => setEpisodes([]))
+      .finally(() => setLoadingEpisodes(false));
+  }, [selectedProjectId]);
+
+  const toggleEpisode = (ep: string) => {
+    setSelectedEpisodes((prev) =>
+      prev.includes(ep) ? prev.filter((e) => e !== ep) : [...prev, ep]
+    );
+  };
+
+  const handleCopy = async () => {
+    if (!portalUrl) return;
+    await navigator.clipboard.writeText(portalUrl);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const handleReset = () => {
+    setPortalUrl(null);
+    setIsPasswordProtected(false);
+    setSelectedEpisodes([]);
+    reset({
+      projectId: projects[0]?.id ?? "",
+      label: "Review Round 1",
+      email: clientEmail,
+      expiresInDays: 30,
+      password: "",
+    });
+  };
+
+  const onSubmit = async (values: FormValues) => {
+    setLoading(true);
+    try {
+      const res = await fetch("/api/review-sessions", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          ...values,
+          password: values.password?.trim() || undefined,
+          allowedEpisodes: selectedEpisodes.length > 0 ? selectedEpisodes : [],
+        }),
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error(err.error ?? "Failed to create review link");
+      }
+      const data = await res.json();
+      setPortalUrl(data.portalUrl);
+      setIsPasswordProtected(!!(values.password?.trim()));
+      router.refresh();
+    } catch (e) {
+      toast({
+        title: "Failed to create review link",
+        description: e instanceof Error ? e.message : undefined,
+        variant: "destructive",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(o) => {
+        if (!o) { setPortalUrl(null); }
+        setOpen(o);
+      }}
+    >
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Share Review Link</DialogTitle>
+        </DialogHeader>
+
+        {portalUrl ? (
+          <div className="space-y-4">
+            <p className="text-sm text-zinc-400">
+              Your review link is ready. Copy it and share it with your client.
+            </p>
+            {isPasswordProtected && (
+              <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-amber-500/10 border border-amber-500/20 text-amber-400 text-xs">
+                <Lock className="h-3.5 w-3.5 shrink-0" />
+                This link is password protected. Share the password separately.
+              </div>
+            )}
+            {selectedEpisodes.length > 0 && (
+              <div className="flex items-start gap-2 px-3 py-2 rounded-lg bg-violet-500/10 border border-violet-500/20 text-violet-300 text-xs">
+                <Film className="h-3.5 w-3.5 shrink-0 mt-0.5" />
+                <span>Scoped to {selectedEpisodes.length === 1 ? "episode" : "episodes"}: <span className="font-medium">{selectedEpisodes.join(", ")}</span></span>
+              </div>
+            )}
+            <div className="flex items-center gap-2 p-3 rounded-lg bg-zinc-800 border border-zinc-700">
+              <ExternalLink className="h-4 w-4 text-zinc-500 shrink-0" />
+              <span className="flex-1 text-sm font-mono text-zinc-300 truncate">{portalUrl}</span>
+              <Button
+                size="sm"
+                variant="outline"
+                className="h-7 px-2.5 gap-1.5 shrink-0"
+                onClick={handleCopy}
+              >
+                {copied ? (
+                  <Check className="h-3.5 w-3.5 text-emerald-400" />
+                ) : (
+                  <Copy className="h-3.5 w-3.5" />
+                )}
+                {copied ? "Copied!" : "Copy"}
+              </Button>
+            </div>
+            <DialogFooter className="flex gap-2">
+              <Button variant="outline" onClick={handleReset}>
+                Create Another
+              </Button>
+              <Button onClick={() => setOpen(false)}>Done</Button>
+            </DialogFooter>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+            <div className="space-y-1.5">
+              <Label htmlFor="projectId">Project *</Label>
+              <Select
+                defaultValue={watch("projectId")}
+                onValueChange={(v) => setValue("projectId", v)}
+              >
+                <SelectTrigger id="projectId">
+                  <SelectValue placeholder="Select project" />
+                </SelectTrigger>
+                <SelectContent>
+                  {projects.map((p) => (
+                    <SelectItem key={p.id} value={p.id}>
+                      {p.name} <span className="text-zinc-500 text-xs ml-1">({p.code})</span>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {errors.projectId && <p className="text-xs text-red-400">{errors.projectId.message}</p>}
+            </div>
+
+            {/* Episode filter — only shown when the project has episodes */}
+            {!loadingEpisodes && episodes.length > 0 && (
+              <div className="space-y-1.5">
+                <Label className="flex items-center gap-1.5">
+                  <Film className="h-3.5 w-3.5 text-zinc-400" />
+                  Episodes <span className="text-zinc-500 font-normal">(optional — leave blank for all)</span>
+                </Label>
+                <div className="flex flex-wrap gap-1.5 p-2.5 rounded-lg border border-zinc-700 bg-zinc-900">
+                  {episodes.map((ep) => {
+                    const active = selectedEpisodes.includes(ep);
+                    return (
+                      <button
+                        key={ep}
+                        type="button"
+                        onClick={() => toggleEpisode(ep)}
+                        className={cn(
+                          "px-2.5 py-1 rounded-md text-xs font-medium transition-colors border",
+                          active
+                            ? "bg-violet-600 border-violet-500 text-white"
+                            : "bg-zinc-800 border-zinc-700 text-zinc-300 hover:border-zinc-500"
+                        )}
+                      >
+                        {ep}
+                      </button>
+                    );
+                  })}
+                </div>
+                {selectedEpisodes.length > 0 && (
+                  <p className="text-xs text-zinc-500">
+                    Showing shots from: <span className="text-zinc-300">{selectedEpisodes.join(", ")}</span>
+                  </p>
+                )}
+              </div>
+            )}
+
+            <div className="space-y-1.5">
+              <Label htmlFor="label">Label *</Label>
+              <Input id="label" placeholder="e.g. Review Round 1" {...register("label")} />
+              {errors.label && <p className="text-xs text-red-400">{errors.label.message}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="email">Client Email *</Label>
+              <Input id="email" type="email" {...register("email")} />
+              {errors.email && <p className="text-xs text-red-400">{errors.email.message}</p>}
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="expiresInDays">Expires In (days)</Label>
+              <Select
+                defaultValue={String(watch("expiresInDays"))}
+                onValueChange={(v) => setValue("expiresInDays", Number(v))}
+              >
+                <SelectTrigger id="expiresInDays">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {[7, 14, 30, 60, 90].map((d) => (
+                    <SelectItem key={d} value={String(d)}>
+                      {d} days
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="password" className="flex items-center gap-1.5">
+                <Lock className="h-3.5 w-3.5 text-zinc-400" />
+                Password <span className="text-zinc-500 font-normal">(optional)</span>
+              </Label>
+              <div className="relative">
+                <Input
+                  id="password"
+                  type={showPassword ? "text" : "password"}
+                  placeholder="Leave blank for no password"
+                  className="pr-9"
+                  {...register("password")}
+                />
+                <button
+                  type="button"
+                  className="absolute right-2.5 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-200 transition-colors"
+                  onClick={() => setShowPassword((v) => !v)}
+                  tabIndex={-1}
+                >
+                  {showPassword ? (
+                    <EyeOff className="h-4 w-4" />
+                  ) : (
+                    <Eye className="h-4 w-4" />
+                  )}
+                </button>
+              </div>
+            </div>
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={loading || projects.length === 0}>
+                {loading ? "Generating..." : "Create Link"}
+              </Button>
+            </DialogFooter>
+          </form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
 
 const schema = z.object({
   projectId: z.string().min(1, "Select a project"),