// Utility settings - types and meters CRUD
const UtilitiesPage = ({ t, lang, toast }) => {
  const D = window.MOCK_DATA;
  const [types, setTypes] = React.useState(D.utility_types);
  const [meters, setMeters] = React.useState(D.meters);
  const [activeTab, setActiveTab] = React.useState("types");
  const [showAdd, setShowAdd] = React.useState(false);
  const [editingType, setEditingType] = React.useState(null);
  const [editingMeter, setEditingMeter] = React.useState(null);

  const [newLabel, setNewLabel] = React.useState("");
  const [newLabelTh, setNewLabelTh] = React.useState("");
  const [newUnit, setNewUnit] = React.useState("kWh");
  const [newRate, setNewRate] = React.useState(0);
  const [newMeterType, setNewMeterType] = React.useState("elec");
  const [newMeterBuilding, setNewMeterBuilding] = React.useState("hq");

  const addItem = () => {
    if (activeTab === "types") {
      if (!newLabel) return;
      setTypes([...types, {
        id: "u" + (types.length + 1),
        label_en: newLabel,
        label_th: newLabelTh || newLabel,
        unit_en: newUnit, unit_th: newUnit,
        rate: newRate,
        color: ["#F59E0B","#06B6D4","#8B5CF6","#EC4899"][types.length % 4]
      }]);
    } else {
      if (!newLabel) return;
      setMeters([...meters, {
        id: "M-" + String(meters.length + 100).padStart(3, "0"),
        label_en: newLabel,
        label_th: newLabelTh || newLabel,
        type: newMeterType,
        building: newMeterBuilding,
        last: 0,
      }]);
    }
    toast(t("toast_settings_saved"));
    setShowAdd(false);
    setNewLabel(""); setNewLabelTh(""); setNewRate(0);
  };

  const removeType = (id) => setTypes(types.filter(t => t.id !== id));
  const removeMeter = (id) => setMeters(meters.filter(m => m.id !== id));

  const saveType = () => {
    setTypes(types.map(u => u.id === editingType.id ? { ...editingType } : u));
    toast(t("toast_settings_saved"));
    setEditingType(null);
  };
  const saveMeter = () => {
    setMeters(meters.map(m => m.id === editingMeter._origId
      ? { id: editingMeter.id, label_en: editingMeter.label_en, label_th: editingMeter.label_th, type: editingMeter.type, building: editingMeter.building, last: editingMeter.last }
      : m));
    toast(t("toast_settings_saved"));
    setEditingMeter(null);
  };

  return (
    <div className="page" data-screen-label="Utilities">
      <div className="page-head">
        <div>
          <h1 className="page-title">{t("ut_title")}</h1>
          <p className="page-sub">{t("ut_sub")}</p>
        </div>
        <div className="header-actions">
          <button className="btn accent" onClick={() => setShowAdd(true)}>
            <Icon name="plus" className="ico" />
            {activeTab === "types" ? t("ut_add_type") : t("ut_add_meter")}
          </button>
        </div>
      </div>

      {/* Tab switcher */}
      <div style={{ display: "flex", gap: 4, padding: 4, background: "var(--panel-2)", border: "1px solid var(--line)", borderRadius: 10, width: "fit-content", marginBottom: 14 }}>
        <button
          onClick={() => setActiveTab("types")}
          style={{
            border: "none",
            background: activeTab === "types" ? "var(--panel)" : "transparent",
            padding: "7px 14px",
            borderRadius: 7,
            fontSize: 13,
            fontWeight: 600,
            color: activeTab === "types" ? "var(--text)" : "var(--text-3)",
            boxShadow: activeTab === "types" ? "var(--shadow-sm)" : "none",
            display: "flex", alignItems: "center", gap: 8,
          }}>
          <Icon name="sliders" />
          {t("ut_types")} <span style={{ color: "var(--text-3)" }}>· {types.length}</span>
        </button>
        <button
          onClick={() => setActiveTab("meters")}
          style={{
            border: "none",
            background: activeTab === "meters" ? "var(--panel)" : "transparent",
            padding: "7px 14px",
            borderRadius: 7,
            fontSize: 13,
            fontWeight: 600,
            color: activeTab === "meters" ? "var(--text)" : "var(--text-3)",
            boxShadow: activeTab === "meters" ? "var(--shadow-sm)" : "none",
            display: "flex", alignItems: "center", gap: 8,
          }}>
          <Icon name="gauge" />
          {t("ut_meters")} <span style={{ color: "var(--text-3)" }}>· {meters.length}</span>
        </button>
      </div>

      {activeTab === "types" ? (
        <div className="card">
          <div className="card-head">
            <div>
              <h3 className="card-title">{t("ut_types")}</h3>
              <p className="card-sub">{t("ut_types_sub")}</p>
            </div>
          </div>
          <div className="table-wrap">
            <table className="data">
              <thead>
                <tr>
                  <th>{t("ut_col_label")}</th>
                  <th>{t("ut_col_unit")}</th>
                  <th style={{ textAlign: "right" }}>{t("ut_col_default_rate")}</th>
                  <th>{lang === "en" ? "Meters" : "จำนวนมิเตอร์"}</th>
                  <th style={{ width: 90, textAlign: "right" }}></th>
                </tr>
              </thead>
              <tbody>
                {types.map(u => {
                  const count = meters.filter(m => m.type === u.id).length;
                  return (
                    <tr key={u.id}>
                      <td>
                        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                          <span style={{ width: 24, height: 24, borderRadius: 6, background: u.color + "20", display: "grid", placeItems: "center", color: u.color }}>
                            <Icon name={u.id === "elec" ? "bolt" : u.id === "water" ? "droplet" : u.id === "net" ? "wifi" : u.id === "phone" ? "phone" : "sliders"} />
                          </span>
                          <div>
                            <div className="cell-strong">{lang === "th" ? u.label_th : u.label_en}</div>
                            <div style={{ fontSize: 11.5, color: "var(--text-3)" }}>{lang === "th" ? u.label_en : u.label_th}</div>
                          </div>
                        </div>
                      </td>
                      <td className="cell-mono">{lang === "th" ? u.unit_th : u.unit_en}</td>
                      <td className="cell-num cell-strong" style={{ textAlign: "right" }}>฿{u.rate.toFixed(2)}</td>
                      <td>{count}</td>
                      <td style={{ textAlign: "right" }}>
                        <button className="btn subtle" style={{ padding: 6 }} onClick={() => setEditingType({ ...u })}><Icon name="edit" /></button>
                        <button className="btn subtle danger" style={{ padding: 6 }} onClick={() => removeType(u.id)}><Icon name="trash" /></button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      ) : (
        <div className="card">
          <div className="card-head">
            <div>
              <h3 className="card-title">{t("ut_meters")}</h3>
              <p className="card-sub">{t("ut_meters_sub")}</p>
            </div>
          </div>
          <div className="table-wrap">
            <table className="data">
              <thead>
                <tr>
                  <th>{t("ut_col_meter_id")}</th>
                  <th>{t("ut_col_label")}</th>
                  <th>{t("ut_col_assigned_type")}</th>
                  <th>{t("ut_col_location")}</th>
                  <th style={{ textAlign: "right" }}>{t("ut_col_last_reading")}</th>
                  <th style={{ width: 90, textAlign: "right" }}></th>
                </tr>
              </thead>
              <tbody>
                {meters.map(m => {
                  const ut = types.find(x => x.id === m.type);
                  const bld = D.buildings.find(b => b.id === m.building);
                  return (
                    <tr key={m.id}>
                      <td className="cell-mono cell-strong">{m.id}</td>
                      <td>{lang === "th" ? m.label_th : m.label_en}</td>
                      <td>
                        {ut && (
                          <span className="type-badge">
                            <span className="swatch" style={{ background: ut.color }}></span>
                            {lang === "th" ? ut.label_th : ut.label_en}
                          </span>
                        )}
                      </td>
                      <td style={{ color: "var(--text-2)", display: "flex", alignItems: "center", gap: 6 }}>
                        <Icon name="building" style={{ color: "var(--text-3)" }} />
                        {bld ? (lang === "th" ? bld.label_th : bld.label_en) : "—"}
                      </td>
                      <td className="cell-num" style={{ textAlign: "right" }}>
                        {m.last.toLocaleString()} <span style={{ color: "var(--text-3)" }}>{ut ? (lang === "th" ? ut.unit_th : ut.unit_en) : ""}</span>
                      </td>
                      <td style={{ textAlign: "right" }}>
                        <button className="btn subtle" style={{ padding: 6 }} onClick={() => setEditingMeter({ ...m, _origId: m.id })}><Icon name="edit" /></button>
                        <button className="btn subtle danger" style={{ padding: 6 }} onClick={() => removeMeter(m.id)}><Icon name="trash" /></button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {editingType && (
        <div className="modal-backdrop" onClick={() => setEditingType(null)}>
          <div className="modal" onClick={(e) => e.stopPropagation()}>
            <div className="modal-head">
              <h3 className="modal-title">{t("edit")} · {lang === "th" ? editingType.label_th : editingType.label_en}</h3>
              <p className="modal-sub">{lang === "en" ? "Edit the label, unit, default rate, and accent." : "แก้ไขชื่อ หน่วย อัตรา และสี"}</p>
            </div>
            <div className="modal-body">
              <div className="field-row">
                <div className="field">
                  <label>{lang === "en" ? "Label (English)" : "ชื่อ (อังกฤษ)"}</label>
                  <input type="text" value={editingType.label_en} onChange={(e) => setEditingType({ ...editingType, label_en: e.target.value })} />
                </div>
                <div className="field">
                  <label>{lang === "en" ? "Label (Thai)" : "ชื่อ (ไทย)"}</label>
                  <input type="text" value={editingType.label_th} onChange={(e) => setEditingType({ ...editingType, label_th: e.target.value })} />
                </div>
              </div>
              <div className="field-row">
                <div className="field">
                  <label>{t("ut_col_unit")}</label>
                  <input type="text" value={editingType.unit_en} onChange={(e) => setEditingType({ ...editingType, unit_en: e.target.value, unit_th: e.target.value })} />
                </div>
                <div className="field">
                  <label>{t("ut_col_default_rate")} (฿)</label>
                  <input type="number" step="0.01" value={editingType.rate} onChange={(e) => setEditingType({ ...editingType, rate: Number(e.target.value) })} />
                </div>
              </div>
              <div className="field">
                <label>{lang === "en" ? "Accent color" : "สีประจำประเภท"}</label>
                <div style={{ display: "flex", gap: 8 }}>
                  {["#EA580C","#0EA5E9","#10B981","#A855F7","#F59E0B","#EC4899","#06B6D4"].map(c => (
                    <button key={c} onClick={() => setEditingType({ ...editingType, color: c })}
                            style={{
                              width: 28, height: 28, borderRadius: 7,
                              background: c, border: editingType.color === c ? "2px solid var(--text)" : "1px solid var(--line)",
                              cursor: "pointer", padding: 0,
                            }} />
                  ))}
                </div>
              </div>
            </div>
            <div className="modal-foot">
              <button className="btn" onClick={() => setEditingType(null)}>{t("cancel")}</button>
              <button className="btn accent" onClick={saveType}><Icon name="check" className="ico" />{t("save")}</button>
            </div>
          </div>
        </div>
      )}

      {editingMeter && (
        <div className="modal-backdrop" onClick={() => setEditingMeter(null)}>
          <div className="modal" onClick={(e) => e.stopPropagation()}>
            <div className="modal-head">
              <h3 className="modal-title">{t("edit")} · {editingMeter._origId}</h3>
              <p className="modal-sub">{lang === "en" ? "Update the meter's label, type, location, or last reading." : "แก้ไขชื่อ ประเภท หรือที่ตั้งของมิเตอร์"}</p>
            </div>
            <div className="modal-body">
              <div className="field-row">
                <div className="field">
                  <label>{t("ut_col_meter_id")}</label>
                  <input type="text" value={editingMeter.id} onChange={(e) => setEditingMeter({ ...editingMeter, id: e.target.value })} />
                </div>
                <div className="field">
                  <label>{t("ut_col_assigned_type")}</label>
                  <select value={editingMeter.type} onChange={(e) => setEditingMeter({ ...editingMeter, type: e.target.value })}>
                    {types.map(u => <option key={u.id} value={u.id}>{lang === "th" ? u.label_th : u.label_en}</option>)}
                  </select>
                </div>
              </div>
              <div className="field-row">
                <div className="field">
                  <label>{lang === "en" ? "Label (English)" : "ชื่อ (อังกฤษ)"}</label>
                  <input type="text" value={editingMeter.label_en} onChange={(e) => setEditingMeter({ ...editingMeter, label_en: e.target.value })} />
                </div>
                <div className="field">
                  <label>{lang === "en" ? "Label (Thai)" : "ชื่อ (ไทย)"}</label>
                  <input type="text" value={editingMeter.label_th} onChange={(e) => setEditingMeter({ ...editingMeter, label_th: e.target.value })} />
                </div>
              </div>
              <div className="field-row">
                <div className="field">
                  <label>{t("ut_col_location")}</label>
                  <select value={editingMeter.building} onChange={(e) => setEditingMeter({ ...editingMeter, building: e.target.value })}>
                    {D.buildings.map(b => <option key={b.id} value={b.id}>{lang === "th" ? b.label_th : b.label_en}</option>)}
                  </select>
                </div>
                <div className="field">
                  <label>{t("ut_col_last_reading")}</label>
                  <input type="number" value={editingMeter.last} onChange={(e) => setEditingMeter({ ...editingMeter, last: Number(e.target.value) })} />
                </div>
              </div>
            </div>
            <div className="modal-foot">
              <button className="btn" onClick={() => setEditingMeter(null)}>{t("cancel")}</button>
              <button className="btn accent" onClick={saveMeter}><Icon name="check" className="ico" />{t("save")}</button>
            </div>
          </div>
        </div>
      )}

      {showAdd && (
        <div className="modal-backdrop" onClick={() => setShowAdd(false)}>
          <div className="modal" onClick={(e) => e.stopPropagation()}>
            <div className="modal-head">
              <h3 className="modal-title">{activeTab === "types" ? t("ut_add_type") : t("ut_add_meter")}</h3>
              <p className="modal-sub">
                {activeTab === "types"
                  ? (lang === "en" ? "Add a new category of utility, e.g. gas, solar." : "เพิ่มหมวดหมู่สาธารณูปโภคใหม่ เช่น แก๊ส โซลาร์")
                  : (lang === "en" ? "Add a physical or virtual meter to track." : "เพิ่มมิเตอร์ทางกายภาพหรือเสมือนเพื่อบันทึก")}
              </p>
            </div>
            <div className="modal-body">
              <div className="field-row">
                <div className="field">
                  <label>{lang === "en" ? "Label (English)" : "ชื่อ (อังกฤษ)"}</label>
                  <input type="text" value={newLabel} onChange={(e) => setNewLabel(e.target.value)}
                         placeholder={activeTab === "types" ? "e.g. Gas" : "e.g. Water Meter Bldg 3"} />
                </div>
                <div className="field">
                  <label>{lang === "en" ? "Label (Thai)" : "ชื่อ (ไทย)"}</label>
                  <input type="text" value={newLabelTh} onChange={(e) => setNewLabelTh(e.target.value)}
                         placeholder={activeTab === "types" ? "เช่น แก๊ส" : "เช่น มิเตอร์น้ำ อาคาร 3"} />
                </div>
              </div>
              {activeTab === "types" ? (
                <div className="field-row">
                  <div className="field">
                    <label>{t("ut_col_unit")}</label>
                    <input type="text" value={newUnit} onChange={(e) => setNewUnit(e.target.value)} placeholder="kWh" />
                  </div>
                  <div className="field">
                    <label>{t("ut_col_default_rate")} (฿)</label>
                    <input type="number" step="0.01" value={newRate} onChange={(e) => setNewRate(Number(e.target.value))} placeholder="0.00" />
                  </div>
                </div>
              ) : (
                <div className="field-row">
                  <div className="field">
                    <label>{t("ut_col_assigned_type")}</label>
                    <select value={newMeterType} onChange={(e) => setNewMeterType(e.target.value)}>
                      {types.map(u => <option key={u.id} value={u.id}>{lang === "th" ? u.label_th : u.label_en}</option>)}
                    </select>
                  </div>
                  <div className="field">
                    <label>{t("ut_col_location")}</label>
                    <select value={newMeterBuilding} onChange={(e) => setNewMeterBuilding(e.target.value)}>
                      {D.buildings.map(b => <option key={b.id} value={b.id}>{lang === "th" ? b.label_th : b.label_en}</option>)}
                    </select>
                  </div>
                </div>
              )}
            </div>
            <div className="modal-foot">
              <button className="btn" onClick={() => setShowAdd(false)}>{t("cancel")}</button>
              <button className="btn accent" onClick={addItem}>
                <Icon name="check" className="ico" />
                {t("save")}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

window.UtilitiesPage = UtilitiesPage;