/* global React, Icon, Button */
function NewEngagementModal({ onClose, onSubmit }) {
  const [form, setForm] = React.useState({ customer: "", service: "", agent: "", due: "", notes: "" });
  const [error, setError] = React.useState("");

  const services = [
    { name: "Visa Services",                    icon: "plane" },
    { name: "Immigration & Labour Services",     icon: "users-round" },
    { name: "PRO Services",                      icon: "file-signature" },
    { name: "Trade License Services",            icon: "badge-check" },
    { name: "Dubai Department Approvals",        icon: "landmark" },
    { name: "Business Setup Services",           icon: "briefcase" },
    { name: "Dubai Economic Services",           icon: "building-2" },
    { name: "Certificate Attestation Services",  icon: "stamp" },
  ];

  const agents = ["Fatima A.", "Hassan M.", "Layla K.", "Omar S."];

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

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!form.customer.trim()) { setError("Customer name is required."); return; }
    if (!form.service) { setError("Please select a service."); return; }
    setError("");
    const svc = services.find(s => s.name === form.service);
    const today = new Date().toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" });
    const dueFormatted = form.due
      ? new Date(form.due).toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" })
      : "—";
    const id = "ENG-2026-" + String(Math.floor(Math.random() * 8999) + 1000);
    onSubmit({
      id,
      customer:     form.customer.trim(),
      service:      form.service,
      serviceIcon:  svc ? svc.icon : "briefcase",
      started:      today,
      due:          dueFormatted,
      quoted:       "—",
      paid:         "AED 0",
      stage:        1,
    });
  };

  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 }}>New engagement</div>
            <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600, letterSpacing: "-0.01em" }}>Open a service engagement</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-500)", borderRadius: 6, padding: "8px 12px", fontSize: 13 }}>
              {error}
            </div>
          )}

          <div className="field">
            <label>Customer name</label>
            <input
              placeholder="e.g. Mohammed Al-Rashid"
              value={form.customer}
              onChange={set("customer")}
              autoFocus
            />
          </div>

          <div className="field">
            <label>Service</label>
            <select value={form.service} onChange={set("service")}>
              <option value="">Select a service…</option>
              {services.map(s => (
                <option key={s.name} value={s.name}>{s.name}</option>
              ))}
            </select>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            <div className="field">
              <label>Assigned agent</label>
              <select value={form.agent} onChange={set("agent")}>
                <option value="">Unassigned</option>
                {agents.map(a => <option key={a} value={a}>{a}</option>)}
              </select>
            </div>
            <div className="field">
              <label>Due date</label>
              <input type="date" value={form.due} onChange={set("due")} />
            </div>
          </div>

          <div className="field">
            <label>Notes</label>
            <textarea
              rows={3}
              placeholder="Initial notes or customer message…"
              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="arrow-right">Open engagement</Button>
          </div>
        </form>
      </div>
    </>
  );
}

Object.assign(window, { NewEngagementModal });