/* ============================================================
   Enarge — フリーソフト公開ページ（一覧 / 詳細）
   Exposes window.SoftwarePage / window.PassPourPage
   ============================================================ */
const GITHUB_USER = "enahay-bit";

const SOFTWARE = [
  {
    slug: "passpour",
    name: "PassPour",
    kana: "パスポア",
    tagline: "Tab キー自動入力に対応したパスワード管理ツール",
    summary: "ID とパスワードを登録しておき、ログイン画面へ Tab キーの動きに合わせて自動入力します。ローカル保存・クラウド不要。",
    os: "Windows 10 / 11（64bit）",
    runtime: ".NET 8 ランタイム",
    lang: "C#",
    version: "準備中",
    status: "coming",
    repo: "PassPour",
    features: [
      ["Tab 自動入力", "ID → Tab → パスワード → Enter の入力順を登録でき、対象ウィンドウへそのまま送出します。"],
      ["ローカル保存", "登録情報は暗号化して端末内にのみ保存。外部サーバへは送信しません。"],
      ["常駐・呼び出し", "タスクトレイに常駐し、ホットキーで呼び出して即入力できます。"],
      ["インストール不要", "実行ファイルを置くだけで動作。レジストリを汚しません。"]
    ]
  }
];

const LICENSE_TEXT = [
  "本ソフトウェアは無償で自由にご利用いただけます。個人・商用を問わず、複製・再配布も制限しません。",
  "本ソフトウェアの使用により生じたいかなる損害についても、作者は責任を負いません。",
  "個別のサポート・お問い合わせ対応は行っておりません。"
];

function SW_Badge({ children, tone }) {
  const tones = {
    coming: { bg: "rgba(224,164,75,0.14)", fg: "var(--amber)", bd: "rgba(224,164,75,0.35)" },
    live:   { bg: "rgba(127,176,121,0.14)", fg: "#8fc188", bd: "rgba(127,176,121,0.35)" }
  };
  const t = tones[tone] || tones.live;
  return (
    <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".08em", padding: "4px 10px", borderRadius: 5, background: t.bg, color: t.fg, border: "1px solid " + t.bd, whiteSpace: "nowrap" }}>
      {children}
    </span>
  );
}

/* ---------- 一覧ページ ---------- */
function SoftwarePage({ onLogin }) {
  const login = onLogin || (() => {});
  return (
    <div>
      <window.TopHeader onLogin={login} />
      <section style={{ padding: "72px 0 40px" }}>
        <div className="wrap">
          <window.CT_SectionLabel n="DOWNLOAD — ダウンロード" />
          <h1 style={{ fontFamily: "var(--font-round)", fontWeight: 700, fontSize: 40, lineHeight: 1.35, color: "var(--text-strong)", margin: "0 0 16px" }}>
            ダウンロード
          </h1>
          <p style={{ color: "var(--text-muted)", fontSize: 17.5, lineHeight: 1.9, maxWidth: 620, margin: 0 }}>
            業務のなかで必要になり、自分たちで作ったツールを無償で公開しています。すべて自由にお使いいただけます。
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 80 }}>
        <div className="wrap" style={{ display: "grid", gap: 20 }}>
          {SOFTWARE.map(s => (
            <a key={s.slug} href={s.slug + ".html"} style={{
              display: "grid", gridTemplateColumns: "minmax(0,1fr)", gap: 18, textDecoration: "none",
              background: "var(--ink-800)", border: "1px solid var(--ink-600)", borderRadius: "var(--radius-lg)",
              padding: "32px 30px", boxShadow: "var(--shadow-card)" }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 14, flexWrap: "wrap" }}>
                <h2 style={{ fontFamily: "var(--font-round)", fontWeight: 700, fontSize: 26, color: "var(--text-strong)", margin: 0 }}>{s.name}</h2>
                <span style={{ fontSize: 14, color: "var(--text-faint)" }}>{s.kana}</span>
                <SW_Badge tone={s.status}>{s.status === "coming" ? "公開準備中" : "v" + s.version}</SW_Badge>
              </div>
              <p style={{ color: "var(--text)", fontSize: 16.5, lineHeight: 1.9, margin: 0 }}>{s.tagline}</p>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                <span className="chip" style={{ pointerEvents: "none" }}>{s.os}</span>
                <span className="chip" style={{ pointerEvents: "none" }}>{s.lang}</span>
              </div>
            </a>
          ))}
        </div>
      </section>
      <window.TopFooter onLogin={login} />
    </div>
  );
}
window.SoftwarePage = SoftwarePage;

