/**
 * filekorolheader: 企业详情对话框组件 - 企业详情展示和审核操作界面
 * 功能：企业详细信息展示、多标签页布局、审核操作界面
 * 路径：/central-config/tenant/enterprise-audit/components/EnterpriseDetailDialog
 * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn/ui组件，TypeScript类型安全
 */

import { Enterprise } from './enterpriseAuditApi';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
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 { Building2, FileText, CreditCard, User, CheckCircle, XCircle } from 'lucide-react';

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

export function EnterpriseDetailDialog({
  open,
  onOpenChange,
  enterprise,
  auditReason,
  onAuditReasonChange,
  onApprove,
  onReject,
  loading = false
}: EnterpriseDetailDialogProps) {
  const getAuditStatusBadge = (status: Enterprise['auditStatus']) => {
    switch (status) {
      case '草稿':
        return <Badge variant="secondary">草稿</Badge>;
      case '待审核':
        return <Badge className="bg-yellow-100 text-yellow-700">待审核</Badge>;
      case '已通过':
        return <Badge className="bg-green-100 text-green-700">已通过</Badge>;
      case '已驳回':
        return <Badge className="bg-red-100 text-red-700">已驳回</Badge>;
      default:
        return <Badge variant="outline">{status}</Badge>;
    }
  };

  if (!enterprise) return null;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="w-[80vw] max-w-6xl max-h-[90vh]">
        <DialogHeader>
          <div className="flex items-center justify-between pr-8">
            <DialogTitle>企业详情审核</DialogTitle>
            <div className="flex gap-2">
              {getAuditStatusBadge(enterprise.auditStatus)}
            </div>
          </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">
                <Building2 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-6">
              {/* 企业基本信息 */}
              <div className="space-y-4">
                <h4 className="font-semibold text-lg">企业基本信息</h4>
                <div className="grid grid-cols-2 gap-6">
                  <div>
                    <Label>企业名称</Label>
                    <div className="mt-1.5 p-3 bg-gray-50 rounded-md">{enterprise.name}</div>
                  </div>
                  <div>
                    <Label>企业类型</Label>
                    <div className="mt-1.5 p-3 bg-gray-50 rounded-md">{enterprise.type}</div>
                  </div>
                  <div>
                    <Label>所在地区</Label>
                    <div className="mt-1.5 p-3 bg-gray-50 rounded-md">
                      {enterprise.province} {enterprise.city} {enterprise.district}
                    </div>
                  </div>
                  <div>
                    <Label>详细地址</Label>
                    <div className="mt-1.5 p-3 bg-gray-50 rounded-md">{enterprise.address}</div>
                  </div>
                  <div>
                    <Label>登记人</Label>
                    <div className="mt-1.5 p-3 bg-gray-50 rounded-md">{enterprise.registrant}</div>
                  </div>
                  <div>
                    <Label>联系电话</Label>
                    <div className="mt-1.5 p-3 bg-gray-50 rounded-md">{enterprise.contactPhone}</div>
                  </div>
                </div>
              </div>

              {/* 审核信息 */}
              <div className="space-y-4">
                <h4 className="font-semibold text-lg">审核信息</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">{enterprise.createdAt}</div>
                    </div>
                    <div>
                      <Label className="text-xs">更新时间</Label>
                      <div className="mt-1.5 text-base">{enterprise.updatedAt}</div>
                    </div>
                    {enterprise.submitTime && (
                      <div>
                        <Label className="text-xs">提交时间</Label>
                        <div className="mt-1.5 text-base">{enterprise.submitTime}</div>
                      </div>
                    )}
                    {enterprise.auditTime && (
                      <div>
                        <Label className="text-xs">审核时间</Label>
                        <div className="mt-1.5 text-base">{enterprise.auditTime}</div>
                      </div>
                    )}
                    {enterprise.auditor && (
                      <div>
                        <Label className="text-xs">审核人</Label>
                        <div className="mt-1.5 text-base">{enterprise.auditor}</div>
                      </div>
                    )}
                    {enterprise.auditComment && (
                      <div className="col-span-2 pt-4 mt-2 border-t">
                        <Label className="text-xs">已有审核意见</Label>
                        <div className="mt-1.5 text-base p-3 bg-white rounded-md">
                          {enterprise.auditComment}
                        </div>
                      </div>
                    )}
                  </div>
                </Card>
              </div>

              {/* 审核操作区 - 仅待审核状态显示 */}
              {enterprise.auditStatus === '待审核' && (
                <div className="space-y-4">
                  <h4 className="font-semibold text-lg">审核操作</h4>
                  <div>
                    <Label>审核意见</Label>
                    <div className="text-xs text-muted-foreground mt-1">
                      驳回时必填，通过时可选择性填写
                    </div>
                    <Textarea
                      value={auditReason}
                      onChange={(e) => onAuditReasonChange(e.target.value)}
                      rows={4}
                      placeholder="请填写审核意见..."
                      className="mt-2"
                    />
                  </div>
                </div>
              )}
            </TabsContent>

            {/* 其他信息 */}
            <TabsContent value="other" className="space-y-4">
              <div className="grid grid-cols-2 gap-6">
                <div>
                  <Label>公司规模</Label>
                  <div className="mt-1.5 p-3 bg-gray-50 rounded-md">{enterprise.companySize || '-'}</div>
                </div>
                <div>
                  <Label>注册资本</Label>
                  <div className="mt-1.5 p-3 bg-gray-50 rounded-md">{enterprise.registeredCapital || '-'}</div>
                </div>
                <div>
                  <Label>成立时间</Label>
                  <div className="mt-1.5 p-3 bg-gray-50 rounded-md">{enterprise.establishmentDate || '-'}</div>
                </div>
                <div>
                  <Label>发票类型</Label>
                  <div className="mt-1.5 p-3 bg-gray-50 rounded-md">{enterprise.invoiceType || '-'}</div>
                </div>
                <div className="col-span-2">
                  <Label>社会信用代码</Label>
                  <div className="mt-1.5 p-3 bg-gray-50 rounded-md">
                    <code className="text-sm font-mono">{enterprise.socialCreditCode || '-'}</code>
                  </div>
                </div>
                <div className="col-span-2">
                  <Label>经营范围</Label>
                  <div className="mt-1.5 p-3 bg-gray-50 rounded-md min-h-[80px] whitespace-pre-wrap">
                    {enterprise.businessScope || '-'}
                  </div>
                </div>
              </div>
            </TabsContent>

            {/* 开户信息 */}
            <TabsContent value="bank" className="space-y-4">
              <div className="grid grid-cols-2 gap-6">
                <div>
                  <Label>银行账号</Label>
                  <div className="mt-1.5 p-3 bg-gray-50 rounded-md">
                    {enterprise.bankAccount ? (
                      <code className="text-sm font-mono">{enterprise.bankAccount}</code>
                    ) : '-'}
                  </div>
                </div>
                <div>
                  <Label>开户行</Label>
                  <div className="mt-1.5 p-3 bg-gray-50 rounded-md">{enterprise.bankName || '-'}</div>
                </div>
                <div className="col-span-2">
                  <Label>开户行全称</Label>
                  <div className="mt-1.5 p-3 bg-gray-50 rounded-md">{enterprise.bankFullName || '-'}</div>
                </div>
                <div className="col-span-2">
                  <Label>开户行地址</Label>
                  <div className="mt-1.5 p-3 bg-gray-50 rounded-md">{enterprise.bankAddress || '-'}</div>
                </div>
              </div>
            </TabsContent>

            {/* 法人信息 */}
            <TabsContent value="legal" className="space-y-4">
              <div className="grid grid-cols-2 gap-6">
                <div>
                  <Label>法人姓名</Label>
                  <div className="mt-1.5 p-3 bg-gray-50 rounded-md">{enterprise.legalPerson || '-'}</div>
                </div>
                <div>
                  <Label>登记人</Label>
                  <div className="mt-1.5 p-3 bg-gray-50 rounded-md">{enterprise.registrant || '-'}</div>
                </div>
              </div>
            </TabsContent>
          </Tabs>

          </ScrollArea>

        {/* 底部操作按钮 */}
        <div className="flex justify-end gap-3 mt-6 pt-4 border-t">
          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={loading}>
            关闭
          </Button>
          {enterprise.auditStatus === '待审核' && (
            <>
              <Button
                variant="destructive"
                onClick={onReject}
                disabled={loading}
              >
                <XCircle className="w-4 h-4 mr-2" />
                驳回
              </Button>
              <Button
                onClick={onApprove}
                disabled={loading}
              >
                <CheckCircle className="w-4 h-4 mr-2" />
                通过
              </Button>
            </>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}