/* modals.jsx - editor forms for all entities */
const { useState: mS } = React;

function MinutesInput({ value, onChange }) {
  return (
    <div className="min-input">
      <Input type="number" min="0" step="5" value={value} onChange={(e) => onChange(e.target.value === "" ? "" : Number(e.target.value))} />
      <span className="min-suffix">minutes = {value ? (value / 60).toFixed(value % 60 ? 1 : 0) : 0}h</span>
    </div>
  );
}

function SessionModal({ studentId, session, students, dispatch, onClose }) {
  const ed = !!session;
  const needPick = !studentId && !ed;
  const [sid, setSid] = mS(studentId || (students && students[0] && students[0].id) || "");
  const [f, setF] = mS(session || { date: new Date().toISOString().slice(0, 10), goal: "", topic: "", minutes: 60, billable: true, note: "", pinned: false });
  const [toast, setToast] = mS("");
  const set = (k, v) => setF((p) => ({ ...p, [k]: v }));
  const targetId = studentId || sid;
  const doSave = () => {
    if (!targetId) return false;
    dispatch({ type: ed ? "editSession" : "addSession", studentId: targetId, session: { ...f, minutes: Number(f.minutes) || 0 } });
    return true;
  };
  const save = () => { if (doSave()) onClose(); };
  const saveMore = () => {
    if (!doSave()) return;
    const nm = (students || []).find((s) => s.id === targetId)?.name || "";
    setToast(`Saved to ${nm}`);
    setF((p) => ({ ...p, goal: "", topic: "", minutes: 60, note: "", pinned: false }));
    setTimeout(() => setToast(""), 2200);
  };
  return (
    <Modal title={ed ? "Edit Session" : "Log Session"} onClose={onClose} footer={
      <>
        {!ed && <Button variant="secondary" onClick={saveMore}>Save and continue</Button>}
        <Button variant="ghost" onClick={onClose}>Cancel</Button>
        <Button variant="primary" onClick={save}>Save</Button>
      </>
    }>
      {toast && <div className="form-toast"><Icon.check size={15} /> {toast}</div>}
      <div className="form-grid">
        {needPick && (
          <Field label="Student" span>
            <Select value={sid} onChange={(e) => setSid(e.target.value)}>
              {(students || []).map((s) => <option key={s.id} value={s.id}>{s.name}{s.cnName ? ` - ${s.cnName}` : ""}</option>)}
            </Select>
          </Field>
        )}
        <Field label="Date"><Input type="date" value={f.date} onChange={(e) => set("date", e.target.value)} /></Field>
        <Field label="Duration"><MinutesInput value={f.minutes} onChange={(v) => set("minutes", v)} /></Field>
        <Field label="Company / Goal"><Input value={f.goal} onChange={(e) => set("goal", e.target.value)} placeholder="OCC, BPI, Case Prep..." /></Field>
        <Field label="Details"><Input value={f.topic} onChange={(e) => set("topic", e.target.value)} placeholder="Market sizing..." /></Field>
        <Field label="Note" span><Textarea rows="3" value={f.note} onChange={(e) => set("note", e.target.value)} placeholder="Optional notes..." /></Field>
        <div className="form-toggles" style={{ gridColumn: "1 / -1" }}>
          <label className="check"><input type="checkbox" checked={f.billable !== false} onChange={(e) => set("billable", e.target.checked)} /> Billable</label>
          <label className="check"><input type="checkbox" checked={!!f.pinned} onChange={(e) => set("pinned", e.target.checked)} /> <Icon.pin size={13} /> Pin</label>
        </div>
      </div>
    </Modal>
  );
}

