/**
 * KRA - AI页面绘制
 * 对应 GVA: view/systemTools/autoCode/picture.vue
 */
import React, { useState } from 'react';
import { PageContainer } from '@ant-design/pro-components';
import { Card, Form, Input, Button, Radio, Checkbox, Tabs, Empty, message } from 'antd';
import WarningBar from '@/components/WarningBar/WarningBar';
import { createWeb } from '@/services/kratos/autoCode';

const { TextArea } = Input;

// 页面用途与内容板块的推荐映射
const pageTypeContentMap: Record<string, string[]> = {
  '企业官网': ['Banner轮播图', '产品/服务介绍', '功能特点展示', '客户案例', '联系表单'],
  '电商页面': ['Banner轮播图', '商品列表', '商品卡片', '购物车', '商品分类', '热门推荐', '限时特惠', '结算页面', '用户评价'],
  '个人博客': ['Banner轮播图', '新闻/博客列表', '用户评价', '联系表单'],
  '产品介绍': ['Banner轮播图', '产品/服务介绍', '功能特点展示', '价格表', 'FAQ/常见问题'],
  '活动落地页': ['Banner轮播图', '功能特点展示', '联系表单', '数据统计'],
};

const contentBlockOptions = [
  'Banner轮播图', '产品/服务介绍', '功能特点展示', '客户案例', '团队介绍',
  '联系表单', '新闻/博客列表', '价格表', 'FAQ/常见问题', '用户评价',
  '数据统计', '商品列表', '商品卡片', '购物车', '结算页面',
  '订单跟踪', '商品分类', '热门推荐', '限时特惠', '其他',
];

