import React, { useState } from 'react';
import './styles/energy-bi-board.css';
import { isOssGateSessionAuthed } from '../../common/oss-access-gate';

export const ENERGY_BI_PASSWORD = 'lingniu';
export const ENERGY_BI_AUTH_KEY = 'energy-h2-bi-board-auth-v1';

export function isEnergyBiAuthed(): boolean {
  return isOssGateSessionAuthed(ENERGY_BI_AUTH_KEY);
}

export function setEnergyBiAuthed(ok: boolean): void {
  try {
    if (ok) sessionStorage.setItem(ENERGY_BI_AUTH_KEY, '1');
    else sessionStorage.removeItem(ENERGY_BI_AUTH_KEY);
  } catch {
    /* ignore */
  }
}

interface EnergyBiAccessGateProps {
  onOk: () => void;
}

/** 轻门禁：口令 lingniu · 本会话记住（与汇报舱 / 作战室同口径） */
export const EnergyBiAccessGate: React.FC<EnergyBiAccessGateProps> = ({ onOk }) => {
  const [pwd, setPwd] = useState('');
  const [err, setErr] = useState('');

  const submit = (e: React.FormEvent) => {
    e.preventDefault();
    if (pwd.trim() === ENERGY_BI_PASSWORD) {
      setEnergyBiAuthed(true);
      setErr('');
      onOk();
      return;
    }
    setErr('口令不对，请重试');
  };

  return (
    <div className="ehb-gate">
      <form className="ehb-gate-card" onSubmit={submit}>
        <p className="ehb-gate-kicker">ONEOS · 能源 BI</p>
        <h1 className="ehb-gate-title">氢能经营看板</h1>
        <p className="ehb-gate-sub">我司成本 · 按日 / 总览 · 单站日报</p>
        <label className="ehb-gate-label" htmlFor="ehb-pwd">
          访问口令
        </label>
        <input
          id="ehb-pwd"
          className="ehb-gate-input"
          type="password"
          autoComplete="current-password"
          autoFocus
          value={pwd}
          onChange={(e) => {
            setPwd(e.target.value);
            if (err) setErr('');
          }}
          placeholder="请输入口令"
        />
        <p className="ehb-gate-error" role="alert">
          {err}
        </p>
        <button type="submit" className="ehb-gate-btn">
          进入看板
        </button>
        <p className="ehb-gate-foot">内部文件 · 请勿外传</p>
      </form>
    </div>
  );
};