/**
 * 通用目标进度卡片
 * 可用于各模块显示从经理分配的目标
 */

import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";
import { Target, Clock } from "lucide-react";

export interface GoalData {
  id: string;
  title: string;
  description?: string;
  targetValue: number;
  currentValue: number;
  unit: string;
  deadline: Date;
  assignedBy: string;
  priority: 'low' | 'medium' | 'high' | 'urgent';
}

interface GenericGoalCardProps {
  goal: GoalData;
}

export function GenericGoalCard({ goal }: GenericGoalCardProps) {
  const progress = Math.min((goal.currentValue / goal.targetValue) * 100, 100);
  const daysLeft = Math.ceil((goal.deadline.getTime() - Date.now()) / (1000 * 60 * 60 * 24));
  
  const priorityConfig: Record<string, { label: string; className: string }> = {
    low: { label: '普通', className: 'bg-muted text-muted-foreground' },
    medium: { label: '中等', className: 'bg-blue-500/20 text-blue-600' },
    high: { label: '重要', className: 'bg-amber-500/20 text-amber-600' },
    urgent: { label: '紧急', className: 'bg-destructive/20 text-destructive' }
  };
  
  const priorityInfo = priorityConfig[goal.priority] || priorityConfig.medium;
  
  return (
    <Card className="border-primary/20 bg-gradient-to-br from-primary/5 to-transparent">
      <CardContent className="p-4">
        <div className="flex items-center gap-3 mb-3">
          <div className="p-2 rounded-lg bg-primary/20">
            <Target className="h-4 w-4 text-primary" />
          </div>
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2">
              <h4 className="font-medium text-sm truncate">{goal.title}</h4>
              <Badge variant="secondary" className={`text-xs shrink-0 ${priorityInfo.className}`}>
                {priorityInfo.label}
              </Badge>
            </div>
            <p className="text-xs text-muted-foreground">来自 {goal.assignedBy}</p>
          </div>
          <div className="text-right shrink-0">
            <p className="text-lg font-bold">{goal.currentValue}{goal.unit}</p>
            <p className="text-xs text-muted-foreground">目标 {goal.targetValue}{goal.unit}</p>
          </div>
        </div>
        <div className="space-y-1.5">
          <Progress value={progress} className="h-2" />
          <div className="flex items-center justify-between text-xs text-muted-foreground">
            <span>{progress.toFixed(0)}% 完成</span>
            <span className="flex items-center gap-1">
              <Clock className="h-3 w-3" />
              {daysLeft > 0 ? `剩余 ${daysLeft} 天` : '已过期'}
            </span>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
