// ============ 用户中心（侧边栏布局） ============
const { useState, useEffect } = React;
const { toast } = window;

const FALLBACK_DOWNLOADS = [
  {
    id: 'windows',
    platform: 'Windows',
    icon: 'fa-brands fa-windows',
    iconColor: '#0078D4',
    tutorial: ['下载客户端', '导入订阅链接', '选择节点并连接'],
    hasAppleId: false,
    hasQrCode: false,
  },
  {
    id: 'android',
    platform: 'Android',
    icon: 'fa-brands fa-android',
    iconColor: '#3DDC84',
    tutorial: ['下载客户端', '导入订阅链接', '选择节点并连接'],
    hasAppleId: false,
    hasQrCode: false,
  },
  {
    id: 'mac',
    platform: 'macOS',
    icon: 'fa-brands fa-apple',
    iconColor: '#555555',
    tutorial: ['下载客户端', '导入订阅链接', '选择节点并连接'],
    hasAppleId: false,
    hasQrCode: false,
  },
  {
    id: 'ios',
    platform: 'iOS',
    icon: 'fa-brands fa-app-store-ios',
    iconColor: '#007AFF',
    tutorial: ['下载客户端', '导入订阅链接', '选择节点并连接'],
    hasAppleId: true,
    hasQrCode: true,
    qrCodeUrl: '',
  },
];

const NAV_ITEMS = [
  { key: 'benefits', label: '用户权益', icon: 'fa-solid fa-user-large' },
  { key: 'subscriptions', label: '订阅链接', icon: 'fa-solid fa-link' },
  { key: 'downloads', label: '客户端下载', icon: 'fa-solid fa-download' },
  { key: 'tutorials', label: '使用教程', icon: 'fa-solid fa-book-open-reader' },
];

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 daysRemaining(dateStr) {
  if (!dateStr) return null;
  const now = new Date();
  const target = new Date(dateStr);
  // 按 UTC 计算日期差，与 formatDate 对齐
  const nowUtc = Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate());
  const targetUtc = Date.UTC(target.getUTCFullYear(), target.getUTCMonth(), target.getUTCDate());
  return Math.ceil((targetUtc - nowUtc) / (1000 * 60 * 60 * 24));
}

function maskPassword(pwd) {
  if (!pwd) return '';
  return '•'.repeat(Math.min(pwd.length, 12));
}

// ============ 侧边栏 ============
function Sidebar({ member, activeKey, onNavigate, onLogout, mobileOpen, onCloseMobile }) {
  const displayName = member.username || '尊敬的会员';
  const sidebarClass = mobileOpen !== undefined
    ? `user-sidebar mobile ${mobileOpen ? 'open' : 'closed'}`
    : 'user-sidebar';

  return (
    <>
      {mobileOpen !== undefined && mobileOpen && (
        <div className="sidebar-mask" onClick={onCloseMobile}></div>
      )}
      <aside className={sidebarClass}>
        <div className="sidebar-header">
          <div className="sidebar-logo">
            <i className="fa-solid fa-wand-magic-sparkles"></i>
          </div>
          <div className="sidebar-brand">歪魔法</div>
        </div>

        <div className="sidebar-user-card">
          <div className="sidebar-user-avatar">
            <i className="fa-solid fa-user"></i>
          </div>
          <div className="sidebar-user-info">
            <div className="sidebar-user-name">{displayName}</div>
            <div className="sidebar-user-level">
              <i className="fa-solid fa-crown"></i>
              {member.levelName}
            </div>
            <div className="sidebar-user-expiry">
              <i className="fa-regular fa-calendar"></i>
              到期：{formatDate(member.expiresAt)}
            </div>
          </div>
        </div>

        <nav className="sidebar-nav">
          {NAV_ITEMS.map((item) => (
            <button
              key={item.key}
              className={`sidebar-nav-item ${activeKey === item.key ? 'active' : ''}`}
              onClick={() => {
                onNavigate(item.key);
                if (mobileOpen !== undefined) onCloseMobile();
              }}
            >
              <i className={item.icon}></i>
              <span>{item.label}</span>
            </button>
          ))}
        </nav>

        <div className="sidebar-footer">
          <button className="sidebar-logout-btn" onClick={onLogout}>
            <i className="fa-solid fa-right-from-bracket"></i>
            <span>退出登录</span>
          </button>
        </div>
      </aside>
    </>
  );
}

