geo/apps/admin-web/src/components/GenerateTaskDrawer.vue

<script setup lang="ts">
import { PlusOutlined } from "@ant-design/icons-vue";
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
import { message } from "ant-design-vue";
import type { PromptRuleSimple, ScheduleTask } from "@geo/shared-types";
import { computed, reactive, ref, watch } from "vue";
import { useI18n } from "vue-i18n";

import CoverPickerModal from "@/components/CoverPickerModal.vue";
import PromptRuleModal from "@/components/PromptRuleModal.vue";
import { generateApi, imagesApi, mediaApi, promptRulesApi, resolveApiURL, schedulesApi, tenantAccountsApi } from "@/lib/api";
import { coverUploadRequired, deriveCoverFileName } from "@/lib/cover-requirements";
import { formatError } from "@/lib/errors";
import {
  buildPublishAccountCards,
  buildPublishPlatformMap,
  publishStatusShortLabel,
  type PublishAccountCard,
} from "@/lib/publish-account-cards";

const props = defineProps<{
  open: boolean;
  mode: "instant" | "schedule";
  task?: ScheduleTask | null;
}>();

const emit = defineEmits<{
  "update:open": [value: boolean];
}>();

const queryClient = useQueryClient();
const { t } = useI18n();

const promptDrawerOpen = ref(false);
const coverPickerOpen = ref(false);

const form = reactive({
  name: "",
  promptRuleId: undefined as number | undefined,
  autoPublish: false,
  publishAccountIds: [] as string[],
  coverEnabled: false,
  coverAssetUrl: "",
  coverFileName: "",
  coverImageAssetId: null as number | null,
  enableWebSearch: false,
  generateCount: 1,
  scheduleTime: "08:00:00",
});

const isSchedule = computed(() => props.mode === "schedule");

const rulesQuery = useQuery({
  queryKey: ["promptRules", "simple"],
  queryFn: () => promptRulesApi.listSimple(),
});

const schedulePublishQueryEnabled = computed(() => props.open && isSchedule.value);

const platformsQuery = useQuery({
  queryKey: ["media", "platforms", "schedule-task-drawer"],
  enabled: schedulePublishQueryEnabled,
  queryFn: () => mediaApi.platforms(),
});

const accountsQuery = useQuery({
  queryKey: ["tenant", "desktop-accounts", "schedule-task-drawer"],
  enabled: schedulePublishQueryEnabled,
  queryFn: () => tenantAccountsApi.list(),
});

const promptOptions = computed(() =>
  (rulesQuery.data.value ?? []).map((rule: PromptRuleSimple) => ({
    label: rule.name,
    value: rule.id,
  })),
);

const platformMap = computed(() => buildPublishPlatformMap(platformsQuery.data.value ?? []));

const schedulePublishAccounts = computed<PublishAccountCard[]>(() =>
  buildPublishAccountCards(accountsQuery.data.value ?? [], platformMap.value),
);

const schedulePublishLoading = computed(
  () => platformsQuery.isPending.value || accountsQuery.isPending.value,
);

const selectedSchedulePublishPlatformIds = computed(() => {
  const selected = new Set(form.publishAccountIds);
  return Array.from(
    new Set(
      schedulePublishAccounts.value
        .filter((account) => selected.has(account.id))
        .map((account) => account.platformId),
    ),
  );
});

const scheduleCoverRequired = computed(() => coverUploadRequired(selectedSchedulePublishPlatformIds.value));
const effectiveScheduleCoverEnabled = computed(() => scheduleCoverRequired.value || form.coverEnabled);

watch(
  scheduleCoverRequired,
  (required) => {
    if (required) {
      form.coverEnabled = true;
    }
  },
  { immediate: true },
);

const drawerTitle = computed(() => {
  if (isSchedule.value) {
    return props.task?.id ? t("custom.schedule.editTitle") : t("custom.schedule.createTitle");
  }
  return t("custom.instant.createTitle");
});

const submitText = computed(() => {
  if (isSchedule.value) {
    return props.task?.id ? t("common.save") : t("custom.task.submit");
  }
  return t("custom.task.submit");
});

watch(
  () => props.open,
  (open) => {
    if (open) {
      hydrateForm();
    }
  },
);

