import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Clock, CheckCircle, AlertCircle, XCircle, Package } from "lucide-react";
import { PLACEHOLDER_PRODUCT_SMALL } from "@/utils/placeholderImage";

interface AfterSalesRequest {
  id: string;
  orderNumber: string;
  productName: string;
  productImage: string;
  type: 'return' | 'exchange' | 'repair';
  status: 'pending' | 'approved' | 'processing' | 'completed' | 'rejected';
  reason: string;
  description: string;
  createdAt: string;
  updatedAt: string;
  amount?: number;
}

interface AfterSalesStatusCardProps {
  request: AfterSalesRequest;
  onViewDetails?: (request: AfterSalesRequest) => void;
  onCancelRequest?: (requestId: string) => void;
}

export function AfterSalesStatusCard({ 
  request, 
  onViewDetails, 
  onCancelRequest 
}: AfterSalesStatusCardProps) {
  
  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 "completed": return <CheckCircle className="w-4 h-4" />;
      case "rejected": return <XCircle className="w-4 h-4" />;
      default: return <AlertCircle 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 "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 "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 getReasonText = (reason: string) => {
    switch (reason) {
      case "quality_issue": return "质量问题";
      case "wrong_item": return "商品错误";
      case "not_as_described": return "与描述不符";
      case "damaged": return "运输损坏";
      case "personal_reason": return "个人原因";
      default: return reason;
    }
  };

  return (
    <Card className="border border-border hover:shadow-md transition-shadow">
      <CardContent className="p-6">
        <div className="flex flex-col lg:flex-row gap-6">
          {/* 商品信息 */}
          <div className="flex gap-4">
            <div className="w-20 h-20 rounded-lg overflow-hidden bg-muted flex-shrink-0">
              <img
                src={request.productImage}
                alt={request.productName}
                className="w-full h-full object-cover"
                onError={(e) => {
                  e.currentTarget.src = PLACEHOLDER_PRODUCT_SMALL;
                }}
              />
            </div>
            <div className="flex-1 min-w-0">
              <h3 className="font-semibold text-foreground truncate">{request.productName}</h3>
              <p className="text-sm text-muted-foreground">订单号: {request.orderNumber}</p>
              {request.amount && (
                <p className="text-sm text-muted-foreground">金额: ¥{request.amount.toFixed(2)}</p>
              )}
            </div>
          </div>

          {/* 申请信息 */}
          <div className="flex-1 space-y-3">
            <div className="flex flex-wrap gap-2">
              <Badge variant="outline" className="bg-primary/10 text-primary border-primary/20">
                {getTypeText(request.type)}
              </Badge>
              <Badge className={`${getStatusColor(request.status)} flex items-center gap-1`}>
                {getStatusIcon(request.status)}
                {getStatusText(request.status)}
              </Badge>
            </div>
            
            <div>
              <p className="text-sm font-medium">申请原因: {getReasonText(request.reason)}</p>
              <p className="text-sm text-muted-foreground mt-1 line-clamp-2">{request.description}</p>
            </div>

            <div className="flex justify-between text-xs text-muted-foreground">
              <span>申请时间: {request.createdAt}</span>
              <span>更新时间: {request.updatedAt}</span>
            </div>
          </div>

          {/* 操作按钮 */}
          <div className="flex flex-col gap-2 lg:w-auto">
            <Button 
              variant="outline" 
              size="sm"
              onClick={() => onViewDetails?.(request)}
            >
              查看详情
            </Button>
            {request.status === "pending" && onCancelRequest && (
              <Button 
                variant="ghost" 
                size="sm" 
                className="text-destructive hover:text-destructive hover:bg-destructive/10"
                onClick={() => onCancelRequest(request.id)}
              >
                取消申请
              </Button>
            )}
          </div>
        </div>
      </CardContent>
    </Card>
  );
}