import React, { useState, useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import Editor from '@/components/Editor';
import { ArrowLeft, Loader2 } from 'lucide-react';
import { getFormDataById } from './service';
import type { FormDataResponse, FormDataStatus, FormDataBusinessType } from './types';

/**
 * 表单数据详情页
 */
const FormDataDetail: React.FC = () => {
  const navigate = useNavigate();
  const { id } = useParams<{ id: string }>();
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<FormDataResponse | null>(null);

  // 加载数据
  useEffect(() => {
    if (id) {
      loadData(Number(id));
    }
  }, [id]);

  const loadData = async (dataId: number) => {
    setLoading(true);
    try {
      const result = await getFormDataById(dataId);
      setData(result);
    } catch (error) {
      console.error('加载表单数据失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 返回列表
  const handleBack = () => {
    navigate(-1); // 返回上一页，避免硬编码路径
  };

  // 状态徽章
  const getStatusBadge = (status: FormDataStatus) => {
    const statusMap: Record<FormDataStatus, { variant: 'default' | 'secondary' | 'destructive' | 'success' | 'outline'; text: string }> = {
      DRAFT: { variant: 'outline', text: '草稿' },
      SUBMITTED: { variant: 'success', text: '已提交' },
      COMPLETED: { variant: 'default', text: '已完成' },
    };
    const statusInfo = statusMap[status];
    return <Badge variant={statusInfo.variant}>{statusInfo.text}</Badge>;
  };

  // 业务类型徽章
  const getBusinessTypeBadge = (type: FormDataBusinessType) => {
    const typeMap: Record<FormDataBusinessType, { variant: 'default' | 'secondary' | 'outline'; text: string }> = {
      STANDALONE: { variant: 'outline', text: '独立' },
      WORKFLOW: { variant: 'default', text: '工作流' },
      ORDER: { variant: 'secondary', text: '订单' },
    };
    const typeInfo = typeMap[type];
    return <Badge variant={typeInfo.variant}>{typeInfo.text}</Badge>;
  };

  // 描述项组件
  const DescriptionItem: React.FC<{ label: string; value: React.ReactNode }> = ({ label, value }) => (
    <div className="flex py-3 border-b last:border-b-0">
      <div className="w-32 text-muted-foreground flex-shrink-0">{label}</div>
      <div className="flex-1 font-medium">{value}</div>
    </div>
  );

  if (loading) {
    return (
      <div className="p-6">
        <Card>
          <CardContent className="py-12">
            <div className="flex items-center justify-center">
              <Loader2 className="h-8 w-8 animate-spin mr-2" />
              <span>加载中...</span>
            </div>
          </CardContent>
        </Card>
      </div>
    );
  }

  if (!data) {
    return (
      <div className="p-6">
        <Card>
          <CardContent className="py-12">
            <div className="text-center text-muted-foreground">数据不存在</div>
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <div className="p-6">
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-2xl font-bold">表单数据详情</h2>
        <Button variant="outline" onClick={handleBack}>
          <ArrowLeft className="h-4 w-4 mr-2" />
          返回列表
        </Button>
      </div>
      
      <div className="grid grid-cols-2 gap-4">
        <Card>
          <CardHeader>
            <CardTitle>表单数据详情</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-0">
              <DescriptionItem label="表单标识" value={data.formKey} />
              <DescriptionItem label="表单版本" value={`v${data.formVersion}`} />
              <DescriptionItem label="业务类型" value={getBusinessTypeBadge(data.businessType)} />
              <DescriptionItem label="业务标识" value={data.businessKey || '-'} />
              <DescriptionItem label="提交人" value={data.submitter || '-'} />
              <DescriptionItem label="提交时间" value={data.submitTime || '-'} />
              <DescriptionItem label="状态" value={getStatusBadge(data.status)} />
              <DescriptionItem label="创建时间" value={data.createTime || '-'} />
              <DescriptionItem label="更新时间" value={data.updateTime || '-'} />
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>表单数据</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="border rounded-md overflow-hidden">
              <Editor
                height="600px"
                language="json"
                value={JSON.stringify(data.data, null, 2)}
                options={{
                  readOnly: true,
                  minimap: { enabled: false },
                  fontSize: 14,
                  lineNumbers: 'on',
                  scrollBeyondLastLine: false,
                  automaticLayout: true,
                  wordWrap: 'on',
                  theme: 'vs-light'
                }}
              />
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
};

export default FormDataDetail;
