import { useState, useEffect } from 'react';
import { Card } from '../ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
import { AlertRuleManagement } from './fault/AlertRuleManagement';
import { FaultWarning } from './fault/FaultWarning';
import { HealthAssessment } from './fault/HealthAssessment';
import { ParameterMonitor } from './fault/ParameterMonitor';

interface FaultDiagnosisProps {
  activePath?: string;
}

export function FaultDiagnosis({ activePath }: FaultDiagnosisProps) {
  // 根据路径确定默认Tab
  const getDefaultTab = () => {
    if (activePath?.includes('/alert-rules')) return 'alert-rules';
    if (activePath?.includes('/warning')) return 'fault-warning';
    if (activePath?.includes('/health')) return 'health';
    if (activePath?.includes('/parameter')) return 'parameter';
    return 'alert-rules';
  };

  const [activeTab, setActiveTab] = useState(getDefaultTab());

  // 当路径变化时更新Tab
  useEffect(() => {
    setActiveTab(getDefaultTab());
  }, [activePath]);

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-success">远程诊断与故障预警</h2>
        <p className="text-muted-foreground">智能预警规则、故障诊断和健康评估</p>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="alert-rules">预警规则</TabsTrigger>
          <TabsTrigger value="fault-warning">预警记录</TabsTrigger>
          <TabsTrigger value="health">健康评估</TabsTrigger>
          <TabsTrigger value="parameter">参数监测</TabsTrigger>
        </TabsList>

        <TabsContent value="alert-rules" className="mt-6">
          <AlertRuleManagement />
        </TabsContent>

        <TabsContent value="fault-warning" className="mt-6">
          <FaultWarning />
        </TabsContent>

        <TabsContent value="health" className="mt-6">
          <HealthAssessment />
        </TabsContent>

        <TabsContent value="parameter" className="mt-6">
          <ParameterMonitor />
        </TabsContent>
      </Tabs>
    </div>
  );
}
