"use client";
import React, { useState, useEffect, type FC } from "react";
import { type ClientSession } from "@/utils/helperFun";
import { Spinner } from "../UI";

const API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL!;

// ─── Types ───────────────────────────────────
export interface ClientAddress {
  _id: string;
  label: string;
  branchName: string | null;
  contactPerson: { name: string; phone: string };
  details: {
    city: string;
    district?: string;
    street: string;
    buildingNo?: string;
    unitNo?: string;
    zipCode?: string;
  };
}

interface AddrForm {
  label: string;
  branchName: string;
  contactName: string;
  contactPhone: string;
  city: string;
  district: string;
  street: string;
  buildingNo: string;
  unitNo: string;
  zipCode: string;
}

interface AddrErrors {
  city?: string;
  street?: string;
  zipCode?: string;
  contactPhone?: string;
}



interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label: string;
  error?: string;
}
const Input: FC<InputProps> = ({ label, error, className = "", ...rest }) => (
  <div className="flex flex-col gap-1">
    <label className="text-[12px] font-semibold text-[#374151]">{label}</label>
    <input
      className={`w-full h-10 px-3 border rounded-lg text-[13px] text-[#111827]
        placeholder-[#9CA3AF] outline-none transition focus:border-[#1A73E8]
        focus:ring-2 focus:ring-[#1A73E8]/15 text-right
        ${error ? "border-red-400 bg-red-50" : "border-[#E5E7EB] bg-white"} ${className}`}
      dir="rtl"
      {...rest}
    />
    {error && <p className="text-[11px] text-red-500 font-medium text-right">{error}</p>}
  </div>
);

interface BtnProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  loading?: boolean;
}
const PrimaryBtn: FC<BtnProps> = ({ loading, children, className = "", disabled, ...rest }) => (
  <button
    disabled={loading || disabled}
    className={`flex items-center justify-center gap-2 h-11 px-6 bg-[#1A73E8] hover:bg-[#1557B0]
      active:scale-[.98] text-white font-bold text-[13px] rounded-lg transition-all duration-150
      disabled:opacity-60 disabled:cursor-not-allowed ${className}`}
    {...rest}
  >
    {loading && <Spinner />}
    {children}
  </button>
);

const Alert: FC<{ type?: "error" | "info" | "success"; message: string; onClose?: () => void }> = ({
  type = "error", message, onClose,
}) => {
  const styles = {
    error:   "bg-red-50 border-red-200 text-red-700",
    info:    "bg-blue-50 border-blue-200 text-blue-700",
    success: "bg-emerald-50 border-emerald-200 text-emerald-700",
  };
  const icons = { error: "⚠", info: "ℹ", success: "✓" };
  return (
    <div className={`flex items-start gap-2 border rounded-lg px-3 py-2.5 text-[12px] font-medium ${styles[type]}`} dir="rtl">
      <span className="flex-shrink-0">{icons[type]}</span>
      <span className="flex-1">{message}</span>
      {onClose && (
        <button onClick={onClose} className="flex-shrink-0 opacity-60 hover:opacity-100 text-[14px] leading-none">×</button>
      )}
    </div>
  );
};

// ─── AddressStep ─────────────────────────────
interface AddressStepProps {
  session: ClientSession;
  onSuccess: () => void;
}

const LABEL_OPTIONS = ["عام", "المنزل", "المكتب الرئيسي", "المستودع", "الفرع"];