const createScheduleMutation = useMutation({
  mutationFn: () =>
    schedulesApi.create(buildSchedulePayload()),
  onSuccess: async () => {
    message.success(t("custom.messages.scheduleCreated"));
    emit("update:open", false);
    await queryClient.invalidateQueries({ queryKey: ["schedules"] });
  },
  onError: (error) => message.error(formatError(error)),
});

const updateScheduleMutation = useMutation({
  mutationFn: () =>
    schedulesApi.update(props.task!.id, buildSchedulePayload()),
  onSuccess: async () => {
    message.success(t("custom.messages.scheduleUpdated"));
    emit("update:open", false);
    await queryClient.invalidateQueries({ queryKey: ["schedules"] });
  },
  onError: (error) => message.error(formatError(error)),
});

const instantGenerateMutation = useMutation({
  mutationFn: () =>
    generateApi.fromRule(buildInstantPayload()),
  onSuccess: async () => {
    message.success(t("custom.messages.generateSubmitted"));
    emit("update:open", false);
    await Promise.all([
      queryClient.invalidateQueries({ queryKey: ["articles"] }),
      queryClient.invalidateQueries({ queryKey: ["instantTasks"] }),
    ]);
  },
  onError: (error) => message.error(formatError(error)),
});

const submitLoading = computed(
  () =>
    createScheduleMutation.isPending.value ||
    updateScheduleMutation.isPending.value ||
    instantGenerateMutation.isPending.value,
);

function hydrateForm(): void {
  form.name = props.task?.name ?? "";
  form.promptRuleId = props.task?.prompt_rule_id ?? undefined;
  form.autoPublish = isSchedule.value ? Boolean(props.task?.auto_publish) : false;
  form.publishAccountIds = isSchedule.value ? [...(props.task?.publish_account_ids ?? [])] : [];
  form.coverAssetUrl = isSchedule.value ? resolveApiURL(props.task?.cover_asset_url) : "";
  form.coverFileName = deriveCoverFileName(form.coverAssetUrl);
  form.coverImageAssetId = isSchedule.value ? props.task?.cover_image_asset_id ?? null : null;
  form.coverEnabled = Boolean(form.coverAssetUrl);
  form.enableWebSearch = props.task?.enable_web_search ?? false;
  form.generateCount = props.task?.generate_count ?? 1;
  form.scheduleTime = parseCronToDailyTime(props.task?.cron_expr);
}

function buildSchedulePayload() {
  const coverEnabled = form.autoPublish && effectiveScheduleCoverEnabled.value;
  const coverAssetUrl = coverEnabled ? form.coverAssetUrl.trim() : "";

  return {
    name: form.name.trim(),
    prompt_rule_id: form.promptRuleId!,
    cron_expr: buildDailyCron(form.scheduleTime),
    auto_publish: form.autoPublish,
    publish_account_ids: form.autoPublish ? form.publishAccountIds : [],
    cover_asset_url: coverAssetUrl || null,
    cover_image_asset_id: coverAssetUrl ? form.coverImageAssetId : null,
    enable_web_search: form.enableWebSearch,
    generate_count: form.generateCount,
  };
}

function buildInstantPayload() {
  return {
    prompt_rule_id: form.promptRuleId!,
    extra_params: {
      task_name: form.name.trim(),
      generation_mode: "instant",
      enable_web_search: form.enableWebSearch,
      generate_count: form.generateCount,
    },
  };
}

function handlePromptSaved(ruleId: number): void {
  form.promptRuleId = ruleId;
  promptDrawerOpen.value = false;
  void queryClient.invalidateQueries({ queryKey: ["promptRules", "simple"] });
}

function toggleSchedulePublishAccount(account: PublishAccountCard): void {
  if (!account.selectable) {
    return;
  }
  if (form.publishAccountIds.includes(account.id)) {
    form.publishAccountIds = form.publishAccountIds.filter((id) => id !== account.id);
    return;
  }
  form.publishAccountIds = [...form.publishAccountIds, account.id];
}

function isSchedulePublishAccountSelected(accountId: string): boolean {
  return form.publishAccountIds.includes(accountId);
}

async function uploadScheduleCover(file: File): Promise<{ url: string; fileName: string; assetId?: number | null }> {
  const uploaded = await imagesApi.upload(file);
  return {
    url: uploaded.url,
    fileName: uploaded.name,
    assetId: uploaded.id,
  };
}