/* ---------- 詳細ページ ---------- */
function SW_Spec({ rows }) {
  return (
    <div>
      {rows.map(([k, v]) => (
        <div key={k} className="ct-row" style={{ padding: "18px 0", borderTop: "1px solid var(--ink-600)" }}>
          <dt style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, letterSpacing: ".06em", color: "var(--red-400)" }}>{k}</dt>
          <dd style={{ margin: 0, color: "var(--text)", fontSize: 16, lineHeight: 1.85, wordBreak: "break-all" }}>{v}</dd>
        </div>
      ))}
      <div style={{ borderTop: "1px solid var(--ink-600)" }}></div>
    </div>
  );
}

function SoftwareDetail({ slug, onLogin }) {
  const login = onLogin || (() => {});
  const s = SOFTWARE.find(x => x.slug === slug) || SOFTWARE[0];
  const releases = "https://github.com/" + GITHUB_USER + "/" + s.repo + "/releases";
  const coming = s.status === "coming";

  return (
    <div>
      <window.TopHeader onLogin={login} />

      <section style={{ padding: "62px 0 44px" }}>
        <div className="wrap">
          <a href={window.SOFTWARE_URL || "software.html"} style={{ fontSize: 14, color: "var(--text-faint)", textDecoration: "none" }}>← ダウンロード一覧</a>
          <div style={{ display: "flex", alignItems: "baseline", gap: 16, flexWrap: "wrap", margin: "22px 0 14px" }}>
            <h1 style={{ fontFamily: "var(--font-round)", fontWeight: 700, fontSize: 44, color: "var(--text-strong)", margin: 0, lineHeight: 1.2 }}>{s.name}</h1>
            <span style={{ fontSize: 17, color: "var(--text-faint)" }}>{s.kana}</span>
            <SW_Badge tone={s.status}>{coming ? "公開準備中" : "v" + s.version}</SW_Badge>
          </div>
          <p style={{ color: "var(--text)", fontSize: 18.5, lineHeight: 1.9, maxWidth: 620, margin: "0 0 34px" }}>{s.summary}</p>

          <div style={{ display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center" }}>
            {coming ?
            <span className="btn" style={{ background: "var(--ink-700)", color: "var(--text-faint)", cursor: "default" }}>公開準備中</span> :
            <a className="btn btn-primary" href={releases}>ダウンロード（GitHub）</a>}
            <a href={releases} style={{ fontSize: 14.5, color: "var(--text-muted)" }}>すべてのバージョンを見る →</a>
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: 20 }}>
        <div className="wrap">
          <div className="ph" style={{ aspectRatio: "16/9", borderRadius: "var(--radius-lg)", maxWidth: 820 }}>{s.name} の画面（スクリーンショット）</div>
        </div>
      </section>

      <section style={{ background: "var(--ink-800)", borderTop: "1px solid var(--ink-600)", margin: "56px 0 0", padding: "68px 0" }}>
        <div className="wrap">
          <window.CT_SectionLabel n="FEATURES — 主な機能" />
          <div className="ct-grid ct-3">
            {s.features.map(([t, d]) => (
              <div key={t} style={{ background: "var(--ink-900)", border: "1px solid var(--ink-600)", borderRadius: "var(--radius-lg)", padding: "28px 26px" }}>
                <h3 style={{ fontFamily: "var(--font-round)", fontSize: 19, color: "var(--text-strong)", margin: "0 0 12px" }}>{t}</h3>
                <p style={{ color: "var(--text-muted)", fontSize: 15.5, lineHeight: 1.85, margin: 0 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: "68px 0" }}>
        <div className="wrap ct-grid ct-company" style={{ alignItems: "start" }}>
          <div>
            <window.CT_SectionLabel n="SPEC — 動作環境" />
            <h2 style={{ fontFamily: "var(--font-round)", fontWeight: 700, fontSize: 30, color: "var(--text-strong)", margin: 0 }}>動作環境</h2>
          </div>
          <SW_Spec rows={[
            ["対応OS", s.os],
            ["必要環境", s.runtime],
            ["開発言語", s.lang],
            ["バージョン", coming ? "—" : s.version],
            ["SHA-256", coming ? "公開時に掲載します" : "—"],
            ["価格", "無料"]
          ]} />
        </div>
      </section>

      <section className="grain" style={{ background: "var(--cream-50)", color: "var(--ink-900)", padding: "62px 0" }}>
        <div className="wrap" style={{ maxWidth: 760 }}>
          <window.CT_SectionLabel n="LICENSE — ライセンスと免責" dark />
          <div style={{ display: "grid", gap: 14 }}>
            {LICENSE_TEXT.map(t => (
              <p key={t} style={{ color: "#5f5040", fontSize: 16.5, lineHeight: 2, margin: 0 }}>{t}</p>
            ))}
          </div>
        </div>
      </section>

      <window.TopFooter onLogin={login} />
    </div>
  );
}
window.SoftwareDetail = SoftwareDetail;