vfxreview/components/clients/ShareReviewDialog.tsx

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  DialogTrigger,
} from "@/components/ui/dialog";
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 } from "lucide-react";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

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),
});

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 [copied, setCopied] = 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,
    },
  });

  const handleCopy = async () => {
    if (!portalUrl) return;
    await navigator.clipboard.writeText(portalUrl);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const handleReset = () => {
    setPortalUrl(null);
    reset({
      projectId: projects[0]?.id ?? "",
      label: "Review Round 1",
      email: clientEmail,
      expiresInDays: 30,
    });
  };

  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),
      });
      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);
      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>
            <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>
            <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>
            <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>
  );
}