<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { useRoute } from "vue-router";
import { useProduct, useThreeProduct } from "@/stores/product.ts";
import { userStore } from "@/stores/user.ts";
import { getAccessToken } from "@/api/user.ts";
import { bfWarningMessage } from "@/utils/bfMessage.ts";
import { createImage, getImageConversationById, PictureDialogueItem } from '@/api/aiImage';
import { ImageConversationMesg } from '@/types/imageConversation';
import useImageConversationStore, { ImageMessage } from '@/stores/imageConversation';

const route = useRoute();
const patternList = ref([])
const imageConversationStore = useImageConversationStore()
// 商品id
const productId = ref<string>(
  typeof route.query.productId === "undefined"
    ? "1772098203019493377"
    : (route.query.productId as string)
);
let viewer: any;

// 场景ID
const sceneId = ref<string>("");
const accessToken = ref("");

// 3d产品状态树
const $useThreeProduct = useThreeProduct();
// 产品状态树
const $useProduct = useProduct();
const $user = userStore();
// const loading = ElLoading.service({
//   lock: true,
//   text: "加载中...",
//   background: "rgba(0, 0, 0, 0.7)",
// });
const threeRef = ref<HTMLDivElement | null>(null);
const init = async (api: any, modelId: string) => {
  /**
   * @param three 要挂载的3d容器 必填
   * @param 场景的id 必填
   * @param 保存的json文件远程地址 可以不传。
   * @param 渲染成功的回调函数
   * @param 截图成功的回调，需配合editScreenshotPosition()方法使用，返回截图成功的base64图片列表
   * @param 场景选择触发回掉函数 ，参数1 objects 返回场景添加后的对象列表，参数2 textItem 切换到文字类型返回当前的对象， ，参数3 activeObject 当前选择2d板片对象
   */
  api.type = "DIY";
  api
    .getDiyView(
      threeRef.value,
      modelId,
      "",
      (backList: any, fabricEditor: any) => {
        // 2d板片控制器挂载到windows
        window.$fabricEditor = fabricEditor;
        // fabricEditor.useJsonOfTemplate(draftInfo.value?.url);
        // loading.close();
        // const canvasItem: HTMLCanvasElement | null =
        //     threeRef!.querySelector("canvas");
        // canvasItem!.style.borderRadius = "20px";
        // console.log('fabricEditor.engine=', $fabricEditor.scene.activeCamera);
        // const canvas = document.getElementById("renderCanvas1")
        // // console.log(canvas);
        // canvas.setAttribute('width', '500')
        // canvas.setAttribute('height', '500')
        // const camera2 = new BABYLON.ArcRotateCamera("camera2", Math.PI/2, 0.8, 20, new BABYLON.Vector3.Zero(), $fabricEditor.scene);

        // $fabricEditor.engine.registerView(canvas, camera2)
        // $fabricEditor.scene.detachControl();
        // $fabricEditor.engine.inputElement = canvas;
        // $fabricEditor.scene.attachControl();
        // $fabricEditor.scene.render();
      },
      () => { },
      (objects: any, textItem: any, activeObject: any) => {
        // 返回2d布片图层，以及选中文字时候触发被选中的文字信息
        // 存储2d布片图层
        $useThreeProduct.objects = objects.reverse();
        // // 当前激活的对象
        // $useThreeProduct.activeObject = activeObject;
        // // console.log('activeObject=', activeObject)
        // // console.log($useThreeProduct.activeObject)
        // // 文字信息
        // if (textItem) {
        //   $useThreeProduct.setText(textItem);
        // } else {
        //   $useThreeProduct.textInfo = {
        //     text: null,
        //     stroke: null,
        //     strokeWidth: null,
        //     canvasFill: "#000000",
        //     textBackgroundColor: null,
        //     canvasImage: "",
        //     id: null,
        //     opacity: null,
        //     fill: null,
        //     fontSize: 12,
        //     lineHeight: null,
        //     charSpacing: null,
        //     fontWeight: null,
        //     fontStyle: null,
        //     textAlign: null,
        //     fontFamily: null,
        //     TextDecoration: "",
        //     isEdit: false,
        //   };
        // }
      },
    )
    .then(async (detailInfo: any) => {
      // // 1、获取返回的数据
      const { data, threedViewer } = detailInfo;
      // // 2、获取2d板片列表
      $useThreeProduct.groupsList = threedViewer.materialList;
      // // 3、构建主题列表
      $useThreeProduct.themeList = data.diyPatternList;
      // // 4.构建模版列表组
      $useThreeProduct.templateGroup = threedViewer.diyDetail.groups;
      // // 5、构建主题分类列表
      $useThreeProduct.cateThemeList = [
        { id: -1, name: "全部" },
        ...(await api.getThemeDirectory(threedViewer.diyDetail.id)),
      ];
      // // 6、保存场景ID
      sceneId.value = data.id;
      viewer = threedViewer;
    })
    .catch((e: any) => {
      console.log(e);
    });
};

