/**
 * filekorolheader: 审核历史页面 - 企业审核记录查询和管理页面
 * 功能：审核历史记录查询、搜索筛选、详情查看、数据分析
 * 路径：/central-config/tenant/audit-history
 * 规范：遵循crop-x-new/docs/开发项目规范.md，使用SearchFormPagination组件，API集成，shadcn语义化样式
 */
'use client';

import React, { useState, useCallback, useEffect ,useRef} from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import {
  FileText,
  AlertCircle,
  RefreshCw,
  Building,
  User,
  Smartphone,
  Search
} from 'lucide-react';
import { toast } from 'sonner';

import SearchFormPagination, {
  type SearchFieldConfig,
  type TableColumnConfig
} from '@/components/common/searchFormPagination';

import { fetchAuditLogs, transformAuditLogData, AuditLogsQueryParams, AuditRecord, AuditLogData } from './components/auditHistoryApi';

// URL参数类型定义
interface UrlParams {
  search?: string;
  action?: string;
  audit_status?: string;
  date_range?: string;
  page?: number;
  size?: number;
}

// 分页状态类型定义
interface PaginationState {
  page: number;
  size: number;
  total: number;
  totalPages: number;
  hasNext: boolean;
  hasPrev: boolean;
}

// Utility functions
const getActionBadge = (action: string) => {
  switch (action) {
    case 'SUBMIT':
      return (
        <div className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400 border border-blue-200 dark:border-blue-800">
          提交审核
        </div>
      );
    case 'AUDIT':
      return (
        <div className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-orange-50 dark:bg-orange-950 text-orange-600 dark:text-orange-400 border border-orange-200 dark:border-orange-800">
          审核操作
        </div>
      );
    default:
      return (
        <div className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium border border-gray-200 dark:border-gray-800">
          {action}
        </div>
      );
  }
};

const getResultBadge = (result: string) => {
  switch (result) {
    case 'approved':
      return (
        <div className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-green-50 dark:bg-green-950 text-green-600 dark:text-green-400 border border-green-200 dark:border-green-800">
          已通过
        </div>
      );
    case 'rejected':
      return (
        <div className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-red-50 dark:bg-red-950 text-red-600 dark:text-red-400 border border-red-200 dark:border-red-800">
          已拒绝
        </div>
      );
    case 'pending':
      return (
        <div className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-yellow-50 dark:bg-yellow-950 text-yellow-600 dark:text-yellow-400 border border-yellow-200 dark:border-yellow-800">
          待审核
        </div>
      );
    case 'draft':
      return (
        <div className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-gray-50 dark:bg-gray-950 text-gray-600 dark:text-gray-400 border border-gray-200 dark:border-gray-800">
          草稿
        </div>
      );
    default:
      return (
        <div className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium border border-gray-200 dark:border-gray-800">
          {result}
        </div>
      );
  }
};

