// ログイン画面（テーマ0：共通ログイン基盤）。layout: split | center
// メインは社員番号ログイン。Microsoft SSO（Entra ID）は共通基盤構築後に対応予定のため無効化表示。
const LoginScreen = ({ onLogin, layout='split' }) => {
  const [showPw, setShowPw] = useState(false);

  const Brand = (
    <div className="cx-login-brand">
      <Topo />
      <div className="logo">
        <img src={window.__resources?.logoWhite || "img/chemico-logo-white.svg"} height="38" alt="小野田ケミコ株式会社"/>
      </div>
      <h1>
        現場の知見を、<br/>ひとつの基盤へ。
        <small>ケミコプラットフォーム<br/>明日のランドクリエイターを支える業務基盤</small>
      </h1>
      <div className="foot">© 小野田ケミコ株式会社 / 社内利用専用システム</div>
    </div>
  );

  const Card = (
    <div className={`cx-login-card${layout==='center'?' boxed':''}`}>
      {layout==='center' && (
        <div style={{display:'flex',alignItems:'center',marginBottom:22}}>
          <img src={window.__resources?.logoColor || "img/chemico-logo.svg"} height="30" alt="小野田ケミコ株式会社"/>
        </div>
      )}
      <h2>ログイン</h2>
      <div className="sub">社員番号とパスワードでサインインしてください</div>

      <div className="cx-field">
        <label>社員番号<span className="req">必須</span></label>
        <input className="cx-input" defaultValue="ON-10482" placeholder="例：ON-10482"/>
      </div>
      <div className="cx-field">
        <label>パスワード<span className="req">必須</span></label>
        <div className="cx-input-wrap">
          <input className="cx-input" type={showPw?'text':'password'} defaultValue="passwordsample"/>
          <button className="eye" onClick={()=>setShowPw(s=>!s)}><CXIcon name={showPw?'eyeOff':'eye'} size={18}/></button>
        </div>
      </div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:20}}>
        <label style={{fontSize:12.5,color:'var(--c-text-2)',display:'flex',alignItems:'center',gap:7,cursor:'pointer'}}>
          <input type="checkbox" defaultChecked/>ログイン状態を保持
        </label>
        <a style={{fontSize:12.5}}>パスワードをお忘れですか？</a>
      </div>
      <Btn block onClick={onLogin}>ログイン</Btn>

      <div className="cx-divider">または</div>
      <button className="cx-sso" disabled style={{opacity:.55,cursor:'not-allowed'}} title="共通ログイン基盤の構築後に対応予定です">
        <svg width="18" height="18" viewBox="0 0 23 23"><path fill="#f25022" d="M1 1h10v10H1z"/><path fill="#7fba00" d="M12 1h10v10H12z"/><path fill="#00a4ef" d="M1 12h10v10H1z"/><path fill="#ffb900" d="M12 12h10v10H12z"/></svg>
        Microsoft アカウントでサインイン
        <span style={{marginLeft:'auto',fontSize:10.5,fontWeight:700,color:'var(--c-text-3)',border:'1px solid var(--c-border)',borderRadius:99,padding:'2px 8px',whiteSpace:'nowrap'}}>将来対応予定</span>
      </button>
      <div style={{marginTop:10,fontSize:11.5,color:'var(--c-text-3)',textAlign:'center',lineHeight:1.7}}>
        Microsoft（Entra ID）でのシングルサインオンは<br/>共通ログイン基盤の構築後に対応予定です
      </div>
    </div>
  );

  if (layout==='center') {
    return <div className="cx-login center"><div className="cx-login-form" style={{background:'transparent'}}>{Card}</div></div>;
  }
  return <div className="cx-login">{Brand}<div className="cx-login-form">{Card}</div></div>;
};
window.LoginScreen = LoginScreen;