'use client';

import { Card } from '@/components/ui/card';
import { useDisposalTracking } from './components/disposalReducer';
import { FieldFilter } from './components/FieldFilter';
import { StatusStats } from './components/StatusStats';
import { WarningList } from './components/WarningList';
import { WorkflowDialog } from './components/WorkflowDialog';
import { WorkflowGuide } from './components/WorkflowGuide';
import { Activity } from 'lucide-react';

export default function DisposalPage() {
  const {
    state,
    dispatch,
    filteredWarnings,
    getRiskTypeIcon,
    getStatusIcon,
    getStatusColor,
    getRiskLevelColor,
    handleViewWarning,
    handleUpdateStatus,
    handleViewRecord,
    handleUpdateRecordStatus,
    handleSaveRecordDisposal,
  } = useDisposalTracking();

  if (state.isInitializing) {
    return (
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <div>
            <h2 className="text-green-800">预警处置跟踪</h2>
            <p className="text-muted-foreground">
              实时跟踪预警处置流程，形成闭环管理
            </p>
          </div>
        </div>
        <div className="flex items-center justify-center py-12">
          <div className="text-center">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-green-600 mx-auto mb-4"></div>
            <p className="text-muted-foreground">正在加载数据...</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-green-800">预警处置跟踪</h2>
          <p className="text-muted-foreground">
            实时跟踪预警处置流程，形成闭环管理
          </p>
        </div>
      </div>

      {/* 地块筛选 */}
      <FieldFilter
        selectedField={state.selectedField}
        onFieldChange={(value) => dispatch({ type: 'SET_SELECTED_FIELD', payload: value })}
      />

      {/* 处置状态统计 */}
      <StatusStats filteredWarnings={filteredWarnings} />

      {/* 预警处置列表 */}
      <WarningList
        filteredWarnings={filteredWarnings}
        getRiskTypeIcon={getRiskTypeIcon}
        getRiskLevelColor={getRiskLevelColor}
        getStatusIcon={getStatusIcon}
        getStatusColor={getStatusColor}
        onViewWarning={handleViewWarning}
      />

      {/* 流程说明 */}
      <WorkflowGuide />

      {/* 工作流详情对话框 */}
      <WorkflowDialog
        isOpen={state.showWarningDetail}
        onClose={() => dispatch({ type: 'SET_SHOW_WARNING_DETAIL', payload: false })}
        selectedWarning={state.selectedWarning}
        disposalPlan={state.disposalPlan}
        disposalResult={state.disposalResult}
        processingNotes={state.processingNotes}
        resources={state.resources}
        actualCost={state.actualCost}
        effectEvaluation={state.effectEvaluation}
        onDisposalPlanChange={(value) => dispatch({ type: 'SET_DISPOSAL_PLAN', payload: value })}
        onDisposalResultChange={(value) => dispatch({ type: 'SET_DISPOSAL_RESULT', payload: value })}
        onProcessingNotesChange={(value) => dispatch({ type: 'SET_PROCESSING_NOTES', payload: value })}
        onResourcesChange={(value) => dispatch({ type: 'SET_RESOURCES', payload: value })}
        onActualCostChange={(value) => dispatch({ type: 'SET_ACTUAL_COST', payload: value })}
        onEffectEvaluationChange={(value) => dispatch({ type: 'SET_EFFECT_EVALUATION', payload: value })}
        onUpdateStatus={handleUpdateStatus}
        getRiskTypeIcon={getRiskTypeIcon}
        getRiskLevelColor={getRiskLevelColor}
        getStatusIcon={getStatusIcon}
        getStatusColor={getStatusColor}
      />
    </div>
  );
}