import { useMemo } from "react";

import { Card } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Clock,
  Edit,
  Eye,
  Gauge,
  Lightbulb,
  Play,
  Power,
  PowerOff,
  Settings,
  Timer,
  Trash2,
  User,
  Zap,
} from "lucide-react";

import type { DecisionResult } from "./types";
import { DecisionLevelBadge, DecisionSourceBadge, ExecutionModeBadge } from "./DecisionBadges";

interface DecisionListCardProps {
  decisions: DecisionResult[];
  activeTab: 'all' | 'auto' | 'manual';
  onTabChange: (tab: 'all' | 'auto' | 'manual') => void;
  onViewDetail: (decision: DecisionResult) => void;
  onExecute: (decision: DecisionResult) => void;
  onEdit: (decision: DecisionResult) => void;
  onDelete: (id: string) => void;
}

export function DecisionListCard({
  decisions,
  activeTab,
  onTabChange,
  onViewDetail,
  onExecute,
  onEdit,
  onDelete,
}: DecisionListCardProps) {
  const filteredResults = useMemo(() => {
    if (activeTab === 'all') return decisions;
    if (activeTab === 'auto') return decisions.filter((item) => item.source === 'auto');
    return decisions.filter((item) => item.source === 'manual');
  }, [activeTab, decisions]);

  return (
    <Card className="p-6">
      <Tabs value={activeTab} onValueChange={(value) => onTabChange(value as 'all' | 'auto' | 'manual')}>
        <div className="flex items-center justify-between mb-6">
          <TabsList>
            <TabsTrigger value="all">
              全部决策
              <Badge variant="secondary" className="ml-2">
                {decisions.length}
              </Badge>
            </TabsTrigger>
            <TabsTrigger value="auto">
              自动生成
              <Badge variant="secondary" className="ml-2">
                {decisions.filter((item) => item.source === 'auto').length}
              </Badge>
            </TabsTrigger>
            <TabsTrigger value="manual">
              手动添加
              <Badge variant="secondary" className="ml-2">
                {decisions.filter((item) => item.source === 'manual').length}
              </Badge>
            </TabsTrigger>
          </TabsList>
        </div>

        <TabsContent value={activeTab} className="mt-0">
          {filteredResults.length === 0 ? (
            <div className="text-center py-12 text-muted-foreground">
              <Lightbulb className="w-12 h-12 mx-auto mb-3 opacity-50" />
              <div>暂无决策结果</div>
            </div>
          ) : (
            <div className="space-y-4">
              {filteredResults.map((result) => (
                <Card key={result.id} className="p-5 hover:shadow-md transition-shadow">
                  <div className="flex items-start justify-between mb-4">
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-2 flex-wrap">
                        <DecisionSourceBadge source={result.source} />
                        <ExecutionModeBadge mode={result.executionMode} />
                        <DecisionLevelBadge level={result.level} />
                      </div>
                      <h3 className="mb-2 text-lg font-medium">{result.name}</h3>
                      <p className="text-sm text-muted-foreground">{result.recommendation}</p>
                    </div>
                  </div>

                  <div className="grid grid-cols-1 gap-4 md:grid-cols-2 mb-4 p-4 bg-muted rounded-lg">
                    <div>
                      <div className="text-xs text-muted-foreground mb-2 flex items-center gap-1">
                        <Settings className="w-3 h-3" />
                        触发条件
                      </div>
                      <div className="text-sm leading-relaxed">
                        当 <strong>{result.triggerCondition.device}</strong> 的
                        <strong className="mx-1">{result.triggerCondition.parameter}</strong>
                        <strong className="mx-1">{result.triggerCondition.operator}</strong>
                        <strong>{result.triggerCondition.value}</strong> 时
                      </div>
                    </div>
                    <div>
                      <div className="text-xs text-muted-foreground mb-2 flex items-center gap-1">
                        <Zap className="w-3 h-3" />
                        执行动作
                      </div>
                      <div className="text-sm flex items-center gap-2">
                        {result.execution.action === 'open' ? (
                          <Power className="w-4 h-4 text-success" />
                        ) : (
                          <PowerOff className="w-4 h-4 text-error" />
                        )}
                        <strong>{result.execution.action === 'open' ? '打开' : '关闭'}</strong>
                        <strong>{result.execution.device}</strong>
                        <Timer className="w-3 h-3 ml-2 text-info" />
                        <span>{result.execution.duration} 分钟</span>
                      </div>
                    </div>
                  </div>

                  <div className="flex flex-wrap items-center justify-between text-sm text-muted-foreground mb-4 gap-3">
                    <div className="flex flex-wrap items-center gap-4">
                      <div className="flex items-center gap-1">
                        <Gauge className="w-4 h-4" />
                        <span>置信度 {(result.confidence * 100).toFixed(0)}%</span>
                      </div>
                      <div className="flex items-center gap-1">
                        <Clock className="w-4 h-4" />
                        <span>{result.generatedAt}</span>
                      </div>
                      {result.createdBy && (
                        <div className="flex items-center gap-1">
                          <User className="w-4 h-4" />
                          <span>{result.createdBy}</span>
                        </div>
                      )}
                    </div>
                  </div>

                  <div className="flex flex-wrap items-center gap-2">
                    <Button size="sm" variant="outline" onClick={() => onViewDetail(result)}>
                      <Eye className="w-4 h-4 mr-1" />
                      查看详情
                    </Button>
                    <Button size="sm" onClick={() => onExecute(result)} className="bg-success hover:bg-success/90">
                      <Play className="w-4 h-4 mr-1" />
                      {result.executionMode === 'auto' ? '立即执行' : '手动执行'}
                    </Button>
                    <Button size="sm" variant="outline" onClick={() => onEdit(result)}>
                      <Edit className="w-4 h-4 mr-1" />
                      编辑
                    </Button>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => onDelete(result.id)}
                      className="text-destructive hover:text-destructive hover:border-destructive/30"
                    >
                      <Trash2 className="w-4 h-4 mr-1" />
                      删除
                    </Button>
                  </div>
                </Card>
              ))}
            </div>
          )}
        </TabsContent>
      </Tabs>
    </Card>
  );
}