const AddressStep: FC<AddressStepProps> = ({ session, onSuccess }) => {
  const [savedAddresses, setSavedAddresses] = useState<ClientAddress[]>([]);
  const [loadingAddrs,   setLoadingAddrs]   = useState(true);
  const [selectedId,     setSelectedId]     = useState<string | null>(null);
  const [showNew,        setShowNew]        = useState(false);
  const [loading,        setLoading]        = useState(false);
  const [apiError,       setApiError]       = useState("");
  const [formErrors,     setFormErrors]     = useState<AddrErrors>({});
  const [form, setForm] = useState<AddrForm>({
    label: "عام", branchName: "", contactName: "", contactPhone: "",
    city: "", district: "", street: "", buildingNo: "", unitNo: "", zipCode: "",
  });

  // get saved addresses on mount
  useEffect(() => {
    (async () => {
      try {
        const res = await fetch(`${API_BASE}/client/${session.id}/addresses`);
        const data = await res.json();
        if (res.ok) {
          // api might return either { addresses: [...] } or just [...]
          const list: ClientAddress[] = Array.isArray(data) ? data : (data.addresses ?? []);
          setSavedAddresses(list);
          // auto-select first address if available
          if (list.length > 0) setSelectedId(list[0]._id);
        }
      } catch {
        // ignore fetch errors, user can add address manually
        setShowNew(true);
      } finally {
        setLoadingAddrs(false);
      }
    })();
  }, [session.id]);

  const setF =
    (field: keyof AddrForm) =>
    (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
      setForm(p => ({ ...p, [field]: e.target.value }));
      if (formErrors[field as keyof AddrErrors])
        setFormErrors(p => ({ ...p, [field]: undefined }));
    };

  const validateAddress = (): boolean => {
    const e: AddrErrors = {};
    if (!form.city.trim())   e.city   = "المدينة مطلوبة";
    if (!form.street.trim()) e.street = "الشارع مطلوب";
    if (form.zipCode && !/^\d{5}$/.test(form.zipCode))
      e.zipCode = "الرمز البريدي يجب أن يتكون من 5 أرقام";
    if (form.contactPhone && !/^(\+966|0)?[5][0-9]{8}$/.test(form.contactPhone.replace(/\s/g, "")))
      e.contactPhone = "أدخل رقم جوال سعودي صحيح";
    setFormErrors(e);
    return Object.keys(e).length === 0;
  };

  const canProceed = selectedId !== null || showNew;

  const handleNext = async () => {
    if (selectedId) {
      // existing address selected → proceed without API call
      setLoading(true);
      await new Promise(r => setTimeout(r, 400));
      setLoading(false);
      onSuccess();
      return;
    }
    if (showNew && !validateAddress()) return;
    setLoading(true);
    setApiError("");
    try {
      const res = await fetch(`${API_BASE}/client/${session.id}/addresses`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          label:      form.label,
          branchName: form.branchName || null,
          contactPerson: {
            name:  form.contactName,
            phone: form.contactPhone,
          },
          details: {
            city:       form.city.trim(),
            district:   form.district.trim() || undefined,
            street:     form.street.trim(),
            buildingNo: form.buildingNo.trim() || undefined,
            unitNo:     form.unitNo.trim() || undefined,
            zipCode:    form.zipCode.trim() || undefined,
          },
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.message ?? "تعذّر حفظ العنوان");
      onSuccess();
    } catch (err: unknown) {
      setApiError(err instanceof Error ? err.message : "تعذّر حفظ العنوان، يرجى المحاولة مجددًا.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div dir="rtl">
      <div className="mb-6">
        <div className="inline-flex items-center gap-1.5 bg-[#D1FAE5] border border-[#A7F3D0] rounded-full px-3 py-1 text-[11px] font-bold text-[#065F46] mb-3">
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
          تم إنشاء الحساب
        </div>
        <h2 className="text-[22px] font-bold text-[#111827] tracking-tight leading-tight">اختر عنوان التوصيل</h2>
        <p className="text-[13px] text-[#6B7280] mt-1">
          العنوان <strong className="text-[#111827]">مطلوب</strong> قبل تقديم أي طلب.
        </p>
      </div>

      {apiError && (
        <div className="mb-4">
          <Alert message={apiError} onClose={() => setApiError("")} />
        </div>
      )}

      {/* loading state */}
      {loadingAddrs ? (
        <div className="flex items-center justify-center py-8 gap-2">
          <Spinner />
          <span className="text-[13px] text-[#6B7280]">جارٍ تحميل العناوين…</span>
        </div>
      ) : (
        <>
          {/* saved addresses */}
          {savedAddresses.length > 0 && (
            <div className="mb-5">
              <p className="text-[11px] font-bold text-[#9CA3AF] uppercase tracking-wide mb-2">العناوين المحفوظة</p>
              <div className="flex flex-col gap-2">
                {savedAddresses.map(addr => (
                  <button
                    key={addr._id}
                    type="button"
                    onClick={() => { setSelectedId(addr._id); setShowNew(false); }}
                    className={`w-full text-right border rounded-xl p-3.5 transition-all duration-150 ${
                      selectedId === addr._id
                        ? "border-[#1A73E8] bg-[#EBF3FF] ring-2 ring-[#1A73E8]/15"
                        : "border-[#E5E7EB] bg-white hover:border-[#1A73E8]/40"
                    }`}
                  >
                    <div className="flex items-start justify-between gap-2">
                      <div className={`w-5 h-5 rounded-full border-2 flex-shrink-0 mt-0.5 flex items-center justify-center transition-all ${
                        selectedId === addr._id ? "border-[#1A73E8] bg-[#1A73E8]" : "border-[#D1D5DB]"
                      }`}>
                        {selectedId === addr._id && (
                          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3.5"><polyline points="20 6 9 17 4 12"/></svg>
                        )}
                      </div>
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full ${
                            addr.label === "المكتب الرئيسي"
                              ? "bg-[#EBF3FF] text-[#1E3A8A]"
                              : "bg-[#FEF3C7] text-[#92400E]"
                          }`}>
                            {addr.label}
                          </span>
                          {addr.branchName && (
                            <span className="text-[12px] text-[#6B7280]">{addr.branchName}</span>
                          )}
                        </div>
                        <p className="text-[13px] font-semibold text-[#111827]">
                          {addr.details.street}
                          {addr.details.buildingNo && `، مبنى ${addr.details.buildingNo}`}
                          ، {addr.details.city}
                        </p>
                        {addr.details.district && (
                          <p className="text-[12px] text-[#6B7280]">
                            {addr.details.district}
                            {addr.details.zipCode && ` · ${addr.details.zipCode}`}
                          </p>
                        )}
                        <p className="text-[11px] text-[#9CA3AF] mt-1">
                          {addr.contactPerson.name} · {addr.contactPerson.phone}
                        </p>
                      </div>
                    </div>
                  </button>
                ))}
              </div>
            </div>
          )}

          {/* new address button */}
          <button
            type="button"
            onClick={() => { setShowNew(v => !v); setSelectedId(null); }}
            className={`w-full border-2 border-dashed rounded-xl p-3 flex items-center justify-center gap-2
              text-[13px] font-semibold transition-all ${
              showNew
                ? "border-[#1A73E8] text-[#1A73E8] bg-[#EBF3FF]"
                : "border-[#E5E7EB] text-[#6B7280] hover:border-[#1A73E8]/50 hover:text-[#1A73E8]"
            }`}
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
              <line x1="12" y1="5" x2="12" y2="19"/>
              <line x1="5" y1="12" x2="19" y2="12"/>
            </svg>
            إضافة عنوان جديد
          </button>

          {/* new address form */}
          {showNew && (
            <div className="mt-4 border border-[#E5E7EB] rounded-xl p-4 bg-[#FAFAFA] flex flex-col gap-3">
              <p className="text-[11px] font-bold text-[#9CA3AF] uppercase tracking-wide">تفاصيل العنوان الجديد</p>

              <div className="grid grid-cols-2 gap-3">
                <div className="flex flex-col gap-1">
                  <label className="text-[12px] font-semibold text-[#374151]">التصنيف</label>
                  <select
                    value={form.label}
                    onChange={setF("label")}
                    className="h-10 px-3 border border-[#E5E7EB] rounded-lg text-[13px] text-[#111827]
                      bg-white outline-none focus:border-[#1A73E8] focus:ring-2
                      focus:ring-[#1A73E8]/15 text-right"
                    dir="rtl"
                  >
                    {LABEL_OPTIONS.map(l => <option key={l}>{l}</option>)}
                  </select>
                </div>
                <Input label="اسم الفرع" placeholder="مقر الرياض" value={form.branchName} onChange={setF("branchName")} />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <Input label="اسم جهة الاتصال" placeholder="أحمد الرشيدي" value={form.contactName} onChange={setF("contactName")} />
                <Input label="رقم جوال جهة الاتصال" placeholder="+966 50 123 4567" value={form.contactPhone} onChange={setF("contactPhone")} error={formErrors.contactPhone} />
              </div>

              <div className="h-px bg-[#E5E7EB]" />

              <div className="grid grid-cols-2 gap-3">
                <Input label="المدينة *"  placeholder="الرياض"          value={form.city}     onChange={setF("city")}     error={formErrors.city} />
                <Input label="الحي"       placeholder="العليا"           value={form.district} onChange={setF("district")} />
              </div>
              <Input   label="الشارع *"   placeholder="طريق الملك فهد"  value={form.street}   onChange={setF("street")}   error={formErrors.street} />
              <div className="grid grid-cols-3 gap-3">
                <Input label="رقم المبنى"    placeholder="12"    value={form.buildingNo} onChange={setF("buildingNo")} />
                <Input label="رقم الوحدة"   placeholder="3ب"    value={form.unitNo}     onChange={setF("unitNo")} />
                <Input label="الرمز البريدي" placeholder="12241" value={form.zipCode}    onChange={setF("zipCode")}    error={formErrors.zipCode} />
              </div>
            </div>
          )}
        </>
      )}

      {!canProceed && !loadingAddrs && (
        <p className="text-[12px] text-[#F59E0B] font-medium mt-3 flex items-center gap-1.5">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
          </svg>
          يرجى اختيار عنوان أو إضافة عنوان جديد للمتابعة.
        </p>
      )}

      <div className="mt-6">
        <PrimaryBtn onClick={handleNext} loading={loading} disabled={!canProceed || loadingAddrs} className="w-full">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="15 18 9 12 15 6"/></svg>
          التالي — عرض الطلبات
        </PrimaryBtn>
      </div>
    </div>
  );
};

export default AddressStep;