// ============ 后台管理页（只读模式） ============
// 纯前端预置方案，仅展示预置访问码和订阅信息，无任何增删改操作

const { useState, useEffect } = React;
const { useNavigate } = window.RR;
const { toast } = window;

function formatDate(dateStr) {
  if (!dateStr) return '长期有效';
  const d = new Date(dateStr);
  // 按 UTC 取年月日，保证与预置配置的字面日期一致
  const y = d.getUTCFullYear();
  const m = String(d.getUTCMonth() + 1).padStart(2, '0');
  const day = String(d.getUTCDate()).padStart(2, '0');
  return `${y}/${m}/${day}`;
}

// ============ 登录页组件 ============
function AdminLogin({ onLogin }) {
  const navigate = useNavigate();
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!password.trim()) return;
    setLoading(true);
    setError('');
    try {
      const result = await API.adminLogin(password.trim());
      if (result.success) {
        toast.success('登录成功');
        onLogin();
      }
    } catch (err) {
      setError(err.data?.message || '登录失败');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="admin-login-page">
      <div className="admin-login-card">
        <div className="admin-login-logo">
          <i className="fa-solid fa-shield-halved"></i>
        </div>
        <h1 className="admin-login-title">后台控制中心</h1>
        <p className="admin-login-subtitle">请输入管理员密码</p>

        <form className="admin-login-form" onSubmit={handleSubmit}>
          <div className={`admin-login-input-wrap ${error ? 'has-error' : ''}`}>
            <i className="fa-solid fa-lock admin-login-icon"></i>
            <input
              type="password"
              className="admin-login-input"
              placeholder="管理员密码"
              value={password}
              onChange={(e) => {
                setPassword(e.target.value);
                if (error) setError('');
              }}
              autoFocus
              disabled={loading}
            />
          </div>
          {error && (
            <div className="admin-login-error">
              <i className="fa-solid fa-circle-exclamation"></i>
              {error}
            </div>
          )}
          <button className="admin-login-btn" type="submit" disabled={loading}>
            {loading ? (
              <>
                <i className="fa-solid fa-spinner fa-spin"></i> 登录中...
              </>
            ) : (
              <>
                <i className="fa-solid fa-right-to-bracket"></i> 登录
              </>
            )}
          </button>
        </form>

        <button className="admin-login-back" onClick={() => navigate('/')}>
          <i className="fa-solid fa-arrow-left"></i>
          返回首页
        </button>
      </div>
    </div>
  );
}

