/* ============================================================
   Screen: Clients (CRM) — list + detail
   ============================================================ */
function Clients({ ctx }) {
  const { db, go } = ctx;
  const [q, setQ] = React.useState("");
  const list = db.clients.filter((c) => (c.name + c.kana + c.type).toLowerCase().includes(q.toLowerCase()));
  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">アーティスト・IP・取引先を一元管理（CRM）</p>
        </div>
        <button className="btn primary"><Icon name="plus" size={16} />クライアントを追加</button>
      </div>

      <div className="row" style={{ gap: 10, marginBottom: 16 }}>
        <div className="searchbox" style={{ width: 280 }}>
          <Icon name="search" size={15} />
          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="名前・種別で検索"
            style={{ border: "none", background: "transparent", outline: "none", fontFamily: "inherit", fontSize: 13, width: "100%", color: "var(--ink)" }} />
        </div>
        <button className="btn"><Icon name="filter" size={15} />絞り込み</button>
        <div className="spacer" />
        <span className="muted" style={{ fontSize: 12.5 }}>{list.length} 社</span>
      </div>

      <div className="card" style={{ overflow: "hidden" }}>
        <table className="tbl">
          <thead>
            <tr>
              <th>クライアント</th><th>種別</th><th>事業</th><th>担当</th>
              <th className="r">預かり金</th><th className="r">当期確定売上</th><th></th>
            </tr>
          </thead>
          <tbody>
            {list.map((c) => (
              <tr key={c.id} className="clickable" onClick={() => go("client", c.id)}>
                <td>
                  <div className="row gap10">
                    <Avatar name={c.name} color={c.color} size={36} square />
                    <div>
                      <b style={{ fontSize: 13.5 }}>{c.name}</b>
                      <div className="sub">{c.kana}</div>
                    </div>
                  </div>
                </td>
                <td><span className="muted" style={{ fontSize: 12 }}>{c.type}</span></td>
                <td><div className="row gap6">{c.biz.map((b) => <BizDot key={b} biz={b} />)}</div></td>
                <td><span style={{ fontSize: 12.5 }}>{c.owner}</span></td>
                <td className="r">{c.heldNow > 0 ? <Money v={c.heldNow} size={13} color="var(--deposit-ink)" /> : <span className="muted">—</span>}</td>
                <td className="r"><Money v={c.confirmedYTD} size={13} /></td>
                <td className="r" style={{ width: 40 }}><Icon name="chevRight" size={16} style={{ color: "var(--ink-4)" }} /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/* ---------- Client detail ---------- */
function ClientDetail({ ctx, clientId }) {
  const { db, go } = ctx;
  const c = db.clientById(clientId);
  const [tab, setTab] = React.useState("overview");
  if (!c) return null;
  const cTours = db.tours.filter((t) => t.clientId === c.id);
  const cSales = db.sales.filter((s) => s.clientId === c.id);
  const cInv = db.invoices.filter((i) => i.clientId === c.id);

  return (
    <div className="page">
      <button className="btn ghost sm" style={{ marginBottom: 14, paddingLeft: 6 }} onClick={() => go("clients")}><Icon name="arrowLeft" size={15} />クライアント一覧</button>
      <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start", marginBottom: 20 }}>
        <div className="row gap16">
          <Avatar name={c.name} color={c.color} size={58} square />
          <div>
            <div className="row gap10"><h1 className="page-title">{c.name}</h1><StatusBadge status={c.status} /></div>
            <p className="page-sub">{c.kana} ・ {c.type} ・ 取引開始 {c.since}</p>
            <div className="row gap6" style={{ marginTop: 8 }}>{c.biz.map((b) => <BizChip key={b} biz={b} />)}</div>
          </div>
        </div>
        <div className="row gap8">
          <button className="btn"><Icon name="edit" size={15} />編集</button>
          <button className="btn primary" onClick={() => go("invoices")}><Icon name="invoice" size={15} />請求書を作成</button>
        </div>
      </div>

      {/* KPIs */}
      <div className="grid cols-4" style={{ gap: 14, marginBottom: 18 }}>
        <MiniCard label="預かり金残高" v={c.heldNow} color={c.heldNow > 0 ? "var(--deposit-ink)" : "var(--ink-3)"} icon="lock" />
        <MiniCard label="当期確定売上" v={c.confirmedYTD} color="var(--revenue)" icon="checkCircle" />
        <MiniCard label="累計取引額" v={c.lifetime} icon="trending" />
        <div className="card card-pad">
          <div className="row gap6" style={{ fontSize: 11.5, color: "var(--ink-3)", fontWeight: 600 }}><Icon name="clock" size={13} />関連案件</div>
          <div style={{ marginTop: 8, fontSize: 21, fontWeight: 700 }}>{cTours.length}<span style={{ fontSize: 13, color: "var(--ink-3)", fontWeight: 500, marginLeft: 4 }}>件のツアー</span></div>
        </div>
      </div>

      <div className="tabs" style={{ marginBottom: 18 }}>
        {[["overview", "概要"], ["projects", "案件・ツアー"], ["history", "取引履歴"], ["contract", "契約条件"]].map(([k, l]) => (
          <div key={k} className={"tab" + (tab === k ? " on" : "")} onClick={() => setTab(k)}>{l}</div>
        ))}
      </div>

      {tab === "overview" && (
        <div className="grid ratio-14" style={{ gap: 16 }}>
          <div className="card">
            <div className="card-head"><h3>関連ツアー・案件</h3></div>
            <div>
              {cTours.map((t, i) => (
                <div key={t.id} className="row clickable" style={{ gap: 12, padding: "13px 20px", borderBottom: i < cTours.length - 1 ? "1px solid var(--border)" : "none", cursor: "pointer" }} onClick={() => go("tour", t.id)}>
                  <Icon name="tour" size={16} style={{ color: "var(--ink-3)" }} />
                  <div style={{ flex: 1 }}><b style={{ fontSize: 13 }}>{t.name}</b><div className="muted" style={{ fontSize: 11 }}>{t.start} 〜 {t.end}</div></div>
                  <StatusBadge status={t.status} />
                  <Money v={t.status === "settled" ? (t.gross || 0) : t.held} size={13} color={t.status === "settled" ? "var(--ink)" : "var(--deposit-ink)"} />
                </div>
              ))}
              {cTours.length === 0 && <div className="muted" style={{ padding: 22, fontSize: 12.5 }}>ツアー案件はありません（EC・倉庫業のみ）。</div>}
            </div>
          </div>

          <div className="card">
            <div className="card-head"><h3>担当者・連絡先</h3></div>
            <div className="card-pad col gap14">
              <div className="row gap10">
                <Avatar name={c.contact.person} color="#8C877C" size={38} />
                <div><b style={{ fontSize: 13 }}>{c.contact.person}</b><div className="muted" style={{ fontSize: 11.5 }}>{c.contact.role}</div></div>
              </div>
              <div className="hr" />
              <div className="row gap10" style={{ fontSize: 12.5 }}><Icon name="mail" size={15} style={{ color: "var(--ink-3)" }} /><span>{c.contact.email}</span></div>
              <div className="row gap10" style={{ fontSize: 12.5 }}><Icon name="phone" size={15} style={{ color: "var(--ink-3)" }} /><span>{c.contact.phone}</span></div>
              <div className="row gap10" style={{ fontSize: 12.5 }}><Icon name="clients" size={15} style={{ color: "var(--ink-3)" }} /><span>社内担当：{c.owner}</span></div>
            </div>
          </div>
        </div>
      )}

      {tab === "projects" && (
        <div className="card">
          <div className="card-head"><h3>案件・ツアー（{cTours.length}）</h3></div>
          <table className="tbl">
            <thead><tr><th>案件名</th><th>期間</th><th>ステータス</th><th className="r">預かり/総額</th><th></th></tr></thead>
            <tbody>
              {cTours.map((t) => (
                <tr key={t.id} className="clickable" onClick={() => go("tour", t.id)}>
                  <td><b style={{ fontSize: 13 }}>{t.name}</b></td>
                  <td className="muted mono" style={{ fontSize: 12 }}>{t.start}〜{t.end}</td>
                  <td><StatusBadge status={t.status} /></td>
                  <td className="r"><Money v={t.status === "settled" ? (t.gross || 0) : t.held} size={13} /></td>
                  <td className="r" style={{ width: 40 }}><Icon name="chevRight" size={15} style={{ color: "var(--ink-4)" }} /></td>
                </tr>
              ))}
              {cTours.length === 0 && <tr><td colSpan="5" className="muted" style={{ textAlign: "center", padding: 26 }}>案件なし</td></tr>}
            </tbody>
          </table>
        </div>
      )}

      {tab === "history" && (
        <div className="grid ratio-15" style={{ gap: 16 }}>
          <div className="card">
            <div className="card-head"><h3>売上履歴</h3></div>
            <table className="tbl">
              <thead><tr><th>日付</th><th>事業</th><th>内容</th><th className="r">金額</th></tr></thead>
              <tbody>
                {cSales.map((s) => (
                  <tr key={s.id}>
                    <td className="mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>{s.date.slice(5)}</td>
                    <td><BizDot biz={s.biz} /> <span style={{ fontSize: 12 }}>{db.businessTypes[s.biz].label}</span></td>
                    <td style={{ fontSize: 12.5 }}>{db.categories[s.cat]}<div className="sub">{s.note}</div></td>
                    <td className="r"><Money v={s.amount} size={13} /></td>
                  </tr>
                ))}
                {cSales.length === 0 && <tr><td colSpan="4" className="muted" style={{ textAlign: "center", padding: 26 }}>履歴なし</td></tr>}
              </tbody>
            </table>
          </div>
          <div className="card">
            <div className="card-head"><h3>請求書</h3></div>
            <div>
              {cInv.map((iv, i) => (
                <div key={iv.id} className="row" style={{ gap: 10, padding: "12px 20px", borderBottom: i < cInv.length - 1 ? "1px solid var(--border)" : "none" }}>
                  <Icon name="invoice" size={15} style={{ color: "var(--ink-3)" }} />
                  <div style={{ flex: 1 }}><b className="mono" style={{ fontSize: 12 }}>{iv.id}</b><div className="muted" style={{ fontSize: 11 }}>{iv.kind}</div></div>
                  <StatusBadge status={iv.status} dot={false} />
                  <Money v={iv.total} size={12.5} />
                </div>
              ))}
              {cInv.length === 0 && <div className="muted" style={{ padding: 22, fontSize: 12.5 }}>請求書なし</div>}
            </div>
          </div>
        </div>
      )}

      {tab === "contract" && (
        <div className="grid cols-2" style={{ gap: 16 }}>
          <div className="card">
            <div className="card-head"><h3>契約条件</h3></div>
            <div className="card-pad col" style={{ gap: 0 }}>
              <CondRow label="販売手数料率" v={c.contract.commission != null ? c.contract.commission + " %" : "—（卸取引）"} hint="ツアー物販＝委託（預かり）時の当社取り分" />
              <CondRow label="倉庫料（月額）" v={c.contract.warehouse > 0 ? db.yen(c.contract.warehouse) : "—"} />
              <CondRow label="発送代行料（1件）" v={c.contract.shipping > 0 ? db.yen(c.contract.shipping) : "—"} />
              <CondRow label="卸条件" v={c.contract.wholesale || "—"} last />
            </div>
          </div>
          <div className="card" style={{ background: "var(--brand-wash)", borderColor: "var(--brand-wash-2)" }}>
            <div className="card-pad">
              <div className="row gap8" style={{ marginBottom: 10 }}><Icon name="sparkle" size={16} style={{ color: "var(--brand-press)" }} /><b style={{ fontSize: 13 }}>契約メモ</b></div>
              <p style={{ margin: 0, fontSize: 13, lineHeight: 1.7, color: "var(--ink-2)" }}>{c.contract.note}</p>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function CondRow({ label, v, hint, last }) {
  return (
    <div style={{ padding: "13px 0", borderBottom: last ? "none" : "1px solid var(--border)" }}>
      <div className="row" style={{ justifyContent: "space-between" }}>
        <span style={{ fontSize: 12.5, color: "var(--ink-2)", fontWeight: 600 }}>{label}</span>
        <b style={{ fontSize: 14 }}>{v}</b>
      </div>
      {hint && <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>{hint}</div>}
    </div>
  );
}

Object.assign(window, { Clients, ClientDetail });