'use client';

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';

interface ApplicationDetailsProps {
  application: {
    id: string;
    productName: string;
    applicationTime: string;
    status: string;
    note: string;
    details: {
      companyName: string;
      companyType: string;
      contactName: string;
      contactPosition: string;
      contactPhone: string;
      companyAddress: string;
      productDescription: string;
      applicationType: string;
      adaptationType: string;
      adaptationModel: string;
      files: string[];
      additionalInfo: string;
    };
  };
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export function ApplicationDetailsDialog({
  application,
  open,
  onOpenChange,
}: ApplicationDetailsProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="text-xl">申请详情</DialogTitle>
        </DialogHeader>

        <div className="space-y-6 py-4">
          <div className="flex items-center justify-between">
            <div>
              <span className="text-sm text-gray-500">申请编号：</span>
              <span className="font-medium">{application.id}</span>
            </div>
            <Badge
              variant="outline"
              className={cn(
                'px-2 py-0.5',
                application.status === '已通过'
                  ? 'border-green-200 bg-green-50 text-green-600'
                  : application.status === '审核中'
                    ? 'border-yellow-200 bg-yellow-50 text-yellow-600'
                    : 'border-red-200 bg-red-50 text-red-600'
              )}
            >
              {application.status}
            </Badge>
          </div>

          <div>
            <h3 className="text-lg font-medium mb-3">基本信息</h3>
            <div className="grid grid-cols-2 gap-4 rounded-md bg-gray-50 p-4">
              <div>
                <p className="text-sm text-gray-500">公司名称</p>
                <p>{application.details.companyName}</p>
              </div>
              <div>
                <p className="text-sm text-gray-500">公司性质</p>
                <p>{application.details.companyType}</p>
              </div>
              <div>
                <p className="text-sm text-gray-500">联系人</p>
                <p>{application.details.contactName}</p>
              </div>
              <div>
                <p className="text-sm text-gray-500">职位</p>
                <p>{application.details.contactPosition}</p>
              </div>
              <div>
                <p className="text-sm text-gray-500">联系电话</p>
                <p>{application.details.contactPhone}</p>
              </div>
              <div>
                <p className="text-sm text-gray-500">公司地址</p>
                <p>{application.details.companyAddress}</p>
              </div>
            </div>
          </div>

          <div>
            <h3 className="text-lg font-medium mb-3">产品信息</h3>
            <div className="rounded-md bg-gray-50 p-4">
              <div className="mb-4">
                <p className="text-sm text-gray-500">产品名称</p>
                <p>{application.productName}</p>
              </div>
              <div className="mb-4">
                <p className="text-sm text-gray-500">应用类型</p>
                <p>{application.details.applicationType}</p>
              </div>
              <div>
                <p className="text-sm text-gray-500">产品描述</p>
                <p>{application.details.productDescription}</p>
              </div>
            </div>
          </div>

          <div>
            <h3 className="text-lg font-medium mb-3">适配信息</h3>
            <div className="rounded-md bg-gray-50 p-4">
              <div className="mb-4">
                <p className="text-sm text-gray-500">适配类型</p>
                <p>{application.details.adaptationType}</p>
              </div>
              <div className="mb-4">
                <p className="text-sm text-gray-500">适配型号</p>
                <p>{application.details.adaptationModel}</p>
              </div>
              <div className="mb-4">
                <p className="text-sm text-gray-500">已上传文件</p>
                <p>{application.details.files.join(', ')}</p>
              </div>
              <div>
                <p className="text-sm text-gray-500">补充说明</p>
                <p>{application.details.additionalInfo}</p>
              </div>
            </div>
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            关闭
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}