<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { Document } from "@element-plus/icons-vue";

type ExpertReviewSubModuleCode = "ONSITE_PHOTO" | "LABOR_PROTOCOL";

const expertReviewSubModule = defineModel<ExpertReviewSubModuleCode>(
  "expertReviewSubModule",
  { required: true },
);
const selectedAuditExpertId = defineModel<number | null>(
  "selectedAuditExpertId",
  { required: true },
);

const props = defineProps<{
  basicView: Record<string, any>;
  photoView: Record<string, any>;
  expertReviewRows: Array<{ expertId: number; expertName: string }>;
  selectedAuditPhotos: any[];
  selectedAuditLaborDetails: any[];
  selectedAuditExpertName: string;
  canReject: boolean;
  isHigherReview: boolean;
  formatYuan: (cent: unknown) => number;
  toReviewTagType: (
    itemKey: string | string[],
  ) => "success" | "danger" | "info";
  toReviewResultText: (itemKey: string | string[]) => string;
  getFileUrl: (ossKey: unknown) => string;
  isImageAttachment: (name: unknown, ossKey: unknown) => boolean;
  isPdfAttachment: (name: unknown, ossKey: unknown) => boolean;
  openFileUrl: (ossKey: unknown) => void;
  previewOssDocument: (
    ossKey: string,
    fileNameHint?: string,
  ) => void | Promise<void>;
  buildPhotoItemKey: (row: any, idx: number) => string;
  buildLaborItemKey: (row: any, idx: number) => string;
  buildLaborReviewItemKeys: (row: any, idx: number) => string | string[];
  handleSelectAuditExpert: (row: any) => void;
  handleRejectMaterialItem: (itemKey: string, itemLabel: string) => void;
}>();

const formatLaborRoleLabel = (role: unknown) => {
  const r = String(role || "")
    .trim()
    .toLowerCase();
  if (r === "chairman") {
    return "大会主席";
  }
  if (r === "speaker") {
    return "会议讲者";
  }
  if (r === "host") {
    return "会议主持";
  }
  if (
    r === "discussionguest" ||
    r === "discussion_guest" ||
    r === "discussion-guest"
  ) {
    return "讨论嘉宾";
  }
  return "";
};

const expertRoleTagItems = (expertId: number) => {
  const id = Number(expertId || 0);
  const tags: Array<{ key: string; label: string; className: string }> = [];
  if ((props.basicView?.chairmanExpertIds || []).includes(id)) {
    tags.push({
      key: "chairman",
      label: "大会主席",
      className: "role-tag role-tag-primary",
    });
  }
  if ((props.basicView?.speakerExpertIds || []).includes(id)) {
    tags.push({
      key: "speaker",
      label: "会议讲者",
      className: "role-tag role-tag-success",
    });
  }
  if ((props.basicView?.hostExpertIds || []).includes(id)) {
    tags.push({
      key: "host",
      label: "会议主持",
      className: "role-tag role-tag-warning",
    });
  }
  if ((props.basicView?.discussionGuestExpertIds || []).includes(id)) {
    tags.push({
      key: "discussionGuest",
      label: "讨论嘉宾",
      className: "role-tag role-tag-info",
    });
  }
  if (tags.length === 0) {
    tags.push({
      key: "unassigned",
      label: "未分配",
      className: "role-tag role-tag-default",
    });
  }
  return tags;
};

const onsiteSummaryText = computed(() => {
  const text = String(props.photoView?.summary || "").trim();
  return text || "-";
});

const normalizedLaborRows = computed(() =>
  (props.selectedAuditLaborDetails || []).map((row: any, index: number) => ({
    ...row,
    __auditIndex: index,
    __auditKey: `${row?.role || "unknown"}:${index}`,
    __roleLabel: formatLaborRoleLabel(row?.role) || "未分配",
  })),
);

const selectedLaborKey = ref<string | null>(null);

