"use client";

import { useActionState, useRef } from "react";
import { submitContactMessage } from "@/lib/contact/actions";
import type { ActionState } from "@/lib/auth/actions";
import { TextField, TextAreaField } from "@/components/ui/Field";
import { Button } from "@/components/ui/Button";

export function ContactForm({ defaultName, defaultEmail }: { defaultName?: string; defaultEmail?: string }) {
  const [state, formAction, pending] = useActionState<ActionState, FormData>(submitContactMessage, undefined);
  const formRef = useRef<HTMLFormElement>(null);
  const sent = Boolean(state?.message?.includes("ulaştı"));

  return (
    <form
      ref={formRef}
      action={async (formData) => {
        await formAction(formData);
        if (formRef.current && formData.get("name")) formRef.current.reset();
      }}
      className="flex flex-col gap-4 rounded-2xl border border-border bg-surface p-6"
    >
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <TextField label="Ad Soyad" name="name" defaultValue={defaultName} required />
        <TextField label="E-posta Adresi" name="email" type="email" defaultValue={defaultEmail} required />
      </div>
      <TextField label="Konu" name="subject" required />
      <TextAreaField label="Mesajın" name="body" rows={5} maxLength={4000} required />

      {state?.message && (
        <p className={`text-[13px] ${sent ? "text-green-700" : "text-accent"}`}>{state.message}</p>
      )}

      <Button type="submit" disabled={pending} className="self-start">
        {pending ? "Gönderiliyor..." : "Mesaj Gönder"}
      </Button>
    </form>
  );
}