"use client"; import { useEffect, useRef, useState } from "react"; import { Alert, Spinner } from "../UI"; import type { ClientAddress, ClientAddressFormData, ClientAddressFormErrors, } from "@/src/types/client"; // ── Fixed styles ─────────────────────────────────────────────────────────── const S = { input: { width: "100%", height: 40, padding: "0 0.75rem", borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", fontSize: 13, color: "var(--color-text-primary)", outline: "none", fontFamily: "var(--font-sans)", } as React.CSSProperties, label: { display: "flex", flexDirection: "column" as const, gap: 6, fontSize: 12, fontWeight: 600, color: "var(--color-text-secondary)", } as React.CSSProperties, errorText: { fontSize: 11, color: "var(--color-danger)", fontWeight: 500, } as React.CSSProperties, }; // ── Validation ───────────────────────────────────────────────────────────── function validate(data: ClientAddressFormData): ClientAddressFormErrors { const e: ClientAddressFormErrors = {}; if (!data.label.trim()) e.label = "النوع مطلوب"; if (!data.street.trim()) e.street = "العنوان مطلوب"; if (!data.city.trim()) e.city = "المدينة مطلوبة"; if (!data.state.trim()) e.state = "المنطقة مطلوبة"; if (!data.postalCode.trim()) e.postalCode = "الرمز البريدي مطلوب"; if (!data.country.trim()) e.country = "الدولة مطلوبة"; return e; } const LABEL_PRESETS = ["فوترة", "شحن", "المقر الرئيسي", "فرع", "مستودع", "أخرى"]; // ── Props ────────────────────────────────────────────────────────────────── interface AddressFormModalProps { editAddress: ClientAddress | null; // null = create mode onClose: () => void; onSubmit: (data: ClientAddressFormData, isNew: boolean) => Promise; } // ── Component ────────────────────────────────────────────────────────────── export function AddressFormModal({ editAddress, onClose, onSubmit, }: AddressFormModalProps) { const isNew = editAddress === null; const [form, setForm] = useState({ label: editAddress?.label ?? "", street: editAddress?.street ?? "", city: editAddress?.city ?? "", state: editAddress?.state ?? "", postalCode: editAddress?.postalCode ?? "", country: editAddress?.country ?? "المملكة العربية السعودية", isPrimary: editAddress?.isPrimary ?? false, }); const [errors, setErrors] = useState({}); const [saving, setSaving] = useState(false); const [apiError, setApiError] = useState(""); const firstRef = useRef(null); useEffect(() => { firstRef.current?.focus(); }, []); useEffect(() => { const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", handler); return () => window.removeEventListener("keydown", handler); }, [onClose]); const set = (field: keyof ClientAddressFormData) => (e: React.ChangeEvent) => { setForm((p) => ({ ...p, [field]: e.target.value })); if (errors[field as keyof ClientAddressFormErrors]) setErrors((p) => ({ ...p, [field]: undefined })); }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); const errs = validate(form); if (Object.keys(errs).length) { setErrors(errs); return; } setSaving(true); setApiError(""); const ok = await onSubmit(form, isNew); setSaving(false); if (ok) onClose(); else setApiError("حدث خطأ غير متوقع. يرجى المحاولة لاحقاً."); }; const inputStyle = (field: keyof ClientAddressFormErrors): React.CSSProperties => ({ ...S.input, ...(errors[field] ? { borderColor: "var(--color-danger)", background: "#FEF2F2" } : {}), }); return ( ); }