onMounted(async () => {
  // if (!$user.checkUserLoggedIn) {
  //   $user.showLogin();
  // }
  // 1、获取3d商品信息
  await $useProduct.getProductDetail(productId.value);
  // 2、获取3d密钥
  const res = await getAccessToken(
    "613366332305575936",
    "DRu9HspCoXH75CI1aFtM52HuqXKhOjfF",
  );
  console.log('res=', res.accessToken);
  accessToken.value = res.accessToken;
  // 3、调用3dreal平台sdk
  const api = new ThreeDRealAPI(accessToken.value);
  // 4、初始化2d、3d控制器以及数据
  init(api, $useProduct.ProductInfo.modelId);
})
const useTemplate = (item: any) => {
  if (item.jsonUrl === null) {
    $fabricEditor.useInitTemplate(item.svg, () => {
      console.log('加载模板初始状态');
    })
  } else {
    $fabricEditor.useJsonOfTemplate(item.jsonUrl)
    console.log('加载模板对应历史状态状态');
  }
}
const selectType = ref(1);
const sendDisabled = ref(false);
const searchText = ref<string>('')
const keywordList = ['生成一个带湖的风景', '生成一个日出花海子', '生成一个冬天迷雾'];
const keywordSearch = (keyword: string) => {
  if (sendDisabled.value) {
    bfWarningMessage('生成中请稍后...')
    return
  };
  searchText.value = keyword;
  send();
}
const send = async () => {
  if (!searchText.value) return bfWarningMessage('请输入内容...')
  sendDisabled.value = true;
  if (selectType.value === 1) {
    // 主题
    const res = await createImage({ prompt: searchText.value })
    console.log(`output->res`, res)
    const translatedList = transformUrlListToTemplateList(res)
    $useThreeProduct.getTemplateList.push(...translatedList)
    sendDisabled.value = false;
    return
  } else if (selectType.value === 2) {
    // 模板
  }
}

// 初始化时加载历史记录
onMounted(() => {
  const messages = localStorage.getItem('currentMessages')
  if (messages) {
    try {
      const parsed = JSON.parse(messages)
      const urlList = parsed.map((outItem: ImageConversationMesg) => (outItem.pictureDialogueItemList.map((item) => ({ svg: item.url }))))[0]
      const translatedList = transformUrlListToTemplateList(urlList)
      $useThreeProduct.getTemplateList.push(...translatedList)
    } catch (e) {
      console.error('Failed to parse chat history:', e)
    }
  }
})

onUnmounted(() => {
  localStorage.removeItem('currentMessages')
})

/**
 * 监听路由会话ID的变化，获取会话消息
 */
let lastConversationId = null;

