import { useEffect, useMemo, useState } from 'react';
import Taro from '@tarojs/taro';
import { Button, Input, Text, View } from '@tarojs/components';
import {
  loadPlatformPermissions,
  loadPlatformStaff,
  updatePlatformStaffStatus,
  upsertPlatformStaff,
  type PlatformPermissionCatalogItem,
  type PlatformPermissionSummary,
  type PlatformStaffItem,
} from '@/services/platformAdmin';
import '../platform.css';

type StaffForm = {
  id: string;
  authUserId: string;
  username: string;
  name: string;
  email: string;
  phone: string;
  avatarUrl: string;
  status: string;
  platformPermissions: Record<string, true>;
};

const emptyForm: StaffForm = {
  id: '',
  authUserId: '',
  username: '',
  name: '',
  email: '',
  phone: '',
  avatarUrl: '',
  status: 'active',
  platformPermissions: {},
};

function dateText(value?: string | null) {
  return value ? String(value).slice(0, 19).replace('T', ' ') : '-';
}

function permissionKeys(value?: Record<string, unknown> | null) {
  return Object.entries(value || {})
    .filter(([, enabled]) => enabled === true)
    .map(([key]) => key)
    .sort();
}

function permissionLabel(item: PlatformPermissionCatalogItem) {
  return item.label || item.key;
}

function groupLabel(group?: string | null) {
  const labels: Record<string, string> = {
    overview: '概览',
    staff: '员工',
    tenant: '租户',
    billing: '账务',
    usage: '用量',
    audit: '审计',
    question_bank: '公共题库',
  };
  return labels[group || ''] || group || '其他';
}

function fromStaff(item: PlatformStaffItem): StaffForm {
  const platformPermissions: Record<string, true> = {};
  for (const key of permissionKeys(item.platformPermissions)) {
    platformPermissions[key] = true;
  }
  return {
    id: item.id || '',
    authUserId: item.authUserId || '',
    username: item.username || '',
    name: item.name || '',
    email: item.email || '',
    phone: item.phone || '',
    avatarUrl: item.avatarUrl || '',
    status: item.status || 'active',
    platformPermissions,
  };
}

