/* ============================================================
   Fashion AI Workflow — UI Kit Shared Components
   Babel JSX. Loaded after React.
   ============================================================ */

const ACCENTS = {
  "01": { color: "#c9b8ff", tint: "rgba(201,184,255,0.14)", soft: "rgba(201,184,255,0.10)", border: "rgba(201,184,255,0.45)", name: "BRIEF" },
  "02": { color: "#7dd3fc", tint: "rgba(125,211,252,0.14)", soft: "rgba(125,211,252,0.10)", border: "rgba(125,211,252,0.45)", name: "STORYBOARD" },
  "03": { color: "#fdba74", tint: "rgba(253,186,116,0.14)", soft: "rgba(253,186,116,0.10)", border: "rgba(253,186,116,0.45)", name: "HIGGSFIELD" },
  "04": { color: "#6ee7b7", tint: "rgba(110,231,183,0.14)", soft: "rgba(110,231,183,0.10)", border: "rgba(110,231,183,0.45)", name: "TECH FLAT" },
  "05": { color: "#f87171", tint: "rgba(248,113,113,0.14)", soft: "rgba(248,113,113,0.10)", border: "rgba(248,113,113,0.45)", name: "PATTERN" },
  "06": { color: "#f0abfc", tint: "rgba(240,171,252,0.14)", soft: "rgba(240,171,252,0.10)", border: "rgba(240,171,252,0.45)", name: "GRID + VIDEO" },
};

/* ---------------- Header ---------------- */
function Header({ phase, setPhase }) {
  const ac = ACCENTS[phase];
  return (
    <header className="hdr">
      <div className="hdr-left">
        <span className="hdr-mark" style={{ background: ac.color }}>
          <svg viewBox="0 0 26 26" width="14" height="14"><path d="M13 5 L14.2 11.8 L21 13 L14.2 14.2 L13 21 L11.8 14.2 L5 13 L11.8 11.8 Z" fill="#080810"/></svg>
        </span>
        <span className="hdr-name">Fashion AI Workflow</span>
        <span className="hdr-sub">/ TOOL · v1.0</span>
      </div>
      <nav className="hdr-nav" style={{ flexWrap: "wrap" }}>
        {Object.keys(ACCENTS).map((p) => {
          const active = p === phase;
          const c = ACCENTS[p];
          return (
            <button
              key={p}
              className="nav-btn"
              onClick={() => setPhase(p)}
              style={{
                color: active ? c.color : "#94a3b8",
                borderColor: active ? c.border : "rgba(255,255,255,0.07)",
                background: active ? c.tint : "transparent",
              }}
            >{p}</button>
          );
        })}
      </nav>
    </header>
  );
}

/* ---------------- Phase Header ---------------- */
function PhaseHeader({ phase, title, subtitle }) {
  const ac = ACCENTS[phase];
  return (
    <div className="phase-head">
      <div className="phase-tag" style={{ color: ac.color }}>PHASE {phase} · {ac.name}</div>
      <h1 className="phase-h1">{title}</h1>
      <p className="phase-sub">{subtitle}</p>
    </div>
  );
}

/* ---------------- Module Card ---------------- */
function Module({ phase, title, children }) {
  const ac = ACCENTS[phase];
  return (
    <section className="module" style={{ borderLeftColor: ac.color }}>
      {title && <div className="module-title" style={{ color: ac.color }}>{title}</div>}
      {children}
    </section>
  );
}

/* ---------------- Field ---------------- */
function Field({ label, value, onChange, placeholder, type = "text" }) {
  return (
    <label className="field">
      <span className="field-label">{label}</span>
      <input
        className="field-input"
        type={type}
        value={value || ""}
        onChange={(e) => onChange && onChange(e.target.value)}
        placeholder={placeholder}
      />
    </label>
  );
}

