/* ============================================================
   WCW Product Hub — Product detail + collaboration
   ============================================================ */
const { useState: useStateDetail, useRef: useRefDetail } = React;

/* stage tracker in the dark header */
function Tracker({ stage }) {
  const D = window.HUB_DATA;
  const cur = D.stageIndex(stage);
  return (
    <div className="tracker">
      {D.STAGES.map((s, i) => (
        <React.Fragment key={s.id}>
          <div className={`tk ${i < cur ? "done" : i === cur ? "current" : ""}`}>
            <span className="tk-dot">{i < cur ? <Icon name="check" size={13} /> : i + 1}</span>
            {s.name}
          </div>
          {i < D.STAGES.length - 1 && <div className={`tk-line ${i < cur ? "done" : ""}`}></div>}
        </React.Fragment>
      ))}
    </div>
  );
}

/* one field-ownership group */
function FieldGroup({ title, owner, ownerColor, fields, defaultOpen }) {
  const [open, setOpen] = useStateDetail(defaultOpen);
  return (
    <div className="fgroup">
      <div className="fgroup-head" onClick={() => setOpen(o => !o)}>
        <div className="fg-title">
          <Icon name={open ? "chevDown" : "chevRight"} size={16} style={{ color: "var(--ink-3)" }} />
          {title}
        </div>
        <span className="fg-owner" style={{ background: `color-mix(in oklch, ${ownerColor} 15%, white)`, color: ownerColor }}>{owner}</span>
      </div>
      {open && (
        <div className="fgroup-body">
          {fields.map((f, i) => (
            <div className="frow" key={i}>
              <div className="fr-label">{f.label}{f.req && <span className="req">*</span>}</div>
              <div className={`fr-val ${f.empty ? "empty" : ""}`}>
                {f.code ? <span className="tag code">{f.value}</span> : f.mono ? <span className="mono">{f.value}</span> : (f.value || "Not set")}
              </div>
              <div className="fr-flag">
                {f.flag === "ai" && <span className="derived"><Icon name="sparkle" size={12} /> AI-drafted</span>}
                {f.flag === "ok" && <Icon name="check" size={15} style={{ color: "var(--live)" }} />}
                {f.flag === "warn" && <span className="tag warn"><Icon name="alert" size={11} /> check</span>}
                {f.flag === "derived" && <span className="derived"><Icon name="settings" size={11} /> auto</span>}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

/* comment thread + composer */
function CollabPanel({ product, me, onComment }) {
  const [tab, setTab] = useStateDetail("comments");
  const [draft, setDraft] = useStateDetail("");
  const [showMention, setShowMention] = useStateDetail(false);
  const taRef = useRefDetail(null);
  const D = window.HUB_DATA;
  const people = Object.keys(D.PEOPLE);

  const send = () => {
    if (!draft.trim()) return;
    onComment(product.id, { who: me.name, role: me.id, text: draft.trim(), time: "just now" });
    setDraft("");
  };
  const insertMention = (name) => {
    setDraft(d => {
      const at = d.lastIndexOf("@");
      return (at >= 0 ? d.slice(0, at) : d) + "@" + name + " ";
    });
    setShowMention(false);
    taRef.current && taRef.current.focus();
  };

  const comments = product.comments || [];
  const activity = product.activity || [];

  return (
    <div className="collab card card-pad">
      <div className="tabs">
        <button className={tab === "comments" ? "active" : ""} onClick={() => setTab("comments")}>
          <Icon name="chat" size={14} /> Discussion {comments.length > 0 && <span className="cb-num">{comments.length}</span>}
        </button>
        <button className={tab === "activity" ? "active" : ""} onClick={() => setTab("activity")}>
          <Icon name="activity" size={14} /> Activity
        </button>
      </div>

      {tab === "comments" && (
        <>
          <div className="thread">
            {comments.length === 0 && <div className="empty" style={{ padding: "28px 10px" }}><div className="e-ico"><Icon name="chat" size={24} /></div><b>No comments yet</b>Start the conversation — @mention a teammate to loop them in.</div>}
            {comments.map((c, i) => {
              const rd = D.roleById(c.role);
              return (
                <div className={`cmt ${c.role === "system" ? "system" : ""}`} key={i}>
                  <div className="c-av"><Avatar name={c.who} size="sm" /></div>
                  <div className="c-body">
                    <div className="c-top">
                      <span className="c-name">{c.who}</span>
                      {rd && <span className="c-role" style={{ background: `color-mix(in oklch, ${rd.color} 16%, white)`, color: rd.color }}>{rd.role.split(" ")[0]}</span>}
                      <span className="c-time">{c.time}</span>
                    </div>
                    <div className="c-text"><CommentText text={c.text} /></div>
                  </div>
                </div>
              );
            })}
          </div>

          <div className="composer" style={{ position: "relative" }}>
            {showMention && (
              <div className="mention-pop">
                <div className="menu-label">Mention someone</div>
                {people.slice(0, 6).map(n => (
                  <button className="menu-item" key={n} onClick={() => insertMention(n)}>
                    <Avatar name={n} size="sm" />
                    <div className="who"><b>{n}</b><span>{D.PEOPLE[n].role}</span></div>
                  </button>
                ))}
              </div>
            )}
            <textarea ref={taRef} value={draft} placeholder="Add a comment…  use @ to mention"
              onChange={e => {
                setDraft(e.target.value);
                const v = e.target.value;
                setShowMention(v.endsWith("@"));
              }}
              onKeyDown={e => { if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) send(); }} />
            <div className="comp-foot">
              <div className="comp-tools">
                <button className="icon-btn" style={{ width: 30, height: 30 }} onClick={() => { setDraft(d => d + "@"); setShowMention(true); taRef.current.focus(); }} title="Mention">@</button>
                <button className="icon-btn" style={{ width: 30, height: 30 }} title="Attach"><Icon name="doc" size={15} /></button>
              </div>
              <button className="btn btn-primary btn-sm" onClick={send}><Icon name="send" size={13} /> Comment</button>
            </div>
          </div>
        </>
      )}

      {tab === "activity" && (
        <div className="feed">
          {[...activity].reverse().map((a, i) => (
            <div className="feed-item" key={i}>
              <div className="fi-av"><Avatar name={a.who} size="sm" /></div>
              <div className="fi-body"><b>{a.who}</b> {a.action}<div className="fi-time">{a.time}</div></div>
            </div>
          ))}
          {activity.length === 0 && <div className="empty" style={{ padding: "28px 10px" }}><b>No activity yet</b></div>}
        </div>
      )}
    </div>
  );
}

function DetailView({ product, me, role, onBack, onComment, onAdvance, onReview }) {
  const D = window.HUB_DATA;
  const p = product;
  const naming = D.NAMING[p.dept];

  const basics = [
    { label: "Working description", value: p.name },
    { label: "Department", value: p.dept, code: true, flag: "ok" },
    { label: "Class", value: p.cls, flag: p.stage === "intake" ? "ai" : "ok" },
    { label: "Brand", value: p.brand },
    { label: "Catch weight", value: p.catch },
  ];
  const sourcing = [
    { label: "Vendor", value: p.vendor },
    { label: "Origin", value: p.origin },
    { label: "Case cost", value: p.cost },
    { label: "Lead time", value: "3–5 Days", code: false },
  ];
  const pack = [
    { label: "Pack format", value: p.pack, mono: true, flag: "ok" },
    { label: "Pack qty / size / UoM", value: p.pack.split(" ")[0], flag: "derived", mono: true },
    { label: "Net weight", value: p.netwt ? p.netwt + " lb" : "10.6 lb" },
    { label: "Dimensions (L×W×H)", value: "15.5 × 11 × 9.5 in", mono: true },
    { label: "Cubic feet", value: "0.94", flag: "derived", mono: true },
  ];
  const marketing = [
    { label: "PPRO name", value: p.pproDesc || "—", empty: !p.pproDesc, flag: p.pproDesc ? "ok" : "ai" },
    { label: "Commodity", value: p.deptName.toUpperCase() + " - GEN", flag: "ai" },
    { label: "Ecom department", value: p.stage === "intake" ? "—" : p.deptName + " > " + p.cls, empty: p.stage === "intake" },
    { label: "Romantic copy", value: p.pproDesc ? "Drafted — see Marketing review" : "—", empty: !p.pproDesc, flag: p.pproDesc ? "ok" : "ai" },
  ];

  const stageActions = {
    intake: { label: "Submit to Marketing", next: "mkt", icon: "send" },
    mkt: { label: "Review & approve", review: true, icon: "sparkle" },
    setup: { label: "Mark activated", next: "live", icon: "check" },
    live: null,
  }[p.stage];

  return (
    <div className="page viewfade">
      <button className="btn btn-quiet btn-sm" onClick={onBack} style={{ marginBottom: 16 }}><Icon name="chevRight" size={14} style={{ transform: "rotate(180deg)" }} /> Back to pipeline</button>

      <div className="detail-head">
        <div className="dh-crumb"><b>{p.deptName}</b> · {p.cls} · {p.buyer}</div>
        <h1>{p.name}</h1>
        <div className="dh-meta">
          <span className="tag code">{p.dept}</span>
          <span>{p.vendor}</span>
          <span>·</span>
          <span>Owner <span className="who">{p.assignedTo}</span></span>
          <span>·</span>
          <Aging days={p.days} />
          {p.isNew && <span className="tag" style={{ background: "rgba(255,255,255,.14)", color: "#fff" }}>NEW</span>}
        </div>
        <Tracker stage={p.stage} />
      </div>

      <div className="detail-grid">
        <div>
          {p.flags && p.flags.length > 0 && (
            <div className="alert-banner" style={{ marginBottom: 18 }}>
              <div className="ab-ico"><Icon name="alert" size={19} /></div>
              <div className="ab-body"><b>{p.flags[0].text}</b><p>This needs attention before it can advance.</p></div>
            </div>
          )}

          <div className="sec-head"><h2>Product record</h2>
            <span className="sh-link" style={{ cursor: "default" }}><Icon name="users" size={14} /> fields by owner</span>
          </div>

          <FieldGroup title="Product Basics" owner="Purchaser" ownerColor="var(--intake)" defaultOpen fields={basics} />
          <FieldGroup title="Vendor & Sourcing" owner="Purchaser" ownerColor="var(--intake)" defaultOpen fields={sourcing} />
          <FieldGroup title="Pack & Dimensions" owner="Purchaser" ownerColor="var(--intake)" fields={pack} />
          <FieldGroup title="Marketing & Classification" owner="Marketing + AI" ownerColor="var(--mkt)" defaultOpen={p.stage !== "intake"} fields={marketing} />

          {naming && (
            <div className="nudge info" style={{ marginTop: 14 }}>
              <span className="n-ico"><Icon name="book" size={15} /></span>
              <div><b>Naming rule for {p.deptName}:</b> <span className="mono" style={{ fontSize: 11.5 }}>{naming.pattern}</span>. AI applies this automatically; Marketing approves.</div>
            </div>
          )}
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
          {/* primary action */}
          {stageActions && (role === "purchaser" || role === "marketing" || role === "newitem" || role === "leadership") && (
            <div className="card card-pad" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              <div className="eyebrow">Next step</div>
              <button className="btn btn-primary btn-lg" style={{ justifyContent: "center" }}
                onClick={() => stageActions.review ? onReview(p) : onAdvance(p.id, stageActions.next)}>
                <Icon name={stageActions.icon} size={16} /> {stageActions.label}
              </button>
              {p.stage === "mkt" && <div style={{ fontSize: 11.5, color: "var(--ink-3)", textAlign: "center" }}>AI has drafted naming, classification & copy</div>}
            </div>
          )}

          {/* sales context */}
          {p.accounts && p.accounts.length > 0 && (
            <div className="card card-pad">
              <div className="sec-head" style={{ margin: "0 0 6px" }}>
                <h2 style={{ fontSize: 15 }}>Account demand</h2>
                <span className="pill sales" style={{ fontSize: 10.5 }}><Icon name="store" size={11} /> Sales</span>
              </div>
              <div style={{ fontSize: 12, color: "var(--ink-3)", marginBottom: 6 }}>{p.accounts.length} accounts waiting · added by Sales</div>
              <div className="sales-strip">
                {p.accounts.map((a, i) => (
                  <div className="acct-row" key={i}>
                    <div className="ar-logo">{a.logo}</div>
                    <div className="ar-main"><div className="ar-name">{a.name}</div><div className="ar-meta">{a.meta}</div></div>
                    <div className="ar-vol"><b className="tnum">{a.vol}</b><span>{a.unit}</span></div>
                  </div>
                ))}
              </div>
              {role === "sales" && <button className="btn btn-ghost btn-sm" style={{ width: "100%", marginTop: 12, justifyContent: "center" }}><Icon name="plus" size={13} /> Add an account</button>}
            </div>
          )}

          <CollabPanel product={p} me={me} onComment={onComment} />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DetailView, Tracker, FieldGroup, CollabPanel });