// src/components/site/edit-project-form.tsx
"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { SiteForm } from "@/components/site/site-form";
import { useActiveSite } from "@/lib/keywords/site-context";
import { updateSiteAction } from "@/lib/sites/actions";
import type { SiteInput } from "@/lib/sites/schema";
import type { SiteDetail } from "@/lib/sites/types";
import { splitUrl } from "@/lib/sites/url";

export function EditProjectForm({ site }: { site: SiteDetail }) {
  const { updateSite } = useActiveSite();
  const router = useRouter();
  const [pending, setPending] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [saved, setSaved] = useState(false);
  const { scheme, domain } = splitUrl(site.url);

  async function handleSubmit(input: SiteInput) {
    setError(null);
    setSaved(false);
    setPending(true);
    try {
      const result = await updateSiteAction(site.id, input);
      if (!result.ok) {
        setError(result.error);
        return;
      }
      updateSite({
        id: site.id,
        name: input.name,
        plan: input.url,
        primaryLanguage: input.primaryLanguage,
      });
      setSaved(true);
      router.refresh();
    } finally {
      setPending(false);
    }
  }

  return (
    <div className="grid gap-3">
      <SiteForm
        defaultValues={{
          name: site.name,
          scheme,
          domain,
          primaryLanguage: site.primaryLanguage,
          languages: site.languages,
          targetCountries: site.targetCountries,
        }}
        submitLabel="Enregistrer"
        pending={pending}
        error={error}
        onSubmit={handleSubmit}
      />
      {saved ? (
        <p className="text-muted-foreground text-sm" role="status">
          Modifications enregistrées.
        </p>
      ) : null}
    </div>
  );
}