/* ============================================================
   Media SOP — Kanban (Bước 3–6), drag & drop + task detail
   ============================================================ */
const { useState, useEffect } = React;

function KanbanBoard({ scope }) {
  // scope: "team" (manager) or editorId (editor view)
  const app = window.useApp();
  const [dragId, setDragId] = useState(null);
  const [over, setOver] = useState(null);
  const [open, setOpen] = useState(null);

  const visible = app.orders.filter(o => {
    if (scope === "team") return o.stage !== "done" || true; // include done col
    return o.editorId === scope;
  });

  const byStage = (k) => visible.filter(o => o.stage === k);

  const onDrop = (stage) => {
    if (dragId) app.moveOrder(dragId, stage);
    setDragId(null); setOver(null);
  };

  return (
    <div>
      <div className="row between wrap" style={{ marginBottom: 16, gap: 12 }}>
        <div className="row wrap" style={{ gap: 8 }}>
          {STAGES.map(s => (
            <span key={s.key} className="badge badge-gray" style={{ fontSize: 12 }}>
              <span style={{ width: 8, height: 8, borderRadius: 50, background: s.color, display: "inline-block" }} />
              {s.label} <b style={{ marginLeft: 2 }}>{byStage(s.key).length}</b>
            </span>
          ))}
        </div>
        <span className="hint" style={{ fontSize: 12.5 }}><Icon name="layers" size={13} style={{ verticalAlign: -2 }} /> Kéo-thả thẻ giữa các cột để cập nhật trạng thái</span>
      </div>

      <div className="kanban">
        {STAGES.map(stage => {
          const items = byStage(stage.key);
          return (
            <div key={stage.key} className={"kcol" + (over === stage.key ? " dragover" : "")}
              onDragOver={e => { e.preventDefault(); setOver(stage.key); }}
              onDragLeave={e => { if (e.currentTarget === e.target) setOver(null); }}
              onDrop={() => onDrop(stage.key)}>
              <div className="kcol-h">
                <span className="kdot" style={{ background: stage.color }} />
                <span className="ktitle">{stage.label}</span>
                <span className="kcount">{items.length}</span>
              </div>
              <div className="kcards">
                {items.map(o => {
                  const ed = o.editorId ? app.editorById(o.editorId) : null;
                  return (
                    <div key={o.id} className={"kcard" + (dragId === o.id ? " dragging" : "")}
                      draggable onDragStart={() => setDragId(o.id)} onDragEnd={() => { setDragId(null); setOver(null); }}
                      onClick={() => setOpen(o)}>
                      <div className="kcard-top">
                        <VChip vtype={o.vtype} />
                        <span className="mono muted" style={{ fontSize: 10.5 }}>{o.id}</span>
                        <span style={{ marginLeft: "auto" }}><PriorityBadge p={o.priority} /></span>
                      </div>
                      <div className="kcard-title">{o.title}</div>
                      {o.stage === "feedback" && o.feedback.length > 0 && (
                        <div className="row" style={{ gap: 6, fontSize: 11.5, color: "oklch(0.48 0.12 60)", fontWeight: 600, marginBottom: 4 }}>
                          <Icon name="message" size={13} />{o.feedback.length} phản hồi cần sửa
                        </div>
                      )}
                      <div className="kcard-meta">
                        <DeadlinePill deadline={o.deadline} />
                        {o.estimateHours && <span className="row" style={{ gap: 3 }}><Icon name="clock" size={12} />{o.estimateHours}h</span>}
                      </div>
                      <div className="kcard-foot">
                        {ed ? <><Avatar name={ed.name} color={ed.color} size={22} /><span style={{ fontSize: 12, fontWeight: 600 }}>{ed.name.split(" ").slice(-1)}</span></>
                          : <span className="muted" style={{ fontSize: 12 }}>Chưa gán editor</span>}
                        <Icon name="chevronRight" size={15} color="var(--ink-4)" style={{ marginLeft: "auto" }} />
                      </div>
                    </div>
                  );
                })}
                {items.length === 0 && <div style={{ padding: "18px 8px", textAlign: "center", color: "var(--ink-4)", fontSize: 12 }}>Trống</div>}
              </div>
            </div>
          );
        })}
      </div>
      {open && <TaskModal order={open} onClose={() => setOpen(null)} canEdit={scope !== "team" || true} />}
    </div>
  );
}

