'use client';

import { useState } from 'react';
import { PageContainer } from '@/components/layout';
import { cn } from '@/utils/helpers';
import styles from './authorization.module.scss';

/**
 * 省/市公司数据接口
 */
interface CompanyItem {
  id: string;
  avatar: string;
  nickname: string;
  accountId: string;
  province: string;
  city?: string;
  teamAdoptions: number;
  authStatus: 'authorized' | 'pending';
}

/**
 * 阶梯性考核目标数据接口
 */
interface TargetItem {
  month: string;
  provinceMonthly: number;
  provinceTotal: number;
  cityMonthly: number;
  cityTotal: number;
}

/**
 * 特殊城市规则接口
 */
interface SpecialCityRule {
  city: string;
  enabled: boolean;
}

// 模拟省公司数据
const mockProvinceCompanies: CompanyItem[] = [
  { id: '1', avatar: '', nickname: '用户昵称一', accountId: '123456789', province: '广东省', teamAdoptions: 1234, authStatus: 'authorized' },
];

// 模拟市公司数据
const mockCityCompanies: CompanyItem[] = [
  { id: '1', avatar: '', nickname: '用户昵称二', accountId: '987654321', province: '广东省', city: '深圳市', teamAdoptions: 567, authStatus: 'pending' },
];

// 阶梯性考核目标数据
const targetData: TargetItem[] = [
  { month: '第 1 个月', provinceMonthly: 500, provinceTotal: 500, cityMonthly: 100, cityTotal: 100 },
  { month: '第 2 个月', provinceMonthly: 500, provinceTotal: 1000, cityMonthly: 100, cityTotal: 200 },
  { month: '...', provinceMonthly: 0, provinceTotal: 0, cityMonthly: 0, cityTotal: 0 },
  { month: '第 9 个月', provinceMonthly: 1000, provinceTotal: 6000, cityMonthly: 200, cityTotal: 1200 },
];

// 特殊城市规则
const specialCities: SpecialCityRule[] = [
  { city: '北京市', enabled: false },
  { city: '上海市', enabled: true },
];

/**
 * 授权管理页面
 * 基于 UIPro Figma 设计实现
 */
