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

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

interface FinanceGoalCardProps {
  goal?: FinanceGoal;
}

export function FinanceGoalCard({ goal }: FinanceGoalCardProps) {
  if (!goal) {
    return (
      <Card className="bg-gradient-to-r from-emerald-500/5 to-green-500/10 border-emerald-500/20">
        <CardContent className="p-4 text-center text-muted-foreground">
          暂无经理分配的目标
        </CardContent>
      </Card>
    );
  }

  const progress = Math.min((goal.currentValue / goal.targetValue) * 100, 100);
  const daysLeft = Math.ceil((goal.deadline.getTime() - Date.now()) / (1000 * 60 * 60 * 24));
  
  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat('zh-CN', {
      style: 'currency',
      currency: 'CNY',
      minimumFractionDigits: 0,
      maximumFractionDigits: 0
    }).format(amount);
  };
  
  return (
    <Card className="bg-gradient-to-r from-emerald-500/5 to-green-500/10 border-emerald-500/20">
      <CardContent className="p-4">
        <div className="flex items-start justify-between mb-3">
          <div className="flex items-center gap-3">
            <div className="h-10 w-10 rounded-full bg-emerald-500/20 flex items-center justify-center">
              <DollarSign className="h-5 w-5 text-emerald-500" />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <p className="text-sm text-muted-foreground">来自经理的目标</p>
                <Badge className={`text-xs ${
                  goal.priority === 'high' ? 'bg-amber-500/20 text-amber-600' :
                  goal.priority === 'medium' ? 'bg-blue-500/20 text-blue-600' :
                  'bg-muted text-muted-foreground'
                }`}>
                  {goal.priority === 'high' ? '重要' : goal.priority === 'medium' ? '一般' : '低'}
                </Badge>
              </div>
              <p className="font-semibold">{goal.title}</p>
            </div>
          </div>
          
          <div className="text-right">
            <div className="flex items-center gap-1 text-xs text-muted-foreground">
              <Clock className="h-3 w-3" />
              剩余 {daysLeft} 天
            </div>
          </div>
        </div>
        
        <p className="text-sm text-muted-foreground mb-3">{goal.description}</p>
        
        <div className="space-y-2">
          <div className="flex items-center justify-between text-sm">
            <span className="text-muted-foreground">完成进度</span>
            <span className="font-medium">
              {goal.unit === '元' ? formatCurrency(goal.currentValue) : goal.currentValue} / 
              {goal.unit === '元' ? formatCurrency(goal.targetValue) : goal.targetValue} {goal.unit !== '元' && goal.unit}
            </span>
          </div>
          <Progress value={progress} className="h-2" />
          <div className="flex items-center justify-between text-xs text-muted-foreground">
            <span>分配者: {goal.assignedBy}</span>
            <span>{progress.toFixed(1)}% 完成</span>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
