import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import { 
  Clock, 
  CheckCircle, 
  Package, 
  Truck,
  RotateCcw,
  AlertCircle,
  Eye,
  MessageSquare
} from "lucide-react";
import { PLACEHOLDER_PRODUCT_SMALL } from "@/utils/placeholderImage";

interface AfterSalesProgressInfo {
  id: string;
  orderNumber: string;
  productName: string;
  productImage: string;
  type: 'return' | 'exchange' | 'repair';
  status: 'pending' | 'approved' | 'processing' | 'shipped' | 'completed' | 'rejected';
  progress: number;
  currentStep: string;
  createdAt: string;
  estimatedCompletion?: string;
  trackingNumber?: string;
  amount?: number;
}

interface AfterSalesProgressCardProps {
  afterSalesInfo: AfterSalesProgressInfo[];
  onViewDetails?: (id: string) => void;
  onContactService?: (afterSalesId: string) => void;
}

export function AfterSalesProgressCard({ 
  afterSalesInfo, 
  onViewDetails, 
  onContactService 
}: AfterSalesProgressCardProps) {
  
  const getStatusIcon = (status: string) => {
    switch (status) {
      case "pending": return <Clock className="w-4 h-4" />;
      case "approved": return <CheckCircle className="w-4 h-4" />;
      case "processing": return <Package className="w-4 h-4" />;
      case "shipped": return <Truck className="w-4 h-4" />;
      case "completed": return <CheckCircle className="w-4 h-4" />;
      case "rejected": return <AlertCircle className="w-4 h-4" />;
      default: return <Clock className="w-4 h-4" />;
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case "pending": return "bg-yellow-100 text-yellow-800 border-yellow-200";
      case "approved": return "bg-blue-100 text-blue-800 border-blue-200";
      case "processing": return "bg-orange-100 text-orange-800 border-orange-200";
      case "shipped": return "bg-purple-100 text-purple-800 border-purple-200";
      case "completed": return "bg-green-100 text-green-800 border-green-200";
      case "rejected": return "bg-red-100 text-red-800 border-red-200";
      default: return "bg-muted text-muted-foreground border-border";
    }
  };

  const getStatusText = (status: string) => {
    switch (status) {
      case "pending": return "待审核";
      case "approved": return "已审核";
      case "processing": return "处理中";
      case "shipped": return "已发货";
      case "completed": return "已完成";
      case "rejected": return "已拒绝";
      default: return status;
    }
  };

  const getTypeText = (type: string) => {
    switch (type) {
      case "return": return "退货";
      case "exchange": return "换货";
      case "repair": return "维修";
      default: return type;
    }
  };

  const getTypeIcon = (type: string) => {
    switch (type) {
      case "return": return <RotateCcw className="w-4 h-4" />;
      case "exchange": return <Package className="w-4 h-4" />;
      case "repair": return <AlertCircle className="w-4 h-4" />;
      default: return <Package className="w-4 h-4" />;
    }
  };

  const getProgressColor = (progress: number) => {
    if (progress >= 100) return "bg-green-500";
    if (progress >= 75) return "bg-blue-500";
    if (progress >= 50) return "bg-orange-500";
    return "bg-yellow-500";
  };

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
      {afterSalesInfo.map((item) => (
        <Card key={item.id} className="border border-border bg-card">
          <CardHeader className="pb-3">
            <div className="flex items-center justify-between">
              <CardTitle className="text-base flex items-center gap-2">
                {getTypeIcon(item.type)}
                {getTypeText(item.type)}
              </CardTitle>
              <Badge className={`${getStatusColor(item.status)} flex items-center gap-1 text-xs`}>
                {getStatusIcon(item.status)}
                {getStatusText(item.status)}
              </Badge>
            </div>
          </CardHeader>
          
          <CardContent className="space-y-3">
            {/* 商品信息 */}
            <div className="flex gap-3">
              <div className="w-12 h-12 rounded-lg overflow-hidden bg-muted flex-shrink-0">
                <img
                  src={item.productImage}
                  alt={item.productName}
                  className="w-full h-full object-cover"
                  onError={(e) => {
                    e.currentTarget.src = PLACEHOLDER_PRODUCT_SMALL;
                  }}
                />
              </div>
              <div className="flex-1 min-w-0">
                <h4 className="font-medium text-foreground text-sm truncate">{item.productName}</h4>
                <p className="text-xs text-muted-foreground">#{item.orderNumber}</p>
                {item.amount && (
                  <p className="text-xs text-muted-foreground">¥{item.amount.toFixed(2)}</p>
                )}
              </div>
            </div>

            {/* 进度条 */}
            <div className="space-y-1">
              <div className="flex justify-between text-xs">
                <span className="text-muted-foreground">进度</span>
                <span className="font-medium">{item.progress}%</span>
              </div>
              <div className="relative">
                <Progress value={item.progress} className="h-1.5" />
                <div 
                  className={`absolute top-0 left-0 h-1.5 rounded-full transition-all duration-300 ${getProgressColor(item.progress)}`}
                  style={{ width: `${item.progress}%` }}
                />
              </div>
              <p className="text-xs text-muted-foreground line-clamp-1">{item.currentStep}</p>
            </div>

            {/* 时间信息 */}
            <div className="text-xs space-y-1">
              <div>
                <span className="text-muted-foreground">申请:</span>
                <span className="ml-1">{item.createdAt}</span>
              </div>
              {item.estimatedCompletion && (
                <div>
                  <span className="text-muted-foreground">预计:</span>
                  <span className="ml-1">{item.estimatedCompletion}</span>
                </div>
              )}
            </div>

            {/* 物流信息 */}
            {item.trackingNumber && (
              <div className="p-2 bg-muted rounded-lg">
                <div className="flex items-center gap-1 mb-1">
                  <Truck className="w-3 h-3 text-muted-foreground" />
                  <span className="text-xs font-medium">物流</span>
                </div>
                <p className="text-xs text-muted-foreground truncate">
                  {item.trackingNumber}
                </p>
              </div>
            )}

            {/* 操作按钮 */}
            <div className="flex gap-1 pt-1">
              <Button 
                variant="outline" 
                size="sm" 
                className="flex-1 text-xs"
                onClick={() => onViewDetails?.(item.id)}
              >
                <Eye className="w-3 h-3 mr-1" />
                详情
              </Button>
              <Button 
                variant="outline" 
                size="sm" 
                className="flex-1 text-xs"
                onClick={() => onContactService?.(item.id)}
              >
                <MessageSquare className="w-3 h-3 mr-1" />
                客服
              </Button>
            </div>
          </CardContent>
        </Card>
      ))}
      
      {afterSalesInfo.length === 0 && (
        <div className="col-span-full">
          <Card className="p-8 text-center">
            <Package className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
            <h3 className="text-lg font-medium text-foreground mb-2">暂无售后申请</h3>
            <p className="text-muted-foreground">您当前没有进行中的售后申请</p>
          </Card>
        </div>
      )}
    </div>
  );
}