function handleScheduleCoverPicked(payload: { url: string; fileName: string; assetId?: number | null }): void {
  form.coverAssetUrl = payload.url;
  form.coverFileName = payload.fileName;
  form.coverImageAssetId = payload.assetId ?? null;
  form.coverEnabled = true;
}

function handleRemoveScheduleCover(): void {
  form.coverAssetUrl = "";
  form.coverFileName = "";
  form.coverImageAssetId = null;
}

function handleScheduleCoverToggle(checked: boolean): void {
  if (scheduleCoverRequired.value) {
    form.coverEnabled = true;
    return;
  }
  form.coverEnabled = checked;
}

function validateForm(): boolean {
  if (!form.name.trim()) {
    message.warning(t("custom.messages.missingTaskName"));
    return false;
  }

  if (!form.promptRuleId) {
    message.warning(t("custom.messages.missingPromptRule"));
    return false;
  }

  if (form.generateCount < 1) {
    message.warning(t("custom.messages.invalidGenerateCount"));
    return false;
  }

  if (isSchedule.value && !isValidTime(form.scheduleTime)) {
    message.warning(t("custom.messages.invalidScheduleTime"));
    return false;
  }

  if (isSchedule.value && form.autoPublish) {
    if (form.publishAccountIds.length === 0) {
      message.warning(t("custom.messages.missingPublishAccounts"));
      return false;
    }
    if (scheduleCoverRequired.value && !form.coverAssetUrl.trim()) {
      message.warning(t("custom.messages.missingScheduleCover"));
      return false;
    }
  }

  return true;
}

async function handleSubmit(): Promise<void> {
  if (!validateForm()) {
    return;
  }

  if (isSchedule.value) {
    if (props.task?.id) {
      await updateScheduleMutation.mutateAsync();
    } else {
      await createScheduleMutation.mutateAsync();
    }
    return;
  }

  await instantGenerateMutation.mutateAsync();
}

function parseCronToDailyTime(cronExpr?: string | null): string {
  if (!cronExpr) {
    return "08:00:00";
  }

  const fiveFieldMatch = cronExpr.match(/^(\d{1,2})\s+(\d{1,2})\s+\*\s+\*\s+\*$/);
  if (fiveFieldMatch) {
    const [, minute, hour] = fiveFieldMatch;
    return `${padTime(hour)}:${padTime(minute)}:00`;
  }

  const sixFieldMatch = cronExpr.match(/^(\d{1,2})\s+(\d{1,2})\s+(\d{1,2})\s+\*\s+\*\s+\*$/);
  if (sixFieldMatch) {
    const [, second, minute, hour] = sixFieldMatch;
    return `${padTime(hour)}:${padTime(minute)}:${padTime(second)}`;
  }

  return "08:00:00";
}

function buildDailyCron(timeValue: string): string {
  const [hourRaw, minuteRaw] = timeValue.split(":");
  const hour = Number(hourRaw || 0);
  const minute = Number(minuteRaw || 0);
  return `${minute} ${hour} * * *`;
}

function isValidTime(value: string): boolean {
  return /^\d{2}:\d{2}(:\d{2})?$/.test(value);
}

function padTime(value: string): string {
  return value.padStart(2, "0");
}
</script>