function TaskModal({ order, onClose }) {
  const app = window.useApp();
  const ed = order.editorId ? app.editorById(order.editorId) : null;
  const [actual, setActual] = useState(order.actualHours != null ? String(order.actualHours) : "");
  const [link, setLink] = useState(order.finalLink || "");
  const [reply, setReply] = useState("");
  const isCapture = ["QUAY","LIVE"].includes(order.vtype);
  const stageIdx = STAGES.findIndex(s => s.key === order.stage);
  const next = STAGES[stageIdx + 1];
  const prev = STAGES[stageIdx - 1];

  const save = () => {
    app.updateOrder(order.id, {
      actualHours: actual === "" ? null : parseFloat(actual),
      finalLink: link || null,
    });
  };
  const move = (stage) => { save(); app.moveOrder(order.id, stage); onClose(); };
  const addReply = () => { if (!reply.trim()) return; app.addFeedback(order.id, app.persona.name, app.role, reply.trim()); setReply(""); };

  const over20 = isCapture && order.estimateHours && parseFloat(actual) > order.estimateHours * 1.2;

  return (
    <Modal title={order.title} sub={`${order.id} · ${order.dept}`} icon="video" onClose={onClose} wide
      footer={
        <div className="row between" style={{ width: "100%" }}>
          <div className="row" style={{ gap: 8 }}>
            {prev && <Btn variant="ghost" sm onClick={() => move(prev.key)}>← {prev.label}</Btn>}
          </div>
          <div className="row" style={{ gap: 8 }}>
            <Btn variant="soft" sm onClick={() => { save(); onClose(); }}>Lưu</Btn>
            {next && <Btn sm icon="arrowRight" iconRight="arrowRight" onClick={() => move(next.key)}>{next.label}</Btn>}
          </div>
        </div>
      }>
      <div className="grid g-2" style={{ gap: 22 }}>
        <div>
          <div className="row wrap" style={{ gap: 8, marginBottom: 14 }}>
            <VChip vtype={order.vtype} /><StageBadge stage={order.stage} /><PriorityBadge p={order.priority} /><DeadlinePill deadline={order.deadline} />
          </div>
          <div className="field"><label>Mục đích</label><div style={{ fontSize: 13.5, lineHeight: 1.5, color: "var(--ink-2)" }}>{order.purpose || "—"}</div></div>
          <div className="row" style={{ gap: 18, marginBottom: 16 }}>
            <div><div className="muted" style={{ fontSize: 12 }}>Người order</div><div style={{ fontWeight: 700, fontSize: 13.5 }}>{order.requester}</div></div>
            <div><div className="muted" style={{ fontSize: 12 }}>Editor</div><div className="row" style={{ gap: 6 }}>{ed ? <><Avatar name={ed.name} color={ed.color} size={22} /><b style={{ fontSize: 13.5 }}>{ed.name}</b></> : "—"}</div></div>
          </div>

          {order.addons.length > 0 && <div className="field"><label>Add-on</label><div className="row wrap" style={{ gap: 6 }}>{order.addons.map(a => <Badge key={a} cls="badge-violet">{ADDONS[a].label}</Badge>)}</div></div>}

          <div className="imgph" style={{ height: 120, marginTop: 6 }}>thành phẩm / preview</div>
        </div>

        <div>
          <div className="card" style={{ background: "var(--surface-2)", padding: 15, borderRadius: 13, marginBottom: 16 }}>
            <div className="row between" style={{ marginBottom: 12 }}>
              <span style={{ fontWeight: 700, fontSize: 13.5 }}>Giờ thực hiện</span>
              {order.estimateHours && <span className="badge badge-gray mono">Định mức {order.estimateHours}h</span>}
            </div>
            <div className="field" style={{ marginBottom: 0 }}>
              <label style={{ fontSize: 12 }}>{isCapture ? "Giờ thực tế (nhập sau buổi quay/live)" : "Giờ thực tế"}</label>
              <input className="input mono" type="number" step="0.1" placeholder="0.0" value={actual} onChange={e => setActual(e.target.value)} />
              {over20 && <div className="hint" style={{ color: "var(--red)" }}><Icon name="alert" size={12} style={{ verticalAlign: -2 }} /> Vượt quá +20% định mức — cần xác nhận với quản lý.</div>}
            </div>
          </div>

          <div className="field">
            <label>Link bản final (thư mục chuẩn)</label>
            <div className="row" style={{ gap: 8 }}>
              <Icon name="link" size={16} color="var(--ink-3)" />
              <input className="input mono" placeholder="drive/media/2026-06/…" value={link} onChange={e => setLink(e.target.value)} style={{ fontSize: 12.5 }} />
            </div>
          </div>

          <div className="field" style={{ marginBottom: 0 }}>
            <label>Trao đổi &amp; Feedback</label>
            <div style={{ maxHeight: 160, overflowY: "auto", display: "flex", flexDirection: "column", gap: 8, marginBottom: 10 }}>
              {order.feedback.length === 0 && <div className="hint">Chưa có phản hồi.</div>}
              {order.feedback.map((f, i) => (
                <div key={i} className="card" style={{ padding: "9px 11px", borderRadius: 11, background: f.role === "order" ? "var(--amber-bg)" : "var(--violet-50)" }}>
                  <div className="row between" style={{ marginBottom: 3 }}><b style={{ fontSize: 12 }}>{f.by}</b><span className="muted" style={{ fontSize: 10.5 }}>{f.at}</span></div>
                  <div style={{ fontSize: 12.5, lineHeight: 1.4 }}>{f.text}</div>
                </div>
              ))}
            </div>
            <div className="row" style={{ gap: 8 }}>
              <input className="input" placeholder="Viết phản hồi…" value={reply} onChange={e => setReply(e.target.value)} onKeyDown={e => e.key === "Enter" && addReply()} />
              <Btn sm icon="send" onClick={addReply}>Gửi</Btn>
            </div>
          </div>
        </div>
      </div>
    </Modal>
  );
}

Object.assign(window, { KanbanBoard, TaskModal });