// Common UI components

const ToastContext = React.createContext({ push: () => {} });
const useToast = () => React.useContext(ToastContext);

const ToastProvider = ({ children }) => {
  const [list, setList] = React.useState([]);
  const idRef = React.useRef(0);
  const push = React.useCallback((msg, opts = {}) => {
    const id = ++idRef.current;
    const t = { id, msg, kind: opts.kind || "info", duration: opts.duration || 3200 };
    setList(p => [...p, t]);
    setTimeout(() => setList(p => p.filter(x => x.id !== id)), t.duration);
  }, []);
  const colors = { success:"var(--teal)", error:"var(--pink)", warn:"var(--yellow)", info:"var(--blue)" };
  return (
    <ToastContext.Provider value={{ push }}>
      {children}
      <div className="toast-stack">
        {list.map(t => (
          <div key={t.id} className="toast" style={{ borderLeftColor: colors[t.kind] || colors.info }}>
            {t.msg}
          </div>
        ))}
      </div>
    </ToastContext.Provider>
  );
};

const Modal = ({ open, onClose, children, maxWidth = 820 }) => {
  React.useEffect(() => {
    if (!open) return;
    const h = e => e.key === "Escape" && onClose();
    window.addEventListener("keydown", h);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", h); document.body.style.overflow = ""; };
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" style={{ maxWidth }} onClick={e => e.stopPropagation()}>
        {children}
      </div>
    </div>
  );
};

const Drawer = ({ open, onClose, children, width = 600 }) => {
  React.useEffect(() => {
    if (!open) return;
    const h = e => e.key === "Escape" && onClose();
    window.addEventListener("keydown", h);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", h); document.body.style.overflow = ""; };
  }, [open, onClose]);
  if (!open) return null;
  return (
    <>
      <div className="drawer-backdrop" onClick={onClose} />
      <div className="drawer" style={{ width }}>{children}</div>
    </>
  );
};

// สถานะแบบประเมิน
const STATUS_CFG = {
  draft:     { label: "ยังไม่ประเมิน",        cls: "chip",           dot: "#9aa3bd" },
  self_done: { label: "รอผู้บังคับบัญชา",     cls: "chip chip-yellow", dot: "var(--yellow)" },
  sup_done:  { label: "รอฝ่ายบุคคลรับรอง",    cls: "chip chip-blue",   dot: "var(--blue)" },
  completed: { label: "เสร็จสมบูรณ์",          cls: "chip chip-teal",   dot: "var(--teal)" },
};

const StatusChip = ({ status }) => {
  const cfg = STATUS_CFG[status] || { label: status, cls: "chip", dot: "#9aa3bd" };
  return (
    <span className={cfg.cls}>
      <span className="dot" style={{ background: cfg.dot }} />
      {cfg.label}
    </span>
  );
};

// Score display (1-5 star-like)
const ScoreBar = ({ score, max = 5 }) => {
  if (!score) return <span className="faint">—</span>;
  const pct = (score / max) * 100;
  const color = score >= 4 ? "var(--teal)" : score >= 3 ? "var(--yellow)" : "var(--pink)";
  return (
    <div style={{ display:"flex", alignItems:"center", gap:8 }}>
      <div style={{ flex:1, height:6, borderRadius:3, background:"var(--surface-alt, rgba(255,255,255,0.08))", overflow:"hidden" }}>
        <div style={{ width:`${pct}%`, height:"100%", background:color, borderRadius:3, transition:"width 0.4s" }} />
      </div>
      <span style={{ fontSize:12, fontWeight:600, color, minWidth:18 }}>{score}</span>
    </div>
  );
};

const GlowBlob = ({ color, x, y, size = 400, opacity = 0.18 }) => (
  <div style={{ position:"fixed", left:x, top:y, width:size, height:size, background:`radial-gradient(circle, ${color}, transparent 60%)`, opacity, filter:"blur(60px)", pointerEvents:"none", zIndex:0 }} />
);

const LoadingSplash = () => (
  <div style={{ minHeight:"100vh", display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center", gap:18 }}>
    <div style={{ width:48, height:48, borderRadius:"50%", border:"3px solid rgba(255,255,255,0.1)", borderTopColor:"var(--teal)", animation:"spin 0.9s linear infinite" }} />
    <div className="faint" style={{ fontSize:14 }}>กำลังโหลด…</div>
    <style>{`@keyframes spin { to { transform:rotate(360deg); } }`}</style>
  </div>
);

const ErrorSplash = ({ message, onRetry }) => (
  <div style={{ minHeight:"100vh", display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center", gap:14, padding:24 }}>
    <div style={{ fontSize:18, fontWeight:600 }}>โหลดข้อมูลไม่สำเร็จ</div>
    <div className="muted" style={{ fontSize:13, maxWidth:480, textAlign:"center" }}>{message}</div>
    <button className="btn btn-primary btn-sm shine" onClick={onRetry}>ลองอีกครั้ง</button>
  </div>
);

const ConfirmDialog = ({ open, title, message, onConfirm, onCancel, danger }) => {
  if (!open) return null;
  return (
    <div style={{ position:"fixed", inset:0, zIndex:9000, background:"rgba(0,0,0,0.5)", backdropFilter:"blur(4px)", display:"flex", alignItems:"center", justifyContent:"center" }}>
      <div className="glass" style={{ width:"100%", maxWidth:420, padding:"28px 28px 24px", borderRadius:16, boxShadow:"0 20px 50px rgba(0,0,0,0.4)" }}>
        <div style={{ fontSize:17, fontWeight:600, marginBottom:8 }}>{title}</div>
        <div className="muted" style={{ fontSize:13.5, lineHeight:1.7, marginBottom:24 }}>{message}</div>
        <div className="row gap-10" style={{ justifyContent:"flex-end" }}>
          <button className="btn btn-ghost btn-sm" onClick={onCancel}>ยกเลิก</button>
          <button className={`btn btn-sm ${danger ? "btn-danger" : "btn-primary"}`} onClick={onConfirm}>ยืนยัน</button>
        </div>
      </div>
    </div>
  );
};

const SetPasswordModal = ({ onDone }) => {
  const [pwd, setPwd] = React.useState(""); const [pwd2, setPwd2] = React.useState("");
  const [show, setShow] = React.useState(false); const [loading, setLoading] = React.useState(false);
  const [err, setErr] = React.useState(""); const [ok, setOk] = React.useState(false);
  const valid = pwd.length >= 6 && pwd === pwd2;
  const submit = async e => {
    e.preventDefault(); if (!valid) return;
    setLoading(true); setErr("");
    try { await window.TRN_AUTH.updatePassword(pwd); setOk(true); setTimeout(onDone, 1800); }
    catch (ex) { setErr(ex.message || "เกิดข้อผิดพลาด"); }
    finally { setLoading(false); }
  };
  return (
    <div style={{ position:"fixed", inset:0, zIndex:9999, background:"rgba(0,0,0,0.65)", backdropFilter:"blur(6px)", display:"flex", alignItems:"center", justifyContent:"center" }}>
      <div className="glass" style={{ width:"100%", maxWidth:400, padding:"32px", borderRadius:18 }}>
        {ok ? (
          <div style={{ textAlign:"center", padding:"12px 0" }}>
            <div style={{ fontSize:40, marginBottom:12 }}>✅</div>
            <div style={{ fontSize:18, fontWeight:600 }}>ตั้งรหัสผ่านสำเร็จ</div>
          </div>
        ) : (
          <form onSubmit={submit}>
            <div style={{ fontSize:20, fontWeight:700, marginBottom:20 }}>ตั้งรหัสผ่านใหม่</div>
            <label className="field-label">รหัสผ่าน</label>
            <input className="input" type={show?"text":"password"} value={pwd} onChange={e=>setPwd(e.target.value)} style={{ marginBottom:12 }} autoFocus />
            <label className="field-label">ยืนยัน</label>
            <input className="input" type={show?"text":"password"} value={pwd2} onChange={e=>setPwd2(e.target.value)} style={{ marginBottom:16, borderColor:pwd2&&pwd!==pwd2?"var(--pink)":"" }} />
            {err && <div style={{ color:"var(--pink)", fontSize:12, marginBottom:10 }}>{err}</div>}
            <button type="submit" className="btn btn-primary shine" disabled={!valid||loading} style={{ width:"100%", height:44, justifyContent:"center" }}>
              {loading ? "กำลังบันทึก…" : "ยืนยัน"}
            </button>
          </form>
        )}
      </div>
    </div>
  );
};

Object.assign(window, {
  ToastProvider, useToast,
  Modal, Drawer,
  StatusChip, ScoreBar, GlowBlob,
  LoadingSplash, ErrorSplash,
  ConfirmDialog, SetPasswordModal,
  STATUS_CFG,
});