// ============ 后台主界面（只读） ============
function AdminDashboard({ onLogout }) {
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState('codes');
  const [presetCodes, setPresetCodes] = useState([]);
  const [allSubs, setAllSubs] = useState([]);
  const [levels, setLevels] = useState([]);
  const [copying, setCopying] = useState(null);

  useEffect(() => {
    // 加载预置码 — 复用 api.js 同一套数据源
    const codes = API._presetCodes.map((c) => {
      const lv = API._levels.find((l) => l.levelKey === c.level);
      const isExpired = c.expiresAt && new Date(c.expiresAt) < new Date();
      return {
        ...c,
        levelName: lv?.name || c.level,
        nodeCount: lv?.nodeCount || 0,
        status: !c.enabled ? 'disabled' : isExpired ? 'expired' : 'active',
      };
    });
    setPresetCodes(codes);

    // 订阅数据直接复用 api.js 的 ALL_SUBSCRIPTIONS，不单独维护
    const subsWithRoman = API._subscriptions.map((s, i) => ({
      ...s,
      roman: ['Ⅰ', 'Ⅱ', 'Ⅲ', 'Ⅳ', 'Ⅴ'][i] || String(i + 1),
    }));
    setAllSubs(subsWithRoman);
    setLevels(API._levels);
  }, []);

  const handleCopy = (text, id) => {
    navigator.clipboard.writeText(text);
    setCopying(id);
    toast.success('已复制');
    setTimeout(() => setCopying(null), 1500);
  };

  const getStatusLabel = (s) => {
    if (s === 'active') return '有效';
    if (s === 'expired') return '已过期';
    return '已禁用';
  };

  const getStatusClass = (s) => {
    if (s === 'active') return 'status-active';
    if (s === 'expired') return 'status-expired';
    return 'status-disabled';
  };

  return (
    <div className="admin-app">
      {/* 侧边栏 */}
      <aside className="admin-sidebar">
        <div className="admin-sidebar-header">
          <div className="admin-sidebar-logo">
            <i className="fa-solid fa-wand-magic-sparkles"></i>
          </div>
          <div>
            <div className="admin-sidebar-title">歪魔法</div>
            <div className="admin-sidebar-subtitle">只读管理视图</div>
          </div>
        </div>

        <nav className="admin-sidebar-nav">
          <button
            className={`admin-nav-item ${activeTab === 'codes' ? 'active' : ''}`}
            onClick={() => setActiveTab('codes')}
          >
            <i className="fa-solid fa-key"></i>
            <span>访问码清单</span>
          </button>
          <button
            className={`admin-nav-item ${activeTab === 'subs' ? 'active' : ''}`}
            onClick={() => setActiveTab('subs')}
          >
            <i className="fa-solid fa-link"></i>
            <span>订阅信息总览</span>
          </button>
        </nav>

        <div className="admin-sidebar-footer">
          <button className="admin-sidebar-btn" onClick={() => navigate('/')}>
            <i className="fa-solid fa-arrow-left"></i>
            <span>返回首页</span>
          </button>
          <button className="admin-sidebar-btn logout" onClick={onLogout}>
            <i className="fa-solid fa-right-from-bracket"></i>
            <span>退出登录</span>
          </button>
        </div>
      </aside>

      {/* 主内容区 */}
      <main className="admin-main-content">
        {/* 本地模式提示 */}
        <div className="local-mode-banner">
          <i className="fa-solid fa-circle-info"></i>
          <span>
            当前为 <strong>只读视图模式</strong>：所有数据为系统预置配置，仅供查看，不支持增删改操作。
          </span>
        </div>

        {/* 访问码清单 */}
        {activeTab === 'codes' && (
          <div className="admin-tab-content">
            <h1 className="admin-page-title">预置访问码清单</h1>
            <p className="admin-page-desc">
              系统预置的访问码列表，所有访问者共享同一份配置
            </p>

            <div className="admin-card">
              <div className="admin-table-wrap">
                <table className="admin-table">
                  <thead>
                    <tr>
                      <th>访问码</th>
                      <th>会员等级</th>
                      <th>有效期</th>
                      <th>状态</th>
                      <th>用户QQ</th>
                    </tr>
                  </thead>
                  <tbody>
                    {presetCodes.map((c) => (
                      <tr key={c.code}>
                        <td className="code-cell">
                          <code className="code-text">{c.code}</code>
                        </td>
                        <td>
                          <span className="level-badge">{c.levelName}</span>
                        </td>
                        <td className="date-cell">{formatDate(c.expiresAt)}</td>
                        <td>
                          <span className={`status-badge ${getStatusClass(c.status)}`}>
                            <span className="status-badge-dot"></span>
                            {getStatusLabel(c.status)}
                          </span>
                        </td>
                        <td className="remark-cell">{c.qq || '待填'}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        )}

        {/* 订阅信息总览 */}
        {activeTab === 'subs' && (
          <div className="admin-tab-content">
            <h1 className="admin-page-title">订阅信息总览</h1>
            <p className="admin-page-desc">
              完整订阅线路配置及各等级对应关系
            </p>

            {/* 等级对应关系卡片 */}
            <div className="admin-card">
              <h2 className="admin-card-title">
                <i className="fa-solid fa-layer-group"></i>
                等级与订阅组对应关系
              </h2>
              <p className="admin-card-subtitle">所有会员等级均享有完整两组订阅线路</p>
              <div className="level-sub-map">
                {levels.map((lv) => (
                  <div key={lv.levelKey} className="level-map-item">
                    <div className="level-map-header">
                      <div className="level-map-name">
                        <i className="fa-solid fa-crown" style={{ color: lv.color }}></i>
                        {lv.name}
                      </div>
                      <div className="level-map-nodes">{lv.nodeCount} 节点</div>
                    </div>
                    <div className="level-map-groups">
                      {['Ⅰ', 'Ⅱ'].map((roman, i) => (
                        <span key={i} className="level-map-chip on">
                          订阅 {roman}
                        </span>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* 订阅详情卡片 */}
            {allSubs.map((sub) => (
              <div key={sub.lineName} className="admin-card">
                <h2 className="admin-card-title">
                  <span className="sub-roman-badge">订阅 {sub.roman}</span>
                  {sub.lineLabel}
                </h2>
                <div className="sub-detail-list">
                  {sub.links.map((link) => (
                    <div key={link.type} className="sub-detail-row">
                      <span className="sub-detail-type">{link.label}</span>
                      <code className="sub-detail-url">{link.url}</code>
                      <button
                        className={`sub-copy-mini ${copying === sub.lineName + link.type ? 'copied' : ''}`}
                        onClick={() => handleCopy(link.url, sub.lineName + link.type)}
                      >
                        {copying === sub.lineName + link.type ? (
                          <>
                            <i className="fa-solid fa-check"></i> 已复制
                          </>
                        ) : (
                          <>
                            <i className="fa-regular fa-copy"></i> 复制
                          </>
                        )}
                      </button>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        )}
      </main>
    </div>
  );
}

// ============ 主组件 ============
function AdminPage() {
  const [loggedIn, setLoggedIn] = useState(false);
  const [hydrated, setHydrated] = useState(false);

  useEffect(() => {
    setLoggedIn(API.isAdminLoggedIn());
    setHydrated(true);
  }, []);

  if (!hydrated) return null;

  const handleLogin = () => setLoggedIn(true);
  const handleLogout = () => {
    API.adminLogout();
    setLoggedIn(false);
  };

  if (!loggedIn) {
    return <AdminLogin onLogin={handleLogin} />;
  }

  return <AdminDashboard onLogout={handleLogout} />;
}

window.AdminPage = AdminPage;