watch(
  normalizedLaborRows,
  (rows) => {
    if (!rows.length) {
      selectedLaborKey.value = null;
      return;
    }
    const valid = rows.some((row) => row.__auditKey === selectedLaborKey.value);
    if (!valid) {
      selectedLaborKey.value = rows[0].__auditKey;
    }
  },
  { immediate: true },
);

watch(
  () => selectedAuditExpertId.value,
  () => {
    const rows = normalizedLaborRows.value;
    selectedLaborKey.value = rows.length ? rows[0].__auditKey : null;
  },
);

const currentLaborRow = computed(() => {
  const rows = normalizedLaborRows.value;
  if (!rows.length) {
    return null;
  }
  return rows.find((row) => row.__auditKey === selectedLaborKey.value) || rows[0];
});

const currentLaborInvoiceFiles = computed(() => {
  const row = currentLaborRow.value;
  if (!row) {
    return [] as Array<{ fileName: string; ossKey: string }>;
  }
  const files = Array.isArray(row.invoiceFiles) ? row.invoiceFiles : [];
  if (files.length > 0) {
    return files
      .map((file: any) => ({
        fileName: String(file?.fileName || file?.name || "").trim(),
        ossKey: String(file?.ossKey || "").trim(),
      }))
      .filter((file) => file.ossKey);
  }
  const fallbackKey = String(row.invoiceOssKey || "").trim();
  if (!fallbackKey) {
    return [];
  }
  return [
    {
      fileName: String(row.invoiceFileName || "").trim(),
      ossKey: fallbackKey,
    },
  ];
});

const laborProtocolFileLabel = (row: Record<string, unknown>) => {
  const fn = String(row?.protocolName ?? "").trim();
  if (fn) {
    return fn;
  }
  const key = String(row?.protocolOssKey ?? "").trim();
  const tail = key.split("/").pop() || key;
  return tail || "PDF";
};

const laborInvoiceFileLabel = (row: Record<string, unknown>) => {
  const fn = String(row?.fileName ?? row?.invoiceFileName ?? "").trim();
  if (fn) {
    return fn;
  }
  const key = String(row?.ossKey ?? row?.invoiceOssKey ?? "").trim();
  const tail = key.split("/").pop() || key;
  return tail || "PDF";
};

const previewLaborProtocol = (row: Record<string, unknown>) => {
  const key = String(row?.protocolOssKey ?? "").trim();
  if (!key) {
    return;
  }
  void props.previewOssDocument(key, String(row?.protocolName ?? ""));
};

const previewLaborInvoice = (row: Record<string, unknown>) => {
  const key = String(row?.ossKey ?? row?.invoiceOssKey ?? "").trim();
  if (!key) {
    return;
  }
  void props.previewOssDocument(
    key,
    String(row?.fileName ?? row?.invoiceFileName ?? ""),
  );
};
</script>