function PackageModal({ studentId, pkg, dispatch, onClose }) {
  const ed = !!pkg;
  const [f, setF] = mS(pkg || { label: "", minutes: 600, date: new Date().toISOString().slice(0, 10), note: "" });
  const set = (k, v) => setF((p) => ({ ...p, [k]: v }));
  const save = () => { dispatch({ type: ed ? "editPackage" : "addPackage", studentId, pkg: { ...f, minutes: Number(f.minutes) || 0 } }); onClose(); };
  return (
    <Modal title={ed ? "Edit Package" : "Add Package"} onClose={onClose} footer={<><Button variant="ghost" onClick={onClose}>Cancel</Button><Button variant="primary" onClick={save}>Save</Button></>}>
      <div className="form-grid">
        <Field label="Package Name" span><Input value={f.label} onChange={(e) => set("label", e.target.value)} placeholder="10hrs package" /></Field>
        <Field label="Allowance"><MinutesInput value={f.minutes} onChange={(v) => set("minutes", v)} /></Field>
        <Field label="Purchase Date"><Input type="date" value={f.date} onChange={(e) => set("date", e.target.value)} /></Field>
        <Field label="Note" span><Input value={f.note} onChange={(e) => set("note", e.target.value)} placeholder="Optional" /></Field>
      </div>
    </Modal>
  );
}

function PricingModal({ studentId, current, dispatch, onClose }) {
  const [v, setV] = mS(current || "");
  return (
    <Modal title="Pricing / Notes" subtitle="Free text, multiline supported" onClose={onClose} footer={<><Button variant="ghost" onClick={onClose}>Cancel</Button><Button variant="primary" onClick={() => { dispatch({ type: "editPricing", studentId, pricingNote: v }); onClose(); }}>Save</Button></>}>
      <Textarea rows="6" value={v} onChange={(e) => setV(e.target.value)} placeholder="Pricing notes..." />
    </Modal>
  );
}

function StudentModal({ student, students, dispatch, onClose }) {
  const ed = !!student;
  const [f, setF] = mS(student || { name: "", cnName: "", status: "active", tags: [], pricingNote: "", packages: [], sessions: [] });
  const [err, setErr] = mS("");
  const set = (k, v) => setF((p) => ({ ...p, [k]: v }));
  const save = () => {
    const name = f.name.trim();
    if (!name) return setErr("Student name is required.");
    const dup = (students || []).some((s) => s.id !== f.id && s.name.trim().toLowerCase() === name.toLowerCase());
    if (dup) return setErr("This student already exists in the library.");
    dispatch({ type: ed ? "editStudent" : "addStudent", student: { ...f, name, tags: (typeof f.tags === "string" ? f.tags.split(",").map((t) => t.trim()).filter(Boolean) : f.tags) } });
    onClose();
  };
  return (
    <Modal title={ed ? "Edit Library Student" : "Add Student to Library"} onClose={onClose} footer={<><Button variant="ghost" onClick={onClose}>Cancel</Button><Button variant="primary" onClick={save}>Save</Button></>}>
      {err && <div className="form-toast tone-red"><Icon.alert size={15} /> {err}</div>}
      <div className="form-grid">
        <Field label="Student Name"><Input value={f.name} onChange={(e) => { setErr(""); set("name", e.target.value); }} placeholder="Julia" /></Field>
        <Field label="Alias / Chinese Name"><Input value={f.cnName} onChange={(e) => set("cnName", e.target.value)} placeholder="Optional" /></Field>
        <Field label="Status"><Select value={f.status} onChange={(e) => set("status", e.target.value)}><option value="active">Active</option><option value="paused">Paused</option></Select></Field>
        <Field label="Coaching Categories" hint="comma separated"><Input value={Array.isArray(f.tags) ? f.tags.join(", ") : f.tags} onChange={(e) => set("tags", e.target.value)} placeholder="OCC, Case" /></Field>
      </div>
    </Modal>
  );
}