watch(() => route.query.conversationId, async (newVal: string) => {
  // 避免重复请求
  if (newVal === lastConversationId) return;
  lastConversationId = newVal ?? null;
  localStorage.removeItem('currentMessages');
  /**
   * 如果会话ID为-1，表示新建会话
   */
  if (newVal === '-1') {
    imageConversationStore.isReadyNewConversation = true;
    // imageMessages.value = []
    return;
  }
  // 跳转到首页,展示欢迎内容
  else if (!newVal) {
    // imageConversationStore.isReadyNewConversation = false;
    return;
  }
  // 如果会话ID有效，加载已有会话的消息
  else if (newVal) {
    imageConversationStore.isReadyNewConversation = false;
    const res = await getImageConversationById(newVal)
    localStorage.setItem('currentMessages', JSON.stringify(res))
    const translatedList = transformUrlListToTemplateList(res)
    $useThreeProduct.getTemplateList.push(...translatedList)
  }
}, { immediate: true });


type UrlItem = {
  svg: string;
};

type TemplateItem = {
  id: number;
  name: string | null;
  sn: null;
  cover: null;
  svg: string;
  directoryId: null;
  remark: null;
  type: null;
  attrIds: null;
  encItems: null;
  categoryIds: null;
  createAt: null;
  updateAt: null;
  directory: null;
  gid: number | null;
  directorySn: null;
  attrList: null;
  encList: null;
  userName: null;
  userPic: null;
  uid: null;
  jsonUrl: string | null;
  tid: number | null;
};