<template>
  <a-drawer
    :open="open"
    :title="drawerTitle"
    placement="right"
    width="1120"
    :mask-closable="false"
    class="generate-task-drawer"
    @close="emit('update:open', false)"
  >
    <div class="generate-task-drawer__body">
      <section class="generate-task-drawer__panel">
        <div class="generate-task-drawer__section-head">
          <div class="generate-task-drawer__section-marker"></div>
          <h3>{{ t("custom.task.basicSection") }}</h3>
        </div>

        <div class="generate-task-drawer__field">
          <label class="generate-task-drawer__label generate-task-drawer__label--required">
            {{ t("custom.task.name") }}：
          </label>
          <a-input
            v-model:value="form.name"
            :maxlength="100"
            size="large"
            :placeholder="t('custom.task.namePlaceholder')"
          />
        </div>

        <div class="generate-task-drawer__field">
          <label class="generate-task-drawer__label generate-task-drawer__label--required">
            {{ t("custom.task.prompt") }}：
          </label>

          <div class="generate-task-drawer__prompt-row">
            <a-select
              v-model:value="form.promptRuleId"
              size="large"
              :placeholder="t('custom.task.promptPlaceholder')"
              :options="promptOptions"
              :loading="rulesQuery.isPending.value"
              allow-clear
              class="generate-task-drawer__prompt-select"
            />

            <a-button class="generate-task-drawer__prompt-create" size="large" @click="promptDrawerOpen = true">
              <template #icon><PlusOutlined /></template>
              {{ t("custom.task.createPrompt") }}
            </a-button>
          </div>
        </div>

      </section>

      <section v-if="isSchedule" class="generate-task-drawer__panel generate-task-drawer__panel--bordered">
        <div class="generate-task-drawer__section-head">
          <div class="generate-task-drawer__section-marker"></div>
          <h3>{{ t("custom.task.publishSection") }}</h3>
        </div>

        <div class="generate-task-drawer__field generate-task-drawer__field--inline">
          <div>
            <label class="generate-task-drawer__label">{{ t("custom.task.autoPublish") }}：</label>
            <p class="generate-task-drawer__hint generate-task-drawer__hint--compact">
              {{ t("custom.task.autoPublishHint") }}
            </p>
          </div>
          <a-switch v-model:checked="form.autoPublish" />
        </div>

        <template v-if="form.autoPublish">
          <div class="generate-task-drawer__field">
            <label class="generate-task-drawer__label generate-task-drawer__label--required">
              {{ t("custom.task.publishAccounts") }}：
            </label>
            <p class="generate-task-drawer__hint">{{ t("custom.task.publishAccountsHint") }}</p>

            <a-skeleton
              v-if="schedulePublishLoading"
              active
              :title="false"
              :paragraph="{ rows: 4 }"
            />
            <div v-else-if="schedulePublishAccounts.length" class="generate-task-drawer__account-grid">
              <button
                v-for="account in schedulePublishAccounts"
                :key="account.id"
                type="button"
                class="generate-task-drawer__account"
                :class="{
                  'generate-task-drawer__account--active': isSchedulePublishAccountSelected(account.id),
                  'generate-task-drawer__account--disabled': !account.selectable,
                }"
                @click="toggleSchedulePublishAccount(account)"
              >
                <span class="generate-task-drawer__account-check">
                  <span v-if="isSchedulePublishAccountSelected(account.id)"></span>
                </span>
                <span class="generate-task-drawer__account-logo" :style="{ '--account-accent': account.platformAccent }">
                  <img
                    v-if="account.platformLogoUrl"
                    :src="account.platformLogoUrl"
                    :alt="account.platformName"
                    referrerpolicy="no-referrer"
                  />
                  <span v-else>{{ account.platformShortName }}</span>
                </span>
                <span class="generate-task-drawer__account-copy">
                  <strong>{{ account.displayName }}</strong>
                  <small>{{ account.platformName }} · {{ account.platformUid }}</small>
                </span>
                <a-tooltip :title="account.statusText" placement="top">
                  <span
                    class="generate-task-drawer__account-status"
                    :class="`generate-task-drawer__account-status--${account.publishState}`"
                  >
                    {{ publishStatusShortLabel(account.publishState) }}
                  </span>
                </a-tooltip>
              </button>
            </div>
            <div v-else class="generate-task-drawer__empty">
              <strong>{{ t("custom.task.publishAccountEmptyTitle") }}</strong>
              <p>{{ t("custom.task.publishAccountEmptyHint") }}</p>
            </div>
          </div>

          <div class="generate-task-drawer__field">
            <div class="generate-task-drawer__cover-head">
              <label
                class="generate-task-drawer__label"
                :class="{ 'generate-task-drawer__label--required': scheduleCoverRequired }"
              >
                {{ t("custom.task.cover") }}：
              </label>
              <a-switch
                :checked="effectiveScheduleCoverEnabled"
                :disabled="scheduleCoverRequired"
                @change="handleScheduleCoverToggle"
              />
            </div>
            <p class="generate-task-drawer__hint">
              {{ scheduleCoverRequired ? t("custom.task.scheduleCoverRequiredHint") : t("custom.task.scheduleCoverHint") }}
            </p>

            <div v-if="effectiveScheduleCoverEnabled" class="generate-task-drawer__cover-row">
              <button type="button" class="generate-task-drawer__cover" @click="coverPickerOpen = true">
                <template v-if="form.coverAssetUrl">
                  <img :src="form.coverAssetUrl" alt="cover preview" />
                </template>
                <template v-else>
                  <span class="generate-task-drawer__cover-plus">+</span>
                  <strong>{{ t("custom.task.coverUpload") }}</strong>
                  <small>{{ t("custom.task.scheduleCoverUploadHint") }}</small>
                </template>
              </button>

              <div v-if="form.coverAssetUrl" class="generate-task-drawer__cover-meta">
                <strong>{{ form.coverFileName || t("custom.task.cover") }}</strong>
                <a-button size="small" @click="coverPickerOpen = true">
                  {{ t("article.editor.coverReplace") }}
                </a-button>
                <a-button size="small" danger @click="handleRemoveScheduleCover">
                  {{ t("article.editor.coverRemove") }}
                </a-button>
              </div>
            </div>
          </div>
        </template>
      </section>

      <section class="generate-task-drawer__panel generate-task-drawer__panel--bordered">
        <div class="generate-task-drawer__section-head">
          <div class="generate-task-drawer__section-marker"></div>
          <h3>{{ t("custom.task.advancedSection") }}</h3>
        </div>

        <div v-if="isSchedule" class="generate-task-drawer__field">
          <label class="generate-task-drawer__label">{{ t("custom.task.scheduleTime") }}：</label>
          <div class="generate-task-drawer__time-wrapper">
            <span>{{ t("custom.task.scheduleEveryDay") }}</span>
            <a-time-picker
              v-model:value="form.scheduleTime"
              value-format="HH:mm:ss"
              size="large"
              :allow-clear="false"
              style="width: 160px"
            />
          </div>
        </div>

        <div class="generate-task-drawer__field generate-task-drawer__field--inline">
          <label class="generate-task-drawer__label">{{ t("custom.task.enableWebSearch") }}：</label>
          <a-switch v-model:checked="form.enableWebSearch" />
        </div>

        <div class="generate-task-drawer__field generate-task-drawer__field--narrow">
          <label class="generate-task-drawer__label">{{ t("custom.task.generateCount") }}：</label>
          <a-input-number
            v-model:value="form.generateCount"
            :min="1"
            :max="20"
            :precision="0"
            size="large"
          />
        </div>
      </section>
    </div>

    <template #footer>
      <div class="generate-task-drawer__footer">
        <a-button size="large" @click="emit('update:open', false)">
          {{ t("common.cancel") }}
        </a-button>
        <a-button type="primary" size="large" :loading="submitLoading" @click="handleSubmit">
          {{ submitText }}
        </a-button>
      </div>
    </template>

    <PromptRuleModal v-model:open="promptDrawerOpen" @saved="handlePromptSaved" />

    <CoverPickerModal
      v-model:open="coverPickerOpen"
      :article-id="null"
      :platform-ids="selectedSchedulePublishPlatformIds"
      :current-url="form.coverAssetUrl"
      :current-file-name="form.coverFileName"
      :current-asset-id="form.coverImageAssetId"
      :upload-handler="uploadScheduleCover"
      @confirmed="handleScheduleCoverPicked"
    />
  </a-drawer>