<template>
  <div class="audit-expert-layout">
    <div class="audit-expert-sidebar">
      <div class="audit-expert-sidebar__header">
        <div class="audit-expert-sidebar__title">专家资料列表</div>
        <div class="audit-expert-sidebar__desc">
          选择专家后查看现场照片与劳务资料
        </div>
      </div>
      <div class="audit-expert-sidebar__list">
        <div
          v-for="row in expertReviewRows"
          :key="row.expertId"
          class="audit-expert-card"
          :class="{ 'is-selected': selectedAuditExpertId === row.expertId }"
          @click="handleSelectAuditExpert(row)"
        >
          <div class="audit-expert-card__avatar">
            {{ String(row.expertName || "?").trim().charAt(0) || "?" }}
          </div>
          <div class="audit-expert-card__info">
            <div class="audit-expert-card__name">{{ row.expertName }}</div>
            <div class="audit-expert-card__roles">
              <span
                v-for="tag in expertRoleTagItems(row.expertId)"
                :key="`${row.expertId}-${tag.key}`"
                :class="tag.className"
              >
                {{ tag.label }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div
      class="audit-expert-main"
      :class="{ 'audit-expert-main--empty': !selectedAuditExpertId }"
    >
      <div v-if="!selectedAuditExpertId" class="audit-expert-empty">
        <div class="audit-expert-empty__icon">
          <svg
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
            <circle cx="9" cy="7" r="4" />
            <path d="M23 21v-2a4 4 0 00-3-3.87" />
            <path d="M16 3.13a4 4 0 010 7.75" />
          </svg>
        </div>
        <div class="audit-expert-empty__title">请先从左侧选择一位专家</div>
        <div class="audit-expert-empty__desc">
          选择后即可在此处预览该专家提交的现场照片、劳务协议、金额和发票信息。
        </div>
      </div>

      <template v-else>
        <div class="audit-expert-toolbar">
          <div class="audit-expert-segment">
            <div
              class="audit-expert-segment__item"
              :class="{ 'is-active': expertReviewSubModule === 'ONSITE_PHOTO' }"
              @click="expertReviewSubModule = 'ONSITE_PHOTO'"
            >
              现场照片
            </div>
            <div
              class="audit-expert-segment__item"
              :class="{ 'is-active': expertReviewSubModule === 'LABOR_PROTOCOL' }"
              @click="expertReviewSubModule = 'LABOR_PROTOCOL'"
            >
              劳务信息
            </div>
          </div>
          <div class="audit-expert-toolbar__meta">
            <el-tag size="small" type="success">
              当前专家：{{ selectedAuditExpertName || "-" }}
            </el-tag>
          </div>
        </div>

        <div class="audit-expert-content">
          <template v-if="expertReviewSubModule === 'ONSITE_PHOTO'">
            <div class="audit-section-card">
              <div class="audit-section-card__header">
                <div class="audit-section-card__title">现场说明</div>
                <div class="audit-section-card__actions">
                  <el-tag
                    v-if="!isHigherReview"
                    size="small"
                    :type="toReviewTagType('onsite_summary')"
                  >
                    {{ toReviewResultText("onsite_summary") }}
                  </el-tag>
                  <el-button
                    v-if="canReject && !isHigherReview"
                    size="small"
                    type="danger"
                    link
                    @click="handleRejectMaterialItem('onsite_summary', '现场说明')"
                  >
                    不通过
                  </el-button>
                </div>
              </div>
              <div class="audit-summary-box">
                {{ onsiteSummaryText }}
              </div>
            </div>

            <div class="audit-section-card">
              <div class="audit-section-card__header">
                <div class="audit-section-card__title">现场照片</div>
                <div class="audit-section-card__subtitle">
                  按单张材料查看审核状态并执行不通过。
                </div>
              </div>
              <div v-if="selectedAuditPhotos.length" class="audit-photo-grid">
                <div
                  v-for="(row, index) in selectedAuditPhotos"
                  :key="`${row.ossKey || row.originIndex || index}`"
                  class="audit-photo-card"
                >
                  <div class="audit-photo-card__media">
                    <el-image
                      v-if="getFileUrl(row.ossKey)"
                      :src="getFileUrl(row.ossKey)"
                      fit="cover"
                      :preview-src-list="[getFileUrl(row.ossKey)]"
                      :preview-teleported="true"
                      class="audit-photo-card__image"
                    />
                    <div v-else class="audit-photo-card__empty">未加载</div>
                    <div
                      v-if="!isHigherReview && toReviewResultText(buildPhotoItemKey(row, index))"
                      class="audit-photo-card__status"
                    >
                      <span
                        class="audit-status-badge"
                        :class="`audit-status-${toReviewTagType(buildPhotoItemKey(row, index))}`"
                      >
                        {{ toReviewResultText(buildPhotoItemKey(row, index)) }}
                      </span>
                    </div>
                  </div>
                  <div class="audit-photo-card__footer">
                    <div
                      class="audit-photo-card__name"
                      :title="row.name || selectedAuditExpertName"
                    >
                      {{ row.name || selectedAuditExpertName || "-" }}
                    </div>
                    <div class="audit-photo-card__actions">
                      <el-button
                        size="small"
                        type="primary"
                        plain
                        :disabled="!getFileUrl(row.ossKey)"
                        @click="openFileUrl(row.ossKey)"
                      >
                        查看
                      </el-button>
                      <el-button
                        v-if="canReject && !isHigherReview"
                        size="small"
                        type="danger"
                        plain
                        @click="
                          handleRejectMaterialItem(
                            buildPhotoItemKey(row, index),
                            `现场照片-${selectedAuditExpertName || ''}`,
                          )
                        "
                      >
                        不通过
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
              <el-empty v-else description="暂无现场照片" />
            </div>
          </template>

          <template v-else-if="expertReviewSubModule === 'LABOR_PROTOCOL'">
            <div v-if="normalizedLaborRows.length" class="audit-role-pills">
              <div
                v-for="row in normalizedLaborRows"
                :key="row.__auditKey"
                class="audit-role-pill"
                :class="{ 'is-active': selectedLaborKey === row.__auditKey }"
                @click="selectedLaborKey = row.__auditKey"
              >
                {{ row.__roleLabel }}
              </div>
            </div>

            <div v-if="currentLaborRow" class="audit-labor-card">
              <div class="audit-labor-card__header">
                <div>
                  <div class="audit-labor-card__title">
                    {{ currentLaborRow.__roleLabel }}
                  </div>
                  <div class="audit-labor-card__subtitle">
                    {{ selectedAuditExpertName || currentLaborRow.expertName || "-" }}
                  </div>
                </div>
                <div class="audit-labor-card__actions">
                  <el-tag
                    v-if="!isHigherReview"
                    size="small"
                    :type="
                      toReviewTagType(
                        buildLaborReviewItemKeys(
                          currentLaborRow,
                          currentLaborRow.__auditIndex,
                        ),
                      )
                    "
                  >
                    {{
                      toReviewResultText(
                        buildLaborReviewItemKeys(
                          currentLaborRow,
                          currentLaborRow.__auditIndex,
                        ),
                      )
                    }}
                  </el-tag>
                  <el-button
                    v-if="canReject && !isHigherReview"
                    size="small"
                    type="danger"
                    link
                    @click="
                      handleRejectMaterialItem(
                        buildLaborItemKey(
                          currentLaborRow,
                          currentLaborRow.__auditIndex,
                        ),
                        `劳务协议-${selectedAuditExpertName || ''}${currentLaborRow.__roleLabel ? `-${currentLaborRow.__roleLabel}` : ''}`,
                      )
                    "
                  >
                    不通过
                  </el-button>
                </div>
              </div>

              <div class="audit-labor-grid">
                <div class="audit-attachment-panel">
                  <div class="audit-attachment-panel__head">劳务协议</div>
                  <div class="audit-attachment-panel__body">
                    <template v-if="currentLaborRow.protocolOssKey">
                      <el-image
                        v-if="
                          isImageAttachment(
                            currentLaborRow.protocolName,
                            currentLaborRow.protocolOssKey,
                          ) && getFileUrl(currentLaborRow.protocolOssKey)
                        "
                        :src="getFileUrl(currentLaborRow.protocolOssKey)"
                        fit="cover"
                        :preview-src-list="[getFileUrl(currentLaborRow.protocolOssKey)]"
                        :preview-teleported="true"
                        class="audit-preview-image"
                      />
                      <div
                        v-else-if="
                          isPdfAttachment(
                            currentLaborRow.protocolName,
                            currentLaborRow.protocolOssKey,
                          )
                        "
                        class="audit-preview-pdf"
                        :title="laborProtocolFileLabel(currentLaborRow)"
                        role="button"
                        tabindex="0"
                        @click="previewLaborProtocol(currentLaborRow)"
                        @keydown.enter.prevent="previewLaborProtocol(currentLaborRow)"
                      >
                        <el-icon class="audit-preview-pdf__icon"><Document /></el-icon>
                        <span class="audit-preview-pdf__label">PDF</span>
                      </div>
                      <div
                        class="audit-attachment-panel__name"
                        :title="laborProtocolFileLabel(currentLaborRow)"
                      >
                        {{ laborProtocolFileLabel(currentLaborRow) }}
                      </div>
                      <el-button
                        size="small"
                        type="primary"
                        plain
                        @click="previewLaborProtocol(currentLaborRow)"
                      >
                        预览协议
                      </el-button>
                    </template>
                    <div v-else class="audit-attachment-panel__empty">未上传协议</div>
                  </div>
                </div>

                <div class="audit-attachment-panel">
                  <div class="audit-attachment-panel__head">劳务金额</div>
                  <div class="audit-attachment-panel__body audit-amount-panel">
                    <div class="audit-amount-panel__value">
                      {{ formatYuan(currentLaborRow.amountCent) }}
                    </div>
                    <div class="audit-amount-panel__unit">元</div>
                    <div class="audit-amount-panel__remark">
                      {{ currentLaborRow.remark || "无备注" }}
                    </div>
                  </div>
                </div>

                <div class="audit-attachment-panel">
                  <div class="audit-attachment-panel__head">发票附件</div>
                  <div class="audit-attachment-panel__body">
                    <div
                      v-if="currentLaborInvoiceFiles.length"
                      class="audit-file-list"
                    >
                      <div
                        v-for="file in currentLaborInvoiceFiles"
                        :key="file.ossKey"
                        class="audit-file-item"
                      >
                        <div class="audit-file-item__preview">
                          <el-image
                            v-if="
                              isImageAttachment(file.fileName, file.ossKey) &&
                              getFileUrl(file.ossKey)
                            "
                            :src="getFileUrl(file.ossKey)"
                            fit="cover"
                            :preview-src-list="[getFileUrl(file.ossKey)]"
                            :preview-teleported="true"
                            class="audit-file-item__image"
                          />
                          <div
                            v-else-if="isPdfAttachment(file.fileName, file.ossKey)"
                            class="audit-preview-pdf audit-preview-pdf--sm"
                            :title="laborInvoiceFileLabel(file)"
                            role="button"
                            tabindex="0"
                            @click="previewLaborInvoice(file)"
                            @keydown.enter.prevent="previewLaborInvoice(file)"
                          >
                            <el-icon class="audit-preview-pdf__icon"><Document /></el-icon>
                            <span class="audit-preview-pdf__label">PDF</span>
                          </div>
                          <div v-else class="audit-file-item__empty">文件</div>
                        </div>
                        <div class="audit-file-item__meta">
                          <div
                            class="audit-file-item__name"
                            :title="laborInvoiceFileLabel(file)"
                          >
                            {{ laborInvoiceFileLabel(file) }}
                          </div>
                          <el-button
                            size="small"
                            type="primary"
                            plain
                            @click="previewLaborInvoice(file)"
                          >
                            预览发票
                          </el-button>
                        </div>
                      </div>
                    </div>
                    <div v-else class="audit-attachment-panel__empty">未上传发票</div>
                  </div>
                </div>
              </div>
            </div>

            <el-empty v-else description="暂无劳务信息" />
          </template>
        </div>
      </template>
    </div>
  </div>
</template>

<style scoped>
.role-tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.role-tag-primary {
  background: #dbeafe;
  color: #1d4ed8;
}

.role-tag-success {
  background: #dcfce7;
  color: #15803d;
}

.role-tag-warning {
  background: #fef9c3;
  color: #854d0e;
}

.role-tag-info {
  background: #e0f2fe;
  color: #0369a1;
}

.role-tag-default {
  background: #f1f5f9;
  color: #64748b;
}

.audit-expert-layout {
  display: flex;
  gap: 16px;
  min-height: 560px;
}

.audit-expert-sidebar {
  width: 248px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.audit-expert-sidebar__header {
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.audit-expert-sidebar__title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.audit-expert-sidebar__desc {
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}

.audit-expert-sidebar__list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.audit-expert-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}

.audit-expert-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.audit-expert-card.is-selected {
  border-color: #4f46e5;
  background: #eef2ff;
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.12);
}

.audit-expert-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.audit-expert-card__info {
  min-width: 0;
  flex: 1;
}

.audit-expert-card__name {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.4;
}

.audit-expert-card__roles {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.audit-expert-main {
  flex: 1;
  min-width: 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.audit-expert-main--empty {
  justify-content: center;
}

.audit-expert-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 32px;
  color: #64748b;
  min-height: 100%;
}

.audit-expert-empty__icon {
  width: 80px;
  height: 80px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.audit-expert-empty__icon svg {
  width: 40px;
  height: 40px;
}

.audit-expert-empty__title {
  font-size: 18px;
  font-weight: 600;
  color: #334155;
}

.audit-expert-empty__desc {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  max-width: 360px;
}

.audit-expert-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

.audit-expert-segment {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.audit-expert-segment__item {
  padding: 6px 16px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 13px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
}

.audit-expert-segment__item:hover {
  background: #e2e8f0;
}

.audit-expert-segment__item.is-active {
  background: #4f46e5;
  color: #fff;
  border-color: #4338ca;
  box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2);
}

.audit-expert-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.audit-section-card,
.audit-labor-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.audit-section-card__header,
.audit-labor-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.audit-section-card__title,
.audit-labor-card__title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.audit-section-card__subtitle,
.audit-labor-card__subtitle {
  font-size: 13px;
  color: #64748b;
}

.audit-section-card__actions,
.audit-labor-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.audit-summary-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
  color: #334155;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.audit-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.audit-photo-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.audit-photo-card__media {
  position: relative;
  height: 180px;
  background: #f8fafc;
}

.audit-photo-card__image {
  width: 100%;
  height: 100%;
  display: block;
}

.audit-photo-card__empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 13px;
}

.audit-photo-card__status {
  position: absolute;
  top: 10px;
  right: 10px;
}

.audit-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.audit-status-success {
  background: #dcfce7;
  color: #16a34a;
}

.audit-status-danger {
  background: #fee2e2;
  color: #dc2626;
}

.audit-status-info {
  background: #f1f5f9;
  color: #64748b;
}

.audit-photo-card__footer {
  padding: 12px 14px;
}

.audit-photo-card__name {
  font-size: 13px;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audit-photo-card__actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.audit-role-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.audit-role-pill {
  padding: 6px 16px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 13px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
}

.audit-role-pill:hover {
  background: #e2e8f0;
}

.audit-role-pill.is-active {
  background: #4f46e5;
  color: #fff;
  border-color: #4338ca;
}

.audit-labor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.audit-attachment-panel {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fafafa;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.audit-attachment-panel__head {
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}

.audit-attachment-panel__body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}

.audit-attachment-panel__name {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
  word-break: break-all;
}

.audit-attachment-panel__empty {
  min-height: 96px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 13px;
}

.audit-preview-image {
  width: 100%;
  height: 180px;
  border-radius: 10px;
  display: block;
}

.audit-preview-pdf {
  width: 100%;
  height: 180px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  color: #64748b;
}

.audit-preview-pdf--sm {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  flex-shrink: 0;
}

.audit-preview-pdf__icon {
  font-size: 24px;
}

.audit-preview-pdf__label {
  font-size: 11px;
  line-height: 1;
}

.audit-amount-panel {
  align-items: flex-start;
  justify-content: center;
}

.audit-amount-panel__value {
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  color: #1e293b;
}

.audit-amount-panel__unit {
  margin-top: -4px;
  font-size: 13px;
  color: #64748b;
}

.audit-amount-panel__remark {
  font-size: 13px;
  color: #475569;
  line-height: 1.6;
  word-break: break-word;
}

.audit-file-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.audit-file-item {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
}

.audit-file-item__preview {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.audit-file-item__image {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  display: block;
}

.audit-file-item__empty {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 12px;
}

.audit-file-item__meta {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.audit-file-item__name {
  font-size: 13px;
  color: #1e293b;
  line-height: 1.5;
  word-break: break-all;
}

@media (max-width: 1024px) {
  .audit-expert-layout {
    flex-direction: column;
  }

  .audit-expert-sidebar {
    width: 100%;
  }

  .audit-labor-grid {
    grid-template-columns: 1fr;
  }
}
</style>