function transformUrlListToTemplateList(res: ImageConversationMesg[] | ImageConversationMesg): TemplateItem[] {
  let urlList: UrlItem[] = [];
  if (Array.isArray(res)) {
    urlList = res.map((outItem: ImageConversationMesg) => {
      const pictureDialogueItemList = outItem.pictureDialogueItemList ?? []

      return (pictureDialogueItemList.map((item) => ({ svg: item.url })))
    })[0]

  }
  else if (typeof res === 'object') {
    const pictureDialogueItemList = res.pictureDialogueItemList ?? []
    urlList = pictureDialogueItemList.map((item) => {
      return { svg: item.url }
    })

  }

  return urlList.map((item, index) => ({
    id: Date.now() + index,  // 可按需求生成或替换为其他唯一标识
    name: null,              // 如果需要可根据业务填充模板名称
    sn: null,
    cover: null,
    svg: item.svg,           // 使用传入的 svg 字段
    directoryId: null,
    remark: null,
    type: null,
    attrIds: null,
    encItems: null,
    categoryIds: null,
    createAt: null,
    updateAt: null,
    directory: null,
    gid: null,
    directorySn: null,
    attrList: null,
    encList: null,
    userName: null,
    userPic: null,
    uid: null,
    jsonUrl: null,
    tid: null
  }));
}
</script>
<template>
  <div class="create-container">
    <!-- 预览区域 -->
    <div class="preview-section">
      <div class="preview-content">
        <div class="preview-card-box">
          <div class="card-title">2D效果预览</div>
          <div class="preview-card">
            <div id="three-content"
              style="width: 100%; height: 405px; overflow: hidden; display: flex; align-items: center; justify-content: center;">
              <div id="edit-tow-canvas"
                style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
                <div class="two-canvas" id="two-canvas"
                  style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
                  <canvas id="htmlCanvas" style="
                      touch-action: none;
                      cursor: grab;
                      background: transparent;
                      max-width: 100%;
                      max-height: 100%;
                      display: block;
                    "></canvas>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="preview-card-box">
          <div class="card-title">3D效果预览</div>
          <div class="preview-card">
            <div class="preview-image" ref="threeRef"></div>
          </div>
        </div>
      </div>
      <el-divider />
      <!-- 操作按钮 -->
      <div class="action-buttons">
        <div class="left-actions">
          <button class="action-btn like">
            <svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M10.208 0.28656C10.6246 0.369893 10.9476 0.578227 11.1768 0.91156C11.406 1.24489 11.4789 1.61989 11.3956 2.03656L11.3329 2.41156C11.1663 3.24489 10.8642 4.02617 10.4268 4.75537H14.9268C15.3434 4.7762 15.6976 4.92204 15.9893 5.19287C16.2601 5.48454 16.406 5.8387 16.4268 6.25537C16.406 6.85954 16.1351 7.30745 15.6143 7.59912C15.9685 7.89079 16.156 8.2762 16.1768 8.75537C16.1768 9.13037 16.0621 9.45329 15.8329 9.72412C15.6038 9.99495 15.3121 10.1616 14.9579 10.2241C15.1038 10.4533 15.1768 10.7137 15.1768 11.0054C15.1351 11.7137 14.7914 12.1929 14.1456 12.4429C14.1664 12.547 14.1768 12.6512 14.1768 12.7554C14.156 13.172 14.0101 13.5262 13.7393 13.8179C13.4476 14.0887 13.0934 14.2345 12.6768 14.2554H9.64551C9.02051 14.2554 8.45801 14.0887 7.95801 13.7554L6.77051 12.9429C5.89551 12.3387 5.44759 11.5054 5.42676 10.4429V9.25537V7.75537V6.97412C5.44759 6.01579 5.82259 5.23454 6.55176 4.63037L6.77051 4.44287C7.62467 3.75534 8.16634 2.88034 8.39551 1.81787L8.45801 1.47418C8.54134 1.05752 8.74967 0.734571 9.08301 0.505371C9.41634 0.276171 9.79134 0.203227 10.208 0.28656ZM1.42676 5.25537H3.42676C3.71842 5.25537 3.95801 5.34912 4.14551 5.53662C4.33301 5.72412 4.42676 5.9637 4.42676 6.25537V13.2554C4.42676 13.547 4.33301 13.7866 4.14551 13.9741C3.95801 14.1616 3.71842 14.2554 3.42676 14.2554H1.42676C1.13509 14.2554 0.895508 14.1616 0.708008 13.9741C0.520508 13.7866 0.426758 13.547 0.426758 13.2554V6.25537C0.426758 5.9637 0.520508 5.72412 0.708008 5.53662C0.895508 5.34912 1.13509 5.25537 1.42676 5.25537Z"
                fill="#6B7280" />
            </svg>
            赞
          </button>
          <button class="action-btn collect">
            <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M9.34873 0.817713C9.16123 0.463579 8.85915 0.276079 8.44248 0.255213C8.04665 0.276079 7.74456 0.463579 7.53623 0.817713L5.53623 4.94271L1.03623 5.63021C0.640397 5.69275 0.37998 5.91153 0.25498 6.28652C0.12998 6.68236 0.213314 7.02611 0.50498 7.31777L3.75498 10.5365L2.97373 15.099C2.93206 15.4949 3.06748 15.8178 3.37998 16.0678C3.71331 16.2969 4.06748 16.3178 4.44248 16.1303L8.44248 14.0053L12.4737 16.1303C12.8279 16.3178 13.1716 16.2969 13.5049 16.0678C13.8383 15.8178 13.9737 15.4949 13.9112 15.099L13.1612 10.5365L16.4112 7.31777C16.682 7.02611 16.7654 6.68236 16.6612 6.28652C16.5154 5.91153 16.2445 5.69275 15.8487 5.63021L11.3487 4.94271L9.34873 0.817713Z"
                fill="#6B7280" />
            </svg>
            收藏
          </button>
          <button class="action-btn share"><svg width="17" height="15" viewBox="0 0 17 15" fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path
                d="M10.0518 0.349182C9.67676 0.536649 9.47884 0.838704 9.45801 1.25537V3.25537H5.95801C4.39551 3.29704 3.10384 3.8387 2.08301 4.88037C1.04134 5.9012 0.499674 7.19287 0.458008 8.75537C0.478841 9.92204 0.708008 10.8908 1.14551 11.6616C1.56217 12.4325 2.02051 13.0262 2.52051 13.4429C3.02051 13.8387 3.37467 14.0887 3.58301 14.1929C3.66634 14.2345 3.74967 14.2554 3.83301 14.2554C4.20801 14.2137 4.41634 14.0054 4.45801 13.6304C4.43717 13.4012 4.33301 13.2033 4.14551 13.0366C3.99967 12.8908 3.85384 12.672 3.70801 12.3804C3.56217 12.1095 3.47884 11.7345 3.45801 11.2554C3.47884 10.4012 3.77051 9.69287 4.33301 9.13037C4.89551 8.56787 5.60384 8.2762 6.45801 8.25537H9.45801V10.2554C9.47884 10.672 9.67676 10.9741 10.0518 11.1616C10.4476 11.3283 10.8017 11.2762 11.1142 11.0054L16.1142 6.50537C16.3434 6.29704 16.458 6.04704 16.458 5.75537C16.458 5.4637 16.3434 5.2137 16.1142 5.00537L11.1142 0.505371C10.8017 0.234571 10.4476 0.182515 10.0518 0.349182Z"
                fill="#6B7280" />
            </svg>
            分享
          </button>
        </div>
        <div class="right-actions">
          <button class="action-btn save">
            <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M3.56067 0.13916C2.83746 0.16596 2.23477 0.420424 1.75262 0.902557C1.27048 1.38469 1.01604 1.98736 0.989258 2.71056V15.5677C1.01604 16.2909 1.27048 16.8936 1.75262 17.3758C2.23477 17.8579 2.83746 18.1124 3.56067 18.1392H16.4178C17.141 18.1124 17.7437 17.8579 18.2258 17.3758C18.708 16.8936 18.9625 16.2909 18.9893 15.5677V5.80437C18.9893 5.1079 18.7348 4.50519 18.2258 3.99626L15.1321 0.902557C14.6232 0.393623 14.0205 0.13916 13.324 0.13916H3.56067ZM3.56067 3.99626C3.56067 3.62126 3.68123 3.31323 3.9223 3.07216C4.16337 2.83109 4.47137 2.71056 4.84637 2.71056H12.5607C12.9357 2.71056 13.2437 2.83109 13.4847 3.07216C13.7258 3.31323 13.8464 3.62126 13.8464 3.99626V6.56776C13.8464 6.94276 13.7258 7.2508 13.4847 7.49187C13.2437 7.73293 12.9357 7.85345 12.5607 7.85345H4.84637C4.47137 7.85345 4.16337 7.73293 3.9223 7.49187C3.68123 7.2508 3.56067 6.94276 3.56067 6.56776V3.99626ZM9.98926 10.4249C10.9535 10.4517 11.6901 10.8802 12.199 11.7106C12.6812 12.5677 12.6812 13.4249 12.199 14.282C11.6901 15.1124 10.9535 15.5409 9.98926 15.5677C9.02497 15.5409 8.28835 15.1124 7.77942 14.282C7.29727 13.4249 7.29727 12.5677 7.77942 11.7106C8.28835 10.8802 9.02497 10.4517 9.98926 10.4249Z"
                fill="#374151" />
            </svg>
            保存设计
          </button>
          <button class="action-btn add-cart">
            <svg width="21" height="19" viewBox="0 0 21 19" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M0.989258 1.62689C1.03572 1.11762 1.31447 0.839817 1.8255 0.793484H3.42828C4.21806 0.839817 4.7988 1.21018 5.17047 1.90458H19.491C19.9556 1.92778 20.3272 2.11299 20.606 2.46019C20.8615 2.80739 20.9428 3.20088 20.8499 3.64068L19.4214 8.95323C19.2588 9.50879 18.9568 9.9486 18.5154 10.2727C18.074 10.6199 17.563 10.7935 16.9822 10.7935H6.94745L7.12164 11.8005C7.23778 12.2171 7.51654 12.437 7.95789 12.4602H17.9927C18.5037 12.5065 18.7825 12.7842 18.829 13.2935C18.7825 13.8028 18.5037 14.0805 17.9927 14.1268H7.95789C7.33071 14.1268 6.79646 13.9301 6.3551 13.5366C5.89053 13.1662 5.60016 12.6917 5.48401 12.113L3.67218 2.70318C3.64895 2.54118 3.56766 2.46019 3.42828 2.46019H1.8255C1.31447 2.41385 1.03572 2.13609 0.989258 1.62689ZM5.44916 16.9046C5.47238 16.2796 5.75113 15.7935 6.2854 15.4463C6.84289 15.1685 7.4004 15.1685 7.95789 15.4463C8.49215 15.7935 8.7709 16.2796 8.79413 16.9046C8.7709 17.5296 8.49215 18.0157 7.95789 18.363C7.4004 18.6407 6.84289 18.6407 6.2854 18.363C5.75113 18.0157 5.47238 17.5296 5.44916 16.9046ZM17.1566 15.238C17.7837 15.2611 18.2715 15.5389 18.6199 16.0713C18.8987 16.6268 18.8987 17.1824 18.6199 17.738C18.2715 18.2704 17.7837 18.5481 17.1566 18.5713C16.5294 18.5481 16.0415 18.2704 15.6931 17.738C15.4143 17.1824 15.4143 16.6268 15.6931 16.0713C16.0415 15.5389 16.5294 15.2611 17.1566 15.238Z"
                fill="#374151" />
            </svg>
            加入购物车
          </button>
        </div>
      </div>
    </div>

    <!-- 图片选择区域 -->
    <div class="pattern-section">
      <div v-if="$useThreeProduct.getTemplateList?.length" class="pattern-grid">
        <div class="pattern-item" v-for="(item) in $useThreeProduct.getTemplateList" :key="item.id"
          @click="useTemplate(item)">
          <img :src="item.svg" :alt="item.name" />
        </div>
      </div>
    </div>

    <!-- AI生成区域 -->
    <div class="ai-generate-section">
      <div class="generate-options">
        <div class="option-item" v-for="(text, index) in keywordList" :key="index" @click="keywordSearch(text)">{{ text
        }}</div>
      </div>

      <!-- 输入框和发送按钮 -->
      <div class="input-area">
        <div style="flex: 1">
          <el-input v-model="searchText" placeholder="..." @keydown.enter="send" class="input-with-select">
            <template #prepend>
              <el-select v-model="selectType" placeholder="Select" style="width: 100px">
                <el-option label="主题" :value="1" />
                <el-option label="模板" :value="2" />
              </el-select>
            </template>
          </el-input>
        </div>
        <el-button class="send-btn" :loading="sendDisabled" :disabled="sendDisabled" @click="send">发送</el-button>
      </div>
    </div>
  </div>