</template>

<style scoped>
.generate-task-drawer :deep(.ant-drawer-header) {
  padding: 30px 28px;
  border-bottom: 1px solid #edf2f7;
}

.generate-task-drawer :deep(.ant-drawer-title) {
  color: #111827;
  font-size: 18px;
  font-weight: 800;
}

.generate-task-drawer :deep(.ant-drawer-body) {
  padding: 30px 32px 32px;
  background: #fff;
}

.generate-task-drawer :deep(.ant-drawer-footer) {
  padding: 18px 24px;
  border-top: 1px solid #edf2f7;
  background: #fff;
}

.generate-task-drawer__body {
   padding: 0 20px;
  display: flex;
  flex-direction: column;
}

.generate-task-drawer__panel {
  padding: 16px 0 32px;
}

.generate-task-drawer__panel--bordered {
  padding-top: 32px;
  border-top: 1px solid #edf2f7;
}

.generate-task-drawer__section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid #fafafa;
}

.generate-task-drawer__section-marker {
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: #111827;
}

.generate-task-drawer__section-head h3 {
  margin: 0;
  color: #111827;
  font-size: 16px;
  font-weight: 800;
}

.generate-task-drawer__field {
  margin-top: 24px;
}

.generate-task-drawer__field--inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.generate-task-drawer__field--narrow {
  max-width: 220px;
}

