// Audit log + Position editor

const { Avatar } = window.UI;
const Icon = window.Icon;

// === Audit Log ===
const KIND_TONE = {
  score: "info", override: "amber", edit: "info", create: "good",
  upload: "info", invite: "info", delete: "rose", export: "info",
  login: "muted", rescore: "info", consent: "good", stage: "info",
};

const groupByDay = (events) => {
  const out = {};
  events.forEach(e => {
    const day = e.ts.split(" ")[0];
    if (!out[day]) out[day] = [];
    out[day].push(e);
  });
  return out;
};

const dayLabel = (day, lang) => {
  const today = "2026-05-05";
  const yesterday = "2026-05-04";
  if (lang === "th") {
    if (day === today) return "วันนี้";
    if (day === yesterday) return "เมื่อวาน";
  } else {
    if (day === today) return "Today";
    if (day === yesterday) return "Yesterday";
  }
  return day;
};

const AuditLog = ({ positions, events, onOpen }) => {
  const { t, lang } = window.I18N.useI18n();
  const allEvents = events || window.MOCK.AUDIT_EVENTS || [];
  const [filter, setFilter] = React.useState({ kind: "all", position: "all", range: "d30" });

  const visible = allEvents.filter(e => {
    if (filter.kind !== "all" && e.kind !== filter.kind) return false;
    if (filter.position !== "all" && e.positionId !== filter.position) return false;
    return true;
  });

  const grouped = groupByDay(visible);
  const days = Object.keys(grouped).sort().reverse();

  const kinds = ["score", "override", "edit", "create", "upload", "invite", "delete", "export", "login", "rescore", "consent", "stage"];

  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <div className="page-eyebrow">{t.audit.eyebrow}</div>
          <h1 className="page-title">{t.audit.title}</h1>
          <p className="page-sub">{t.audit.sub}</p>
        </div>
        <button className="btn btn-ghost">
          <Icon name="upload" size={14}/>
          <span>{t.audit.exportBtn}</span>
        </button>
      </div>

      <div className="card audit-filters">
        <div className="audit-filter">
          <label className="audit-filter-label">{t.audit.filterAll}</label>
          <select className="settings-select" value={filter.kind} onChange={e => setFilter(f => ({ ...f, kind: e.target.value }))}>
            <option value="all">{t.audit.filterAll}</option>
            {kinds.map(k => <option key={k} value={k}>{t.audit.kinds[k]}</option>)}
          </select>
        </div>
        <div className="audit-filter">
          <label className="audit-filter-label">{t.audit.filterPosition}</label>
          <select className="settings-select" value={filter.position} onChange={e => setFilter(f => ({ ...f, position: e.target.value }))}>
            <option value="all">{t.audit.allPositions}</option>
            {positions.map(p => <option key={p.id} value={p.id}>{p.title}</option>)}
          </select>
        </div>
        <div className="audit-filter">
          <label className="audit-filter-label">{t.audit.filterRange}</label>
          <select className="settings-select" value={filter.range} onChange={e => setFilter(f => ({ ...f, range: e.target.value }))}>
            <option value="d7">{t.audit.ranges.d7}</option>
            <option value="d30">{t.audit.ranges.d30}</option>
            <option value="d90">{t.audit.ranges.d90}</option>
            <option value="all">{t.audit.ranges.all}</option>
          </select>
        </div>
        <div className="audit-filter audit-filter-count">
          <span className="audit-count-num">{visible.length}</span>
          <span className="audit-count-label">events</span>
        </div>
      </div>

      {days.length === 0 && (
        <div className="card audit-empty">{t.audit.empty}</div>
      )}

      {days.map(day => (
        <div key={day} className="audit-day">
          <div className="audit-day-head">{dayLabel(day, lang)}</div>
          <div className="card audit-list">
            {grouped[day].map((e, i) => (
              <AuditRow key={e.id} event={e} last={i === grouped[day].length - 1} t={t}/>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

const AuditRow = ({ event: e, last, t }) => {
  const tone = KIND_TONE[e.kind] || "muted";
  const time = e.ts.split(" ")[1];
  return (
    <div className={"audit-row" + (last ? " is-last" : "")}>
      <div className="audit-time">{time}</div>
      <div className={"audit-dot audit-dot-" + tone}/>
      <div className="audit-body">
        <div className="audit-line">
          <span className="audit-actor">{e.actor}</span>
          <span className={"audit-kind audit-kind-" + tone}>{t.audit.kinds[e.kind]}</span>
          <span className="audit-target">{e.target}</span>
        </div>
        {(e.before || e.after) && (
          <div className="audit-delta">
            {e.before && <span className="audit-before">{e.before}</span>}
            {e.before && e.after && <span className="audit-arrow">{t.audit.delta}</span>}
            {e.after && <span className="audit-after">{e.after}</span>}
          </div>
        )}
        {e.reason && (
          <div className="audit-reason">
            <Icon name="message" size={11}/>
            <span>{e.reason}</span>
          </div>
        )}
      </div>
    </div>
  );
};

// === Position editor ===
const DEFAULT_WEIGHTS = { experience: 25, skills: 20, industry: 15, leadership: 15, kpi: 15, stability: 10 };
const DEFAULT_FORM = {
  title: "", department: "", level: "Senior", employmentType: "Full-time",
  location: "Bangkok HQ", reportsTo: "", openings: 1, status: "Open",
  jd: "", musts: [], nices: [], disqs: [], kpis: [],
  weights: { ...DEFAULT_WEIGHTS },
};

const PositionEdit = ({ position, mode, onSave, onCancel }) => {
  const { t } = window.I18N.useI18n();
  const s = t.posEdit;
  const [tab, setTab] = React.useState("basics");
  const [saved, setSaved] = React.useState(false);

  const initial = React.useMemo(() => {
    if (mode === "edit" && position) {
      return {
        title: position.title || "",
        department: position.department || "",
        level: position.level || "Senior",
        employmentType: position.employmentType || "Full-time",
        location: position.location || "Bangkok HQ",
        reportsTo: position.reportsTo || "",
        openings: position.openings || 1,
        status: position.status || "Open",
        jd: position.jd || "",
        musts: position.requirements?.must || [],
        nices: position.requirements?.nice || [],
        disqs: position.requirements?.disq || [],
        kpis: position.kpis || [],
        weights: { ...DEFAULT_WEIGHTS, ...(position.weights || {}) },
      };
    }
    return { ...DEFAULT_FORM };
  }, [position, mode]);

  const [form, setForm] = React.useState(initial);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const total = Object.values(form.weights).reduce((a, b) => a + b, 0);
  const weightsValid = total === 100;

  const tabs = [
    { id: "basics",  label: s.tabs.basics  },
    { id: "jd",      label: s.tabs.jd      },
    { id: "reqs",    label: s.tabs.reqs    },
    { id: "kpis",    label: s.tabs.kpis    },
    { id: "scoring", label: s.tabs.scoring },
  ];

  const handleSave = () => {
    if (!weightsValid) { setTab("scoring"); return; }
    setSaved(true);
    setTimeout(() => onSave(form), 700);
  };

  return (
    <div className="fade-in posedit">
      <div className="page-head">
        <div>
          <div className="page-eyebrow">{mode === "new" ? s.newEyebrow : s.editEyebrow}</div>
          <h1 className="page-title">{mode === "new" ? s.newTitle : s.editTitle}</h1>
          <p className="page-sub">{s.sub}</p>
        </div>
        <div className="row gap-8">
          <button className="btn btn-ghost" onClick={onCancel}>{s.cancel}</button>
          <button
            className={"btn btn-primary" + (saved ? " is-saved" : "")}
            onClick={handleSave}
            disabled={!weightsValid && tab === "scoring"}
          >
            {saved ? "✓ " + s.saved : (mode === "new" ? s.publish : s.save)}
          </button>
        </div>
      </div>

      <div className="posedit-tabs">
        {tabs.map(tb => (
          <button
            key={tb.id}
            className={"posedit-tab" + (tab === tb.id ? " is-active" : "")}
            onClick={() => setTab(tb.id)}
          >
            {tb.label}
          </button>
        ))}
      </div>

      {tab === "basics"  && <BasicsTab  form={form} set={set} s={s}/>}
      {tab === "jd"      && <JdTab      form={form} set={set} s={s}/>}
      {tab === "reqs"    && <ReqsTab    form={form} set={set} s={s}/>}
      {tab === "kpis"    && <KpisTab    form={form} set={set} s={s}/>}
      {tab === "scoring" && <ScoringTab form={form} set={set} s={s} total={total} valid={weightsValid}/>}
    </div>
  );
};

// === Basics tab ===
const BasicsTab = ({ form, set, s }) => (
  <div className="card">
    <div className="settings-field">
      <div className="settings-field-label">{s.basics.title}</div>
      <input className="settings-input" value={form.title} onChange={e => set("title", e.target.value)} placeholder={s.basics.titlePh}/>
      <div className="settings-field-hint">{s.basics.titleHint}</div>
    </div>
    <div className="settings-grid-2">
      <div className="settings-field">
        <div className="settings-field-label">{s.basics.department}</div>
        <input className="settings-input" value={form.department} onChange={e => set("department", e.target.value)}/>
      </div>
      <div className="settings-field">
        <div className="settings-field-label">{s.basics.level}</div>
        <select className="settings-select" value={form.level} onChange={e => set("level", e.target.value)}>
          {s.basics.levelOpts.map(o => <option key={o} value={o}>{o}</option>)}
        </select>
      </div>
    </div>
    <div className="settings-grid-2">
      <div className="settings-field">
        <div className="settings-field-label">{s.basics.employmentType}</div>
        <select className="settings-select" value={form.employmentType} onChange={e => set("employmentType", e.target.value)}>
          {s.basics.employmentOpts.map(o => <option key={o} value={o}>{o}</option>)}
        </select>
      </div>
      <div className="settings-field">
        <div className="settings-field-label">{s.basics.location}</div>
        <input className="settings-input" value={form.location} onChange={e => set("location", e.target.value)}/>
      </div>
    </div>
    <div className="settings-grid-2">
      <div className="settings-field">
        <div className="settings-field-label">{s.basics.reportsTo}</div>
        <input className="settings-input" value={form.reportsTo} onChange={e => set("reportsTo", e.target.value)}/>
      </div>
      <div className="settings-field">
        <div className="settings-field-label">{s.basics.openings}</div>
        <input type="number" min="1" className="settings-input" value={form.openings} onChange={e => set("openings", parseInt(e.target.value, 10) || 1)}/>
        <div className="settings-field-hint">{s.basics.openingsHint}</div>
      </div>
    </div>
    <div className="settings-field">
      <div className="settings-field-label">{s.basics.status}</div>
      <div className="settings-segments">
        {Object.keys(s.basics.statusOpts).map(k => (
          <button key={k} className={"settings-segment" + (form.status === k ? " is-active" : "")} onClick={() => set("status", k)}>
            {s.basics.statusOpts[k]}
          </button>
        ))}
      </div>
    </div>
  </div>
);

// === JD tab ===
const JdTab = ({ form, set, s }) => (
  <div className="card">
    <div className="settings-field">
      <div className="row gap-8" style={{ justifyContent: "space-between", alignItems: "flex-end", marginBottom: 6 }}>
        <div className="settings-field-label" style={{ marginBottom: 0 }}>{s.jd.label}</div>
        <button className="btn btn-ghost btn-sm">
          <Icon name="sparkles" size={12}/>
          <span>{s.jd.aiAssist}</span>
        </button>
      </div>
      <textarea
        className="settings-input posedit-jd"
        value={form.jd}
        onChange={e => set("jd", e.target.value)}
        placeholder={s.jd.placeholder}
        rows={14}
      />
      <div className="row" style={{ justifyContent: "space-between", marginTop: 6 }}>
        <div className="settings-field-hint" style={{ marginTop: 0 }}>{s.jd.hint}</div>
        <div className="settings-field-hint" style={{ marginTop: 0 }}>{form.jd.length} {s.jd.chars}</div>
      </div>
    </div>
  </div>
);

// === Requirements tab ===
const ReqList = ({ items, onChange, title, hint, addLabel, ph, tone }) => (
  <div className="card posedit-reqcard">
    <div className="card-head">
      <h3 className={"card-title posedit-reqtitle posedit-req-" + tone}>{title}</h3>
    </div>
    <div className="settings-field-hint" style={{ marginTop: 0, marginBottom: 12 }}>{hint}</div>
    {items.length === 0 && (
      <div className="posedit-empty">— {ph} —</div>
    )}
    {items.map((item, i) => (
      <div key={i} className="posedit-req-row">
        <span className={"posedit-req-bullet posedit-req-" + tone}>·</span>
        <input
          className="settings-input posedit-req-input"
          value={item}
          onChange={e => onChange(items.map((x, j) => j === i ? e.target.value : x))}
          placeholder={ph}
        />
        <button className="posedit-req-remove" onClick={() => onChange(items.filter((_, j) => j !== i))}>
          <Icon name="x" size={12}/>
        </button>
      </div>
    ))}
    <button className="posedit-add" onClick={() => onChange([...items, ""])}>
      + {addLabel}
    </button>
  </div>
);

const ReqsTab = ({ form, set, s }) => (
  <div className="posedit-reqs">
    <ReqList items={form.musts} onChange={v => set("musts", v)} title={s.reqs.mustTitle} hint={s.reqs.mustHint} addLabel={s.reqs.addItem} ph={s.reqs.placeholder} tone="must"/>
    <ReqList items={form.nices} onChange={v => set("nices", v)} title={s.reqs.niceTitle} hint={s.reqs.niceHint} addLabel={s.reqs.addNice} ph={s.reqs.placeholder} tone="nice"/>
    <ReqList items={form.disqs} onChange={v => set("disqs", v)} title={s.reqs.disqTitle} hint={s.reqs.disqHint} addLabel={s.reqs.addDisq} ph={s.reqs.placeholder} tone="disq"/>
  </div>
);

// === KPIs tab ===
const KpisTab = ({ form, set, s }) => (
  <div className="card">
    <div className="card-head">
      <h3 className="card-title">{s.kpis.title}</h3>
    </div>
    <div className="settings-field-hint" style={{ marginTop: 0, marginBottom: 16 }}>{s.kpis.hint}</div>
    {form.kpis.length === 0 && <div className="posedit-empty">— {s.kpis.placeholder} —</div>}
    {form.kpis.map((k, i) => (
      <div key={i} className="posedit-kpi-row">
        <span className="posedit-kpi-num">{i + 1}</span>
        <input
          className="settings-input posedit-req-input"
          value={k}
          onChange={e => set("kpis", form.kpis.map((x, j) => j === i ? e.target.value : x))}
          placeholder={s.kpis.placeholder}
        />
        <button className="posedit-req-remove" onClick={() => set("kpis", form.kpis.filter((_, j) => j !== i))}>
          <Icon name="x" size={12}/>
        </button>
      </div>
    ))}
    <button className="posedit-add" onClick={() => set("kpis", [...form.kpis, ""])}>
      + {s.kpis.addKpi}
    </button>
  </div>
);

// === Scoring weights tab ===
const ScoringTab = ({ form, set, s, total, valid }) => {
  const dims = ["experience", "skills", "industry", "leadership", "kpi", "stability"];
  const setW = (k, v) => set("weights", { ...form.weights, [k]: parseInt(v, 10) || 0 });
  return (
    <div className="card">
      <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start", marginBottom: 16 }}>
        <div>
          <h3 className="card-title">{s.scoring.title}</h3>
          <div className="settings-field-hint" style={{ marginTop: 4 }}>{s.scoring.hint}</div>
        </div>
        <div className={"posedit-total" + (valid ? " is-valid" : " is-invalid")}>
          <div className="posedit-total-num">{total}%</div>
          <div className="posedit-total-label">{valid ? s.scoring.valid : s.scoring.invalid}</div>
        </div>
      </div>
      {dims.map(d => (
        <div key={d} className="posedit-weight-row">
          <div className="posedit-weight-label">{s.scoring.dims[d]}</div>
          <input
            type="range" min="0" max="60" step="1"
            value={form.weights[d]}
            onChange={e => setW(d, e.target.value)}
            className="posedit-weight-slider"
          />
          <input
            type="number" min="0" max="100"
            value={form.weights[d]}
            onChange={e => setW(d, e.target.value)}
            className="settings-input posedit-weight-input"
          />
          <span className="posedit-weight-pct">%</span>
        </div>
      ))}
      <button className="btn btn-ghost btn-sm" onClick={() => set("weights", { ...DEFAULT_WEIGHTS })} style={{ marginTop: 8 }}>
        {s.scoring.reset}
      </button>
    </div>
  );
};

window.SCREENS_E = { AuditLog, PositionEdit };