vfxreview/components/projects/ProjectSettingsTab.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 { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Separator } from "@/components/ui/separator";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { updateProject } from "@/actions/projects";
import { useToast } from "@/components/ui/use-toast";
import { Settings, Building2, Users, Webhook } from "lucide-react";

const settingsSchema = z.object({
  name: z.string().min(1, "Name is required").max(100),
  code: z.string().min(1, "Code is required").max(20).regex(/^[A-Z0-9_\-]+$/i, "Alphanumeric, dash, underscore"),
  showId: z.string().min(1, "Show ID is required").max(10).regex(/^[A-Z0-9_]+$/i, "Letters, numbers, underscore only"),
  projectType: z.enum(["STANDARD", "EPISODIC"]),
  description: z.string().optional(),
  status: z.enum(["ACTIVE", "ON_HOLD", "COMPLETED", "ARCHIVED"]),
  clientId: z.string().optional(),
  producerId: z.string().optional(),
  supervisorId: z.string().optional(),
  dueDate: z.string().optional(),
  startDate: z.string().optional(),
  slackWebhook: z.string().optional(),
  slackChannel: z.string().optional(),
});

type SettingsFormValues = z.infer<typeof settingsSchema>;

interface Client {
  id: string;
  company: string;
}

interface TeamMember {
  id: string;
  name: string | null;
  email: string;
  role: string;
}

interface ProjectSettingsTabProps {
  project: {
    id: string;
    name: string;
    code: string;
    showId: string;
    projectType: "STANDARD" | "EPISODIC";
    description: string | null;
    status: string;
    clientId: string | null;
    producerId: string | null;
    supervisorId: string | null;
    dueDate: Date | null;
    startDate: Date | null;
    slackWebhook: string | null;
    slackChannel: string | null;
  };
  clients: Client[];
  teamMembers: TeamMember[];
}

const NONE = "__none__";

function toDateInput(d: Date | null | undefined) {
  if (!d) return "";
  return new Date(d).toISOString().substring(0, 10);
}