const Picture: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [output, setOutput] = useState<string>('');
  const [pageType, setPageType] = useState('企业官网');
  const [contentBlocks, setContentBlocks] = useState<string[]>(['Banner轮播图', '产品/服务介绍']);

  const handlePageTypeChange = (value: string) => {
    setPageType(value);
    if (value !== '其他' && pageTypeContentMap[value]) {
      setContentBlocks([...pageTypeContentMap[value]]);
      form.setFieldsValue({ contentBlocks: pageTypeContentMap[value] });
    }
  };

  const handleGenerate = async () => {
    const values = await form.validateFields();
    
    let fullPrompt = '';
    fullPrompt += `页面用途: ${values.pageType === '其他' ? values.pageTypeCustom : values.pageType}\n`;
    
    const blocks = (values.contentBlocks || []).filter((b: string) => b !== '其他');
    if (values.contentBlocksCustom) blocks.push(values.contentBlocksCustom);
    fullPrompt += `主要内容板块: ${blocks.join(', ')}\n`;
    
    fullPrompt += `风格偏好: ${values.stylePreference === '其他' ? values.stylePreferenceCustom : values.stylePreference}\n`;
    fullPrompt += `设计布局: ${values.layoutDesign === '其他' ? values.layoutDesignCustom : values.layoutDesign}\n`;
    fullPrompt += `配色方案: ${values.colorScheme === '其他' ? values.colorSchemeCustom : values.colorScheme}\n`;
    
    if (values.prompt) {
      fullPrompt += `\n详细描述: ${values.prompt}`;
    }

    setLoading(true);
    try {
      const res = await createWeb({ web: fullPrompt, command: 'createWeb' });
      if (res.code === 0) {
        setOutput(res.data);
        message.success('生成成功');
      }
    } finally {
      setLoading(false);
    }
  };

  const copyCode = () => {
    navigator.clipboard.writeText(output);
    message.success('复制成功');
  };

  return (
    <PageContainer>
      <WarningBar
        title="此功能只针对授权用户开放"
        href="https://github.com/flipped-aurora/gin-vue-admin"
      />
      
      <Card title="AI前端工程师" style={{ marginBottom: 16 }}>
        <Form form={form} layout="vertical" initialValues={{
          pageType: '企业官网',
          contentBlocks: ['Banner轮播图', '产品/服务介绍'],
          stylePreference: '简约',
          layoutDesign: '响应式',
          colorScheme: '蓝色系',
        }}>
          <Form.Item label="页面用途" name="pageType">
            <Radio.Group onChange={(e) => handlePageTypeChange(e.target.value)}>
              <Radio value="企业官网">企业官网</Radio>
              <Radio value="电商页面">电商页面</Radio>
              <Radio value="个人博客">个人博客</Radio>
              <Radio value="产品介绍">产品介绍</Radio>
              <Radio value="活动落地页">活动落地页</Radio>
              <Radio value="其他">其他</Radio>
            </Radio.Group>
          </Form.Item>
          
          <Form.Item noStyle shouldUpdate={(prev, cur) => prev.pageType !== cur.pageType}>
            {({ getFieldValue }) => getFieldValue('pageType') === '其他' && (
              <Form.Item name="pageTypeCustom">
                <Input placeholder="请输入页面用途" />
              </Form.Item>
            )}
          </Form.Item>

          <Form.Item label="主要内容板块" name="contentBlocks">
            <Checkbox.Group options={contentBlockOptions} />
          </Form.Item>

          <Form.Item label="风格偏好" name="stylePreference">
            <Radio.Group>
              <Radio value="简约">简约</Radio>
              <Radio value="科技感">科技感</Radio>
              <Radio value="温馨">温馨</Radio>
              <Radio value="专业">专业</Radio>
              <Radio value="创意">创意</Radio>
              <Radio value="复古">复古</Radio>
              <Radio value="奢华">奢华</Radio>
              <Radio value="其他">其他</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item label="设计布局" name="layoutDesign">
            <Radio.Group>
              <Radio value="单栏布局">单栏布局</Radio>
              <Radio value="双栏布局">双栏布局</Radio>
              <Radio value="三栏布局">三栏布局</Radio>
              <Radio value="网格布局">网格布局</Radio>
              <Radio value="瀑布流">瀑布流</Radio>
              <Radio value="卡片式">卡片式</Radio>
              <Radio value="响应式">响应式</Radio>
              <Radio value="其他">其他</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item label="配色方案" name="colorScheme">
            <Radio.Group>
              <Radio value="蓝色系">蓝色系</Radio>
              <Radio value="绿色系">绿色系</Radio>
              <Radio value="红色系">红色系</Radio>
              <Radio value="黑白灰">黑白灰</Radio>
              <Radio value="暖色调">暖色调</Radio>
              <Radio value="冷色调">冷色调</Radio>
              <Radio value="其他">其他</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item label="详细描述（可选）" name="prompt">
            <TextArea
              rows={5}
              maxLength={2000}
              placeholder="补充您对页面的其他要求或特殊需求"
            />
          </Form.Item>

          <Form.Item>
            <Button type="primary" loading={loading} onClick={handleGenerate}>
              生成
            </Button>
          </Form.Item>
        </Form>
      </Card>

      {output ? (
        <Card>
          <Tabs items={[
            {
              key: 'preview',
              label: '页面预览',
              children: (
                <div style={{ height: 500, overflow: 'auto', background: '#f5f5f5', padding: 16 }}>
                  <div dangerouslySetInnerHTML={{ __html: output }} />
                </div>
              ),
            },
            {
              key: 'source',
              label: '源代码',
              children: (
                <div style={{ position: 'relative' }}>
                  <Button
                    style={{ position: 'absolute', top: 8, right: 8 }}
                    onClick={copyCode}
                  >
                    复制
                  </Button>
                  <pre style={{ height: 500, overflow: 'auto', background: '#f5f5f5', padding: 16, marginTop: 40 }}>
                    {output}
                  </pre>
                </div>
              ),
            },
          ]} />
        </Card>
      ) : (
        <Card>
          <Empty description="暂无生成内容" />
        </Card>
      )}
    </PageContainer>
  );
};

export default Picture;
