"use client";

/** فرم تماس (مرحله ۱ فقط اعتبارسنجی؛ ارسال واقعی در مرحله ۵ به پنل مدیریت) */
import { useState } from "react";
import { contactSchema, fieldErrors } from "@/validation/common";

export function ContactForm() {
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [sent, setSent] = useState(false);

  function submit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const parsed = contactSchema.safeParse(Object.fromEntries(new FormData(e.currentTarget)));
    if (!parsed.success) return setErrors(fieldErrors(parsed.error));
    setErrors({});
    setSent(true);
  }

  if (sent) return <p className="card-surface p-6 text-sm">پیام شما ثبت شد. همکاران ما به‌زودی تماس می‌گیرند. (نمایشی)</p>;
  const err = (k: string) => errors[k] && <p className="mt-1 text-xs font-medium">⚠ {errors[k]}</p>;

  return (
    <form onSubmit={submit} noValidate className="space-y-4">
      <label className="block"><span className="label">نام</span><input name="name" className="field" maxLength={60} />{err("name")}</label>
      <label className="block"><span className="label">موبایل</span><input name="phone" className="field" type="tel" inputMode="numeric" maxLength={14} />{err("phone")}</label>
      <label className="block"><span className="label">پیام</span><textarea name="message" className="field h-32 py-3" maxLength={1000} />{err("message")}</label>
      <button className="btn-primary w-full">ارسال پیام</button>
    </form>
  );
}