export default function AuditHistoryPage() {
  // 对话框状态管理
  const [dialogs, setDialogs] = useState({
    showViewDialog: false,
    selectedRecord: null as AuditRecord | null
  });

  const dispatch = (action: any) => {
    switch (action.type) {
      case 'SET_SELECTED_RECORD':
        setDialogs(prev => ({ ...prev, selectedRecord: action.payload }));
        break;
      case 'TOGGLE_VIEW_DIALOG':
        setDialogs(prev => ({ ...prev, showViewDialog: action.payload }));
        break;
      case 'RESET_FORM_DATA':
        setDialogs(prev => ({ ...prev, selectedRecord: null }));
        break;
    }
  };

  // 搜索字段配置
  const searchFields: SearchFieldConfig[] = [
    {
      key: 'search',
      label: '搜索',
      type: 'text',
      placeholder: '搜索企业名称、变更摘要...',
    },
    {
      key: 'action',
      label: '审核类型',
      type: 'select',
      defaultValue: 'all',
      options: [
        { value: 'all', label: '全部类型' },
        { value: 'SUBMIT', label: '提交审核' },
        { value: 'AUDIT', label: '审核操作' },
      ],
    },
    {
      key: 'audit_status',
      label: '审核结果',
      type: 'select',
      defaultValue: 'all',
      options: [
        { value: 'all', label: '全部结果' },
        { value: 'approved', label: '已通过' },
        { value: 'rejected', label: '已拒绝' },
        { value: 'pending', label: '待审核' },
        { value: 'draft', label: '草稿' },
      ],
    },
    {
      key: 'date_range',
      label: '时间范围',
      type: 'select',
      defaultValue: 'all',
      options: [
        { value: 'all', label: '全部' },
        { value: 'today', label: '今天' },
        { value: 'week', label: '近7天' },
        { value: 'month', label: '近30天' },
        { value: 'quarter', label: '近90天' },
      ],
    },
  ];

  // 表格列配置
  const columns: TableColumnConfig[] = [
    {
      key: 'enterpriseName',
      label: '企业名称',
      render: (value: string) => (
        <div className="flex items-center gap-2">
          <Building className="w-4 h-4 text-blue-500" />
          <span className="font-medium">{value}</span>
        </div>
      ),
    },
    {
      key: 'action',
      label: '审核类型',
      render: (value: string) => getActionBadge(value),
    },
    {
      key: 'submitTime',
      label: '提交时间',
      render: (value: string, record: AuditLogData) => (
        <div className="text-sm text-muted-foreground">
          {record.action === 'SUBMIT' ? value : '-'}
        </div>
      ),
    },
    {
      key: 'actionTime',
      label: '审核时间',
      render: (value: string, record: AuditLogData) => (
        <div className="text-sm text-muted-foreground">
          {record.action === 'AUDIT' ? value : '-'}
        </div>
      ),
    },
    {
      key: 'actionBy',
      label: '审核人',
      render: (value: string) => value ? (
        <div className="flex items-center gap-2">
          <User className="w-4 h-4 text-gray-500" />
          <span>{value}</span>
        </div>
      ) : '-',
    },
    {
      key: 'result',
      label: '审核结果',
      render: (value: string) => getResultBadge(value),
    },
    {
      key: 'actions',
      label: '操作',
      render: (_: any, row: AuditLogData) => (
        <Button
          size="sm"
          variant="outline"
          onClick={() => handleView(row)}
        >
          <FileText className="w-3 h-3 mr-1" />
          详情
        </Button>
      ),
    },
  ];
  // 简化的状态管理 - 只需要存储数据和加载状态
  const [records, setRecords] = useState<AuditRecord[]>([]);
  const [pagination, setPagination] = useState<PaginationState>({
    page: 1,
    size: 10,
    total: 0,
    totalPages: 0,
    hasNext: false,
    hasPrev: false,
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [searchFilters, setSearchFilters] = useState<Record<string, string>>({
    search: '',
    action: 'all',
    audit_status: 'all',
    date_range: 'all'
  });

  // 数据加载函数 - 优先从浏览器URL参数读取
  const loadAuditHistory = useCallback(async (options: {
    resetPage?: boolean;
    filters?: Record<string, string>;
    sortBy?: string;
    sortOrder?: 'asc' | 'desc';
    page?: number;
    size?: number;
  } = {}) => {
    try {
      // 优先从URL读取参数
      let urlParams: UrlParams = {};
      if (typeof window !== 'undefined') {
        const params = new URLSearchParams(window.location.search);
        urlParams = {
          search: params.get('search') || undefined,
          action: params.get('action') || undefined,
          audit_status: params.get('audit_status') || undefined,
          date_range: params.get('date_range') || undefined,
          page: params.get('page') ? parseInt(params.get('page')!, 10) : undefined,
          size: params.get('size') ? parseInt(params.get('size')!, 10) : undefined
        };
        console.log('从URL读取的参数:', urlParams);
      }
      console.log('========================================');
      setLoading(true);
      setError(null);

      // 解构选项参数，提供默认值
      const {
        resetPage = false,
        filters,
        sortBy,
        sortOrder,
        page,
        size
      } = options;

      // 优先级：URL参数 > 传入参数 > 父组件状态
      const finalPage = resetPage ? 1 : (urlParams.page || page || pagination.page);
      const finalSize = urlParams.size || size || pagination.size;

      const params: AuditLogsQueryParams = {
        page: finalPage,
        size: finalSize,
      };

      // 使用正确的优先级：URL参数 > 传入参数 > 父组件状态
      const currentFilters = {
        search: urlParams.search || (filters?.search) || searchFilters.search,
        action: urlParams.action || (filters?.action) || searchFilters.action,
        audit_status: urlParams.audit_status || (filters?.audit_status) || searchFilters.audit_status,
        date_range: urlParams.date_range || (filters?.date_range) || searchFilters.date_range
      };
      const currentSortBy = sortBy || 'created_at';
      const currentSortOrder = sortOrder || 'desc';

      // 添加搜索条件
      if (currentFilters.search) {
        params.search_keyword = currentFilters.search;
      }

      // 添加排序条件
      if (currentSortBy) {
        params.order_by = currentSortBy;
        params.sort_order = currentSortOrder;
      }

      if (currentFilters.action && currentFilters.action !== 'all') {
        params.action = currentFilters.action;
      }

      if (currentFilters.audit_status && currentFilters.audit_status !== 'all') {
        params.audit_status = currentFilters.audit_status;
      }

      if (currentFilters.date_range && currentFilters.date_range !== 'all') {
        params.date_range = currentFilters.date_range;
      }

      if (currentSortBy) {
        params.order_by = currentSortBy;
        params.sort_order = currentSortOrder;
      }

      console.log('=== 审核历史页面 - 最终API参数 ===');
      console.log('API调用参数 params:', params);
      console.log('参数优先级正确: URL参数 > 函数传递参数 > 父组件状态');
      console.log('当前currentFilters:', currentFilters);
      console.log('==================================');

      const response = await fetchAuditLogs(params);
      const transformedData = response.data.map(transformAuditLogData);

      setRecords(transformedData);
      setPagination({
        page: response.page,
        size: response.size,
        total: response.total,
        totalPages: response.total_pages,
        hasNext: response.has_next,
        hasPrev: response.has_prev,
      });
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : '加载审核历史失败';
      setError(errorMessage);
      toast.error(errorMessage);
    } finally {
      setLoading(false);
    }
  }, []); // 移除依赖项，通过参数传递

  const didFetchRef = useRef(false)

useEffect(() => {
  if (didFetchRef.current) return
  didFetchRef.current = true
  loadAuditHistory()
}, [])
  // 搜索处理 - 保持传统的简洁方式
  const handleSearch = useCallback((filters: Record<string, string>) => {
    console.log('审核历史页面 - 收到搜索条件:', filters);

    // 更新过滤器状态
    setSearchFilters(filters);

    // 搜索时重置到第1页
    setPagination(prev => ({ ...prev, page: 1 }));

    // 执行查询
    loadAuditHistory({
      resetPage: true,
      page: 1,
      filters: filters,
      size: pagination.size
    });

    console.log('触发审核历史查询 - 参数:', {
      resetPage: true,
      page: 1,
      filters: filters,
      size: pagination.size
    });
  }, [pagination.size, loadAuditHistory]);

  // 排序处理
  const handleSort = useCallback((sortBy: string, sortOrder: 'asc' | 'desc') => {
    // 排序时重置到第一页
    setPagination(prev => ({ ...prev, page: 1 }));
    loadAuditHistory({
      resetPage: true,
      page: 1,
      filters: searchFilters,
      sortBy,
      sortOrder,
      size: pagination.size
    });
  }, [searchFilters, pagination.size, loadAuditHistory]);

  // 分页处理
  const handlePageChange = useCallback((page: number) => {
    if (page < 1) {
      page = 1;
    } else if (page > pagination.totalPages && pagination.totalPages > 0) {
      page = pagination.totalPages;
    }
    setPagination(prev => ({ ...prev, page }));
    loadAuditHistory({
      page,
      filters: searchFilters,
      size: pagination.size
    });
  }, [searchFilters, pagination.size, pagination.totalPages, loadAuditHistory]);

  // 每页条数变化处理
  const handleSizeChange = useCallback((size: number) => {
    setPagination(prev => ({ ...prev, size, page: 1 }));
    loadAuditHistory({
      resetPage: true,
      page: 1,
      size,
      filters: searchFilters
    });
  }, [searchFilters, loadAuditHistory]);

  // URL状态变化处理 - 处理浏览器前进后退时的参数恢复
  const handleUrlStateChange = useCallback((urlState: {
    filters: Record<string, string>;
    pagination: { page: number; size: number };
  }) => {
    console.log('审核历史页面 - URL状态变化:', urlState);

    // 更新内部状态
    setSearchFilters(urlState.filters);
    setPagination(prev => ({
      ...prev,
      page: urlState.pagination.page,
      size: urlState.pagination.size
    }));

    // 触发数据加载
    loadAuditHistory({
      page: urlState.pagination.page,
      size: urlState.pagination.size,
      filters: urlState.filters
    });
  }, [loadAuditHistory]);

  // 业务事件处理器
  const handleView = (record: AuditLogData) => {
    dispatch({ type: 'SET_SELECTED_RECORD', payload: record });
    dispatch({ type: 'TOGGLE_VIEW_DIALOG', payload: true });
  };

  return (
    <div className="space-y-6">
      {/* Page Header - 自定义页面头部 */}
      <Card className="p-6 bg-gradient-to-r from-green-50 dark:from-green-950 to-emerald-50 dark:to-emerald-950 border-green-200 dark:border-green-800">
        <div className="flex items-start justify-between">
          <div className="flex items-start gap-3">
            <FileText className="w-6 h-6 text-green-600 dark:text-green-400 flex-shrink-0 mt-1" />
            <div className="flex-1">
              <h2 className="mb-2">审核历史</h2>
              <p className="text-sm text-muted-foreground mb-3">
                追溯查询全部企业的历史审核记录，支持搜索筛选和详情查看
              </p>
              <div className="flex flex-wrap gap-2">
                <div className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-800">
                  <Search className="w-3 h-3 mr-1" />
                  智能查询
                </div>
                <div className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-800">
                  <AlertCircle className="w-3 h-3 mr-1" />
                  状态筛选
                </div>
                <div className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-800">
                  <FileText className="w-3 h-3 mr-1" />
                  详情查看
                </div>
              </div>
            </div>
          </div>
        </div>
      </Card>

      {/* 使用SearchFormPagination组件 */}
      {React.createElement(SearchFormPagination as any, {
        formTitle: "审核历史记录",
        searchFields,
        columns,
        data: records,
        loading,
        error,
        pagination: pagination as any,
        onPageChange: handlePageChange,
        onSizeChange: handleSizeChange,
        onSearch: handleSearch,
        onSort: handleSort,
        emptyIcon: <FileText className="w-12 h-12 mx-auto mb-4 opacity-20" />,
        emptyText: "暂无审核记录",
        sizeOptions: [10, 20, 50, 100]
      })}

      {/* View Audit Record Details Dialog */}
      <Dialog open={dialogs.showViewDialog} onOpenChange={(open) => dispatch({ type: 'TOGGLE_VIEW_DIALOG', payload: open })}>
        <DialogContent className="w-[90vw] max-w-6xl max-h-[90vh]">
          <DialogHeader>
            <DialogTitle>审核记录详情</DialogTitle>
            <DialogDescription>
              查看审核记录的详细信息和企业快照数据
            </DialogDescription>
          </DialogHeader>

          {dialogs.selectedRecord && (
            <ScrollArea className="max-h-[calc(90vh-200px)]">
              <Tabs defaultValue="basic" className="space-y-4">
                <TabsList className="grid grid-cols-3 w-full">
                  <TabsTrigger value="basic">
                    <FileText className="w-4 h-4 mr-2" />
                    基本信息
                  </TabsTrigger>
                  <TabsTrigger value="snapshot">
                    <Building className="w-4 h-4 mr-2" />
                    企业快照
                  </TabsTrigger>
                  <TabsTrigger value="system">
                    <Smartphone className="w-4 h-4 mr-2" />
                    系统信息
                  </TabsTrigger>
                </TabsList>

                {/* 基本信息 */}
                <TabsContent value="basic" className="space-y-4">
                  <div className="grid grid-cols-2 gap-6">
                    <div>
                      <Label>企业名称</Label>
                      <div className="field-value p-3 bg-muted rounded-md">{dialogs.selectedRecord.enterpriseName}</div>
                    </div>
                    <div>
                      <Label>审核类型</Label>
                      <div className="field-value p-3 bg-muted rounded-md">{getActionBadge(dialogs.selectedRecord.action)}</div>
                    </div>
                    <div>
                      <Label>提交时间</Label>
                      <div className="field-value p-3 bg-muted rounded-md">
                        {dialogs.selectedRecord.action === 'SUBMIT' ? dialogs.selectedRecord.submitTime : '-'}
                      </div>
                    </div>
                    <div>
                      <Label>审核时间</Label>
                      <div className="field-value p-3 bg-muted rounded-md">
                        {dialogs.selectedRecord.action === 'AUDIT' ? dialogs.selectedRecord.actionTime : '-'}
                      </div>
                    </div>
                    <div>
                      <Label>审核人</Label>
                      <div className="field-value p-3 bg-muted rounded-md">{dialogs.selectedRecord.actionBy || '-'}</div>
                    </div>
                    <div>
                      <Label>审核结果</Label>
                      <div className="field-value p-3 bg-muted rounded-md">{getResultBadge(dialogs.selectedRecord.result)}</div>
                    </div>
                    <div>
                      <Label>变更摘要</Label>
                      <div className="field-value p-3 bg-muted rounded-md min-h-[80px] whitespace-pre-wrap">
                        {dialogs.selectedRecord.changeSummary || '-'}
                      </div>
                    </div>
                    <div>
                      <Label>审核备注</Label>
                      <div className="field-value p-3 bg-muted rounded-md min-h-[80px] whitespace-pre-wrap">
                        {dialogs.selectedRecord.auditComment || '-'}
                      </div>
                    </div>
                  </div>
                </TabsContent>

                {/* 企业快照 */}
                <TabsContent value="snapshot" className="space-y-4">
                  <div className="grid grid-cols-2 gap-6">
                    <div>
                      <Label>企业类型</Label>
                      <div className="field-value p-3 bg-muted rounded-md">{dialogs.selectedRecord.snapshot?.companyType || '-'}</div>
                    </div>
                    <div>
                      <Label>所在地区</Label>
                      <div className="field-value p-3 bg-muted rounded-md">
                        {dialogs.selectedRecord.snapshot?.province} {dialogs.selectedRecord.snapshot?.city}
                      </div>
                    </div>
                    <div className="col-span-2">
                      <Label>详细地址</Label>
                      <div className="field-value p-3 bg-muted rounded-md">{dialogs.selectedRecord.snapshot?.detailedAddress || '-'}</div>
                    </div>
                    <div>
                      <Label>登记人</Label>
                      <div className="field-value p-3 bg-muted rounded-md">{dialogs.selectedRecord.snapshot?.registrant || '-'}</div>
                    </div>
                    <div>
                      <Label>联系电话</Label>
                      <div className="field-value p-3 bg-muted rounded-md">{dialogs.selectedRecord.snapshot?.contactPhone || '-'}</div>
                    </div>
                    <div>
                      <Label>企业规模</Label>
                      <div className="field-value p-3 bg-muted rounded-md">{dialogs.selectedRecord.snapshot?.companyScale || '-'}</div>
                    </div>
                    <div>
                      <Label>注册资本</Label>
                      <div className="field-value p-3 bg-muted rounded-md">{dialogs.selectedRecord.snapshot?.registeredCapital || '-'}</div>
                    </div>
                    <div>
                      <Label>社会信用代码</Label>
                      <div className="field-value p-3 bg-muted rounded-md">
                        <code className="text-sm">{dialogs.selectedRecord.snapshot?.socialCreditCode || '-'}</code>
                      </div>
                    </div>
                    <div>
                      <Label>法人名称</Label>
                      <div className="field-value p-3 bg-muted rounded-md">{dialogs.selectedRecord.snapshot?.legalPersonName || '-'}</div>
                    </div>
                    <div>
                      <Label>银行账号</Label>
                      <div className="field-value p-3 bg-muted rounded-md">
                        <code className="text-sm">{dialogs.selectedRecord.snapshot?.bankAccount || '-'}</code>
                      </div>
                    </div>
                    <div>
                      <Label>开户行</Label>
                      <div className="field-value p-3 bg-muted rounded-md">{dialogs.selectedRecord.snapshot?.bankName || '-'}</div>
                    </div>
                    <div>
                      <Label>开户行全称</Label>
                      <div className="field-value p-3 bg-muted rounded-md">{dialogs.selectedRecord.snapshot?.bankFullName || '-'}</div>
                    </div>
                    <div className="col-span-2">
                      <Label>开户行地址</Label>
                      <div className="field-value p-3 bg-muted rounded-md">{dialogs.selectedRecord.snapshot?.bankAddress || '-'}</div>
                    </div>
                  </div>
                </TabsContent>

                {/* 系统信息 */}
                <TabsContent value="system" className="space-y-4">
                  <div className="grid grid-cols-2 gap-6">
                    <div>
                      <Label>记录ID</Label>
                      <div className="field-value p-3 bg-muted rounded-md">
                        <code className="text-sm">{dialogs.selectedRecord.id}</code>
                      </div>
                    </div>
                    <div>
                      <Label>企业ID</Label>
                      <div className="field-value p-3 bg-muted rounded-md">
                        <code className="text-sm">{dialogs.selectedRecord.enterpriseId || '-'}</code>
                      </div>
                    </div>
                    <div>
                      <Label>IP地址</Label>
                      <div className="field-value p-3 bg-muted rounded-md">{dialogs.selectedRecord.ipAddress || '-'}</div>
                    </div>
                    <div>
                      <Label>用户代理</Label>
                      <div className="field-value p-3 bg-muted rounded-md text-sm">
                        {dialogs.selectedRecord.userAgent || '-'}
                      </div>
                    </div>
                    <div>
                      <Label>请求ID</Label>
                      <div className="field-value p-3 bg-muted rounded-md">
                        <code className="text-sm">{dialogs.selectedRecord.requestId || '-'}</code>
                      </div>
                    </div>
                    <div>
                      <Label>创建时间</Label>
                      <div className="field-value p-3 bg-muted rounded-md">{dialogs.selectedRecord.createdAt}</div>
                    </div>
                  </div>
                </TabsContent>
              </Tabs>
            </ScrollArea>
          )}

          <DialogFooter>
            <Button variant="outline" onClick={() => dispatch({ type: 'TOGGLE_VIEW_DIALOG', payload: false })}>
              关闭
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}