// Master Data + Settings

// Local field helper (scope-isolated)
function Field({ label, children }) {
  return (<div className="field"><label>{label}</label>{children}</div>);
}

function MasterData({ ctx }) {
  const { packages, setPackages } = ctx;   // ← single source of truth (loaded from Supabase)
  const [tab, setTab] = React.useState("packages");
  const [editing, setEditing] = React.useState(null);
  const [saving, setSaving] = React.useState(false);
  const [deleting, setDeleting] = React.useState(null);   // code being deleted
  const [deleteErr, setDeleteErr] = React.useState(null); // error message
  const [confirmDelete, setConfirmDelete] = React.useState(null); // code awaiting confirmation

  const tabs = [
    { id: "packages", label: "Warranty Packages", count: packages.length },
    { id: "brands", label: "Brands", count: (window.ARS_DATA?.BRANDS || []).length },
    { id: "zones", label: "Service Zones", count: 4 },
  ];

  const addPkg = () => setEditing({ code: "", model: "", years: 5, zone: "BKK and Metropolitan", price: 0, isNew: true });

  const savePkg = async (pkg) => {
    setSaving(true);
    const row = { code: pkg.code.trim(), model: pkg.model.trim(), years: Number(pkg.years) || 5, zone: pkg.zone, price: Number(pkg.price) || 0 };
    // Persist to Supabase (upsert by primary key = code)
    if (window.sb) {
      const { error } = await window.sb.from('warranty_packages').upsert(row, { onConflict: 'code' });
      if (error) { console.error('Save package error:', error); setSaving(false); return; }
    }
    // Update shared ctx state so wizard sees the change immediately
    if (pkg.isNew) {
      setPackages([...packages, row]);
    } else {
      setPackages(packages.map(p => p.code === pkg.original ? row : p));
    }
    setSaving(false);
    setEditing(null);
  };

  const deletePkg = async (code) => {
    setDeleting(code);
    setDeleteErr(null);
    setConfirmDelete(null);
    console.log('[MasterData] Deleting package:', code);
    if (window.sb) {
      const { data, error } = await window.sb.from('warranty_packages').delete().eq('code', code).select();
      console.log('[MasterData] Delete result:', { data, error });
      if (error) {
        console.error('Delete package error:', error);
        setDeleteErr(`ลบไม่สำเร็จ: ${error.message} (code: ${error.code || 'unknown'})`);
        setDeleting(null);
        return;
      }
      if (!data || data.length === 0) {
        setDeleteErr(`ลบไม่สำเร็จ: ไม่พบ row "${code}" ใน Supabase หรือ RLS policy ไม่อนุญาตให้ลบ (ตรวจ session ว่ายัง login อยู่)`);
        setDeleting(null);
        return;
      }
    }
    setPackages(packages.filter(p => p.code !== code));
    setDeleting(null);
  };

  return (
    <div className="page">
      <div className="page__header">
        <div>
          <h1 className="page__title">Master Data</h1>
          <p className="page__sub">จัดการข้อมูลรากของระบบ — Warranty packages, brands, service zones</p>
        </div>
        <div className="page__actions">
          {tab === "packages" && <button className="btn btn--primary" onClick={addPkg}><Icon name="plus" size={14}/> เพิ่ม Package</button>}
          {tab === "brands" && <button className="btn btn--primary"><Icon name="plus" size={14}/> เพิ่ม Brand</button>}
        </div>
      </div>

      <div className="card" style={{ marginBottom: 16 }}>
        <div className="filter-row" style={{ borderBottom: 0 }}>
          {tabs.map(t => (
            <button key={t.id} className={"chip " + (tab === t.id ? "is-active" : "")} onClick={() => setTab(t.id)}>
              {t.label} <span className="count">{t.count}</span>
            </button>
          ))}
        </div>
      </div>

      {tab === "packages" && (
        <div className="card">
          {deleteErr && (
            <div style={{ margin: "12px 16px 0", padding: "10px 14px", background: "#fff1f2", border: "1px solid #fca5a5", borderRadius: 6, color: "#dc2626", fontSize: 13, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span><strong>Error:</strong> {deleteErr}</span>
              <button className="btn btn--ghost btn--sm" style={{ color: "#dc2626" }} onClick={() => setDeleteErr(null)}><Icon name="x" size={13}/></button>
            </div>
          )}
          <table className="table">
            <thead>
              <tr>
                <th>Package Code</th><th>Model</th><th>Period</th><th>Service Zone</th><th style={{textAlign:"right"}}>List Price (THB)</th><th style={{width:80}}></th>
              </tr>
            </thead>
            <tbody>
              {packages.map(p => (
                <tr key={p.code} className="clickable" onClick={() => setEditing({ ...p, original: p.code })}>
                  <td className="mono" style={{ fontWeight: 600 }}>{p.code}</td>
                  <td>{p.model}</td>
                  <td><span className="badge badge--info">{p.years} ปี</span></td>
                  <td>{p.zone}</td>
                  <td className="mono num" style={{ textAlign: "right" }}>{p.price.toLocaleString()}</td>
                  <td style={{ textAlign: "right" }}>
                    <button className="btn btn--ghost btn--sm" onClick={(e) => { e.stopPropagation(); setEditing({ ...p, original: p.code }); }}><Icon name="edit" size={13}/></button>
                    <button className="btn btn--ghost btn--sm" style={{ color: 'var(--jt-red)', opacity: deleting === p.code ? 0.5 : 1 }} disabled={deleting === p.code} onClick={(e) => { e.stopPropagation(); setConfirmDelete(p.code); }}>
                      {deleting === p.code ? <Icon name="clock" size={13}/> : <Icon name="trash" size={13}/>}
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {tab === "brands" && (
        <div className="card">
          <table className="table">
            <thead><tr><th>Brand</th><th>Category</th><th>Active Packages</th><th style={{width:120}}></th></tr></thead>
            <tbody>
              {(window.ARS_DATA?.BRANDS || []).map(b => (
                <tr key={b.name}>
                  <td>
                    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                      <div className="avatar" style={{ background: b.name === "QNAP" ? "#0f72c1" : b.name === "Synology" ? "#000" : "#16a34a", width: 30, height: 30, fontSize: 11 }}>{b.name.slice(0,2).toUpperCase()}</div>
                      <strong>{b.name}</strong>
                    </div>
                  </td>
                  <td>{b.category}</td>
                  <td><span className="badge badge--info">{b.activePackages} packages</span></td>
                  <td><button className="btn btn--ghost btn--sm"><Icon name="edit" size={13}/> Edit</button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {tab === "zones" && (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 14 }}>
          {[
            { code: "BKK", name: "BKK and Metropolitan", desc: "กรุงเทพและปริมณฑล", sla: "On-site ภายใน 8 ชม.", color: "#0f2a6b" },
            { code: "NRT", name: "Upcountry (North)", desc: "ภาคเหนือ", sla: "On-site ภายใน 24 ชม.", color: "#16a34a" },
            { code: "EST", name: "Upcountry (East)", desc: "ภาคตะวันออก", sla: "On-site ภายใน 24 ชม.", color: "#d97706" },
            { code: "UPC", name: "Upcountry (Other)", desc: "ต่างจังหวัดอื่นๆ", sla: "On-site ภายใน 48 ชม.", color: "#7c3aed" },
          ].map(z => (
            <div key={z.code} className="card">
              <div className="card__body">
                <div className="spread">
                  <div>
                    <div className="mono" style={{ fontSize: 11, color: z.color, fontWeight: 600 }}>{z.code}</div>
                    <h3 style={{ margin: "2px 0", fontFamily: "var(--font-display)", fontSize: 16 }}>{z.name}</h3>
                    <div className="muted small">{z.desc}</div>
                  </div>
                  <button className="btn btn--ghost btn--sm"><Icon name="edit" size={13}/></button>
                </div>
                <div className="divider"></div>
                <div className="spread"><span className="muted small">SLA</span><span style={{ fontWeight: 500 }}>{z.sla}</span></div>
              </div>
            </div>
          ))}
        </div>
      )}

      {editing && <EditPackageModal editing={editing} setEditing={setEditing} onSave={savePkg} saving={saving} />}
      {confirmDelete && <ConfirmDeleteModal code={confirmDelete} onCancel={() => setConfirmDelete(null)} onConfirm={() => deletePkg(confirmDelete)} />}
    </div>
  );
}

// Custom confirm modal — replaces unreliable window.confirm
function ConfirmDeleteModal({ code, onCancel, onConfirm }) {
  return (
    <ModalBackdrop onClose={onCancel}>
      <div className="card" style={{ width: 420, maxWidth: "90vw", boxShadow: "var(--shadow-pop)" }}
           onMouseDown={(e) => e.stopPropagation()}
           onClick={(e) => e.stopPropagation()}>
        <div className="card__header">
          <h3 className="card__title" style={{ color: "var(--jt-red)" }}>ยืนยันการลบ</h3>
        </div>
        <div className="card__body">
          <p style={{ margin: 0, fontSize: 14 }}>คุณต้องการลบ Package <strong className="mono">"{code}"</strong> ออกจากระบบใช่หรือไม่?</p>
          <p className="muted small" style={{ marginTop: 8, marginBottom: 0 }}>การลบนี้ไม่สามารถยกเลิกได้</p>
        </div>
        <div style={{ padding: "14px 18px", borderTop: "1px solid var(--border)", display: "flex", justifyContent: "flex-end", gap: 8 }}>
          <button className="btn" onClick={onCancel}>ยกเลิก</button>
          <button className="btn btn--primary" style={{ background: "var(--jt-red)", borderColor: "var(--jt-red)" }} onClick={onConfirm}>
            <Icon name="trash" size={13}/> ลบ
          </button>
        </div>
      </div>
    </ModalBackdrop>
  );
}

// Shared modal backdrop — closes ONLY when mousedown AND mouseup both happen
// directly on the backdrop element. Dragging text from inside the modal out to
// the backdrop will NOT close it.
function ModalBackdrop({ onClose, children }) {
  const downOnBackdrop = React.useRef(false);
  return (
    <div
      style={{ position: "fixed", inset: 0, background: "rgba(11,21,49,0.4)", display: "grid", placeItems: "center", zIndex: 100 }}
      onMouseDown={(e) => {
        // Set to true ONLY if mousedown happened directly on this backdrop element
        downOnBackdrop.current = (e.target === e.currentTarget);
      }}
      onMouseUp={(e) => {
        // Close ONLY if both mousedown AND mouseup happened directly on backdrop
        if (downOnBackdrop.current && e.target === e.currentTarget) {
          onClose();
        }
        downOnBackdrop.current = false;
      }}
    >
      {children}
    </div>
  );
}

function EditPackageModal({ editing, setEditing, onSave, saving }) {
  const [form, setForm] = React.useState(editing);
  const update = (k, v) => setForm({ ...form, [k]: v });
  const handleClose = () => { if (!saving) setEditing(null); };
  return (
    <ModalBackdrop onClose={handleClose}>
      <div className="card" style={{ width: 480, maxWidth: "90vw", boxShadow: "var(--shadow-pop)" }}
           onMouseDown={(e) => e.stopPropagation()}
           onMouseUp={(e) => e.stopPropagation()}
           onClick={(e) => e.stopPropagation()}>
        <div className="card__header">
          <h3 className="card__title">{editing.isNew ? "เพิ่ม Warranty Package" : "แก้ไข Package"}</h3>
          <button className="btn btn--ghost btn--sm" onClick={handleClose}><Icon name="x" size={14}/></button>
        </div>
        <div className="card__body" style={{ display: "grid", gap: 12 }}>
          <Field label="Package Code"><input className="input mono" value={form.code} onChange={e => update("code", e.target.value)} placeholder="QNP-..." disabled={!editing.isNew} /></Field>
          <Field label="Model"><input className="input" value={form.model} onChange={e => update("model", e.target.value)} /></Field>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 10 }}>
            <Field label="Period (years)"><input className="input" type="number" min={1} value={form.years} onChange={e => update("years", Number(e.target.value))} /></Field>
            <Field label="Service Zone">
              <select className="input" value={form.zone} onChange={e => update("zone", e.target.value)}>
                <option>BKK and Metropolitan</option>
                <option>Upcountry</option>
                <option>Upcountry (NRT)</option>
                <option>Upcountry (EST)</option>
              </select>
            </Field>
          </div>
          <Field label="List Price (THB)"><input className="input num" type="number" min={0} value={form.price} onChange={e => update("price", Number(e.target.value))} /></Field>
        </div>
        <div style={{ padding: "14px 18px", borderTop: "1px solid var(--border)", display: "flex", justifyContent: "flex-end", gap: 8 }}>
          <button className="btn" disabled={saving} onClick={handleClose}>ยกเลิก</button>
          <button className="btn btn--primary" disabled={saving || !form.code.trim() || !form.model.trim()} onClick={() => onSave(form)}>
            {saving ? <><Icon name="clock" size={14}/> กำลังบันทึก…</> : <><Icon name="check" size={14}/> บันทึก</>}
          </button>
        </div>
      </div>
    </ModalBackdrop>
  );
}

window.MasterData = MasterData;