import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { IconChevronRight, IconDelete, IconPlus, IconRefresh, IconSearch } from '@douyinfe/semi-icons';
import { Avatar, Button, Card, Checkbox, Collapse, Empty, Input, List, Modal, Popconfirm, Select, SideSheet, Spin, Switch, Tabs, Tag, Typography } from '@douyinfe/semi-ui';
import { FormEvent, useDeferredValue, useEffect, useMemo, useState } from 'react';
import { api } from '../../api/client';
import type { AdminUser, CustomerUserInput, CustomerVehicleGrantInput } from '../../api/types';
import { useMobileLayout } from '../hooks/useMobileLayout';
import { useSideSheetA11y } from '../hooks/useSideSheetA11y';
import { TablePagination } from '../shared/TablePagination';
import { VehicleCandidateList } from '../shared/VehicleCandidateList';
import { WorkspaceFilterPanel } from '../shared/WorkspaceFilterPanel';
import { WorkspaceCommandBar } from '../shared/WorkspaceCommandBar';
import { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader';
import { mergeVehicleCandidates } from '../shared/vehicleCandidates';
import { PanelEmpty, PanelLoading } from '../shared/AsyncState';

const customerMenus = [
  { key: 'monitor', label: '全局监控', description: '查看授权车辆的实时位置与状态' },
  { key: 'vehicles', label: '车辆查询', description: '查看车辆档案与最新遥测' },
  { key: 'tracks', label: '轨迹回放', description: '查询授权车辆的历史轨迹' },
  { key: 'statistics', label: '里程查询', description: '查询授权车辆的每日与区间里程' }
];

type Draft = {
  username: string;
  displayName: string;
  password: string;
  status: 'enabled' | 'disabled';
  customerRef: string;
  tenantRef: string;
  menuKeys: string[];
  vehicleGrants: CustomerVehicleGrantInput[];
};

type EditorSection = 'identity' | 'menus' | 'vehicles';
type CustomerScopeFilter = 'all' | Draft['status'] | 'attention';
type CustomerAccessState = {
  key: 'ready' | 'missing-menus' | 'missing-vehicles' | 'disabled';
  label: string;
  shortLabel: string;
  color: 'green' | 'amber' | 'grey';
  attention: boolean;
};

const shanghaiDateTimeFormatter = new Intl.DateTimeFormat('sv-SE', {
  timeZone: 'Asia/Shanghai', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false
});

function dateTimeInput(value?: string) {
  if (!value) return '';
  const parsed = new Date(value);
  if (Number.isNaN(parsed.getTime())) return '';
  return shanghaiDateTimeFormatter.format(parsed).replace(' ', 'T');
}

const emptyDraft: Draft = { username: '', displayName: '', password: '', status: 'enabled', customerRef: '', tenantRef: '', menuKeys: ['monitor', 'vehicles', 'tracks', 'statistics'], vehicleGrants: [] };

function draftFromUser(user?: AdminUser): Draft {
  if (!user) return { ...emptyDraft, menuKeys: [...emptyDraft.menuKeys], vehicleGrants: [] };
  return {
    username: user.username, displayName: user.displayName, password: '', status: user.status,
    customerRef: user.customerRef, tenantRef: user.tenantRef, menuKeys: [...user.menuKeys],
    vehicleGrants: user.vehicles.map((vehicle) => ({ vin: vehicle.vin, validFrom: dateTimeInput(vehicle.validFrom), validTo: dateTimeInput(vehicle.validTo) }))
  };
}

function draftSignature(draft: Draft) {
  return JSON.stringify({
    ...draft,
    menuKeys: [...draft.menuKeys].sort(),
    vehicleGrants: [...draft.vehicleGrants].sort((left, right) => left.vin.localeCompare(right.vin))
  });
}

function formatTime(value?: string) {
  if (!value) return '尚未登录';
  return new Date(value).toLocaleString('zh-CN', { hour12: false });
}

function formatGrantTime(value?: string) {
  if (!value) return '未设置';
  return value.replace('T', ' ').slice(0, 16);
}

function customerAccessState(status: Draft['status'], menuCount: number, vehicleCount: number): CustomerAccessState {
  if (status === 'disabled') return { key: 'disabled', label: '账号已停用', shortLabel: '停用', color: 'grey', attention: false };
  if (menuCount === 0) return { key: 'missing-menus', label: '待开放菜单', shortLabel: '待菜单', color: 'amber', attention: true };
  if (vehicleCount === 0) return { key: 'missing-vehicles', label: '待分配车辆', shortLabel: '待车辆', color: 'amber', attention: true };
  return { key: 'ready', label: '权限就绪', shortLabel: '就绪', color: 'green', attention: false };
}

function customerScopeLabel(scope: CustomerScopeFilter) {
  if (scope === 'enabled') return '启用账号';
  if (scope === 'disabled') return '停用账号';
  if (scope === 'attention') return '待完善权限';
  return '全部状态';
}

export default function UsersPage() {
  const queryClient = useQueryClient();
  const mobileLayout = useMobileLayout();
  const users = useQuery({ queryKey: ['admin-users'], queryFn: ({ signal }) => api.adminUsers(signal), staleTime: 10_000 });
  const customers = useMemo(() => (users.data ?? []).filter((user) => user.userType === 'customer'), [users.data]);
  const [customerKeyword, setCustomerKeyword] = useState('');
  const deferredCustomerKeyword = useDeferredValue(customerKeyword.trim());
  const [customerStatus, setCustomerStatus] = useState<CustomerScopeFilter>('all');
  const [filtersCollapsed, setFiltersCollapsed] = useState(true);
  const visibleCustomers = useMemo(() => {
    const keyword = deferredCustomerKeyword.toLocaleLowerCase('zh-CN');
    return customers.filter((user) => {
      const accessState = customerAccessState(user.status, user.menuKeys.length, user.vehicles.length);
      if (customerStatus === 'attention' && !accessState.attention) return false;
      if (customerStatus !== 'all' && customerStatus !== 'attention' && user.status !== customerStatus) return false;
      if (!keyword) return true;
      return [user.displayName, user.username, user.customerRef, user.tenantRef]
        .some((value) => value?.toLocaleLowerCase('zh-CN').includes(keyword));
    });
  }, [customerStatus, customers, deferredCustomerKeyword]);
  const [selectedID, setSelectedID] = useState<number | null>(null);
  const [creating, setCreating] = useState(false);
  const [activeSection, setActiveSection] = useState<EditorSection>('identity');
  const selected = useMemo(() => customers.find((user) => user.id === selectedID), [customers, selectedID]);
  const [draft, setDraft] = useState<Draft>(() => draftFromUser());
  const [baselineDraft, setBaselineDraft] = useState<Draft>(() => draftFromUser());
  const [vehicleKeyword, setVehicleKeyword] = useState('');
  const deferredVehicleKeyword = useDeferredValue(vehicleKeyword.trim());
  const [assignedKeyword, setAssignedKeyword] = useState('');
  const [assignedPage, setAssignedPage] = useState(1);
  const [bulkVINs, setBulkVINs] = useState('');
  const [vehicleComposerOpen, setVehicleComposerOpen] = useState(false);
  const [vehicleLabels, setVehicleLabels] = useState<Record<string, string>>({});
  const [feedback, setFeedback] = useState('');
  const [editingGrantVIN, setEditingGrantVIN] = useState('');
  const attentionCustomerCount = useMemo(() => customers.filter((user) => customerAccessState(user.status, user.menuKeys.length, user.vehicles.length).attention).length, [customers]);
  const readyCustomers = useMemo(() => visibleCustomers.filter((user) => customerAccessState(user.status, user.menuKeys.length, user.vehicles.length).key === 'ready').length, [visibleCustomers]);
  const attentionCustomers = useMemo(() => visibleCustomers.filter((user) => customerAccessState(user.status, user.menuKeys.length, user.vehicles.length).attention).length, [visibleCustomers]);
  const grantedVehicles = useMemo(() => visibleCustomers.reduce((total, user) => total + user.vehicles.length, 0), [visibleCustomers]);
  const editingGrant = useMemo(() => draft.vehicleGrants.find((grant) => grant.vin === editingGrantVIN), [draft.vehicleGrants, editingGrantVIN]);
  const editingGrantPlate = editingGrant ? vehicleLabels[editingGrant.vin] : '';
  const grantWindowInvalid = Boolean(editingGrant && (!editingGrant.validFrom || (editingGrant.validTo && editingGrant.validTo <= editingGrant.validFrom)));
  const editorVisible = creating || Boolean(selected);
  const vehicleComposerVisible = !mobileLayout || creating || draft.vehicleGrants.length === 0 || vehicleComposerOpen;
  const hasUnsavedChanges = useMemo(() => draftSignature(draft) !== draftSignature(baselineDraft), [baselineDraft, draft]);
  const draftAccessState = customerAccessState(draft.status, draft.menuKeys.length, draft.vehicleGrants.length);
  useSideSheetA11y(editorVisible, '.v2-user-editor-sidesheet', 'v2-user-editor-sheet', '客户账号详情', '关闭账号详情');
  useSideSheetA11y(Boolean(editingGrant), '.v2-user-grant-sidesheet', 'v2-user-grant-window', '车辆授权有效期', '关闭车辆授权有效期');

  useEffect(() => {
    if (!creating && selected) {
      const nextDraft = draftFromUser(selected);
      setDraft(nextDraft);
      setBaselineDraft(nextDraft);
      setVehicleLabels(Object.fromEntries(selected.vehicles.map((vehicle) => [vehicle.vin, vehicle.plate])));
    }
  }, [creating, selected?.id, selected?.updatedAt]);

  const candidates = useQuery({
    queryKey: ['permission-vehicle-candidates', deferredVehicleKeyword],
    queryFn: ({ signal }) => api.vehicleCoverage(new URLSearchParams({ keyword: deferredVehicleKeyword, limit: '20', offset: '0' }), signal),
    enabled: deferredVehicleKeyword.length >= 1,
    staleTime: 30_000
  });
  const assigned = useMemo(() => new Set(draft.vehicleGrants.map((grant) => grant.vin)), [draft.vehicleGrants]);
  const candidateVehicles = useMemo(() => mergeVehicleCandidates(candidates.data?.items ?? []), [candidates.data?.items]);
  const assignedPageSize = mobileLayout ? 4 : 10;
  const filteredAssignedGrants = useMemo(() => {
    const keyword = assignedKeyword.trim().toLocaleLowerCase('zh-CN');
    if (!keyword) return draft.vehicleGrants;
    return draft.vehicleGrants.filter((grant) => [grant.vin, vehicleLabels[grant.vin]]
      .some((value) => value?.toLocaleLowerCase('zh-CN').includes(keyword)));
  }, [assignedKeyword, draft.vehicleGrants, vehicleLabels]);
  const assignedTotalPages = Math.max(1, Math.ceil(filteredAssignedGrants.length / assignedPageSize));
  const safeAssignedPage = Math.min(assignedPage, assignedTotalPages);
  const visibleAssignedGrants = useMemo(() => {
    const offset = (safeAssignedPage - 1) * assignedPageSize;
    return filteredAssignedGrants.slice(offset, offset + assignedPageSize);
  }, [assignedPageSize, filteredAssignedGrants, safeAssignedPage]);
  useEffect(() => {
    if (candidateVehicles.length === 0) return;
    setVehicleLabels((current) => {
      const next = { ...current };
      for (const vehicle of candidateVehicles) next[vehicle.vin] = vehicle.plate;
      return next;
    });
  }, [candidateVehicles]);

  const save = useMutation({
    mutationFn: async () => {
      const input: CustomerUserInput = {
        displayName: draft.displayName.trim(), password: draft.password || undefined, status: draft.status,
        customerRef: draft.customerRef.trim(), tenantRef: draft.tenantRef.trim(), menuKeys: draft.menuKeys,
        vehicleVins: draft.vehicleGrants.map((grant) => grant.vin), vehicleGrants: draft.vehicleGrants
      };
      if (creating) return api.createCustomerUser({ ...input, username: draft.username.trim(), password: draft.password });
      if (!selected) throw new Error('请先选择客户账号');
      return api.updateCustomerUser(selected.id, input);
    },
    onSuccess: async (result) => {
      setFeedback(creating ? '客户账号已创建' : '账号与权限已更新');
      setCreating(false);
      setSelectedID(result.id);
      setDraft((value) => {
        const savedDraft = { ...value, password: '' };
        setBaselineDraft(savedDraft);
        return savedDraft;
      });
      await queryClient.invalidateQueries({ queryKey: ['admin-users'] });
    },
    onError: (error) => setFeedback(error instanceof Error ? error.message : '保存失败')
  });

  const startCreate = () => {
    const nextDraft = draftFromUser();
    setCreating(true);
    setSelectedID(null);
    setActiveSection('identity');
    setDraft(nextDraft);
    setBaselineDraft(nextDraft);
    setVehicleKeyword('');
    setAssignedKeyword('');
    setAssignedPage(1);
    setBulkVINs('');
    setVehicleComposerOpen(true);
    setVehicleLabels({});
    setFeedback('');
    setEditingGrantVIN('');
  };
  const closeEditor = () => {
    const nextDraft = draftFromUser();
    setCreating(false);
    setSelectedID(null);
    setDraft(nextDraft);
    setBaselineDraft(nextDraft);
    setVehicleKeyword('');
    setAssignedKeyword('');
    setAssignedPage(1);
    setBulkVINs('');
    setVehicleComposerOpen(false);
    setVehicleLabels({});
    setFeedback('');
    setEditingGrantVIN('');
  };
  const requestCloseEditor = () => {
    if (!hasUnsavedChanges) {
      closeEditor();
      return;
    }
    Modal.confirm({
      title: '放弃未保存的更改？',
      content: '登录身份、菜单或车辆权限的修改尚未保存，关闭后将恢复到上次保存状态。',
      okText: '放弃更改',
      cancelText: '继续编辑',
      okType: 'danger',
      onOk: closeEditor
    });
  };
  const selectCustomer = (user: AdminUser) => {
    const nextDraft = draftFromUser(user);
    setCreating(false);
    setSelectedID(user.id);
    setActiveSection('vehicles');
    setDraft(nextDraft);
    setBaselineDraft(nextDraft);
    setVehicleKeyword('');
    setAssignedKeyword('');
    setAssignedPage(1);
    setBulkVINs('');
    setVehicleComposerOpen(user.vehicles.length === 0);
    setFeedback('');
    setEditingGrantVIN('');
  };
  const toggleVIN = (vin: string) => {
    const isAssigned = assigned.has(vin);
    if (!isAssigned) {
      setAssignedKeyword('');
      setAssignedPage(1);
    }
    setDraft((value) => ({
      ...value,
      vehicleGrants: value.vehicleGrants.some((grant) => grant.vin === vin)
        ? value.vehicleGrants.filter((grant) => grant.vin !== vin)
        : [...value.vehicleGrants, { vin, validFrom: dateTimeInput(new Date().toISOString()), validTo: '' }].sort((left, right) => left.vin.localeCompare(right.vin))
    }));
    setFeedback(isAssigned
      ? `${vehicleLabels[vin] || vin} 已从授权草稿移除，保存后生效`
      : `${vehicleLabels[vin] || vin} 已加入授权草稿，保存后生效`);
    if (editingGrantVIN === vin) setEditingGrantVIN('');
  };
  const clearVehicleGrants = () => {
    const removedCount = draft.vehicleGrants.length;
    setDraft((value) => ({ ...value, vehicleGrants: [] }));
    setAssignedKeyword('');
    setAssignedPage(1);
    setVehicleComposerOpen(true);
    setEditingGrantVIN('');
    setFeedback(`已从草稿移除 ${removedCount} 辆车，保存后生效`);
  };
  const updateGrant = (vin: string, patch: Partial<CustomerVehicleGrantInput>) => setDraft((value) => ({
    ...value, vehicleGrants: value.vehicleGrants.map((grant) => grant.vin === vin ? { ...grant, ...patch } : grant)
  }));
  const addBulkVINs = () => {
    const next = bulkVINs.split(/[\s,，;；]+/).map((value) => value.trim().toUpperCase()).filter(Boolean);
    setDraft((value) => {
      const existing = new Set(value.vehicleGrants.map((grant) => grant.vin));
      const added = next.filter((vin) => !existing.has(vin)).map((vin) => ({ vin, validFrom: dateTimeInput(new Date().toISOString()), validTo: '' }));
      return { ...value, vehicleGrants: [...value.vehicleGrants, ...added].sort((left, right) => left.vin.localeCompare(right.vin)) };
    });
    setAssignedKeyword('');
    setAssignedPage(1);
    setBulkVINs('');
  };
  const persistDraft = () => {
    if (save.isPending) return;
    setFeedback('');
    if (!draft.displayName.trim() || (creating && (!draft.username.trim() || !draft.password))) {
      setActiveSection('identity');
      setFeedback('请先完善登录身份中的必填信息');
      return;
    }
    const invalidGrant = draft.vehicleGrants.find((grant) => !grant.validFrom || (grant.validTo && grant.validTo <= grant.validFrom));
    if (invalidGrant) {
      setActiveSection('vehicles');
      setEditingGrantVIN(invalidGrant.vin);
      setFeedback('请检查车辆授权有效期：停用时间必须晚于启用时间');
      return;
    }
    save.mutate();
  };
  const submit = (event: FormEvent) => {
    event.preventDefault();
    persistDraft();
  };

  return <div className="v2-user-admin">
    <div className="v2-user-discovery-shell">
      <WorkspaceCommandBar
        className="v2-user-command-bar"
        ariaLabel="账号管理操作"
        title="客户访问治理"
        description="菜单与车辆按最小权限开放，变更最多 30 秒生效"
        status={`${customers.length} 个客户账号${attentionCustomerCount ? ` · ${attentionCustomerCount} 待完善` : ' · 权限就绪'}`}
        meta={<Typography.Text type="tertiary">本地账号 · 可扩展外部身份源</Typography.Text>}
        actions={<Button className="v2-workspace-mobile-tool-button is-primary" theme="solid" icon={<IconPlus />} aria-label="新建客户账号" onClick={startCreate}>新建客户账号</Button>}
      />
      <WorkspaceFilterPanel
        className="v2-user-filter-panel"
        title="账号范围"
        description="按客户名称、登录账号与权限可用状态查找"
        mobileSummary={`${customerScopeLabel(customerStatus)}${customerKeyword.trim() ? ` · ${customerKeyword.trim()}` : ''}`}
        expanded={!filtersCollapsed}
        status={users.isPending ? '正在读取账号' : `${visibleCustomers.length} / ${customers.length} 个账号`}
        statusColor={customerKeyword.trim() || customerStatus !== 'all' ? 'blue' : 'grey'}
        collapsedLabel="修改"
        onToggle={() => setFiltersCollapsed((value) => !value)}
      >
        <div className={`v2-user-filter-form${filtersCollapsed ? ' is-mobile-collapsed' : ''}`}>
          <label className="v2-user-filter-keyword">
            <span>客户账号</span>
            <Input className="v2-user-list-search" aria-label="搜索客户账号" prefix={<IconSearch />} showClear value={customerKeyword} onChange={setCustomerKeyword} placeholder="搜索名称、账号或客户标识" />
          </label>
          <label>
            <span id="v2-user-status-filter-label">访问状态</span>
            <Select
              aria-labelledby="v2-user-status-filter-label"
              value={customerStatus}
              onChange={(value) => setCustomerStatus(String(value) as typeof customerStatus)}
              optionList={[
                { value: 'all', label: '全部状态' },
                { value: 'enabled', label: '启用账号' },
                { value: 'disabled', label: '停用账号' },
                { value: 'attention', label: '待完善权限' }
              ]}
            />
          </label>
          <Button
            className="v2-user-filter-reset"
            theme="light"
            type="tertiary"
            icon={<IconRefresh />}
            aria-label="清空账号筛选"
            disabled={!customerKeyword.trim() && customerStatus === 'all'}
            onClick={() => {
              setCustomerKeyword('');
              setCustomerStatus('all');
            }}
          >
            清空
          </Button>
        </div>
      </WorkspaceFilterPanel>
    </div>
    <div className={`v2-user-admin-grid${creating || selected ? ' is-editor-open' : ''}`}>
      <Card className="v2-user-list" bodyStyle={{ padding: 0 }}>
        <WorkspacePanelHeader
          className="v2-user-directory-header"
          title="客户权限目录"
          description="当前范围内的账号、菜单与车辆授权摘要"
          meta={<span className="v2-user-directory-summary">
            <Tag color={visibleCustomers.length === customers.length ? 'grey' : 'blue'} type="light" size="small">{visibleCustomers.length} / {customers.length} 个账号</Tag>
            <Typography.Text className="is-ready" type="tertiary">权限就绪 {readyCustomers}</Typography.Text>
            {attentionCustomers ? <Tag className="is-attention" color="amber" type="light" size="small">待完善 {attentionCustomers}</Tag> : null}
            <Typography.Text type="tertiary">车辆授权 {grantedVehicles}</Typography.Text>
          </span>}
        />
        <div className="v2-user-directory-body">
          {users.isPending ? <PanelLoading className="v2-user-list-loading" title="正在加载客户账号" description="账号目录和授权摘要就绪后会自动显示。" /> : customers.length === 0 ? <PanelEmpty className="v2-user-list-empty" title="还没有客户账号" description="创建客户账号后，可在这里配置菜单和车辆范围。" action={<Button theme="solid" onClick={startCreate}>创建第一个客户账号</Button>} /> : <>
            {visibleCustomers.length ? <div className="v2-user-directory-columns" role="row" aria-label="客户账号目录列">
              <span>客户账号</span>
              <span>菜单权限</span>
              <span>车辆权限</span>
              <span>最近登录</span>
              <span>访问状态</span>
            </div> : null}
            <div className="v2-customer-list-scroll" role="region" aria-label="客户账号目录，可上下滚动" tabIndex={0}>
              <List
                className="v2-customer-list"
                dataSource={visibleCustomers}
                emptyContent={<Empty className="v2-user-filter-empty" title="没有匹配账号" description="请调整关键词或访问状态筛选。" />}
                renderItem={(user) => {
                  const accessState = customerAccessState(user.status, user.menuKeys.length, user.vehicles.length);
                  return <List.Item key={user.id} className={`v2-user-list-row is-access-${accessState.key}${accessState.attention ? ' has-attention' : ''}${selectedID === user.id && !creating ? ' is-active' : ''}`}>
                  <Button
                    className="v2-user-list-item"
                    theme="borderless"
                    type="tertiary"
                    aria-label={`选择客户 ${user.displayName}，账号 ${user.username}，${user.vehicles.length} 辆授权车，${accessState.label}`}
                    aria-pressed={selectedID === user.id && !creating}
                    aria-expanded={selectedID === user.id && !creating}
                    onClick={() => selectCustomer(user)}
                  >
                    <Avatar className="v2-user-avatar" color={user.status === 'enabled' ? 'light-blue' : 'grey'} shape="square" size="small">{user.displayName.slice(0, 1)}</Avatar>
                    <span className="v2-user-list-identity"><b>{user.displayName}</b><small>@{user.username}{user.customerRef ? ` · ${user.customerRef}` : ''}</small></span>
                    <span className="v2-user-list-facts is-menu"><small>菜单权限</small><b>{user.menuKeys.length}<i> / {customerMenus.length}</i></b></span>
                    <span className="v2-user-list-facts is-vehicle"><small>车辆权限</small><b>{user.vehicles.length} 辆</b></span>
                    <span className="v2-user-list-facts is-login"><small>最近登录</small><b>{formatTime(user.lastLoginAt)}</b></span>
                    <span className="v2-user-list-trailing"><Tag className={`v2-user-status-tag is-${accessState.key}`} color={accessState.color} type="light" size="small"><span className="v2-user-status-tag-desktop">{accessState.label}</span><span className="v2-user-status-tag-mobile">{accessState.shortLabel}</span></Tag><IconChevronRight /></span>
                  </Button>
                </List.Item>;
                }}
              />
            </div>
          </>}
        </div>
      </Card>
    </div>
    <SideSheet
      className="v2-user-editor-sidesheet"
      visible={editorVisible}
      width={mobileLayout ? '100%' : 'min(840px, 100vw)'}
      aria-label="客户账号详情"
      title={<div className="v2-user-editor-sheet-title">
        <span><strong>{creating ? '创建客户账号' : selected?.displayName}</strong>{creating ? <small>设置登录身份和最小必要权限</small> : <span className="v2-user-editor-context" aria-label="账号权限概览">
          <span className="is-account">@{selected?.username}</span>
          <span>菜单 <b>{draft.menuKeys.length}</b></span>
          <span>车辆 <b>{draft.vehicleGrants.length}</b></span>
          <span className="v2-user-editor-last-login">最近登录 <b>{formatTime(selected?.lastLoginAt)}</b></span>
          <Tag className="v2-user-editor-access-tag" color={draftAccessState.color} type="light" size="small">{draftAccessState.label}</Tag>
        </span>}</span>
        <label className="v2-user-status"><Switch aria-label={draft.status === 'enabled' ? '账号启用' : '账号停用'} checked={draft.status === 'enabled'} onChange={(checked) => setDraft((value) => ({ ...value, status: checked ? 'enabled' : 'disabled' }))} /><span>{draft.status === 'enabled' ? '账号启用' : '账号停用'}</span></label>
      </div>}
      onCancel={requestCloseEditor}
      footer={<div className="v2-user-editor-sheet-footer">
        <span className="v2-user-save-state" role="status">
          <Tag color={save.isError ? 'red' : hasUnsavedChanges ? 'amber' : 'green'} type="light" size="small">{save.isError ? '保存失败' : hasUnsavedChanges ? '待保存' : '已同步'}</Tag>
          <Typography.Text className={`v2-user-feedback${save.isError ? ' is-error' : ''}`} type={save.isError ? 'danger' : 'tertiary'}>{feedback || (hasUnsavedChanges ? '更改仅保存在当前草稿，保存后最多 30 秒生效' : '账号与权限已和服务器同步')}</Typography.Text>
        </span>
        <Button theme="solid" htmlType="submit" form="v2-user-editor-form" disabled={save.isPending || !hasUnsavedChanges}>{save.isPending ? '正在保存…' : creating ? '创建账号' : '保存权限'}</Button>
      </div>}
    >
      {editorVisible ? <form id="v2-user-editor-form" className="v2-user-editor-form" onSubmit={submit}>
          <Tabs className="v2-user-editor-tabs" activeKey={activeSection} onChange={(key) => setActiveSection(String(key) as EditorSection)}>
          <Tabs.TabPane tab="登录身份" itemKey="identity">
          <Card className="v2-user-editor-section v2-user-identity-section" title="登录身份" headerLine>
            <div className="v2-user-identity-overview" aria-label="登录身份摘要">
              <div>
                <span><small>登录账号</small><strong>{draft.username || '待设置'}</strong></span>
                <Tag color={creating ? 'blue' : 'grey'} type="light" size="small">{creating ? '新账号' : '不可修改'}</Tag>
              </div>
              <div>
                <span><small>客户显示名称</small><strong>{draft.displayName || '待设置'}</strong></span>
                <Tag color={draft.displayName ? 'green' : 'amber'} type="light" size="small">{draft.displayName ? '已设置' : '待完善'}</Tag>
              </div>
              <div>
                <span><small>身份来源</small><strong>{selected?.authProvider && selected.authProvider !== 'local' ? selected.authProvider : '本地账号'}</strong></span>
                <Tag color="blue" type="light" size="small">可扩展</Tag>
              </div>
            </div>
            <div className="v2-user-field-group" role="group" aria-labelledby="v2-user-primary-identity">
              <header>
                <span><strong id="v2-user-primary-identity">基础身份</strong><small>用于客户登录和平台内展示</small></span>
                <Tag color="blue" type="light" size="small">必填</Tag>
              </header>
              <div className="v2-user-fields is-primary">
                <label><span>用户名</span><Input required disabled={!creating} value={draft.username} onChange={(value) => setDraft((current) => ({ ...current, username: value }))} placeholder="例如 customer-huadong" /></label>
                <label><span>客户名称</span><Input required value={draft.displayName} onChange={(value) => setDraft((current) => ({ ...current, displayName: value }))} placeholder="显示在平台右上角" /></label>
              </div>
            </div>
            <div className="v2-user-field-group" role="group" aria-labelledby="v2-user-security-mapping">
              <header>
                <span><strong id="v2-user-security-mapping">安全与系统映射</strong><small>{creating ? '设置初始密码，并按需关联外部客户标识' : '密码留空则保持不变，客户标识用于后续系统对接'}</small></span>
                <Tag color="grey" type="light" size="small">{creating ? '密码必填' : '按需修改'}</Tag>
              </header>
              <div className="v2-user-fields is-secondary">
                <label><span>{creating ? '初始密码' : '重置密码（可选）'}</span><Input required={creating} mode="password" autoComplete="new-password" value={draft.password} onChange={(value) => setDraft((current) => ({ ...current, password: value }))} placeholder="至少 10 位，包含三类字符" /></label>
                <label><span>客户标识（可选）</span><Input value={draft.customerRef} onChange={(value) => setDraft((current) => ({ ...current, customerRef: value }))} placeholder="为 OneOS / RuoYi 映射预留" /></label>
              </div>
            </div>
          </Card>
          </Tabs.TabPane>
          <Tabs.TabPane tab={<span className="v2-user-tab-label">菜单权限<Tag color="blue" type="light" size="small">{draft.menuKeys.length}</Tag></span>} itemKey="menus">
          <Card className="v2-user-editor-section v2-user-menu-section" title={<span className="v2-user-section-title">菜单权限 <Tag color="blue" type="light" size="small">客户开放菜单</Tag></span>} headerLine>
            <div className="v2-user-menu-overview" aria-label={`已开放 ${draft.menuKeys.length} 个菜单，共 ${customerMenus.length} 个`}>
              <span><small>当前开放</small><strong>{draft.menuKeys.length}<i> / {customerMenus.length}</i></strong></span>
              <p><b>{draft.menuKeys.length === customerMenus.length ? '客户工作台已完整开放' : '客户工作台按最小权限开放'}</b><small>客户登录后只会看到下方已开放菜单，变更保存后最多 30 秒生效。</small></p>
              <Tag color={draft.menuKeys.length ? 'green' : 'amber'} type="light" size="small">{draft.menuKeys.length ? '权限已配置' : '尚未开放'}</Tag>
            </div>
            <div className="v2-menu-permissions">{customerMenus.map((menu) => {
              const selectedMenu = draft.menuKeys.includes(menu.key);
              return <label key={menu.key} className={selectedMenu ? 'is-selected' : ''}>
                <Checkbox checked={selectedMenu} onChange={() => setDraft((value) => ({ ...value, menuKeys: value.menuKeys.includes(menu.key) ? value.menuKeys.filter((item) => item !== menu.key) : [...value.menuKeys, menu.key] }))} />
                <span className="v2-menu-permission-copy"><b>{menu.label}</b><small>{menu.description}</small></span>
                <Tag className="v2-menu-permission-state" color={selectedMenu ? 'blue' : 'grey'} type="light" size="small">{selectedMenu ? '已开放' : '未开放'}</Tag>
              </label>;
            })}</div>
          </Card>
          </Tabs.TabPane>
          <Tabs.TabPane tab={<span className="v2-user-tab-label">车辆权限<Tag color={draft.vehicleGrants.length ? 'blue' : 'grey'} type="light" size="small">{draft.vehicleGrants.length}</Tag></span>} itemKey="vehicles">
          <Card
            className={`v2-user-editor-section v2-user-vehicle-section${mobileLayout && !vehicleComposerVisible ? ' is-composer-collapsed' : ''}`}
            title={<span className="v2-user-section-title">车辆权限与有效期 <Tag color={draft.vehicleGrants.length ? 'blue' : 'grey'} type="light" size="small">{draft.vehicleGrants.length} 辆</Tag></span>}
            headerLine
            headerExtraContent={draft.vehicleGrants.length ? <div className="v2-user-section-actions">
              {mobileLayout && draft.vehicleGrants.length ? <Button
                className="v2-user-vehicle-tools-toggle"
                theme="light"
                type="primary"
                size="small"
                icon={!vehicleComposerOpen ? <IconPlus /> : undefined}
                aria-controls="v2-user-vehicle-composer"
                aria-expanded={vehicleComposerOpen}
                aria-label={vehicleComposerOpen ? '收起添加车辆' : '添加授权车辆'}
                onClick={() => setVehicleComposerOpen((value) => !value)}
              >{vehicleComposerOpen ? '收起' : '添加'}</Button> : null}
              {draft.vehicleGrants.length ? <Popconfirm
                title={`清空 ${draft.vehicleGrants.length} 辆车辆权限？`}
                content="车辆会先从当前草稿中移除，点击底部保存后正式生效。"
                okText="确认清空"
                cancelText="取消"
                okType="danger"
                position="bottomRight"
                onConfirm={clearVehicleGrants}
              >
                <Button theme="borderless" type="tertiary" size="small" aria-label={`清空全部 ${draft.vehicleGrants.length} 辆车辆权限`}>清空</Button>
              </Popconfirm> : null}
            </div> : null}
          >
            {vehicleComposerVisible ? <div id="v2-user-vehicle-composer" className="v2-user-vehicle-composer">
              <div className="v2-vehicle-permission-tools"><label><span>按车牌或 VIN 搜索</span><Input aria-label="按车牌或 VIN 搜索" value={vehicleKeyword} onChange={setVehicleKeyword} placeholder="输入后显示候选车辆" /></label><label><span>批量粘贴 VIN</span><span className="v2-bulk-vin"><Input value={bulkVINs} onChange={setBulkVINs} placeholder="空格、逗号或换行分隔" /><Button theme="light" disabled={!bulkVINs.trim()} onClick={addBulkVINs}>加入</Button></span></label></div>
              {deferredVehicleKeyword ? <VehicleCandidateList
                className="v2-vehicle-candidates"
                layout="grid"
                items={candidateVehicles}
                loading={candidates.isPending}
                error={candidates.isError ? (candidates.error instanceof Error ? candidates.error.message : '车辆候选加载失败') : undefined}
                onRetry={() => candidates.refetch()}
                selectedVins={assigned}
                selectedLabel="已分配"
                onSelect={(vehicle) => toggleVIN(vehicle.vin)}
              /> : null}
            </div> : null}
            {draft.vehicleGrants.length ? <>
              <div className="v2-assigned-toolbar">
                <span><strong>已授权车辆</strong><small>{assignedKeyword ? `${filteredAssignedGrants.length} 条匹配结果` : `${draft.vehicleGrants.length} 辆车拥有当前访问权限`}</small></span>
                <Input
                  aria-label="筛选已授权车辆"
                  prefix={<IconSearch />}
                  showClear
                  value={assignedKeyword}
                  onChange={(value) => {
                    setAssignedKeyword(value);
                    setAssignedPage(1);
                  }}
                  placeholder="筛选已授权车牌或 VIN"
                />
              </div>
              {visibleAssignedGrants.length ? <div className="v2-assigned-vins">{visibleAssignedGrants.map((grant) => { const plate = vehicleLabels[grant.vin]; return <Card key={grant.vin} className={`v2-assigned-vehicle-card${mobileLayout ? ' is-mobile-compact' : ''}`} bodyStyle={{ padding: 0 }}>
                <header><span><b>{plate || '未登记车牌'}</b><small>{grant.vin}</small></span><span className="v2-assigned-vehicle-actions"><Button theme="light" type="tertiary" size="small" aria-haspopup="dialog" aria-controls="v2-user-grant-window" aria-label={`调整 ${plate || grant.vin} 有效期`} onClick={() => setEditingGrantVIN(grant.vin)}>调整有效期</Button><Button theme="borderless" type="tertiary" size="small" aria-label={`移除 ${plate || grant.vin}`} icon={<IconDelete />} onClick={() => toggleVIN(grant.vin)} /></span></header>
                <div className="v2-assigned-vehicle-interval" aria-label={`授权有效期：启用 ${formatGrantTime(grant.validFrom)}；停用 ${grant.validTo ? formatGrantTime(grant.validTo) : '持续有效'}`}><span><small>启用</small><strong>{formatGrantTime(grant.validFrom)}</strong></span><i aria-hidden="true">→</i><span><small>停用</small><strong>{grant.validTo ? formatGrantTime(grant.validTo) : '持续有效'}</strong></span></div>
              </Card>; })}</div> : <Empty className="v2-user-assigned-filter-empty" title="没有匹配的授权车辆" description="请更换车牌或 VIN 关键词。" />}
              <div className="v2-assigned-pagination">
                <TablePagination
                  page={safeAssignedPage}
                  totalPages={assignedTotalPages}
                  info={<>第 {(safeAssignedPage - 1) * assignedPageSize + (filteredAssignedGrants.length ? 1 : 0)}–{Math.min(safeAssignedPage * assignedPageSize, filteredAssignedGrants.length)} 条，共 {filteredAssignedGrants.length} 辆</>}
                  onPageChange={setAssignedPage}
                />
              </div>
            </> : <Empty className="v2-user-vehicle-empty" title="尚未分配车辆" description="客户将无法看到任何车辆数据。" />}
            {!creating && selected?.grantHistory?.length ? <Collapse className="v2-grant-history">
              <Collapse.Panel itemKey="grant-history" header={<span className="v2-grant-history-title">历次开放记录 <Tag color="blue" type="light" size="small">{selected.grantHistory.length} 条</Tag></span>}>
                <div className="v2-grant-history-list">{selected.grantHistory.map((item) => <Card key={item.id} className="v2-grant-history-card" bodyStyle={{ padding: 0 }}>
                  <header><span><strong>{item.plate || '未登记车牌'}</strong><small>{item.vin}</small></span><Tag color={item.validTo ? 'grey' : 'green'} type="light" size="small">{item.validTo ? '已结束' : '有效中'}</Tag></header>
                  <p>{formatTime(item.validFrom)} <i>→</i> {item.validTo ? formatTime(item.validTo) : '持续有效'}</p>
                  <small>开通：{item.grantedBy || '—'}{item.revokedBy ? ` · 停用：${item.revokedBy}` : ''} · {item.sourceSystem}</small>
                </Card>)}</div>
              </Collapse.Panel>
            </Collapse> : null}
          </Card>
          </Tabs.TabPane>
          </Tabs>
        </form> : null}
    </SideSheet>
    <SideSheet
      className="v2-user-grant-sidesheet"
      visible={Boolean(editingGrant)}
      width={420}
      aria-label="车辆授权有效期"
      title={<div className="v2-user-grant-sheet-title"><strong>调整车辆有效期</strong><span>{editingGrant ? `${editingGrantPlate || '未登记车牌'} · ${editingGrant.vin}` : '车辆授权时间窗口'}</span></div>}
      onCancel={() => setEditingGrantVIN('')}
      footer={<div className="v2-user-grant-sheet-footer"><Typography.Text type="tertiary">完成后仍需保存账号权限才会生效</Typography.Text><Button theme="solid" disabled={grantWindowInvalid} onClick={() => setEditingGrantVIN('')}>完成</Button></div>}
    >
      {editingGrant ? <div className="v2-user-grant-form">
        <Card className="v2-user-grant-summary" bodyStyle={{ padding: 0 }}>
          <span><small>车牌</small><strong>{editingGrantPlate || '未登记车牌'}</strong></span>
          <span><small>VIN</small><strong>{editingGrant.vin}</strong></span>
        </Card>
        <label><span>启用时间</span><Input aria-label={`${editingGrantPlate || editingGrant.vin} 启用时间`} type="datetime-local" required value={editingGrant.validFrom} onChange={(value) => updateGrant(editingGrant.vin, { validFrom: value })} /></label>
        <label><span>停用时间（可选）</span><Input aria-label={`${editingGrantPlate || editingGrant.vin} 停用时间`} type="datetime-local" min={editingGrant.validFrom} value={editingGrant.validTo} onChange={(value) => updateGrant(editingGrant.vin, { validTo: value })} /></label>
        {grantWindowInvalid ? <p role="alert">请设置启用时间，并确保停用时间晚于启用时间。</p> : <p>不设置停用时间时，车辆授权将持续有效。</p>}
      </div> : null}
    </SideSheet>
  </div>;
}
