'use client';

import { useReducer } from 'react';
import { toast } from 'sonner';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { RotateCw } from 'lucide-react';
import {
  layerSamplingReducer,
  initialState,
  LayerSamplingState,
  LayerSamplingAction
} from './components/layerSamplingReducer';
import { ControlPanel } from './components/ControlPanel';
import { Visualization3D } from './components/Visualization3D';
import { DataAnalysis } from './components/DataAnalysis';
import { DataTable } from './components/DataTable';
import { UsageGuide } from './components/UsageGuide';

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

  const handleFieldChange = (value: string) => {
    dispatch({ type: 'SET_SELECTED_FIELD', payload: value });
  };

  const handleNutrientChange = (value: 'organic' | 'nitrogen' | 'phosphorus' | 'potassium') => {
    dispatch({ type: 'SET_SELECTED_NUTRIENT', payload: value });
  };

  const handleViewModeChange = (value: '3d' | 'slice' | 'contour') => {
    dispatch({ type: 'SET_VIEW_MODE', payload: value });
  };

  const handleDepthSliceChange = (value: number[]) => {
    dispatch({ type: 'SET_DEPTH_SLICE', payload: value });
  };

  const handleRotate = () => {
    dispatch({ type: 'ROTATE' });
    toast.success(`旋转至 ${state.rotationAngle}°`);
  };

  const handleZoomIn = () => {
    dispatch({ type: 'ZOOM_IN' });
  };

  const handleZoomOut = () => {
    dispatch({ type: 'ZOOM_OUT' });
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-green-800 dark:text-green-200">分层采样分析</h2>
          <p className="text-muted-foreground">
            三维可视化展示土壤养分在垂直和水平方向的分布规律
          </p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" onClick={handleRotate}>
            <RotateCw className="w-4 h-4 mr-2" />
            旋转视角
          </Button>
        </div>
      </div>

      <ControlPanel
        selectedField={state.selectedField}
        selectedNutrient={state.selectedNutrient}
        viewMode={state.viewMode}
        depthSlice={state.depthSlice}
        zoomLevel={state.zoomLevel}
        onFieldChange={handleFieldChange}
        onNutrientChange={handleNutrientChange}
        onViewModeChange={handleViewModeChange}
        onDepthSliceChange={handleDepthSliceChange}
        onZoomIn={handleZoomIn}
        onZoomOut={handleZoomOut}
      />

      <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
        <div className="xl:col-span-2">
          <Visualization3D
            viewMode={state.viewMode}
            selectedNutrient={state.selectedNutrient}
            depthSlice={state.depthSlice}
            rotationAngle={state.rotationAngle}
            zoomLevel={state.zoomLevel}
            onRotate={handleRotate}
            onZoomIn={handleZoomIn}
            onZoomOut={handleZoomOut}
          />
        </div>

        <div>
          <DataAnalysis selectedNutrient={state.selectedNutrient} />
        </div>
      </div>

      <DataTable />

      <UsageGuide />
    </div>
  );
}