/* global React, Icon, Button, api */
function AddLeadModal({ onClose, onAdd }) {
  const [form, setForm]       = React.useState({ name: "", phone: "", email: "", source: "", service: "", notes: "" });
  const [services, setServices] = React.useState([]);
  const [error, setError]     = React.useState("");
  const [saving, setSaving]   = React.useState(false);

  React.useEffect(() => {
    api.get("/services")
      .then(res => setServices((res.data || []).filter(s => s.status !== "inactive")))
      .catch(() => {});
  }, []);

  const SOURCE_OPTIONS = [
    { label: "WhatsApp",    value: "whatsapp"  },
    { label: "Facebook",    value: "facebook"  },
    { label: "Website",     value: "website"   },
    { label: "Referral",    value: "referral"  },
    { label: "Walk-in",     value: "walk-in"   },
    { label: "Other",       value: "other"     },
  ];

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!form.name.trim())  { setError("Full name is required."); return; }
    if (!form.phone.trim()) { setError("Phone number is required."); return; }
    if (!form.service)      { setError("Please select a service."); return; }
    setError("");
    setSaving(true);
    try {
      const res = await api.post("/leads", {
        name:   form.name.trim(),
        phone:  form.phone.trim(),
        email:  form.email.trim(),
        source: form.source || "other",
        service: form.service,
        notes:  form.notes.trim(),
        status: "new",
      });
      onAdd(api.map.lead(res.data));
    } catch (err) {
      setError(err.message || "Failed to add lead.");
    } finally {
      setSaving(false);
    }
  };

  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 }}>Leads</div>
            <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600, letterSpacing: "-0.01em" }}>Add lead manually</h2>
          </div>
          <button className="icon-btn" onClick={onClose} aria-label="Close">
            <Icon name="x" size={18} />
          </button>
        </div>

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

          <div className="field">
            <label>Full name</label>
            <input placeholder="e.g. Sara Ben Salah" value={form.name} onChange={set("name")} autoFocus />
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            <div className="field">
              <label>Phone number</label>
              <input placeholder="+971 50 000 0000" value={form.phone} onChange={set("phone")} />
            </div>
            <div className="field">
              <label>Email <span style={{ color: "var(--fg-4)", fontWeight: 400 }}>(optional)</span></label>
              <input type="email" placeholder="email@example.com" value={form.email} onChange={set("email")} />
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            <div className="field">
              <label>Source</label>
              <select value={form.source} onChange={set("source")}>
                <option value="">Select source…</option>
                {SOURCE_OPTIONS.map(s => <option key={s.value} value={s.value}>{s.label}</option>)}
              </select>
            </div>
            <div className="field">
              <label>Service interest</label>
              <select value={form.service} onChange={set("service")}>
                <option value="">Select a service…</option>
                {services.map(s => <option key={s._id} value={s.name}>{s.name}</option>)}
              </select>
            </div>
          </div>

          <div className="field">
            <label>Notes</label>
            <textarea rows={3} placeholder="What did the customer enquire about?"
              value={form.notes} onChange={set("notes")} style={{ resize: "vertical" }} />
          </div>

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

Object.assign(window, { AddLeadModal });