'use client';

import React from 'react';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { FileText, Building, CreditCard, User } from 'lucide-react';
import { AuditRecord, Enterprise, AuditStatus } from '../types';

interface AuditHistoryDetailDialogProps {
  record: AuditRecord | null;
  enterprise: Enterprise | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export function AuditHistoryDetailDialog({
  record,
  enterprise,
  open,
  onOpenChange
}: AuditHistoryDetailDialogProps) {
  const getResultBadge = (result: AuditStatus) => {
    switch (result) {
      case 'pending':
        return <Badge className="bg-yellow-100 text-yellow-700">待审核</Badge>;
      case 'approved':
        return <Badge className="bg-green-100 text-green-700">已通过</Badge>;
      case 'rejected':
        return <Badge className="bg-red-100 text-red-700">已驳回</Badge>;
      default:
        return <Badge>{result}</Badge>;
    }
  };

  const getTypeBadge = (type: string) => {
    switch (type) {
      case 'register':
        return <Badge className="bg-blue-100 text-blue-700">注册审核</Badge>;
      case 'update':
        return <Badge className="bg-purple-100 text-purple-700">变更审核</Badge>;
      default:
        return <Badge>{type}</Badge>;
    }
  };

  if (!record || !enterprise) return null;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[90vh]">
        <DialogHeader>
          <DialogTitle>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <FileText className="w-5 h-5 text-green-600" />
                <span>审核记录详情</span>
              </div>
              <div className="flex items-center gap-2">
                {getResultBadge(record.result)}
              </div>
            </div>
          </DialogTitle>
          <DialogDescription className="sr-only">
            查看企业审核的历史记录详情
          </DialogDescription>
        </DialogHeader>

        <ScrollArea className="max-h-[calc(90vh-120px)]">
          <div className="space-y-6 pr-6">
            {/* 企业信息标签页 */}
            <Tabs defaultValue="basic" className="w-full">
              <TabsList className="grid w-full grid-cols-4">
                <TabsTrigger value="basic">
                  <Building className="w-4 h-4 mr-2" />
                  基本信息
                </TabsTrigger>
                <TabsTrigger value="other">
                  <FileText className="w-4 h-4 mr-2" />
                  其他信息
                </TabsTrigger>
                <TabsTrigger value="bank">
                  <CreditCard className="w-4 h-4 mr-2" />
                  开户信息
                </TabsTrigger>
                <TabsTrigger value="legal">
                  <User className="w-4 h-4 mr-2" />
                  法人信息
                </TabsTrigger>
              </TabsList>

              {/* 基本信息 */}
              <TabsContent value="basic" className="space-y-4">
                <div className="grid grid-cols-2 gap-6">
                  <div>
                    <Label>企业名称</Label>
                    <div className="field-value">{enterprise.name}</div>
                  </div>
                  <div>
                    <Label>企业类型</Label>
                    <div className="field-value">{enterprise.type}</div>
                  </div>
                  <div>
                    <Label>所在地区</Label>
                    <div className="field-value">
                      {enterprise.province} {enterprise.city} {enterprise.district}
                    </div>
                  </div>
                  <div>
                    <Label>详细地址</Label>
                    <div className="field-value">{enterprise.address}</div>
                  </div>
                  <div>
                    <Label>登记人</Label>
                    <div className="field-value">{enterprise.registrant}</div>
                  </div>
                  <div>
                    <Label>联系电话</Label>
                    <div className="field-value">{enterprise.contactPhone}</div>
                  </div>
                </div>
              </TabsContent>

              {/* 其他信息 */}
              <TabsContent value="other" className="space-y-4">
                <div className="grid grid-cols-2 gap-6">
                  <div>
                    <Label>公司规模</Label>
                    <div className="field-value">{enterprise.companySize || '-'}</div>
                  </div>
                  <div>
                    <Label>注册资本</Label>
                    <div className="field-value">{enterprise.registeredCapital || '-'}</div>
                  </div>
                  <div>
                    <Label>成立时间</Label>
                    <div className="field-value">{enterprise.establishmentDate || '-'}</div>
                  </div>
                  <div>
                    <Label>发票类型</Label>
                    <div className="field-value">{enterprise.invoiceType || '-'}</div>
                  </div>
                  <div className="col-span-2">
                    <Label>社会信用代码</Label>
                    <div className="field-value">
                      <code className="text-sm font-mono">
                        {enterprise.socialCreditCode}
                      </code>
                    </div>
                  </div>
                  <div className="col-span-2">
                    <Label>经营范围</Label>
                    <div className="field-value">{enterprise.businessScope || '-'}</div>
                  </div>
                  <div className="col-span-2">
                    <Label>营业执照</Label>
                    <div className="mt-2">
                      {enterprise.businessLicense ? (
                        <img
                          src={enterprise.businessLicense}
                          alt="营业执照"
                          className="w-64 h-auto border rounded-lg"
                        />
                      ) : (
                        <span className="text-muted-foreground">未上传</span>
                      )}
                    </div>
                  </div>
                </div>
              </TabsContent>

              {/* 开户信息 */}
              <TabsContent value="bank" className="space-y-4">
                <div className="grid grid-cols-2 gap-6">
                  <div>
                    <Label>银行账号</Label>
                    <div className="field-value">
                      {enterprise.bankAccount ? (
                        <code className="text-sm font-mono">
                          {enterprise.bankAccount}
                        </code>
                      ) : '-'}
                    </div>
                  </div>
                  <div>
                    <Label>开户行</Label>
                    <div className="field-value">{enterprise.bankName || '-'}</div>
                  </div>
                  <div className="col-span-2">
                    <Label>开户行全称</Label>
                    <div className="field-value">{enterprise.bankFullName || '-'}</div>
                  </div>
                  <div className="col-span-2">
                    <Label>开户行地址</Label>
                    <div className="field-value">{enterprise.bankAddress || '-'}</div>
                  </div>
                  <div className="col-span-2">
                    <Label>开户许可证</Label>
                    <div className="mt-2">
                      {enterprise.bankLicense ? (
                        <img
                          src={enterprise.bankLicense}
                          alt="开户许可证"
                          className="w-64 h-auto border rounded-lg"
                        />
                      ) : (
                        <span className="text-muted-foreground">未上传</span>
                      )}
                    </div>
                  </div>
                </div>
              </TabsContent>

              {/* 法人信息 */}
              <TabsContent value="legal" className="space-y-4">
                <div className="grid grid-cols-1 gap-6">
                  <div>
                    <Label>法人名称</Label>
                    <div className="field-value">{enterprise.legalPerson || '-'}</div>
                  </div>
                  <div>
                    <Label>身份证正面</Label>
                    <div className="mt-2">
                      {enterprise.idCardFront ? (
                        <img
                          src={enterprise.idCardFront}
                          alt="身份证正面"
                          className="w-80 h-auto border rounded-lg"
                        />
                      ) : (
                        <span className="text-muted-foreground">未上传</span>
                      )}
                    </div>
                  </div>
                  <div>
                    <Label>身份证反面</Label>
                    <div className="mt-2">
                      {enterprise.idCardBack ? (
                        <img
                          src={enterprise.idCardBack}
                          alt="身份证反面"
                          className="w-80 h-auto border rounded-lg"
                        />
                      ) : (
                        <span className="text-muted-foreground">未上传</span>
                      )}
                    </div>
                  </div>
                </div>
              </TabsContent>
            </Tabs>

            {/* 审核信息 */}
            <div className="mt-6 pt-6 border-t">
              <h4 className="mb-4 font-bold">审核信息</h4>
              <Card className="p-6 bg-gray-50 border">
                <div className="grid grid-cols-2 gap-x-8 gap-y-4">
                  <div>
                    <Label className="text-xs">审核类型</Label>
                    <div className="mt-1.5 text-base">
                      {getTypeBadge(record.auditType)}
                    </div>
                  </div>
                  <div>
                    <Label className="text-xs">提交时间</Label>
                    <div className="mt-1.5 text-base">
                      {new Date(record.submitTime).toLocaleString('zh-CN')}
                    </div>
                  </div>
                  {record.auditTime && (
                    <div>
                      <Label className="text-xs">审核时间</Label>
                      <div className="mt-1.5 text-base">
                        {new Date(record.auditTime).toLocaleString('zh-CN')}
                      </div>
                    </div>
                  )}
                  {record.auditor && (
                    <div>
                      <Label className="text-xs">审核人</Label>
                      <div className="mt-1.5 text-base">
                        {record.auditor}
                      </div>
                    </div>
                  )}
                  {record.reason && (
                    <div className="col-span-2 pt-4 mt-2 border-t">
                      <Label className="text-xs">驳回原因</Label>
                      <div className="mt-1.5 text-base text-red-800">
                        {record.reason}
                      </div>
                    </div>
                  )}
                  {record.remarks && (
                    <div className="col-span-2 pt-4 mt-2 border-t">
                      <Label className="text-xs">审核备注</Label>
                      <div className="mt-1.5 text-base">
                        {record.remarks}
                      </div>
                    </div>
                  )}
                </div>
              </Card>
            </div>

            {/* 审核流程时间线 */}
            <div className="pt-6 border-t">
              <h4 className="mb-4 font-bold">审核流程</h4>
              <div className="space-y-4">
                <div className="flex items-start gap-3">
                  <div className="w-2 h-2 rounded-full bg-blue-600 mt-2" />
                  <div>
                    <div className="text-sm">提交审核</div>
                    <div className="text-xs text-muted-foreground">
                      {new Date(record.submitTime).toLocaleString('zh-CN')}
                    </div>
                  </div>
                </div>
                {record.auditTime && (
                  <div className="flex items-start gap-3">
                    <div className={`w-2 h-2 rounded-full mt-2 ${
                      record.result === 'approved' ? 'bg-green-600' : 'bg-red-600'
                    }`} />
                    <div>
                      <div className="text-sm">
                        {record.result === 'approved' ? '审核通过' : '审核驳回'}
                      </div>
                      <div className="text-xs text-muted-foreground">
                        {new Date(record.auditTime).toLocaleString('zh-CN')}
                        {record.auditor && ` · ${record.auditor}`}
                      </div>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </ScrollArea>

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