/* ============================================================
   Screen: Tours list + detail, Settlement modal
   ============================================================ */
function Tours({ ctx }) {
  const { tours, db, openSettle, go } = ctx;
  const groups = [
    { key: "pending", label: "精算待ち", items: tours.filter((t) => t.status === "pending") },
    { key: "open", label: "進行中", items: tours.filter((t) => t.status === "open") },
    { key: "settled", label: "精算済", items: tours.filter((t) => t.status === "settled") },
  ];
  return (
    <div className="page">
      <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end", marginBottom: 20 }}>
        <div>
          <h1 className="page-title">ツアー・案件</h1>
          <p className="page-sub">ツアー単位で預かり金の発生・残高・精算ステータスを管理</p>
        </div>
        <button className="btn primary" onClick={() => ctx.openAdd("tour")}><Icon name="plus" size={16} />案件を追加</button>
      </div>

      {groups.map((g) => g.items.length > 0 && (
        <div key={g.key} style={{ marginBottom: 26 }}>
          <div className="row gap8" style={{ marginBottom: 12 }}>
            <span className="sec-title">{g.label}</span>
            <span className="badge draft" style={{ height: 20 }}>{g.items.length}</span>
          </div>
          <div className="grid cols-2" style={{ gap: 14 }}>
            {g.items.map((t) => {
              const c = db.clientById(t.clientId);
              const share = Math.round(t.held * t.commission / 100);
              return (
                <div key={t.id} className="card" style={{ cursor: "pointer", transition: ".14s" }}
                  onClick={() => go("tour", t.id)}
                  onMouseEnter={(e) => { e.currentTarget.style.boxShadow = "var(--sh)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
                  onMouseLeave={(e) => { e.currentTarget.style.boxShadow = "var(--sh-sm)"; e.currentTarget.style.transform = "none"; }}>
                  <div className="card-pad">
                    <div className="row gap12" style={{ marginBottom: 14 }}>
                      <Avatar name={c.name} color={c.color} size={42} square />
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <b style={{ fontSize: 14, display: "block", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{t.name}</b>
                        <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>{c.name}</div>
                      </div>
                      <StatusBadge status={t.status} />
                    </div>
                    <div className="row" style={{ gap: 10, marginBottom: 14 }}>
                      <Icon name="calendar" size={14} style={{ color: "var(--ink-3)" }} />
                      <span className="muted" style={{ fontSize: 12 }}>{t.start} 〜 {t.end}</span>
                      <span className="muted" style={{ fontSize: 12, marginLeft: "auto" }}>{t.venuesDone}/{t.venuesTotal} 公演</span>
                    </div>
                    <div className="prog" style={{ marginBottom: 16 }}><i style={{ width: (t.venuesDone / t.venuesTotal) * 100 + "%", background: t.status === "settled" ? "var(--revenue)" : "var(--brand)" }} /></div>
                    <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end" }}>
                      <div className="minis">
                        <span className="ml">{t.status === "settled" ? "精算済 預かり" : "預かり金残高"}</span>
                        <Money v={t.status === "settled" ? (t.gross || 0) : t.held} size={20} color={t.status === "settled" ? "var(--ink)" : "var(--deposit-ink)"} />
                      </div>
                      {t.status === "pending"
                        ? <button className="btn primary sm" onClick={(e) => { e.stopPropagation(); openSettle(t); }}>精算する<Icon name="arrowRight" size={14} /></button>
                        : t.status === "open"
                          ? <div className="col" style={{ alignItems: "flex-end" }}><span className="ml" style={{ fontSize: 10.5, color: "var(--ink-3)" }}>当社取り分（{t.commission}%）見込</span><Money v={share} size={14} color="var(--revenue)" /></div>
                          : <span className="badge done"><Icon name="check" size={12} />支払完了</span>}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      ))}
    </div>
  );
}

/* ---------- Tour detail ---------- */
function TourDetail({ ctx, tourId }) {
  const { db, tours, openSettle, go } = ctx;
  const t = tours.find((x) => x.id === tourId);
  if (!t) return null;
  const c = db.clientById(t.clientId);
  const recs = db.sales.filter((s) => s.tourId === t.id);
  const gross = t.status === "settled" ? (t.gross || t.online + t.onsite) : t.online + t.onsite;
  const share = Math.round((t.status === "settled" ? gross : t.held) * t.commission / 100);

  const steps = [
    { n: 1, label: "ツアー登録", done: true },
    { n: 2, label: "販売記録", done: true, active: t.status === "open" },
    { n: 3, label: "預かり金 蓄積", done: t.status !== "open", active: t.status === "open" },
    { n: 4, label: "精算", done: t.status === "settled", active: t.status === "pending" },
    { n: 5, label: "請求書発行", done: t.status === "settled" },
  ];

  return (
    <div className="page">
      <button className="btn ghost sm" style={{ marginBottom: 14, paddingLeft: 6 }} onClick={() => go("tours")}><Icon name="arrowLeft" size={15} />ツアー一覧</button>
      <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start", marginBottom: 22 }}>
        <div className="row gap16">
          <Avatar name={c.name} color={c.color} size={52} square />
          <div>
            <div className="row gap10"><h1 className="page-title">{t.name}</h1><StatusBadge status={t.status} /></div>
            <p className="page-sub">{c.name} ・ {t.start} 〜 {t.end} ・ 手数料 {t.commission}%</p>
          </div>
        </div>
        {t.status === "pending" && <button className="btn primary lg" onClick={() => openSettle(t)}><Icon name="scale" size={17} />精算する</button>}
        {t.status === "open" && <button className="btn lg"><Icon name="plus" size={16} />販売を記録</button>}
      </div>

      {/* lifecycle */}
      <div className="card" style={{ marginBottom: 16, padding: "8px 4px" }}>
        <div className="flow">
          {steps.map((s, i) => (
            <div key={i} className="flow-step" style={{ alignItems: "center", textAlign: "center" }}>
              {i < steps.length - 1 && <span style={{ position: "absolute", right: -1, top: 22, height: 2, width: "100%", background: s.done ? "var(--revenue)" : "var(--border)" }} />}
              <span className="flow-num" style={{ position: "relative", zIndex: 1, background: s.done ? "var(--revenue)" : s.active ? "var(--brand)" : "var(--surface-3)", color: s.done || s.active ? "#fff" : "var(--ink-3)" }}>
                {s.done ? <Icon name="check" size={14} /> : s.n}
              </span>
              <span style={{ fontSize: 11.5, fontWeight: 600, color: s.active ? "var(--brand-press)" : s.done ? "var(--ink)" : "var(--ink-3)" }}>{s.label}</span>
            </div>
          ))}
        </div>
      </div>

      {/* KPIs */}
      <div className="grid cols-4" style={{ gap: 14, marginBottom: 16 }}>
        <MiniCard label="総売上（預かり総額）" v={gross} />
        <MiniCard label="オンライン売上" v={t.online} icon="external" />
        <MiniCard label="現場売上" v={t.onsite} icon="pin" />
        <MiniCard label={t.status === "settled" ? "確定した取り分" : `当社取り分（${t.commission}%）見込`} v={share} color="var(--revenue)" />
      </div>

      <div className={"grid" + (t.status === "settled" ? " ratio-15" : "")} style={{ gap: 16 }}>
        {/* sales records */}
        <div className="card">
          <div className="card-head" style={{ justifyContent: "space-between" }}>
            <h3>販売記録</h3>
            <span className="muted" style={{ fontSize: 12 }}>{recs.length} 件</span>
          </div>
          <table className="tbl">
            <thead><tr><th>日付</th><th>内容</th><th>チャネル</th><th>決済</th><th className="r">金額</th></tr></thead>
            <tbody>
              {recs.map((s) => (
                <tr key={s.id}>
                  <td className="mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>{s.date.slice(5)}</td>
                  <td>{s.note}</td>
                  <td><span className="chip" style={{ height: 22 }}><Icon name={s.channel === "online" ? "external" : "pin"} size={12} />{s.channel === "online" ? "オンライン" : "現場"}</span></td>
                  <td className="muted" style={{ fontSize: 12 }}>{s.pay}</td>
                  <td className="r"><Money v={s.amount} size={13} /></td>
                </tr>
              ))}
              {recs.length === 0 && <tr><td colSpan="5" className="muted" style={{ textAlign: "center", padding: 28 }}>記録なし</td></tr>}
            </tbody>
          </table>
        </div>

        {t.status === "settled" && (
          <div className="card" style={{ height: "fit-content" }}>
            <div className="card-head"><h3>精算明細</h3></div>
            <div className="card-pad">
              <div className="ledger">
                <div className="ldg-row"><span>預かり金（総額）</span><span className="lv"><Money v={gross} size={13} /></span></div>
                <div className="ldg-row sub"><span>販売手数料（当社取り分 {t.commission}%）</span><span className="lv" style={{ color: "var(--revenue)" }}>−<Money v={t.settledShare} size={12.5} color="var(--revenue)" /></span></div>
                <div className="ldg-row sub"><span>決済手数料（立替）</span><span className="lv">−<Money v={t.paymentFee} size={12.5} /></span></div>
                <div className="ldg-row total"><span>クライアントお支払額</span><span className="lv"><Money v={t.settledPay} size={14} color="#fff" /></span></div>
              </div>
              <div className="row gap8" style={{ marginTop: 14, fontSize: 12, color: "var(--revenue-ink)" }}>
                <Icon name="checkCircle" size={15} />{t.settledDate} に精算確定・支払済
              </div>
              <button className="btn" style={{ width: "100%", marginTop: 14 }} onClick={() => go("invoices")}><Icon name="invoice" size={15} />精算明細書を表示</button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function MiniCard({ label, v, color, icon }) {
  return (
    <div className="card card-pad">
      <div className="row gap6" style={{ fontSize: 11.5, color: "var(--ink-3)", fontWeight: 600 }}>{icon && <Icon name={icon} size={13} />}{label}</div>
      <div style={{ marginTop: 8 }}><Money v={v} size={21} color={color} /></div>
    </div>
  );
}

/* ---------- Settlement modal ---------- */
function SettleModal({ ctx, tour, onClose }) {
  const { db, settleTour, toast, go } = ctx;
  const [step, setStep] = React.useState(0); // 0 review, 1 done
  const c = db.clientById(tour.clientId);
  const gross = tour.held;
  const share = Math.round(gross * tour.commission / 100);
  const fee = tour.paymentFee;
  const pay = gross - share - fee;

  const confirm = () => {
    settleTour(tour.id, { share, pay, fee });
    setStep(1);
  };

  if (step === 1) {
    return (
      <Modal title="精算が完了しました" onClose={onClose}
        foot={<>
          <button className="btn" onClick={onClose}>閉じる</button>
          <button className="btn primary" style={{ marginLeft: "auto" }} onClick={() => { onClose(); go("invoices"); }}><Icon name="invoice" size={15} />精算明細書・請求書を発行</button>
        </>}>
        <div className="col" style={{ alignItems: "center", textAlign: "center", padding: "8px 0 4px" }}>
          <div style={{ width: 72, height: 72, borderRadius: "50%", background: "var(--revenue-soft)", display: "grid", placeItems: "center", marginBottom: 16 }}>
            <Icon name="checkCircle" size={38} style={{ color: "var(--revenue)" }} />
          </div>
          <h3 style={{ margin: 0, fontSize: 15, lineHeight: 1.45, maxWidth: 400 }}>{tour.name}</h3>
          <p className="muted" style={{ margin: "10px 0 0", fontSize: 13, lineHeight: 1.5 }}>預かり金 <b style={{ color: "var(--deposit-ink)" }}>{db.yen(gross)}</b> を精算しました。</p>
          <div className="row gap16" style={{ marginTop: 20, width: "100%", justifyContent: "center" }}>
            <div className="card card-pad" style={{ flex: 1, textAlign: "center", background: "var(--revenue-soft)", border: "none" }}>
              <div style={{ fontSize: 11.5, color: "var(--revenue-ink)", fontWeight: 600 }}>確定売上に振替</div>
              <div style={{ marginTop: 6 }}><Money v={share} size={20} color="var(--revenue-ink)" /></div>
            </div>
            <div className="card card-pad" style={{ flex: 1, textAlign: "center", background: "#FBE3DC", border: "none" }}>
              <div style={{ fontSize: 11.5, color: "#B0492C", fontWeight: 600 }}>クライアント支払額</div>
              <div style={{ marginTop: 6 }}><Money v={pay} size={20} color="#B0492C" /></div>
            </div>
          </div>
        </div>
      </Modal>
    );
  }

  return (
    <Modal title="ツアー精算" sub={tour.name} onClose={onClose}
      foot={<>
        <div className="row gap8" style={{ fontSize: 11.5, color: "var(--ink-3)" }}><Icon name="lock" size={14} />経理ロールのみ確定可能</div>
        <button className="btn" style={{ marginLeft: "auto" }} onClick={onClose}>キャンセル</button>
        <button className="btn primary" onClick={confirm}><Icon name="check" size={16} />精算を確定する</button>
      </>}>
      <div className="row gap10" style={{ marginBottom: 16, padding: "12px 14px", background: "var(--deposit-soft)", borderRadius: 10 }}>
        <Avatar name={c.name} color={c.color} size={36} square />
        <div style={{ flex: 1 }}>
          <b style={{ fontSize: 13 }}>{c.name}</b>
          <div className="muted" style={{ fontSize: 11.5 }}>契約手数料 {tour.commission}% ・ {tour.venuesTotal}公演 ・ {tour.end} 終了</div>
        </div>
      </div>

      <div className="sec-title" style={{ marginBottom: 10 }}>精算内訳</div>
      <div className="ledger">
        <div className="ldg-row"><span className="row gap8"><Icon name="wallet" size={15} style={{ color: "var(--deposit)" }} />預かり金（お預かり総額）</span><span className="lv"><Money v={gross} size={14} color="var(--deposit-ink)" /></span></div>
        <div className="ldg-row sub"><span>　うち オンライン売上</span><span className="lv"><Money v={tour.online} size={12.5} /></span></div>
        <div className="ldg-row sub"><span>　うち 現場売上</span><span className="lv"><Money v={tour.onsite} size={12.5} /></span></div>
        <div className="hr" />
        <div className="ldg-row" style={{ background: "var(--revenue-soft)" }}><span className="row gap8"><Icon name="checkCircle" size={15} style={{ color: "var(--revenue)" }} />販売手数料（当社取り分 {tour.commission}%）</span><span className="lv" style={{ color: "var(--revenue-ink)" }}>+<Money v={share} size={14} color="var(--revenue-ink)" /></span></div>
        <div className="ldg-row sub"><span>決済手数料（当社立替分）</span><span className="lv">−<Money v={fee} size={12.5} /></span></div>
        <div className="ldg-row total"><span>クライアントお支払額</span><span className="lv"><Money v={pay} size={15} color="#fff" /></span></div>
      </div>
      <div className="row gap8" style={{ marginTop: 14, fontSize: 12, color: "var(--ink-2)", background: "var(--surface-2)", padding: "11px 13px", borderRadius: 9 }}>
        <Icon name="alert" size={15} style={{ color: "var(--brand)", flex: "none" }} />
        確定すると <b>{db.yen(share)}</b> が当社の確定売上に振り替わり、<b>{db.yen(pay)}</b> がクライアント未払として計上されます。
      </div>
    </Modal>
  );
}

Object.assign(window, { Tours, TourDetail, SettleModal });