export default function AuthorizationPage() {
  // 省公司规则状态
  const [provinceThreshold, setProvinceThreshold] = useState('500');
  const [provinceBenefit, setProvinceBenefit] = useState('20');
  const [provinceAfterBenefit, setProvinceAfterBenefit] = useState('20');
  const [provinceResetEnabled, setProvinceResetEnabled] = useState(true);

  // 市公司规则状态
  const [cityThreshold, setCityThreshold] = useState('100');
  const [cityBenefit, setCityBenefit] = useState('40');
  const [cityAfterBenefit, setCityAfterBenefit] = useState('40');
  const [cityResetEnabled, setCityResetEnabled] = useState(true);

  // 授权限制规则
  const [topRankLimit, setTopRankLimit] = useState('10');
  const [specialRules, setSpecialRules] = useState(specialCities);

  // 渲染开关组件
  const renderToggle = (checked: boolean, onChange: (checked: boolean) => void) => (
    <div
      className={cn(styles.authorization__toggle, checked ? styles['authorization__toggle--on'] : styles['authorization__toggle--off'])}
      onClick={() => onChange(!checked)}
      role="switch"
      aria-checked={checked}
      tabIndex={0}
      onKeyDown={(e) => e.key === 'Enter' && onChange(!checked)}
    >
      <div className={cn(styles.authorization__toggleHandle, checked ? styles['authorization__toggleHandle--on'] : styles['authorization__toggleHandle--off'])} />
    </div>
  );

  // 渲染省公司表格
  const renderProvinceTable = () => (
    <div className={styles.authorization__table}>
      <div className={styles.authorization__tableHeader}>
        <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--header'], styles['authorization__tableCell--avatar'])}>头像</div>
        <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--header'], styles['authorization__tableCell--nickname'])}>昵称</div>
        <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--header'], styles['authorization__tableCell--accountId'])}>账户序列号</div>
        <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--header'], styles['authorization__tableCell--province'])}>所属省份</div>
        <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--header'], styles['authorization__tableCell--teamAdoptions'])}>伞下团队认种总量（棵）</div>
        <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--header'], styles['authorization__tableCell--status'])}>授权状态</div>
        <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--header'], styles['authorization__tableCell--actions'])}>操作</div>
      </div>
      {mockProvinceCompanies.map((item) => (
        <div key={item.id} className={styles.authorization__tableRow}>
          <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--avatar'])}>
            <div
              className={styles.authorization__avatar}
              style={item.avatar ? { backgroundImage: `url(${item.avatar})` } : undefined}
            />
          </div>
          <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--nickname'])}>{item.nickname}</div>
          <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--accountId'])}>{item.accountId}</div>
          <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--province'])}>{item.province}</div>
          <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--teamAdoptions'])}>{item.teamAdoptions.toLocaleString()}</div>
          <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--status'])}>
            <span className={cn(styles.authorization__badge, item.authStatus === 'authorized' ? styles['authorization__badge--authorized'] : styles['authorization__badge--pending'])}>
              {item.authStatus === 'authorized' ? '已授权' : '待授权'}
            </span>
          </div>
          <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--actions'])}>
            <button className={cn(styles.authorization__actionBtn, styles['authorization__actionBtn--authorize'])}>授权为省公司</button>
            <button className={cn(styles.authorization__actionBtn, styles['authorization__actionBtn--revoke'])}>取消省公司授权</button>
          </div>
        </div>
      ))}
    </div>
  );

  // 渲染市公司表格
  const renderCityTable = () => (
    <div className={styles.authorization__table}>
      <div className={styles.authorization__tableHeader}>
        <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--header'], styles['authorization__tableCell--avatar'])}>头像</div>
        <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--header'], styles['authorization__tableCell--nickname'])}>昵称</div>
        <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--header'], styles['authorization__tableCell--accountId'])}>账户序列号</div>
        <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--header'], styles['authorization__tableCell--city'])}>所属省/市</div>
        <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--header'], styles['authorization__tableCell--teamAdoptions'])}>伞下团队认种总量（棵）</div>
        <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--header'], styles['authorization__tableCell--status'])}>授权状态</div>
        <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--header'], styles['authorization__tableCell--actions'])}>操作</div>
      </div>
      {mockCityCompanies.map((item) => (
        <div key={item.id} className={styles.authorization__tableRow}>
          <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--avatar'])}>
            <div
              className={styles.authorization__avatar}
              style={item.avatar ? { backgroundImage: `url(${item.avatar})` } : undefined}
            />
          </div>
          <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--nickname'])}>{item.nickname}</div>
          <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--accountId'])}>{item.accountId}</div>
          <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--city'])}>{item.province} / {item.city}</div>
          <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--teamAdoptions'])}>{item.teamAdoptions}</div>
          <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--status'])}>
            <span className={cn(styles.authorization__badge, item.authStatus === 'authorized' ? styles['authorization__badge--authorized'] : styles['authorization__badge--pending'])}>
              {item.authStatus === 'authorized' ? '已授权' : '待授权'}
            </span>
          </div>
          <div className={cn(styles.authorization__tableCell, styles['authorization__tableCell--actions'])}>
            <button className={cn(styles.authorization__actionBtn, styles['authorization__actionBtn--authorize'])}>授权为市公司</button>
            <button className={cn(styles.authorization__actionBtn, styles['authorization__actionBtn--revoke'])}>取消市公司授权</button>
          </div>
        </div>
      ))}
    </div>
  );

  return (
    <PageContainer title="授权管理">
      <div className={styles.authorization}>
        {/* 授权省公司管理 */}
        <section className={styles.authorization__card}>
        <h3 className={styles.authorization__cardTitle}>授权省公司管理</h3>
        <div className={styles.authorization__filters}>
          <select className={styles.authorization__select} aria-label="选择省份">
            <option value="">选择省份</option>
            <option value="guangdong">广东省</option>
            <option value="zhejiang">浙江省</option>
            <option value="jiangsu">江苏省</option>
          </select>
          <select className={styles.authorization__select} aria-label="授权状态">
            <option value="">授权状态</option>
            <option value="authorized">已授权</option>
            <option value="pending">待授权</option>
          </select>
          <input className={styles.authorization__input} placeholder="关键词搜索" type="text" aria-label="关键词搜索" />
          <button className={styles.authorization__searchBtn}>查询</button>
        </div>
        {renderProvinceTable()}
        <p className={styles.authorization__help}>帮助：在此管理和筛选具备省公司资格的账号，并发起授权操作。</p>
      </section>

      {/* 授权省公司团队权益考核规则 */}
      <section className={styles.authorization__card}>
        <h3 className={styles.authorization__cardTitle}>授权省公司团队权益考核规则</h3>
        <div className={styles.authorization__form}>
          <div className={styles.authorization__formRow}>
            <div className={styles.authorization__formGroup}>
              <label className={styles.authorization__formLabel}>首次考核触发门槛（棵）</label>
              <input
                className={styles.authorization__formInput}
                type="text"
                value={provinceThreshold}
                onChange={(e) => setProvinceThreshold(e.target.value)}
                placeholder="500"
              />
            </div>
            <div className={styles.authorization__formGroup}>
              <label className={styles.authorization__formLabel}>考核阶段单棵权益（积分）</label>
              <input
                className={styles.authorization__formInput}
                type="text"
                value={provinceBenefit}
                onChange={(e) => setProvinceBenefit(e.target.value)}
                placeholder="20"
              />
              <span className={styles.authorization__formHint}>即，累计完成 {provinceThreshold} 棵目标前，每新增 1 棵获得的权益</span>
            </div>
          </div>
          <div className={styles.authorization__formRow}>
            <div className={styles.authorization__formGroup}>
              <label className={styles.authorization__formLabel}>考核达标后每新增 1 棵省公司获得（积分）</label>
              <input
                className={styles.authorization__formInput}
                type="text"
                value={provinceAfterBenefit}
                onChange={(e) => setProvinceAfterBenefit(e.target.value)}
                placeholder="20"
              />
            </div>
            <div className={styles.authorization__formGroup}>
              <label className={styles.authorization__formLabel}>考核周期</label>
              <select className={styles.authorization__select} style={{ width: '100%' }} aria-label="考核周期">
                <option value="monthly">按月考核</option>
                <option value="quarterly">按季度考核</option>
              </select>
            </div>
          </div>
        </div>
        <div className={styles.authorization__toggleRow}>
          <span className={styles.authorization__toggleLabel}>未达成本月考核目标时，权益失效并从 0 重新累计 {provinceThreshold} 棵</span>
          {renderToggle(provinceResetEnabled, setProvinceResetEnabled)}
        </div>
        <div className={styles.authorization__saveWrapper}>
          <button className={styles.authorization__saveBtn}>保存设置</button>
        </div>
      </section>

      {/* 授权市公司管理 */}
      <section className={styles.authorization__card}>
        <h3 className={styles.authorization__cardTitle}>授权市公司管理</h3>
        <div className={styles.authorization__filters}>
          <select className={styles.authorization__select} aria-label="选择省份">
            <option value="">选择省份</option>
            <option value="guangdong">广东省</option>
            <option value="zhejiang">浙江省</option>
          </select>
          <select className={styles.authorization__select} aria-label="选择城市">
            <option value="">选择城市</option>
            <option value="shenzhen">深圳市</option>
            <option value="guangzhou">广州市</option>
          </select>
          <select className={styles.authorization__select} aria-label="授权状态">
            <option value="">授权状态</option>
            <option value="authorized">已授权</option>
            <option value="pending">待授权</option>
          </select>
          <input className={styles.authorization__input} placeholder="关键词搜索" type="text" aria-label="关键词搜索" />
          <button className={styles.authorization__searchBtn}>查询</button>
        </div>
        {renderCityTable()}
        <p className={styles.authorization__help}>帮助：在此管理和筛选具备市公司资格的账号，并发起授权操作。</p>
      </section>

      {/* 授权市公司团队权益考核规则 */}
      <section className={styles.authorization__card}>
        <h3 className={styles.authorization__cardTitle}>授权市公司团队权益考核规则</h3>
        <div className={styles.authorization__form}>
          <div className={styles.authorization__formRow}>
            <div className={styles.authorization__formGroup}>
              <label className={styles.authorization__formLabel}>首次考核触发门槛（棵）</label>
              <input
                className={styles.authorization__formInput}
                type="text"
                value={cityThreshold}
                onChange={(e) => setCityThreshold(e.target.value)}
                placeholder="100"
              />
            </div>
            <div className={styles.authorization__formGroup}>
              <label className={styles.authorization__formLabel}>考核阶段单棵权益（积分）</label>
              <input
                className={styles.authorization__formInput}
                type="text"
                value={cityBenefit}
                onChange={(e) => setCityBenefit(e.target.value)}
                placeholder="40"
              />
              <span className={styles.authorization__formHint}>即，累计完成 {cityThreshold} 棵目标前，每新增 1 棵获得的权益</span>
            </div>
          </div>
          <div className={styles.authorization__formRow}>
            <div className={styles.authorization__formGroup}>
              <label className={styles.authorization__formLabel}>考核达标后每新增 1 棵市公司获得（积分）</label>
              <input
                className={styles.authorization__formInput}
                type="text"
                value={cityAfterBenefit}
                onChange={(e) => setCityAfterBenefit(e.target.value)}
                placeholder="40"
              />
            </div>
            <div className={styles.authorization__formGroup}>
              <label className={styles.authorization__formLabel}>考核周期</label>
              <select className={styles.authorization__select} style={{ width: '100%' }} aria-label="考核周期">
                <option value="monthly">按月考核</option>
                <option value="quarterly">按季度考核</option>
              </select>
            </div>
          </div>
        </div>
        <div className={styles.authorization__toggleRow}>
          <span className={styles.authorization__toggleLabel}>未达成本月考核目标时，权益失效并从 0 重新累计 {cityThreshold} 棵</span>
          {renderToggle(cityResetEnabled, setCityResetEnabled)}
        </div>
        <div className={styles.authorization__saveWrapper}>
          <button className={styles.authorization__saveBtn}>保存设置</button>
        </div>
      </section>

      {/* 正式省公司/市公司授权管理 */}
      <div className={styles.authorization__officialSection}>
        <section className={styles.authorization__officialCard}>
          <h3 className={styles.authorization__officialTitle}>正式省公司授权管理</h3>
          <p className={styles.authorization__officialDesc}>当省公司完成全部阶梯性考核后，可在此授权为正式省公司。</p>
          <div className={styles.authorization__officialTable}>
            <div className={styles.authorization__officialRow}>
              <div className={styles.authorization__officialCell}>头像</div>
              <div className={styles.authorization__officialCell}>昵称</div>
              <div className={styles.authorization__officialCell}>序列号</div>
              <div className={styles.authorization__officialCell}>省份</div>
              <div className={styles.authorization__officialCell}>状态</div>
              <div className={styles.authorization__officialCell}>操作</div>
            </div>
          </div>
        </section>
        <section className={styles.authorization__officialCard}>
          <h3 className={styles.authorization__officialTitle}>正式市公司授权管理</h3>
          <p className={styles.authorization__officialDesc}>当市公司完成全部阶梯性考核后，可在此授权为正式市公司。</p>
          <div className={styles.authorization__officialTable}>
            <div className={styles.authorization__officialRow}>
              <div className={styles.authorization__officialCell}>头像</div>
              <div className={styles.authorization__officialCell}>昵称</div>
              <div className={styles.authorization__officialCell}>序列号</div>
              <div className={styles.authorization__officialCell}>省/市</div>
              <div className={styles.authorization__officialCell}>状态</div>
              <div className={styles.authorization__officialCell}>操作</div>
            </div>
          </div>
        </section>
      </div>

      {/* 省公司 / 市公司 授权限制规则 */}
      <section className={styles.authorization__card}>
        <h3 className={styles.authorization__cardTitle}>省公司 / 市公司 授权限制规则</h3>
        <div className={styles.authorization__rules}>
          <div className={styles.authorization__ruleItem}>每个省份仅可授权 1 个省公司账号</div>
          <div className={styles.authorization__ruleItem}>
            <div className={styles.authorization__ruleInline}>
              <span>每个城市仅可授权 1 个市公司账号</span>
              <span className={styles.authorization__ruleNote}>(例如：广东省深圳市)</span>
            </div>
          </div>
          <div className={styles.authorization__ruleItem}>
            <div className={styles.authorization__ruleInline}>
              <span>伞下团队认种总量排名前</span>
              <input
                className={styles.authorization__ruleInput}
                type="text"
                value={topRankLimit}
                onChange={(e) => setTopRankLimit(e.target.value)}
                aria-label="排名限制"
              />
              <span>的账号具备授权资格</span>
            </div>
          </div>
          <div className={styles.authorization__specialRules}>
            <div className={styles.authorization__specialTitle}>特殊城市授权规则 (如直辖市、特别行政区)</div>
            <div className={styles.authorization__specialTable}>
              {specialRules.map((rule, index) => (
                <div key={rule.city} className={styles.authorization__specialRow}>
                  <div className={styles.authorization__specialCity}>{rule.city}</div>
                  <div className={styles.authorization__specialToggle}>
                    {renderToggle(rule.enabled, (enabled) => {
                      const newRules = [...specialRules];
                      newRules[index] = { ...rule, enabled };
                      setSpecialRules(newRules);
                    })}
                    <span className={styles.authorization__specialLabel}>启用特例</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* 省公司 / 市公司 阶梯性考核目标 */}
      <section className={styles.authorization__card}>
        <div className={styles.authorization__targetHeader}>
          <h3 className={styles.authorization__targetTitle}>省公司 / 市公司 阶梯性考核目标</h3>
          <button className={styles.authorization__editBtn}>编辑</button>
        </div>
        <div className={styles.authorization__targetTable}>
          <div className={styles.authorization__targetHeader2}>
            <div className={cn(styles.authorization__targetCell, styles['authorization__targetCell--header'], styles['authorization__targetCell--month'])}>考核月</div>
            <div className={cn(styles.authorization__targetCell, styles['authorization__targetCell--header'], styles['authorization__targetCell--provinceMonthly'])}>省代当月目标（棵）</div>
            <div className={cn(styles.authorization__targetCell, styles['authorization__targetCell--header'], styles['authorization__targetCell--provinceTotal'])}>省代累计目标（棵）</div>
            <div className={cn(styles.authorization__targetCell, styles['authorization__targetCell--header'], styles['authorization__targetCell--cityMonthly'])}>市代当月目标（棵）</div>
            <div className={cn(styles.authorization__targetCell, styles['authorization__targetCell--header'], styles['authorization__targetCell--cityTotal'])}>市代累计目标（棵）</div>
          </div>
          <div className={styles.authorization__targetBody}>
            {targetData.map((row, index) => (
              <div key={row.month} className={cn(styles.authorization__targetRow, index < targetData.length - 1 && styles['authorization__targetRow--bordered'])}>
                <div className={cn(styles.authorization__targetCell, styles['authorization__targetCell--month'])}>{row.month}</div>
                <div className={cn(styles.authorization__targetCell, styles['authorization__targetCell--provinceMonthly'])}>{row.month === '...' ? '...' : row.provinceMonthly}</div>
                <div className={cn(styles.authorization__targetCell, styles['authorization__targetCell--provinceTotal'])}>{row.month === '...' ? '...' : row.provinceTotal}</div>
                <div className={cn(styles.authorization__targetCell, styles['authorization__targetCell--cityMonthly'])}>{row.month === '...' ? '...' : row.cityMonthly}</div>
                <div className={cn(styles.authorization__targetCell, styles['authorization__targetCell--cityTotal'])}>{row.month === '...' ? '...' : row.cityTotal}</div>
              </div>
            ))}
          </div>
        </div>
          <p className={styles.authorization__help}>帮助：完成全部 9 个月阶梯考核后，可升级为正式省/市公司。</p>
        </section>
      </div>
    </PageContainer>
  );
}