function PaymentModal({ payment, students, dispatch, onClose }) {
  const ed = !!payment;
  const [f, setF] = mS(payment || { date: new Date().toISOString().slice(0, 10), dir: "in", student: "", from: "", to: "Rain", amount: 0, currency: "GBP", status: "cleared", note: "" });
  const [toast, setToast] = mS("");
  const [err, setErr] = mS("");
  const set = (k, v) => setF((p) => ({ ...p, [k]: v }));
  const studentNames = (students || []).map((s) => s.name).sort((a, b) => a.localeCompare(b));
  const isKnownStudent = (name) => studentNames.some((s) => s === name);
  const studentValue = f.student || (f.dir === "in" ? f.from : "");
  const legacyStudent = studentValue && !isKnownStudent(studentValue) ? studentValue : "";
  const setStudent = (name) => {
    setErr("");
    setF((p) => ({ ...p, student: name, from: p.dir === "in" ? name : p.from }));
  };
  const doSave = () => {
    if (f.dir === "in" && !isKnownStudent(studentValue)) {
      setErr("Add this student to the Library before recording an incoming payment.");
      return false;
    }
    dispatch({ type: ed ? "editPayment" : "addPayment", payment: { ...f, student: studentValue, from: f.dir === "in" ? studentValue : f.from, amount: Number(f.amount) || 0 } });
    return true;
  };
  const save = () => { if (doSave()) onClose(); };
  const saveMore = () => {
    if (!doSave()) return;
    setToast(`Saved ${window.LP.fmt.money(Number(f.amount) || 0, f.currency)}`);
    setF((p) => ({ ...p, student: "", from: "", amount: 0, note: "" }));
    setTimeout(() => setToast(""), 2200);
  };
  return (
    <Modal title={ed ? "Edit Payment" : "Log Payment"} onClose={onClose} footer={
      <>
        {!ed && <Button variant="secondary" onClick={saveMore}>Save and continue</Button>}
        <Button variant="ghost" onClick={onClose}>Cancel</Button>
        <Button variant="primary" onClick={save}>Save</Button>
      </>
    }>
      {toast && <div className="form-toast"><Icon.check size={15} /> {toast}</div>}
      {err && <div className="form-toast tone-red"><Icon.alert size={15} /> {err}</div>}
      <div className="form-grid">
        <Field label="Date"><Input type="date" value={f.date} onChange={(e) => set("date", e.target.value)} /></Field>
        <Field label="Direction">
          <div className="seg seg-inmodal">
            <button className={f.dir === "in" ? "is-active" : ""} onClick={() => setF((p) => ({ ...p, dir: "in", from: p.student || "" }))}>Incoming</button>
            <button className={f.dir === "out" ? "is-active" : ""} onClick={() => set("dir", "out")}>Outgoing</button>
          </div>
        </Field>
        <Field label="Student">
          <Select value={studentValue} onChange={(e) => setStudent(e.target.value)}>
            <option value="">{f.dir === "in" ? "Select from Library" : "No linked student"}</option>
            {legacyStudent && <option value={legacyStudent}>{legacyStudent} (legacy)</option>}
            {studentNames.map((name) => <option key={name} value={name}>{name}</option>)}
          </Select>
        </Field>
        <Field label="From"><Input value={f.dir === "in" ? studentValue : f.from} readOnly={f.dir === "in"} onChange={(e) => set("from", e.target.value)} placeholder={f.dir === "in" ? "Synced from Library student" : "Rain"} /></Field>
        <Field label="To"><Input value={f.to} onChange={(e) => set("to", e.target.value)} placeholder={f.dir === "in" ? "Rain / Kim / Elaine" : "Elaine / Xukai"} /></Field>
        <Field label="Amount"><Input type="number" min="0" step="0.01" value={f.amount} onChange={(e) => set("amount", e.target.value)} /></Field>
        <Field label="Currency"><Select value={f.currency} onChange={(e) => set("currency", e.target.value)}><option value="GBP">GBP</option><option value="RMB">RMB</option></Select></Field>
        <Field label="Status"><Select value={f.status} onChange={(e) => set("status", e.target.value)}><option value="cleared">Cleared</option><option value="pending">Pending</option><option value="returned">Returned</option></Select></Field>
        <Field label="Note" span><Input value={f.note} onChange={(e) => set("note", e.target.value)} placeholder="Optional" /></Field>
      </div>
    </Modal>
  );
}

Object.assign(window, { SessionModal, PackageModal, PricingModal, StudentModal, PaymentModal });