/**
 * filekorolheader: 设备参数管理页面 - IoT设备参数模板配置中心
 * 功能：设备类型选择、参数模板配置、参数对比分析、报告生成
 * 路径：/ai-crop-model/data-sense-center/device-parameter
 * 规范：遵循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, Edit, Trash2, Eye } from 'lucide-react';
import { DeviceParameterStats } from './components/DeviceParameterStats';
import { DeviceParameterTable } from './components/DeviceParameterTable';
import { DeviceTypeSelector } from './components/DeviceTypeSelector';
import { deviceParameterReducer, initialState, DeviceParameterState } from './components/deviceParameterReducer';
import { AddParameterDialog } from './components/AddParameterDialog';
import { ViewParameterDialog } from './components/ViewParameterDialog';
import { DeleteParameterConfirmDialog } from './components/DeleteParameterConfirmDialog';
import { toast } from 'sonner';

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

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

  const handleAddParam = () => {
    if (!state.selectedType) {
      toast.error('请先选择一个设备类型');
      return;
    }
    dispatch({ type: 'SHOW_ADD_PARAM_DIALOG' });
  };

  const handleEditParam = (param: any) => {
    dispatch({ type: 'SHOW_EDIT_PARAM_DIALOG', payload: param });
  };

  const handleViewParam = (param: any) => {
    dispatch({ type: 'SHOW_VIEW_PARAM_DIALOG', payload: param });
  };

  const handleDeleteParam = (paramKey: string) => {
    dispatch({ type: 'SHOW_DELETE_CONFIRM', payload: paramKey });
  };

  
  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={handleAddParam}>
          <Plus className="w-4 h-4 mr-2" />
          新增参数
        </Button>
      </div>

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

      <div className="grid grid-cols-12 gap-6">
        {/* 左侧：设备类型选择器 */}
        <div className="col-span-4">
          <DeviceTypeSelector
            state={state}
            dispatch={dispatch}
          />
        </div>

        {/* 右侧：参数列表 */}
        <div className="col-span-8">
          <Card className="bg-card">
            <DeviceParameterTable
              state={state}
              onEdit={handleEditParam}
              onView={handleViewParam}
              onDelete={handleDeleteParam}
            />
          </Card>
        </div>
      </div>

      {/* 添加/编辑参数对话框 */}
      <AddParameterDialog
        open={state.showAddParamDialog}
        onOpenChange={(open) => dispatch({ type: 'SET_ADD_PARAM_DIALOG', payload: open })}
        editingParam={state.editingParam}
        selectedType={state.selectedType}
        dispatch={dispatch}
      />

      {/* 查看参数对话框 */}
      <ViewParameterDialog
        open={state.showViewParamDialog}
        onOpenChange={(open) => dispatch({ type: 'SET_VIEW_PARAM_DIALOG', payload: open })}
        viewingParam={state.viewingParam}
        selectedType={state.selectedType}
      />

      {/* 删除确认对话框 */}
      <DeleteParameterConfirmDialog
        open={state.showDeleteConfirm}
        onOpenChange={(open) => dispatch({ type: 'SET_DELETE_CONFIRM', payload: open })}
        pendingDeleteParam={state.pendingDeleteParam}
        dispatch={dispatch}
      />

          </div>
  );
}