"use client";

import { useState, type FormEvent } from "react";
import { useRouter } from "next/navigation";
import type { LegalDocument } from "@/types/settings";
import { formatDate } from "@/lib/format";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/input";
import { useToast } from "@/components/ui/toast";
import { clientFetch } from "@/lib/api/client";

export function LegalDocumentForm({
  type,
  label,
  doc,
}: {
  type: LegalDocument["type"];
  label: string;
  doc: LegalDocument | null;
}) {
  const router = useRouter();
  const [content, setContent] = useState(doc?.content ?? "");
  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/settings/legal", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ type, content }),
    });

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

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

    const successMessage = body?.message ?? "Saved as a new version.";
    setMessage(successMessage);
    toast(successMessage, "success");
    router.refresh();
  }

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-2">
      <div className="flex items-center justify-between">
        <h3 className="text-sm font-semibold">{label}</h3>
        {doc && (
          <span className="text-xs text-kolabora-neutral-dark/70">
            Version {doc.version} &middot; effective since {formatDate(doc.effective_date)}
          </span>
        )}
      </div>
      <Textarea required rows={8} value={content} onChange={(e) => setContent(e.target.value)} />
      {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="self-start">
        Save as New Version
      </Button>
    </form>
  );
}

export function LegalSettingsForm({
  terms,
  privacy,
}: {
  terms: LegalDocument | null;
  privacy: LegalDocument | null;
}) {
  return (
    <div className="mt-3 flex flex-col gap-8">
      <LegalDocumentForm type="terms" label="Terms & Conditions" doc={terms} />
      <LegalDocumentForm type="privacy" label="Privacy Policy" doc={privacy} />
    </div>
  );
}