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

interface AfterSalesStatusDisplayProps {
  requests: Array<{
    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;
  }>;
  onViewDetails?: (requestId: string) => void;
  onContactService?: (requestId: string) => void;
}

const getStatusConfig = (status: string) => {
  switch (status) {
    case 'pending':
      return {
        label: '待审核',
        color: 'bg-yellow-100 text-yellow-800',
        icon: Clock,
        description: '您的申请已提交，等待客服审核'
      };
    case 'approved':
      return {
        label: '已审核',
        color: 'bg-blue-100 text-blue-800',
        icon: CheckCircle,
        description: '申请已通过审核，正在安排处理'
      };
    case 'processing':
      return {
        label: '处理中',
        color: 'bg-orange-100 text-orange-800',
        icon: Package,
        description: '正在处理您的请求'
      };
    case 'shipped':
      return {
        label: '已发货',
        color: 'bg-purple-100 text-purple-800',
        icon: Truck,
        description: '商品已发出，请注意查收'
      };
    case 'completed':
      return {
        label: '已完成',
        color: 'bg-green-100 text-green-800',
        icon: CheckCircle,
        description: '售后服务已完成'
      };
    case 'rejected':
      return {
        label: '已拒绝',
        color: 'bg-red-100 text-red-800',
        icon: XCircle,
        description: '申请未通过审核'
      };
    default:
      return {
        label: status,
        color: 'bg-muted text-foreground',
        icon: Clock,
        description: '未知状态'
      };
  }
};

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

export function AfterSalesStatusDisplay({
  requests,
  onViewDetails,
  onContactService
}: AfterSalesStatusDisplayProps) {
  if (requests.length === 0) {
    return (
      <Card className="mt-3">
        <CardContent className="flex flex-col items-center justify-center py-8">
          <Package className="h-12 w-12 text-muted-foreground mb-4" />
          <p className="text-muted-foreground text-center">暂无售后申请记录</p>
        </CardContent>
      </Card>
    );
  }

  return (
    <div className="mt-3 space-y-3">
      {requests.map((request) => {
        const statusConfig = getStatusConfig(request.status);
        const StatusIcon = statusConfig.icon;
        
        return (
          <Card key={request.id} className="border border-border">
            <CardHeader className="pb-3">
              <div className="flex items-start justify-between">
                <div className="flex items-center space-x-3">
                  {request.productImage && (
                    <img
                      src={request.productImage}
                      alt={request.productName}
                      className="w-12 h-12 rounded-lg object-cover"
                    />
                  )}
                  <div>
                    <CardTitle className="text-base">{request.productName}</CardTitle>
                    <div className="flex items-center space-x-2 mt-1">
                      <Badge variant="outline" className="text-xs">
                        {getTypeLabel(request.type)}
                      </Badge>
                      <span className="text-sm text-muted-foreground">
                        订单 #{request.orderNumber}
                      </span>
                    </div>
                  </div>
                </div>
                
                <Badge className={statusConfig.color} variant="secondary">
                  <StatusIcon className="w-3 h-3 mr-1" />
                  {statusConfig.label}
                </Badge>
              </div>
            </CardHeader>
            
            <CardContent className="space-y-4">
              {/* 进度条 */}
              <div className="space-y-2">
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">处理进度</span>
                  <span className="font-medium">{request.progress}%</span>
                </div>
                <Progress value={request.progress} className="h-2" />
                <p className="text-sm text-muted-foreground">{request.currentStep}</p>
              </div>

              {/* 状态描述 */}
              <div className="bg-muted/50 rounded-lg p-3">
                <p className="text-sm">{statusConfig.description}</p>
                {request.estimatedCompletion && (
                  <p className="text-xs text-muted-foreground mt-1">
                    预计完成时间：{request.estimatedCompletion}
                  </p>
                )}
              </div>

              {/* 物流信息 */}
              {request.trackingNumber && (
                <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
                  <div className="flex items-center space-x-2">
                    <Truck className="w-4 h-4 text-blue-600" />
                    <span className="text-sm font-medium text-blue-900">物流信息</span>
                  </div>
                  <p className="text-sm text-blue-700 mt-1">
                    快递单号：{request.trackingNumber}
                  </p>
                </div>
              )}

              {/* 退款金额 */}
              {request.amount && request.type === 'return' && (
                <div className="bg-green-50 border border-green-200 rounded-lg p-3">
                  <p className="text-sm text-green-700">
                    退款金额：¥{request.amount.toFixed(2)}
                  </p>
                </div>
              )}

              {/* 操作按钮 */}
              <div className="flex space-x-2 pt-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => onViewDetails?.(request.id)}
                  className="flex-1"
                >
                  <Eye className="w-4 h-4 mr-1" />
                  查看详情
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => onContactService?.(request.id)}
                  className="flex-1"
                >
                  <MessageSquare className="w-4 h-4 mr-1" />
                  联系客服
                </Button>
              </div>

              {/* 申请时间 */}
              <div className="text-xs text-muted-foreground pt-2 border-t border-border">
                申请时间：{new Date(request.createdAt).toLocaleString('zh-CN')}
              </div>
            </CardContent>
          </Card>
        );
      })}
    </div>
  );
}