// 共通データ基盤（テーマ0）— マスターデータ管理
// 基幹システム3マスタ（物件情報・取引先・社員）の概要確認と、実データ閲覧サイト（masterdb）へのアクセス。
const MASTERDB_URL = 'https://dp-160-masterdb.malme.app';

const ThemeMasterDB = ({ onBack }) => {
  const masters = CXDATA.masters;
  return (
    <div className="cx-main">
      <PageHeader crumb="ポータル / マスターデータ管理" title="マスターデータ管理（基幹システム連携）" onBack={onBack}
        actions={<Btn icon="externalLink" onClick={()=>window.open(MASTERDB_URL,'_blank','noopener')}>実データを閲覧（専用サイト）</Btn>}/>

      {/* 連携バナー */}
      <div className="cx-card pad" style={{display:'flex',alignItems:'center',gap:12,marginBottom:18,borderLeft:'4px solid var(--c-primary)'}}>
        <CXIcon name="refresh" size={18} color="#0b57c4"/>
        <div style={{fontSize:13,lineHeight:1.7}}>
          <b>基幹システムから3マスタを取込済み</b>（最終同期: 2026/07/03）。
          各テーマ（見積業務効率化・工事書類作成 ほか）はこの共通マスタを参照し、<b>重複入力を排除</b>します。
          実データの閲覧は機密保護のため専用サイト（メール認証＋閲覧パスワード）に分離しています。
        </div>
      </div>

      {/* KPI */}
      <div className="cx-stats" style={{marginBottom:18}}>
        <Stat lab="物件情報" icon="building" val="3,106" unit="件" delta="28列" up/>
        <Stat lab="取引先" icon="box" val="9,117" unit="件" delta="29列" up/>
        <Stat lab="社員" icon="user" val="590" unit="名" delta="17列" up/>
        <Stat lab="参照整合性チェック" icon="shield" val="OK" unit="" delta="相互リレーション検証済" up/>
      </div>

      {/* 3マスタ */}
      {masters.map(m => (
        <div key={m.id} className="cx-card" style={{marginBottom:16,overflow:'hidden'}}>
          <div className="cx-card-h">
            <div style={{display:'flex',alignItems:'center',gap:9}}>
              <CXIcon name={m.icon} size={17} color="#0b57c4"/>
              <h3>{m.name}</h3>
              <Chip tone="primary">{m.count} 件 × {m.cols} 列</Chip>
            </div>
            <Btn kind="sec" size="sm" icon="externalLink" onClick={()=>window.open(MASTERDB_URL,'_blank','noopener')}>実データで開く</Btn>
          </div>
          <div style={{padding:'12px 18px 4px',fontSize:13,color:'var(--c-text-2)',lineHeight:1.7}}>
            {m.desc}<br/>
            <span style={{fontSize:12,color:'var(--c-text-3)'}}><b>リレーション:</b> {m.rel}</span>
          </div>
          <table className="cx-tbl" style={{marginTop:8}}>
            <thead><tr>{m.sample.head.map((h,i)=><th key={i}>{h}</th>)}</tr></thead>
            <tbody>
              {m.sample.rows.map((r,i)=>(
                <tr key={i}>{r.map((c,j)=><td key={j} className={j===1?'strong':j>1?'mut':''}>{c}</td>)}</tr>
              ))}
            </tbody>
          </table>
          <div style={{padding:'8px 18px 12px',fontSize:11.5,color:'var(--c-text-3)'}}>
            ※ 上記はモック用のサンプル行です。全件の検索・絞込・CSV出力は「実データで開く」（要認証）から。
          </div>
        </div>
      ))}
    </div>
  );
};
window.ThemeMasterDB = ThemeMasterDB;