// ============ 顶部栏（移动端） ============
function MobileTopBar({ member, onMenuClick }) {
  return (
    <header className="mobile-top-bar">
      <button className="mobile-menu-btn" onClick={onMenuClick}>
        <i className="fa-solid fa-bars"></i>
      </button>
      <div className="mobile-top-title">
        <i className="fa-solid fa-wand-magic-sparkles"></i>
        歪魔法
      </div>
      <div className="mobile-top-level">
        <i className="fa-solid fa-crown"></i>
        {member.levelName}
      </div>
    </header>
  );
}

// ============ 权益页 ============
function BenefitsPage({ member }) {
  const displayName = member.username || '尊敬的会员';
  const days = daysRemaining(member.expiresAt);
  const isExpired = member.status === 'expired' || (days !== null && days < 0);
  const [expiredDismissed, setExpiredDismissed] = useState(false);
  const [copyingCode, setCopyingCode] = useState(false);

  const handleCopyCode = () => {
    if (!member.code) return;
    navigator.clipboard.writeText(member.code);
    setCopyingCode(true);
    toast.success('访问码已复制');
    setTimeout(() => setCopyingCode(false), 1500);
  };

  return (
    <div className="page-content">
      <h1 className="page-title">
        <i className="fa-solid fa-user-large"></i>
        用户权益
      </h1>

      {isExpired && !expiredDismissed && (
        <div className="expired-banner">
          <div className="expired-banner-content">
            <i className="fa-solid fa-circle-exclamation"></i>
            <div>
              <strong>会员已过期</strong>
              <span>您的会员已于 {formatDate(member.expiresAt)} 到期，请及时续费</span>
            </div>
          </div>
          <button className="expired-banner-close" onClick={() => setExpiredDismissed(true)}>
            <i className="fa-solid fa-xmark"></i>
          </button>
        </div>
      )}

      {/* 会员卡 */}
      <div className={`member-card ${isExpired ? 'expired' : ''}`}>
        <div className="member-card-top">
          <div className="member-card-brand">
            <i className="fa-solid fa-wand-magic-sparkles"></i>
            歪魔法
          </div>
          <span className="member-card-level-badge">
            <i className="fa-solid fa-crown"></i>
            {member.levelName}
          </span>
        </div>

        <div className="member-card-user">
          <div className="member-card-name">{displayName}</div>
          {member.levelDescription && (
            <div className="member-card-desc">{member.levelDescription}</div>
          )}
        </div>

        <div className="member-card-code-row">
          <div className="member-card-code-label">我的访问码</div>
          <div className="member-card-code-wrap">
            <code className="member-card-code">{member.code}</code>
            <button
              className={`member-card-copy-btn ${copyingCode ? 'copied' : ''}`}
              onClick={handleCopyCode}
              title="复制访问码"
            >
              {copyingCode ? (
                <><i className="fa-solid fa-check"></i> 已复制</>
              ) : (
                <><i className="fa-regular fa-copy"></i> 复制</>
              )}
            </button>
          </div>
        </div>

        <div className="member-card-meta">
          <div className="member-card-meta-item">
            <div className="member-card-meta-label">到期时间</div>
            <div className="member-card-meta-value">{formatDate(member.expiresAt)}</div>
          </div>
          <div className="member-card-meta-item">
            <div className="member-card-meta-label">可用节点</div>
            <div className="member-card-meta-value">{member.nodeCount} 个</div>
          </div>
          <div className="member-card-meta-item">
            <div className="member-card-meta-label">订阅线路</div>
            <div className="member-card-meta-value">3 组全开</div>
          </div>
          <div className="member-card-meta-item">
            <div className="member-card-meta-label">剩余天数</div>
            <div className="member-card-meta-value">
              {days === null ? '长期' : isExpired ? `已过期 ${-days} 天` : `${days} 天`}
            </div>
          </div>
        </div>
      </div>

      <div className="feature-list-card">
        <h3 className="feature-list-title">
          <i className="fa-solid fa-list-check"></i>
          权益详情
        </h3>
        <div className="feature-list">
          {(member.features || []).map((f, i) => (
            <div key={i} className="feature-item">
              <i className="fa-solid fa-check feature-check"></i>
              <span>{f}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ============ 订阅链接页 ============
function SubscriptionsPage({ subscriptions, isExpired }) {
  const romanNumerals = ['Ⅰ', 'Ⅱ', 'Ⅲ', 'Ⅳ', 'Ⅴ'];

  const copyLink = (url, label) => {
    navigator.clipboard.writeText(url);
    toast.success(`${label} 已复制`);
  };

  return (
    <div className="page-content">
      <h1 className="page-title">
        <i className="fa-solid fa-link"></i>
        订阅链接
        <span className="section-hint">点击复制对应类型的订阅链接</span>
      </h1>

      {isExpired ? (
        <div className="empty-state-card">
          <i className="fa-solid fa-circle-exclamation"></i>
          <p>会员已过期，无法获取订阅链接</p>
        </div>
      ) : (
        <div className="subscriptions-grid">
          {subscriptions.map((line, idx) => (
            <div key={line.lineName} className="subscription-card">
              <div className="subscription-card-header">
                <div className="subscription-card-title">
                  <span className="subscription-index">
                    订阅 {romanNumerals[idx] || idx + 1}
                  </span>
                  {line.lineLabel}
                </div>
                <div className="subscription-status">
                  <span className="status-dot"></span>
                  可用
                </div>
              </div>
              <div className="subscription-btns">
                {line.links.map((link) => (
                  <button
                    key={link.type}
                    className="sub-copy-btn"
                    onClick={() => copyLink(link.url, link.label)}
                  >
                    <i className="fa-regular fa-copy"></i>
                    {link.label}
                  </button>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ============ 客户端下载页 ============
function DownloadsPage({ downloads, isExpired, onShowAppleId }) {
  const [qrOpen, setQrOpen] = useState(null);

  const downloadData = downloads && downloads.length > 0 ? downloads : FALLBACK_DOWNLOADS;

  const handleDownload = (url, label) => {
    if (!url) {
      toast.info('暂无可下载链接');
      return;
    }
    window.open(url, '_blank');
    toast.success(`正在${label}...`);
  };

  return (
    <div className="page-content">
      <h1 className="page-title">
        <i className="fa-solid fa-download"></i>
        客户端下载
      </h1>

      {isExpired ? (
        <div className="empty-state-card">
          <i className="fa-solid fa-circle-exclamation"></i>
          <p>会员已过期，无法下载客户端</p>
        </div>
      ) : (
        <div className="download-grid">
          {downloadData.map((item) => (
            <div key={item.id} className="download-card">
              <div className="download-card-icon" style={{ color: item.iconColor }}>
                <i className={item.icon}></i>
              </div>
              <div className="download-card-platform">{item.platform}</div>
              <div className="download-card-btns">
                <button
                  className="download-btn download-btn-main"
                  onClick={() => handleDownload(item.mainUrl, '主站下载')}
                >
                  <i className="fa-solid fa-download"></i>
                  主站下载
                </button>
                {item.backupUrl && (
                  <button
                    className="download-btn download-btn-backup"
                    onClick={() => handleDownload(item.backupUrl, '备用下载')}
                  >
                    <i className="fa-solid fa-cloud-arrow-down"></i>
                    备用下载
                  </button>
                )}
                {item.hasQrCode && (
                  <button
                    className="download-btn download-btn-qr"
                    onClick={() => setQrOpen(item)}
                  >
                    <i className="fa-solid fa-qrcode"></i>
                    显示二维码
                  </button>
                )}
                {item.hasAppleId && (
                  <button
                    className="download-btn download-btn-apple"
                    onClick={() => onShowAppleId(item)}
                  >
                    <i className="fa-brands fa-apple"></i>
                    Apple ID
                  </button>
                )}
              </div>
              <div className="download-card-status">
                <span className="status-dot status-green"></span>
                版本正常
              </div>
            </div>
          ))}
        </div>
      )}

      {/* 二维码弹窗 */}
      {qrOpen && (
        <div className="modal-overlay" onClick={() => setQrOpen(null)}>
          <div className="modal-content qr-modal" onClick={(e) => e.stopPropagation()}>
            <button className="modal-close" onClick={() => setQrOpen(null)}>
              <i className="fa-solid fa-xmark"></i>
            </button>
            <h2 className="modal-title">
              <i className="fa-solid fa-qrcode"></i>
              {qrOpen.platform} 下载二维码
            </h2>
            <div className="qr-image-wrap">
              {qrOpen.qrCodeUrl ? (
                <img src={qrOpen.qrCodeUrl} alt={`${qrOpen.platform} 二维码`} className="qr-image" />
              ) : (
                <div className="qr-placeholder">
                  <i className="fa-solid fa-qrcode"></i>
                  <p>暂无二维码</p>
                </div>
              )}
            </div>
            <p className="qr-hint">使用手机扫码下载</p>
          </div>
        </div>
      )}
    </div>
  );
}

// ============ 使用教程页 ============
function TutorialsPage({ downloads }) {
  const [tutorialOpen, setTutorialOpen] = useState(null);
  const downloadData = downloads && downloads.length > 0 ? downloads : FALLBACK_DOWNLOADS;

  return (
    <div className="page-content">
      <h1 className="page-title">
        <i className="fa-solid fa-book-open-reader"></i>
        使用教程
      </h1>

      <div className="tutorial-grid">
        {downloadData.map((item) => (
          <div
            key={item.id}
            className="tutorial-card"
            onClick={() =>
              setTutorialOpen({ platform: item.platform, steps: item.tutorial })
            }
          >
            <div className="tutorial-card-icon" style={{ color: item.iconColor }}>
              <i className={item.icon}></i>
            </div>
            <div className="tutorial-card-content">
              <div className="tutorial-card-title">{item.platform} 教程</div>
              <div className="tutorial-card-desc">点击查看详细图文使用指南</div>
            </div>
            <i className="fa-solid fa-chevron-right tutorial-card-arrow"></i>
          </div>
        ))}
      </div>

      {/* 教程弹窗 */}
      {tutorialOpen && (
        <div className="modal-overlay" onClick={() => setTutorialOpen(null)}>
          <div className="modal-content" onClick={(e) => e.stopPropagation()}>
            <button className="modal-close" onClick={() => setTutorialOpen(null)}>
              <i className="fa-solid fa-xmark"></i>
            </button>
            <h2 className="modal-title">
              <i className="fa-solid fa-book-open"></i>
              {tutorialOpen.platform} 使用教程
            </h2>
            <ol className="tutorial-steps">
              {tutorialOpen.steps.map((step, i) => (
                <li key={i}>
                  <span className="step-num">{i + 1}</span>
                  <span className="step-text">{step}</span>
                </li>
              ))}
            </ol>
          </div>
        </div>
      )}
    </div>
  );
}

// ============ 主组件 ============
function UserDashboard({ member, subscriptions, downloads, tutorials, onLogout }) {
  const [activeKey, setActiveKey] = useState('benefits');
  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
  const [appleIdOpen, setAppleIdOpen] = useState(null);

  const days = daysRemaining(member.expiresAt);
  const isExpired = member.status === 'expired' || (days !== null && days < 0);

  const handleShowAppleId = (item) => {
    setAppleIdOpen(item);
  };

  const copyAppleId = (text, label) => {
    navigator.clipboard.writeText(text);
    toast.success(`${label} 已复制`);
  };

  return (
    <div className="dashboard-layout">
      {/* 桌面端侧边栏 */}
      <div className="sidebar-desktop">
        <Sidebar
          member={member}
          activeKey={activeKey}
          onNavigate={setActiveKey}
          onLogout={onLogout}
        />
      </div>

      {/* 移动端顶部栏 */}
      <div className="mobile-only">
        <MobileTopBar
          member={member}
          onMenuClick={() => setMobileSidebarOpen(true)}
        />
        <Sidebar
          member={member}
          activeKey={activeKey}
          onNavigate={setActiveKey}
          onLogout={onLogout}
          mobileOpen={mobileSidebarOpen}
          onCloseMobile={() => setMobileSidebarOpen(false)}
        />
      </div>

      {/* 主内容区 */}
      <main className="dashboard-main-area">
        {activeKey === 'benefits' && <BenefitsPage member={member} />}
        {activeKey === 'subscriptions' && (
          <SubscriptionsPage subscriptions={subscriptions} isExpired={isExpired} />
        )}
        {activeKey === 'downloads' && (
          <DownloadsPage
            downloads={downloads}
            isExpired={isExpired}
            onShowAppleId={handleShowAppleId}
          />
        )}
        {activeKey === 'tutorials' && <TutorialsPage downloads={downloads} />}

        <footer className="dashboard-footer">
          © {new Date().getFullYear()} 歪魔法 · 服务仅供学习交流使用
        </footer>
      </main>


      {/* Apple ID 弹窗 */}
      {appleIdOpen && (
        <div className="modal-overlay" onClick={() => setAppleIdOpen(null)}>
          <div className="modal-content appleid-modal" onClick={(e) => e.stopPropagation()}>
            <button className="modal-close" onClick={() => setAppleIdOpen(null)}>
              <i className="fa-solid fa-xmark"></i>
            </button>
            <h2 className="modal-title">
              <i className="fa-brands fa-apple"></i>
              Apple ID 共享账号
            </h2>
            <p className="apple-id-hint">
              下载 Shadowrocket 需要使用美区 Apple ID
              <br />
              <strong>注意：仅在 App Store 登录，切勿在设置中登录 iCloud</strong>
            </p>
            <div className="apple-id-field">
              <div className="apple-id-field-label">账号</div>
              <div className="apple-id-field-row">
                <code className="apple-id-value">{appleIdOpen.appleIdAccount || '—'}</code>
                <button
                  className="apple-id-copy-btn"
                  onClick={() => copyAppleId(appleIdOpen.appleIdAccount, '账号')}
                >
                  <i className="fa-regular fa-copy"></i>
                </button>
              </div>
            </div>
            <div className="apple-id-field">
              <div className="apple-id-field-label">密码</div>
              <div className="apple-id-field-row">
                <code className="apple-id-value apple-id-pwd">
                  {maskPassword(appleIdOpen.appleIdPassword)}
                </code>
                <button
                  className="apple-id-copy-btn"
                  onClick={() => copyAppleId(appleIdOpen.appleIdPassword, '密码')}
                >
                  <i className="fa-regular fa-copy"></i>
                </button>
              </div>
            </div>
            <p className="apple-id-warning">
              <i className="fa-solid fa-triangle-exclamation"></i>
              请勿在「设置 → iCloud」中登录此账号，否则手机可能被锁
            </p>
          </div>
        </div>
      )}
    </div>
  );
}

window.UserDashboard = UserDashboard;