.generate-task-drawer__label {
  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
  color: #1f2937;
  font-size: 15px;
  font-weight: 700;
}

.generate-task-drawer__label--required::before {
  content: "*";
  margin-right: 4px;
  color: #ff4d4f;
}

.generate-task-drawer__hint {
  margin: -2px 0 14px;
  color: #667085;
  font-size: 13px;
  line-height: 1.7;
}

.generate-task-drawer__hint--compact {
  margin-top: 6px;
}

.generate-task-drawer__prompt-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.generate-task-drawer__prompt-select {
  flex: 0 1 320px;
}

.generate-task-drawer__prompt-create {
  border-style: dashed;
  border-color: #9db7ff;
  color: #355dff;
}

.generate-task-drawer__account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.generate-task-drawer__account {
  display: grid;
  grid-template-columns: 20px 36px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 76px;
  padding: 12px 14px;
  border: 1px solid #e1e8f2;
  border-radius: 8px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.generate-task-drawer__account:hover {
  border-color: #b7c7ec;
  background: #fbfdff;
}

.generate-task-drawer__account--active {
  border-color: #355dff;
  background: #f4f7ff;
  box-shadow: 0 4px 12px rgba(53, 93, 255, 0.08);
}

.generate-task-drawer__account--disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.generate-task-drawer__account-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid #d0d7e5;
  border-radius: 4px;
  background: #fff;
}

.generate-task-drawer__account--active .generate-task-drawer__account-check {
  border-color: #355dff;
  background: #355dff;
}

.generate-task-drawer__account-check span {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: #fff;
}

.generate-task-drawer__account-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #e4e9f2;
  background: #fff;
  color: var(--account-accent);
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
}

.generate-task-drawer__account-logo img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.generate-task-drawer__account-logo span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--account-accent) 10%, #ffffff);
}

.generate-task-drawer__account-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.generate-task-drawer__account-copy strong,
.generate-task-drawer__cover-meta strong {
  overflow: hidden;
  color: #1f2937;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generate-task-drawer__account-copy small,
.generate-task-drawer__account-status {
  overflow: hidden;
  color: #667085;
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generate-task-drawer__account-status {
  grid-column: 3;
  color: #355dff;
}

.generate-task-drawer__account-status--immediate {
  color: #039855;
}

.generate-task-drawer__account-status--queued {
  color: #dc6803;
}

.generate-task-drawer__account-status--unavailable {
  color: #d92d20;
}

.generate-task-drawer__cover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.generate-task-drawer__cover-head .generate-task-drawer__label {
  margin-bottom: 0;
}

.generate-task-drawer__empty {
  padding: 18px 20px;
  border: 1px dashed #cfd9e8;
  border-radius: 8px;
  background: #fbfcff;
}

.generate-task-drawer__empty strong {
  display: block;
  color: #1f2937;
  font-size: 15px;
  font-weight: 700;
}

.generate-task-drawer__empty p {
  margin: 6px 0 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.7;
}

.generate-task-drawer__cover-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.generate-task-drawer__cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 228px;
  min-height: 172px;
  padding: 0;
  border: 1px dashed #cfd9e8;
  border-radius: 8px;
  background: #fbfcff;
  color: #1f2937;
  cursor: pointer;
  overflow: hidden;
}

.generate-task-drawer__cover:hover {
  border-color: #9db7ff;
  background: #f7faff;
}

.generate-task-drawer__cover img {
  width: 100%;
  height: 172px;
  object-fit: cover;
}

.generate-task-drawer__cover strong {
  font-size: 16px;
  font-weight: 700;
}

.generate-task-drawer__cover small {
  color: #667085;
  font-size: 13px;
}

.generate-task-drawer__cover-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #eef4ff;
  color: #355dff;
  font-size: 28px;
  line-height: 1;
}

.generate-task-drawer__cover-meta {
  display: flex;
  min-width: 220px;
  max-width: 360px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.generate-task-drawer__time-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.generate-task-drawer__time-wrapper span {
  color: #344054;
  font-size: 15px;
  font-weight: 600;
}

.generate-task-drawer__footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

@media (max-width: 1024px) {
  .generate-task-drawer__prompt-row {
    flex-direction: column;
    align-items: stretch;
  }

  .generate-task-drawer__prompt-select {
    flex-basis: auto;
  }
}
</style>