/* ---------------- Chip ---------------- */
function Chip({ label, active, onClick, color = "#c9b8ff", tint = "rgba(201,184,255,0.14)", border = "rgba(201,184,255,0.45)" }) {
  return (
    <button
      className="chip"
      onClick={onClick}
      style={active ? {
        color, background: tint, borderColor: border,
      } : {}}
    >{label}</button>
  );
}

function ChipGroup({ phase, options, value, onChange }) {
  const ac = ACCENTS[phase];
  return (
    <div className="chips">
      {options.map((o) => (
        <Chip
          key={o}
          label={o}
          active={value === o}
          onClick={() => onChange(o)}
          color={ac.color}
          tint={ac.tint}
          border={ac.border}
        />
      ))}
    </div>
  );
}

/* ---------------- Loading Dots ---------------- */
function LoadingDots({ phase, text = "GENERATING" }) {
  const ac = ACCENTS[phase];
  return (
    <div className="loading-block">
      <div className="dots">
        {[0, 1, 2, 3, 4].map((i) => (
          <span key={i} className="dot" style={{ background: ac.color, animationDelay: `${i * 0.15}s` }} />
        ))}
      </div>
      <div className="loading-label">{text}</div>
    </div>
  );
}

/* ---------------- Copy Button ---------------- */
function CopyBtn({ text }) {
  const [done, setDone] = React.useState(false);
  return (
    <button
      className={"copy-btn" + (done ? " copy-done" : "")}
      onClick={() => {
        try { navigator.clipboard && navigator.clipboard.writeText(text || ""); } catch (e) {}
        setDone(true);
        setTimeout(() => setDone(false), 1500);
      }}
    >{done ? "✓ COPIED" : "COPY"}</button>
  );
}

/* ---------------- Prompt Block ---------------- */
function PromptBlock({ phase, label, content, loading }) {
  const ac = ACCENTS[phase];
  return (
    <div className="pb" style={{ borderLeftColor: ac.color }}>
      <div className="pb-head">
        <div className="pb-label" style={{ color: ac.color }}>{label}</div>
        {!loading && content && <CopyBtn text={content} />}
      </div>
      {loading && !content && <LoadingDots phase={phase} text="STREAMING" />}
      {content && <div className="pb-body">{content}</div>}
      {!loading && !content && <div className="pb-empty">awaiting generation…</div>}
    </div>
  );
}

/* ---------------- Info / QC / Warning Box ---------------- */
function InfoBox({ phase, label, children, kind }) {
  // kind: 'info' | 'qc' | 'warn' — but typically follows phase color
  const ac = ACCENTS[phase];
  return (
    <div className="ibox" style={{ borderColor: ac.border, background: ac.soft }}>
      {label && <div className="ibox-label" style={{ color: ac.color }}>{label}</div>}
      <div className="ibox-body">{children}</div>
    </div>
  );
}

/* ---------------- Action Bar ---------------- */
function ActionBar({ children, columns = "1fr 1fr 2fr" }) {
  return <div className="action-bar" style={{ gridTemplateColumns: columns }}>{children}</div>;
}

function ActionBtn({ label, phase, variant = "ghost", disabled, onClick, hint }) {
  // variant: ghost | secondary (12% tint) | primary (12% tint)
  const ac = phase ? ACCENTS[phase] : null;
  const style = {};
  if (disabled) {
    style.color = "#475569";
    style.borderStyle = "dashed";
  } else if (variant === "ghost" || !ac) {
    style.color = "#94a3b8";
  } else {
    style.color = ac.color;
    style.borderColor = ac.border;
    style.background = ac.tint;
  }
  return (
    <button className="action-btn" style={style} disabled={disabled} onClick={onClick} title={hint || ""}>
      {label}
    </button>
  );
}

Object.assign(window, {
  ACCENTS, Header, PhaseHeader, Module, Field, Chip, ChipGroup,
  LoadingDots, CopyBtn, PromptBlock, InfoBox, ActionBar, ActionBtn,
});