/**
 * filekorolheader: 设备类型管理页面 - IoT设备类型定义与参数管理中心
 * 功能：设备类型列表管理、参数模板配置、设备类型统计
 * 路径：/ai-crop-model/data-sense-center/device-type
 * 规范：遵循crop-x/docs/开发项目规范.md，使用useReducer状态管理，shadcn语义化样式
 */
'use client';

import { useReducer, useEffect } from 'react';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Plus } from 'lucide-react';
import { DeviceTypeTable } from './components/DeviceTypeTable';
import { DeviceTypeStats } from './components/DeviceTypeStats';
import { deviceTypeReducer, initialState, DeviceTypeState } from './components/deviceTypeReducer';
import { AddDeviceTypeDialog } from './components/AddDeviceTypeDialog';
import { ViewDeviceTypeDialog } from './components/ViewDeviceTypeDialog';
import { ViewParamsDialog } from './components/ViewParamsDialog';
import { DeleteConfirmDialog } from './components/DeleteConfirmDialog';

export default function DeviceTypePage() {
  const [state, dispatch] = useReducer(deviceTypeReducer, initialState);

  useEffect(() => {
    dispatch({ type: 'LOAD_DATA' });
  }, []);

  const handleAdd = () => {
    dispatch({ type: 'SHOW_ADD_DIALOG' });
  };

  const handleEdit = (deviceType: any) => {
    dispatch({ type: 'SHOW_EDIT_DIALOG', payload: deviceType });
  };

  const handleView = (deviceType: any) => {
    dispatch({ type: 'SHOW_VIEW_DIALOG', payload: deviceType });
  };

  const handleViewParams = (deviceType: any) => {
    dispatch({ type: 'SHOW_PARAMS_DIALOG', payload: deviceType });
  };

  const handleDelete = (id: string) => {
    dispatch({ type: 'SHOW_DELETE_DIALOG', payload: id });
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-primary">设备类型管理</h2>
          <p className="text-muted-foreground">定义和管理物联设备的类型信息</p>
        </div>
        <Button onClick={handleAdd}>
          <Plus className="w-4 h-4 mr-2" />
          新增类型
        </Button>
      </div>

      {/* 统计卡片 */}
      <DeviceTypeStats state={state} />

      {/* 设备类型列表 */}
      <Card>
        <DeviceTypeTable
          state={state}
          onEdit={handleEdit}
          onView={handleView}
          onViewParams={handleViewParams}
          onDelete={handleDelete}
        />
      </Card>

      {/* 添加/编辑对话框 */}
      <AddDeviceTypeDialog
        open={state.showAddDialog || state.showEditDialog}
        onOpenChange={(open) => {
          if (open) {
            dispatch({ type: 'SET_ADD_DIALOG', payload: true });
          } else {
            dispatch({ type: 'SET_ADD_DIALOG', payload: false });
            dispatch({ type: 'SET_EDIT_DIALOG', payload: false });
          }
        }}
        editingType={state.editingType}
        dispatch={dispatch}
      />

      {/* 查看详情对话框 */}
      <ViewDeviceTypeDialog
        open={state.showViewDialog}
        onOpenChange={(open) => dispatch({ type: 'SET_VIEW_DIALOG', payload: open })}
        viewingType={state.viewingType}
      />

      {/* 查看参数模板对话框 */}
      <ViewParamsDialog
        open={state.showParamsDialog}
        onOpenChange={(open) => dispatch({ type: 'SET_PARAMS_DIALOG', payload: open })}
        viewingParams={state.viewingParams}
      />

      {/* 删除确认对话框 */}
      <DeleteConfirmDialog
        open={state.showDeleteDialog}
        onOpenChange={(open) => dispatch({ type: 'SET_DELETE_DIALOG', payload: open })}
        pendingDeleteId={state.pendingDeleteId}
        dispatch={dispatch}
      />
    </div>
  );
}