'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 { Textarea } from '@/components/ui/textarea';
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 { Building, FileText, CreditCard, User, CheckCircle, XCircle, Image as ImageIcon } from 'lucide-react';
import { Enterprise, AuditStatus } from '../types';

interface EnterpriseDetailDialogProps {
  enterprise: Enterprise | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  auditReason: string;
  onAuditReasonChange: (reason: string) => void;
  onApprove: () => void;
  onReject: () => void;
}

export function EnterpriseDetailDialog({
  enterprise,
  open,
  onOpenChange,
  auditReason,
  onAuditReasonChange,
  onApprove,
  onReject
}: EnterpriseDetailDialogProps) {
  const getAuditStatusBadge = (status: AuditStatus) => {
    switch (status) {
      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>{status}</Badge>;
    }
  };

  if (!enterprise) return null;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-5xl max-h-[90vh]">
        <DialogHeader>
          <div className="flex items-center justify-between pr-8">
            <DialogTitle>企业详情审核</DialogTitle>
            {getAuditStatusBadge(enterprise.auditStatus)}
          </div>
          <DialogDescription className="sr-only">
            查看企业的详细信息和审核状态
          </DialogDescription>
        </DialogHeader>

        <ScrollArea className="max-h-[calc(90vh-200px)]">
          <Tabs defaultValue="basic" className="space-y-4">
            <TabsList className="grid grid-cols-4 w-full">
              <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">
                    {new Date(enterprise.createdAt).toLocaleString('zh-CN')}
                  </div>
                </div>
                {enterprise.auditTime && (
                  <div>
                    <Label className="text-xs">审核时间</Label>
                    <div className="mt-1.5 text-base">
                      {new Date(enterprise.auditTime).toLocaleString('zh-CN')}
                    </div>
                  </div>
                )}
                {enterprise.auditor && (
                  <div>
                    <Label className="text-xs">审核人</Label>
                    <div className="mt-1.5 text-base">
                      {enterprise.auditor}
                    </div>
                  </div>
                )}
                {enterprise.auditReason && (
                  <div className="col-span-2 pt-4 mt-2 border-t">
                    <Label className="text-xs">审核意见</Label>
                    <div className="mt-1.5 text-base">
                      {enterprise.auditReason}
                    </div>
                  </div>
                )}
              </div>
            </Card>

            {/* 审核操作区 - 仅待审核状态显示 */}
            {enterprise.auditStatus === 'pending' && (
              <div className="mt-6">
                <Label>审核意见</Label>
                <Textarea
                  value={auditReason}
                  onChange={(e) => onAuditReasonChange(e.target.value)}
                  rows={3}
                  placeholder="请填写审核意见（驳回时必填）..."
                  className="mt-2"
                />
              </div>
            )}
          </div>
        </ScrollArea>

        <DialogFooter className="border-t pt-4">
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            关闭
          </Button>
          {enterprise.auditStatus === 'pending' && (
            <>
              <Button variant="destructive" onClick={onReject}>
                <XCircle className="w-4 h-4 mr-2" />
                驳回
              </Button>
              <Button onClick={onApprove}>
                <CheckCircle className="w-4 h-4 mr-2" />
                通过
              </Button>
            </>
          )}
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}