"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import Link from "next/link";
import { ActionSuggestion } from "@/types/dashboard-health";

interface ActionSuggestionsProps {
  suggestions: ActionSuggestion[];
  className?: string;
}

export function ActionSuggestions({ suggestions, className }: ActionSuggestionsProps) {
  return (
    <Card className={className}>
      <CardHeader>
        <CardTitle className="text-lg flex items-center gap-2">
          <span>🎯</span>
          <span>为您推荐的下一步行动</span>
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-3">
        {suggestions.length === 0 ? (
          <div className="flex h-[100px] flex-col items-center justify-center text-muted-foreground">
            <p>暂无行动建议</p>
          </div>
        ) : (
          suggestions.map((suggestion) => (
            <ActionItem key={suggestion.id} suggestion={suggestion} />
          ))
        )}
      </CardContent>
    </Card>
  );
}

interface ActionItemProps {
  suggestion: ActionSuggestion;
}

function ActionItem({ suggestion }: ActionItemProps) {
  const priorityConfig = {
    primary: {
      bg: "bg-amber-50 border-amber-200",
      icon: suggestion.icon,
      badge: "bg-amber-100 text-amber-700",
      badgeText: "主要",
    },
    secondary: {
      bg: "bg-blue-50 border-blue-200",
      icon: suggestion.icon,
      badge: "bg-blue-100 text-blue-700",
      badgeText: "次要",
    },
    optional: {
      bg: "bg-gray-50 border-gray-200",
      icon: suggestion.icon,
      badge: "bg-gray-100 text-gray-600",
      badgeText: "可选",
    },
  }[suggestion.type];

  return (
    <div className={cn("rounded-lg border p-4 transition-colors hover:bg-gray-50/50", priorityConfig.bg)}>
      <div className="flex items-start justify-between gap-4">
        <div className="flex items-start gap-3">
          <span className="text-2xl">{priorityConfig.icon}</span>
          <div className="flex flex-col gap-1">
            <div className="flex items-center gap-2">
              <span className={cn("inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium", priorityConfig.badge)}>
                {priorityConfig.badgeText}
              </span>
            </div>
            <h4 className="font-medium">{suggestion.title}</h4>
            <p className="text-sm text-muted-foreground">{suggestion.description}</p>
          </div>
        </div>

        <Link href={suggestion.href}>
          <Button variant="outline" size="sm" className="shrink-0">
            查看
          </Button>
        </Link>
      </div>
    </div>
  );
}