</template>



<style scoped>
.create-container {
  margin: 0 auto;
}

.preview-section {
  box-shadow: 0px 4px 4px 0px #00000040;
  border-radius: 20px;
  background-color: #fff;
  padding: 7.5px;
  padding-bottom: 30px;
}

.preview-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
}

.tab {
  padding: 10px 20px;
  cursor: pointer;
}

.tab.active {
  border-bottom: 2px solid #409eff;
  color: #409eff;
}

.preview-content {
  display: flex;

  gap: 20px;
}

.preview-card-box {
  flex: 1;
}

.preview-card {
  flex: 1;
  border: 1px solid #eee;
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.preview-image {
  height: 405px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.card-title {
  text-align: center;
  padding: 8px 0;
  font-weight: bold;
}

.edit-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.8);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

.left-actions,
.right-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  padding: 8px 15px;
  border: none;
  outline: none;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

.action-btn.save {
  background-color: #E5E7EB;
}

.action-btn.add-cart {
  background-color: #BDB3A5AD;
}

.action-btn.save,
.action-btn.add-cart {
  border-radius: 8px;
}



.pattern-section {
  margin-top: 26px;
  padding: 20px 10px 10px 10px;
  margin-bottom: 30px;
  border-radius: 20px;
  box-shadow: 0px 10px 15px 0px #0000001A;

}

.section-title {
  text-align: center;
  width: 182px;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  margin-bottom: 15px;
  font-weight: normal;
  background: #000;
  color: #fff;
  padding: 8px;
}

.pattern-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-height: 261px;
  overflow-y: auto;
}

.pattern-item {
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.pattern-item img {
  width: 100%;
  height: 115px;
  object-fit: fill;
}

.ai-generate-section {
  margin-top: 20px;
}

.generate-options {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.option-item {
  padding: 8px 15px;
  background: #f5f5f5;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
}

.input-area {
  display: flex;
  gap: 10px;
}

.send-btn {
  padding: 0 20px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
