"use client";

import { useState, type FormEvent } from "react";
import type { SignatureProfile } from "@/types/event";
import { Button } from "@/components/ui/button";
import { Input, Textarea } from "@/components/ui/input";
import { useToast } from "@/components/ui/toast";
import { clientFetch } from "@/lib/api/client";

export function SignatureProjectForm({ eventId, initial }: { eventId: number; initial: SignatureProfile | null }) {
  const [projectTitle, setProjectTitle] = useState(initial?.project_title ?? "");
  const [projectDescription, setProjectDescription] = useState(initial?.project_description ?? "");
  const [message, setMessage] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const { toast } = useToast();

  async function handleSubmit(formEvent: FormEvent<HTMLFormElement>) {
    formEvent.preventDefault();
    setMessage(null);
    setError(null);
    setIsSubmitting(true);

    const res = await clientFetch(`/api/admin/events/${eventId}/signature-profile`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        project_title: projectTitle || null,
        project_description: projectDescription || null,
      }),
    });

    setIsSubmitting(false);
    const body = await res.json().catch(() => null);

    if (!res.ok) {
      const errorMessage = body?.errors?.event?.[0] ?? body?.message ?? "Failed to save Project content.";
      setError(errorMessage);
      toast(errorMessage, "error");
      return;
    }

    const successMessage = body?.message ?? "Saved.";
    setMessage(successMessage);
    toast(successMessage, "success");
  }

  return (
    <form onSubmit={handleSubmit} className="mt-4 flex max-w-md flex-col gap-4">
      <label className="flex flex-col gap-1 text-sm font-medium">
        Project Title
        <Input value={projectTitle} onChange={(e) => setProjectTitle(e.target.value)} />
      </label>
      <label className="flex flex-col gap-1 text-sm font-medium">
        Project Description
        <Textarea
          rows={4}
          value={projectDescription}
          onChange={(e) => setProjectDescription(e.target.value)}
        />
      </label>

      {message && <p className="text-sm text-green-600">{message}</p>}
      {error && <p className="text-sm text-red-600">{error}</p>}
      <Button type="submit" loading={isSubmitting} className="mt-1 self-start">
        Save
      </Button>
    </form>
  );
}