export function ProjectSettingsTab({ project, clients, teamMembers }: ProjectSettingsTabProps) {
  const { toast } = useToast();
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);

  const producers = teamMembers.filter((m) => ["ADMIN", "PRODUCER"].includes(m.role));
  const supervisors = teamMembers.filter((m) => ["ADMIN", "PRODUCER", "SUPERVISOR"].includes(m.role));

  const {
    register,
    handleSubmit,
    setValue,
    watch,
    formState: { errors, isDirty },
  } = useForm<SettingsFormValues>({
    resolver: zodResolver(settingsSchema),
    defaultValues: {
      name: project.name,
      code: project.code,
      showId: project.showId,
      projectType: project.projectType,
      description: project.description ?? "",
      status: project.status as SettingsFormValues["status"],
      clientId: project.clientId ?? NONE,
      producerId: project.producerId ?? NONE,
      supervisorId: project.supervisorId ?? NONE,
      dueDate: toDateInput(project.dueDate),
      startDate: toDateInput(project.startDate),
      slackWebhook: project.slackWebhook ?? "",
      slackChannel: project.slackChannel ?? "",
    },
  });

  const onSubmit = async (data: SettingsFormValues) => {
    setIsSubmitting(true);
    try {
      await updateProject({
        id: project.id,
        name: data.name,
        code: data.code,
        showId: data.showId,
        projectType: data.projectType,
        description: data.description || null,
        status: data.status as any,
        clientId: data.clientId === NONE ? null : data.clientId || null,
        producerId: data.producerId === NONE ? null : data.producerId || null,
        supervisorId: data.supervisorId === NONE ? null : data.supervisorId || null,
        dueDate: data.dueDate || null,
        startDate: data.startDate || null,
        slackWebhook: data.slackWebhook || null,
        slackChannel: data.slackChannel || null,
      });
      toast({ title: "Project settings saved" });
      router.refresh();
    } catch (err) {
      toast({
        title: "Failed to save settings",
        description: (err as Error).message,
        variant: "destructive",
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-8 max-w-2xl">

      {/* ── General ── */}
      <section className="space-y-4">
        <div className="flex items-center gap-2">
          <Settings className="h-4 w-4 text-zinc-400" />
          <h2 className="text-sm font-semibold text-zinc-200">General</h2>
        </div>
        <Separator />

        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-1.5 col-span-2">
            <Label htmlFor="name">Project Name</Label>
            <Input id="name" {...register("name")} />
            {errors.name && <p className="text-xs text-destructive">{errors.name.message}</p>}
          </div>

          <div className="space-y-1.5">
            <Label htmlFor="code">Project Code</Label>
            <Input id="code" className="uppercase font-mono" {...register("code")} />
            {errors.code && <p className="text-xs text-destructive">{errors.code.message}</p>}
          </div>

          <div className="space-y-1.5">
            <Label>Status</Label>
            <Select
              defaultValue={project.status}
              onValueChange={(v) => setValue("status", v as SettingsFormValues["status"], { shouldDirty: true })}
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="ACTIVE">Active</SelectItem>
                <SelectItem value="ON_HOLD">On Hold</SelectItem>
                <SelectItem value="COMPLETED">Completed</SelectItem>
                <SelectItem value="ARCHIVED">Archived</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-1.5 col-span-2">
            <Label htmlFor="description">Description</Label>
            <Textarea id="description" className="min-h-[80px]" {...register("description")} />
          </div>

          <div className="space-y-1.5">
            <Label htmlFor="startDate">Start Date</Label>
            <Input id="startDate" type="date" {...register("startDate")} />
          </div>

          <div className="space-y-1.5">
            <Label htmlFor="dueDate">Due Date</Label>
            <Input id="dueDate" type="date" {...register("dueDate")} />
          </div>
        </div>
      </section>

      {/* ── Shot Naming ── */}
      <section className="space-y-4">
        <div className="flex items-center gap-2">
          <Settings className="h-4 w-4 text-zinc-400" />
          <h2 className="text-sm font-semibold text-zinc-200">Shot Naming</h2>
        </div>
        <Separator />

        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-1.5">
            <Label htmlFor="showId">Show ID</Label>
            <Input id="showId" className="uppercase font-mono" maxLength={10} {...register("showId")} />
            {errors.showId && <p className="text-xs text-destructive">{errors.showId.message}</p>}
            <p className="text-xs text-muted-foreground">Used in shot codes, e.g. SHOWID_SC010_0010</p>
          </div>

          <div className="space-y-1.5">
            <Label>Project Type</Label>
            <Select
              defaultValue={project.projectType}
              onValueChange={(v) => setValue("projectType", v as "STANDARD" | "EPISODIC", { shouldDirty: true })}
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="STANDARD">Standard</SelectItem>
                <SelectItem value="EPISODIC">Episodic</SelectItem>
              </SelectContent>
            </Select>
            <p className="text-xs text-muted-foreground">Episodic adds an episode segment to shot codes</p>
          </div>
        </div>
      </section>

      {/* ── Client & Team ── */}
      <section className="space-y-4">
        <div className="flex items-center gap-2">
          <Building2 className="h-4 w-4 text-zinc-400" />
          <h2 className="text-sm font-semibold text-zinc-200">Client & Team</h2>
        </div>
        <Separator />

        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-1.5 col-span-2">
            <Label>Client</Label>
            <Select
              defaultValue={project.clientId ?? NONE}
              onValueChange={(v) => setValue("clientId", v, { shouldDirty: true })}
            >
              <SelectTrigger>
                <SelectValue placeholder="No client assigned" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value={NONE}>No client</SelectItem>
                {clients.map((c) => (
                  <SelectItem key={c.id} value={c.id}>
                    {c.company}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-1.5">
            <Label>Producer</Label>
            <Select
              defaultValue={project.producerId ?? NONE}
              onValueChange={(v) => setValue("producerId", v, { shouldDirty: true })}
            >
              <SelectTrigger>
                <SelectValue placeholder="Not assigned" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value={NONE}>Not assigned</SelectItem>
                {producers.map((m) => (
                  <SelectItem key={m.id} value={m.id}>
                    {m.name ?? m.email}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-1.5">
            <Label>Supervisor</Label>
            <Select
              defaultValue={project.supervisorId ?? NONE}
              onValueChange={(v) => setValue("supervisorId", v, { shouldDirty: true })}
            >
              <SelectTrigger>
                <SelectValue placeholder="Not assigned" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value={NONE}>Not assigned</SelectItem>
                {supervisors.map((m) => (
                  <SelectItem key={m.id} value={m.id}>
                    {m.name ?? m.email}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>
      </section>

      {/* ── Integrations ── */}
      <section className="space-y-4">
        <div className="flex items-center gap-2">
          <Webhook className="h-4 w-4 text-zinc-400" />
          <h2 className="text-sm font-semibold text-zinc-200">Slack Integration</h2>
        </div>
        <Separator />

        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-1.5 col-span-2">
            <Label htmlFor="slackWebhook">Webhook URL</Label>
            <Input
              id="slackWebhook"
              type="url"
              placeholder="https://hooks.slack.com/services/..."
              {...register("slackWebhook")}
            />
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="slackChannel">Channel</Label>
            <Input
              id="slackChannel"
              placeholder="#vfx-pipeline"
              {...register("slackChannel")}
            />
          </div>
        </div>
      </section>

      {/* Save */}
      <div className="flex justify-end pt-2">
        <Button type="submit" disabled={isSubmitting || !isDirty} className="min-w-[120px]">
          {isSubmitting ? "Saving..." : "Save Changes"}
        </Button>
      </div>
    </form>
  );
}