export default function PlatformStaffPage() {
  const [keyword, setKeyword] = useState('');
  const [status, setStatus] = useState('');
  const [staff, setStaff] = useState<PlatformStaffItem[]>([]);
  const [permissionSummary, setPermissionSummary] = useState<PlatformPermissionSummary | null>(null);
  const [form, setForm] = useState<StaffForm>(emptyForm);
  const [busy, setBusy] = useState('');
  const [error, setError] = useState('');

  const catalog = permissionSummary?.catalog || [];
  const effective = permissionSummary?.effective || {};
  const canWrite = effective['platform:staff:write'] === true || effective['*'] === true;
  const canChangeStatus = effective['platform:staff:status'] === true || effective['*'] === true;

  const groupedCatalog = useMemo(() => {
    const groups: Array<{ group: string; items: PlatformPermissionCatalogItem[] }> = [];
    const byGroup = new Map<string, PlatformPermissionCatalogItem[]>();
    for (const item of catalog) {
      const group = item.group || 'other';
      byGroup.set(group, [...(byGroup.get(group) || []), item]);
    }
    for (const [group, items] of byGroup.entries()) {
      groups.push({ group, items });
    }
    return groups;
  }, [catalog]);

  function reload(nextStatus = status, nextKeyword = keyword) {
    setError('');
    loadPlatformStaff({ q: nextKeyword || undefined, status: nextStatus || undefined, limit: 120 })
      .then(payload => setStaff(payload.items || []))
      .catch(nextError => setError(nextError instanceof Error ? nextError.message : '平台员工加载失败'));
  }

  useEffect(() => {
    Promise.all([
      loadPlatformPermissions().catch(() => ({ item: null })),
      loadPlatformStaff({ limit: 120 }).catch(() => ({ items: [] })),
    ]).then(([permissionPayload, staffPayload]) => {
      setPermissionSummary(permissionPayload.item || null);
      setStaff(staffPayload.items || []);
    }).catch(nextError => setError(nextError instanceof Error ? nextError.message : '平台员工页面加载失败'));
  }, []);

  function chooseStatus(nextStatus: string) {
    setStatus(nextStatus);
    reload(nextStatus, keyword);
  }

  function updateForm(key: keyof StaffForm, value: string) {
    setForm(current => ({ ...current, [key]: value }));
  }

  function togglePermission(key: string) {
    setForm(current => {
      const nextPermissions = { ...current.platformPermissions };
      if (nextPermissions[key]) {
        delete nextPermissions[key];
      } else {
        nextPermissions[key] = true;
      }
      return { ...current, platformPermissions: nextPermissions };
    });
  }

  function toggleSuperPermission() {
    togglePermission('*');
  }

  function editStaff(item: PlatformStaffItem) {
    setForm(fromStaff(item));
  }

  function resetForm() {
    setForm(emptyForm);
  }

  async function confirm(title: string, content: string) {
    const result = await Taro.showModal({ title, content, confirmText: '确认', cancelText: '取消' });
    return result.confirm;
  }

  async function submitStaff() {
    setError('');
    if (!canWrite) {
      setError('当前账号没有 platform:staff:write 权限。');
      return;
    }
    if (!form.name.trim()) {
      setError('平台员工必须填写姓名。');
      return;
    }
    if (!form.authUserId.trim()) {
      setError('平台员工必须绑定 Supabase Auth 用户 ID，生产环境不允许悬空账号。');
      return;
    }
    const keys = permissionKeys(form.platformPermissions);
    if (!keys.length) {
      setError('平台员工至少需要配置一个平台权限。');
      return;
    }
    const ok = await confirm(
      form.id ? '更新平台员工' : '创建平台员工',
      form.platformPermissions['*']
        ? '该员工将拥有平台超级权限，请确认这是必要授权。'
        : `确认保存员工 ${form.name.trim()} 的 ${keys.length} 个权限点？`,
    );
    if (!ok) return;
    setBusy('save');
    try {
      const payload = await upsertPlatformStaff({
        id: form.id || undefined,
        authUserId: form.authUserId.trim(),
        username: form.username.trim() || undefined,
        name: form.name.trim(),
        email: form.email.trim() || undefined,
        phone: form.phone.trim() || undefined,
        avatarUrl: form.avatarUrl.trim() || undefined,
        status: form.status || 'active',
        platformPermissions: form.platformPermissions,
      });
      Taro.showToast({ title: '已保存', icon: 'success' });
      if (payload.item) setForm(fromStaff(payload.item));
      reload(status, keyword);
    } catch (nextError) {
      setError(nextError instanceof Error ? nextError.message : '平台员工保存失败');
    } finally {
      setBusy('');
    }
  }

  async function submitStatus(item: PlatformStaffItem, nextStatus: 'active' | 'disabled') {
    setError('');
    if (!canChangeStatus) {
      setError('当前账号没有 platform:staff:status 权限。');
      return;
    }
    const ok = await confirm(
      nextStatus === 'disabled' ? '禁用平台员工' : '恢复平台员工',
      nextStatus === 'disabled'
        ? `确认禁用 ${item.name || item.username || item.id}？后端会默认撤销迁移期 session，Supabase JWT 也会因 status=disabled 被拒绝。`
        : `确认恢复 ${item.name || item.username || item.id} 的平台后台访问？`,
    );
    if (!ok) return;
    setBusy(`status-${item.id}-${nextStatus}`);
    try {
      await updatePlatformStaffStatus({
        staffId: item.id,
        status: nextStatus,
        reason: nextStatus === 'disabled' ? 'platform admin disabled from staff page' : 'platform admin restored from staff page',
        revokeSessions: nextStatus === 'disabled',
      });
      Taro.showToast({ title: nextStatus === 'disabled' ? '已禁用' : '已恢复', icon: 'success' });
      reload(status, keyword);
    } catch (nextError) {
      setError(nextError instanceof Error ? nextError.message : '员工状态更新失败');
    } finally {
      setBusy('');
    }
  }

  const activeCount = staff.filter(item => item.status === 'active').length;
  const disabledCount = staff.filter(item => item.status === 'disabled').length;
  const selectedPermissions = permissionKeys(form.platformPermissions);

  return (
    <View className='platform-page'>
      <View className='platform-shell'>
        <View className='platform-header'>
          <Text className='platform-kicker'>Staff</Text>
          <Text className='platform-title'>平台员工</Text>
          <Text className='platform-subtitle'>绑定 Supabase Auth 账号，按平台权限点授予租户、账务、审计和公共题库后台能力。</Text>
        </View>

        <View className='platform-actions'>
          <Input className='platform-input' placeholder='姓名、用户名、手机号、邮箱' value={keyword} onInput={event => setKeyword(String(event.detail.value || ''))} />
          <Button className='platform-button primary' onClick={() => reload(status, keyword)}>搜索</Button>
          <Button className='platform-button' onClick={resetForm}>新建</Button>
        </View>

        <View className='platform-tabs'>
          {[
            { label: '全部', value: '' },
            { label: 'active', value: 'active' },
            { label: 'disabled', value: 'disabled' },
          ].map(item => (
            <Button key={item.label} className={`platform-button ${status === item.value ? 'active' : ''}`} onClick={() => chooseStatus(item.value)}>{item.label}</Button>
          ))}
        </View>

        <View className='platform-grid'>
          <View className='platform-metric'><Text className='platform-metric-label'>员工总数</Text><Text className='platform-metric-value'>{String(staff.length)}</Text></View>
          <View className='platform-metric'><Text className='platform-metric-label'>可登录</Text><Text className='platform-metric-value'>{String(activeCount)}</Text></View>
          <View className='platform-metric'><Text className='platform-metric-label'>已禁用</Text><Text className='platform-metric-value'>{String(disabledCount)}</Text></View>
          <View className='platform-metric'><Text className='platform-metric-label'>当前权限点</Text><Text className='platform-metric-value'>{String(selectedPermissions.length)}</Text></View>
        </View>

        <View className='platform-section'>
          <Text className='platform-section-title'>{form.id ? '编辑平台员工' : '创建平台员工'}</Text>
          <View className='platform-form'>
            <View className='platform-field wide'><Text className='platform-field-label'>员工 ID</Text><Input className='platform-input' placeholder='编辑已有员工时自动填充' value={form.id} onInput={event => updateForm('id', String(event.detail.value || ''))} /></View>
            <View className='platform-field wide'><Text className='platform-field-label'>Supabase Auth 用户 ID</Text><Input className='platform-input' placeholder='auth.users.id' value={form.authUserId} onInput={event => updateForm('authUserId', String(event.detail.value || ''))} /></View>
            <View className='platform-field'><Text className='platform-field-label'>用户名</Text><Input className='platform-input' placeholder='platform_operator' value={form.username} onInput={event => updateForm('username', String(event.detail.value || ''))} /></View>
            <View className='platform-field'><Text className='platform-field-label'>姓名</Text><Input className='platform-input' placeholder='员工姓名' value={form.name} onInput={event => updateForm('name', String(event.detail.value || ''))} /></View>
            <View className='platform-field'><Text className='platform-field-label'>邮箱</Text><Input className='platform-input' placeholder='name@example.com' value={form.email} onInput={event => updateForm('email', String(event.detail.value || ''))} /></View>
            <View className='platform-field'><Text className='platform-field-label'>手机号</Text><Input className='platform-input' placeholder='13800138000' value={form.phone} onInput={event => updateForm('phone', String(event.detail.value || ''))} /></View>
            <View className='platform-field'><Text className='platform-field-label'>状态</Text><Input className='platform-input' placeholder='active / disabled' value={form.status} onInput={event => updateForm('status', String(event.detail.value || ''))} /></View>
            <View className='platform-field'><Text className='platform-field-label'>头像 URL</Text><Input className='platform-input' placeholder='可选' value={form.avatarUrl} onInput={event => updateForm('avatarUrl', String(event.detail.value || ''))} /></View>
          </View>

          <View className='platform-permission-panel'>
            <View className='platform-permission-header'>
              <Text className='platform-row-main'>权限点</Text>
              <Button className={`platform-mini-button ${form.platformPermissions['*'] ? 'active' : ''}`} onClick={toggleSuperPermission}>超级权限 *</Button>
            </View>
            {groupedCatalog.map(group => (
              <View className='platform-permission-group' key={group.group}>
                <Text className='platform-field-label'>{groupLabel(group.group)}</Text>
                <View className='platform-chip-list'>
                  {group.items.map(item => (
                    <Button
                      key={item.key}
                      className={`platform-chip ${form.platformPermissions[item.key] ? 'active' : ''}`}
                      onClick={() => togglePermission(item.key)}
                    >
                      {permissionLabel(item)}
                    </Button>
                  ))}
                </View>
              </View>
            ))}
            {!catalog.length ? <View className='platform-empty'>当前账号无法读取权限目录，或平台鉴权未通过。</View> : null}
          </View>

          <View className='platform-actions'>
            <Button className='platform-button primary' loading={busy === 'save'} disabled={!canWrite} onClick={submitStaff}>保存员工</Button>
            <Button className='platform-button' onClick={resetForm}>清空表单</Button>
          </View>
        </View>

        <View className='platform-section'>
          <Text className='platform-section-title'>员工列表</Text>
          <View className='platform-list'>
            {staff.map(item => {
              const keys = permissionKeys(item.platformPermissions);
              return (
                <View className='platform-row' key={item.id}>
                  <Text className='platform-row-main'>{item.name || item.username || item.id}</Text>
                  <Text className='platform-row-meta'>{item.username || '-'} · {item.status || '-'} · {item.email || '-'} · {item.phone || '-'}</Text>
                  <Text className='platform-row-meta'>Auth {item.authUserId || '未绑定'} · 最近登录 {dateText(item.lastSeenAt)} · 创建 {dateText(item.createdAt)}</Text>
                  <View className='platform-chip-list compact'>
                    {keys.slice(0, 10).map(key => <Text className='platform-chip readonly' key={key}>{key}</Text>)}
                    {keys.length > 10 ? <Text className='platform-chip readonly'>+{keys.length - 10}</Text> : null}
                    {!keys.length ? <Text className='platform-chip readonly'>无权限</Text> : null}
                  </View>
                  <View className='platform-row-actions'>
                    <Button className='platform-mini-button' onClick={() => editStaff(item)}>编辑</Button>
                    {item.status === 'disabled' ? (
                      <Button className='platform-mini-button' disabled={!canChangeStatus} loading={busy === `status-${item.id}-active`} onClick={() => submitStatus(item, 'active')}>恢复</Button>
                    ) : (
                      <Button className='platform-mini-button danger' disabled={!canChangeStatus} loading={busy === `status-${item.id}-disabled`} onClick={() => submitStatus(item, 'disabled')}>禁用</Button>
                    )}
                  </View>
                </View>
              );
            })}
          </View>
          {!staff.length ? <View className='platform-empty'>暂无平台员工，或当前账号没有查看权限。</View> : null}
        </View>

        {error ? <Text className='platform-error'>{error}</Text> : null}
      </View>
    </View>
  );
}
