"use client";

/** فرم افزودن/ویرایش آدرس با اعتبارسنجی Zod */
import { useState } from "react";
import { provinces } from "@/data/iran";
import type { SavedAddress } from "@/lib/client/store";
import { addressSchema, fieldErrors } from "@/validation/common";

const empty = { title: "خانه", receiver: "", phone: "", province: "", city: "", line: "", postalCode: "" };

export function AddressForm({ initial, onSave, onCancel }: { initial?: SavedAddress; onSave: (a: SavedAddress) => Promise<{ errors?: Record<string, string> } | void>; onCancel?: () => void }) {
  const [form, setForm] = useState(initial ?? { ...empty, id: "" });
  const [errors, setErrors] = useState<Record<string, string>>({});
  const cities = provinces.find((p) => p.name === form.province)?.cities ?? [];
  const set = (k: keyof typeof empty) => (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) =>
    setForm((f) => ({ ...f, [k]: e.target.value, ...(k === "province" ? { city: "" } : {}) }));

  const [saving, setSaving] = useState(false);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    const parsed = addressSchema.safeParse(form);
    if (!parsed.success) return setErrors(fieldErrors(parsed.error));
    setErrors({});
    setSaving(true);
    const res = await onSave({ ...parsed.data, id: form.id });
    setSaving(false);
    if (res?.errors) setErrors(res.errors);
  }

  const err = (k: string) => errors[k] && <p className="mt-1 text-xs font-medium text-ink">⚠ {errors[k]}</p>;

  return (
    <form onSubmit={submit} noValidate className="grid gap-4 sm:grid-cols-2">
      <label>
        <span className="label">عنوان آدرس</span>
        <input className="field" value={form.title} onChange={set("title")} maxLength={30} />
        {err("title")}
      </label>
      <label>
        <span className="label">نام و نام خانوادگی گیرنده</span>
        <input className="field" value={form.receiver} onChange={set("receiver")} maxLength={60} autoComplete="name" />
        {err("receiver")}
      </label>
      <label>
        <span className="label">موبایل گیرنده</span>
        <input className="field" type="tel" inputMode="numeric" value={form.phone} onChange={set("phone")} placeholder="09xxxxxxxxx" autoComplete="tel" />
        {err("phone")}
      </label>
      <label>
        <span className="label">کد پستی</span>
        <input className="field" inputMode="numeric" value={form.postalCode} onChange={set("postalCode")} placeholder="۱۰ رقم بدون خط تیره" autoComplete="postal-code" />
        {err("postalCode")}
      </label>
      <label>
        <span className="label">استان</span>
        <select className="field" value={form.province} onChange={set("province")}>
          <option value="">انتخاب کنید</option>
          {provinces.map((p) => <option key={p.name}>{p.name}</option>)}
        </select>
        {err("province")}
      </label>
      <label>
        <span className="label">شهر</span>
        <select className="field" value={form.city} onChange={set("city")} disabled={!cities.length}>
          <option value="">انتخاب کنید</option>
          {cities.map((c) => <option key={c}>{c}</option>)}
        </select>
        {err("city")}
      </label>
      <label className="sm:col-span-2">
        <span className="label">نشانی کامل</span>
        <textarea className="field h-24 py-3" value={form.line} onChange={set("line")} maxLength={250} placeholder="خیابان، کوچه، پلاک، واحد" autoComplete="street-address" />
        {err("line")}
      </label>
      {errors._ && <p className="text-xs font-medium sm:col-span-2">⚠ {errors._}</p>}
      <div className="flex gap-2 sm:col-span-2">
        <button className="btn-primary flex-1" disabled={saving}>{saving ? "در حال ذخیره…" : "ذخیره آدرس"}</button>
        {onCancel && <button type="button" className="btn-outline" onClick={onCancel}>انصراف</button>}
      </div>
    </form>
  );
}