/* global React, Icon, Button, api */
function AddCustomerModal({ onClose, onAdd }) {
  const [type, setType]     = React.useState("individual");
  const [form, setForm]     = React.useState({
    firstName: "", lastName: "", phone: "", email: "", emiratesId: "", nationality: "",
    companyName: "", tradeLicenseNo: "", country: "", contactPerson: "",
  });
  const [error, setError]   = React.useState("");
  const [saving, setSaving] = React.useState(false);

  const set = (key) => (e) => setForm(f => ({ ...f, [key]: e.target.value }));

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError("");
    if (type === "individual") {
      if (!form.firstName.trim() || !form.lastName.trim()) { setError("First and last name are required."); return; }
      if (!form.phone.trim())  { setError("Phone number is required."); return; }
      if (!form.email.trim())  { setError("Email address is required."); return; }
    } else {
      if (!form.companyName.trim()) { setError("Company name is required."); return; }
      if (!form.phone.trim())       { setError("Phone number is required."); return; }
      if (!form.email.trim())       { setError("Email address is required."); return; }
    }
    setSaving(true);
    try {
      const payload = type === "individual"
        ? { type, firstName: form.firstName.trim(), lastName: form.lastName.trim(), phone: form.phone.trim(), email: form.email.trim(), emiratesId: form.emiratesId.trim(), nationality: form.nationality.trim() }
        : { type, companyName: form.companyName.trim(), phone: form.phone.trim(), email: form.email.trim(), tradeLicenseNo: form.tradeLicenseNo.trim(), country: form.country.trim(), contactPerson: form.contactPerson.trim() };
      const res = await api.post("/customers", payload);
      onAdd(api.map.customer(res.data));
    } catch (err) {
      setError(err.message || "Failed to register customer.");
    } finally {
      setSaving(false);
    }
  };

  const typeBtn = (id, label, icon) => (
    <button type="button" onClick={() => { setType(id); setError(""); }}
      style={{
        flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 8,
        padding: "18px 12px", borderRadius: 10, cursor: "pointer", transition: "all 0.15s",
        border: type === id ? "2px solid var(--brand-burgundy)" : "2px solid var(--border-subtle)",
        background: type === id ? "var(--plum-50)" : "#fff",
        color: type === id ? "var(--brand-burgundy)" : "var(--fg-2)",
      }}>
      <span style={{ width: 40, height: 40, borderRadius: 10, display: "flex", alignItems: "center", justifyContent: "center", background: type === id ? "var(--brand-burgundy)" : "var(--ink-100)", color: type === id ? "#fff" : "var(--fg-3)" }}>
        <Icon name={icon} size={20} />
      </span>
      <span style={{ fontSize: 13.5, fontWeight: 600 }}>{label}</span>
    </button>
  );

  return (
    <>
      <div className="scrim" onClick={onClose} />
      <div className="modal" role="dialog" aria-modal="true">
        <div className="modal-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 4 }}>Customer registration</div>
            <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600, letterSpacing: "-0.01em" }}>Register a new customer</h2>
          </div>
          <button className="icon-btn" onClick={onClose} aria-label="Close"><Icon name="x" size={18} /></button>
        </div>

        <form onSubmit={handleSubmit} className="modal-body">
          <div>
            <label style={{ display: "block", fontSize: 12, fontWeight: 600, color: "var(--fg-3)", marginBottom: 10, textTransform: "uppercase", letterSpacing: "0.06em" }}>Customer type</label>
            <div style={{ display: "flex", gap: 12 }}>
              {typeBtn("individual", "Individual", "user")}
              {typeBtn("organisation", "Organisation", "building-2")}
            </div>
          </div>

          {error && (
            <div style={{ background: "var(--danger-50)", color: "var(--danger-700)", border: "1px solid var(--danger-500)", borderRadius: 6, padding: "8px 12px", fontSize: 13 }}>
              {error}
            </div>
          )}

          {type === "individual" ? (
            <>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                <div className="field">
                  <label>First name <span style={{ color: "var(--danger-500)" }}>*</span></label>
                  <input placeholder="e.g. Mohammed" value={form.firstName} onChange={set("firstName")} autoFocus />
                </div>
                <div className="field">
                  <label>Last name <span style={{ color: "var(--danger-500)" }}>*</span></label>
                  <input placeholder="e.g. Al-Rashid" value={form.lastName} onChange={set("lastName")} />
                </div>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                <div className="field">
                  <label>Phone <span style={{ color: "var(--danger-500)" }}>*</span></label>
                  <input placeholder="+971 50 000 0000" value={form.phone} onChange={set("phone")} />
                </div>
                <div className="field">
                  <label>Email <span style={{ color: "var(--danger-500)" }}>*</span></label>
                  <input type="email" placeholder="name@example.com" value={form.email} onChange={set("email")} />
                </div>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                <div className="field">
                  <label>Emirates ID</label>
                  <input placeholder="784-YYYY-XXXXXXX" value={form.emiratesId} onChange={set("emiratesId")} style={{ fontFamily: "var(--font-mono)" }} />
                </div>
                <div className="field">
                  <label>Nationality</label>
                  <input placeholder="e.g. UAE" value={form.nationality} onChange={set("nationality")} />
                </div>
              </div>
            </>
          ) : (
            <>
              <div className="field">
                <label>Company name <span style={{ color: "var(--danger-500)" }}>*</span></label>
                <input placeholder="e.g. Nordwind FZ-LLC" value={form.companyName} onChange={set("companyName")} autoFocus />
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                <div className="field">
                  <label>Phone <span style={{ color: "var(--danger-500)" }}>*</span></label>
                  <input placeholder="+971 4 000 0000" value={form.phone} onChange={set("phone")} />
                </div>
                <div className="field">
                  <label>Email <span style={{ color: "var(--danger-500)" }}>*</span></label>
                  <input type="email" placeholder="ops@company.ae" value={form.email} onChange={set("email")} />
                </div>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                <div className="field">
                  <label>Trade licence / DED no.</label>
                  <input placeholder="DED-0000000" value={form.tradeLicenseNo} onChange={set("tradeLicenseNo")} style={{ fontFamily: "var(--font-mono)" }} />
                </div>
                <div className="field">
                  <label>Country of incorporation</label>
                  <input placeholder="e.g. UAE, Germany" value={form.country} onChange={set("country")} />
                </div>
              </div>
              <div className="field">
                <label>Primary contact person</label>
                <input placeholder="Full name of main contact" value={form.contactPerson} onChange={set("contactPerson")} />
              </div>
            </>
          )}

          <div className="modal-footer">
            <Button variant="secondary" type="button" onClick={onClose}>Cancel</Button>
            <Button type="submit" icon="user-plus" disabled={saving}>{saving ? "Saving…" : "Register customer"}</Button>
          </div>
        </form>
      </div>
    </>
  );
}

Object.assign(window, { AddCustomerModal });