<template>
  <div
    class="ivyforms-file-upload__card ivyforms-flex ivyforms-align-items-start ivyforms-gap-12 ivyforms-py-12 ivyforms-px-14"
    :class="{
      'ivyforms-file-upload__card--error': status === 'error',
      'ivyforms-file-upload__card--success': status === 'success',
      [`ivyforms-file-upload__card--${tone}`]: true,
    }"
  >
    <span
      v-if="status === 'error'"
      class="ivyforms-file-upload__card-flag ivyforms-file-upload__card-flag--error"
      aria-hidden="true"
    />
    <span
      v-else-if="status === 'success' && showSuccessBadge"
      class="ivyforms-file-upload__card-flag ivyforms-file-upload__card-flag--success"
      aria-hidden="true"
    />
    <button
      v-else-if="removable"
      type="button"
      class="ivyforms-file-upload__card-remove"
      :aria-label="removeAriaLabel"
      @click="$emit('remove')"
    >
      <span aria-hidden="true">×</span>
    </button>
    <div
      class="ivyforms-file-upload__card-icon ivyforms-flex ivyforms-align-items-center ivyforms-justify-content-center ivyforms-flex-shrink-0"
      aria-hidden="true"
    >
      <IvyFileUploadFileGlyph kind="document" size="l" />
    </div>
    <div class="ivyforms-file-upload__card-main ivyforms-flex-1 ivyforms-pr-20">
      <div
        class="ivyforms-file-upload__card-name-row ivyforms-flex ivyforms-align-items-center ivyforms-justify-content-between ivyforms-gap-8"
      >
        <span
          class="ivyforms-file-upload__card-name"
          :class="{ 'ivyforms-file-upload__card-name--accent': highlightName }"
        >
          {{ fileName }}
        </span>
        <span
          v-if="status === 'uploading' && progress !== null"
          class="ivyforms-file-upload__card-pct ivyforms-flex-shrink-0"
          >{{ progress }}%</span
        >
      </div>
      <div
        v-if="errorMessage"
        class="ivyforms-file-upload__card-err-msg ivyforms-mt-4"
        role="alert"
      >
        {{ errorMessage }}
      </div>
      <div
        v-if="status === 'uploading' && progress !== null"
        class="ivyforms-file-upload__card-bar ivyforms-mt-8"
        aria-hidden="true"
      >
        <div class="ivyforms-file-upload__card-bar-fill" :style="{ width: progress + '%' }" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useLabels } from '@/composables/useLabels'
import IvyFileUploadFileGlyph from '@/views/_components/file-upload/IvyFileUploadFileGlyph.vue'

const props = withDefaults(
  defineProps<{
    fileName: string
    /** `neutral` for public forms; `brand` for form-builder chrome. */
    tone?: 'neutral' | 'brand'
    status?: 'idle' | 'uploading' | 'success' | 'error'
    progress?: number | null
    errorMessage?: string
    removable?: boolean
    highlightName?: boolean
    showSuccessBadge?: boolean
    removeLabel?: string
  }>(),
  {
    tone: 'neutral',
    status: 'idle',
    progress: null,
    errorMessage: '',
    removable: false,
    highlightName: false,
    showSuccessBadge: false,
    removeLabel: '',
  },
)

defineEmits<{
  remove: []
}>()

const { getLabel } = useLabels()

const removeAriaLabel = computed(() => {
  const custom = props.removeLabel.trim()
  return custom !== '' ? custom : getLabel('file_upload_remove_file')
})
</script>

<style scoped lang="scss">
.ivyforms-file-upload {
  &__card {
    position: relative;
    border-radius: 8px;
    border: 1px solid var(--map-base-dusk-stroke-2, #cdd1d7);
    background: var(--map-ground-level-1-background, #fff);
    min-height: 56px;
    box-sizing: border-box;

    &-flag {
      position: absolute;
      top: 0;
      right: 0;
      width: 0;
      height: 0;
      border-style: solid;
      pointer-events: none;

      &--success {
        border-width: 0 36px 36px 0;
        border-color: transparent var(--map-status-success-fill-0, #10b981) transparent transparent;

        &::after {
          content: '';
          position: absolute;
          top: 4px;
          right: -30px;
          width: 10px;
          height: 6px;
          border-left: 2px solid #fff;
          border-bottom: 2px solid #fff;
          transform: rotate(-45deg);
        }
      }

      &--error {
        border-width: 0 36px 36px 0;
        border-color: transparent var(--map-status-error-fill-0, #ef4444) transparent transparent;

        &::after {
          content: '×';
          position: absolute;
          top: 2px;
          right: -28px;
          color: #fff;
          font-size: 12px;
          font-weight: 700;
        }
      }
    }

    &-remove {
      position: absolute;
      top: 8px;
      right: 8px;
      border: none;
      background: transparent;
      color: var(--map-base-dusk-symbol-1, #6b7280);
      cursor: pointer;
      padding: 4px;
      line-height: 1;
      border-radius: 4px;
      z-index: 1;

      &:hover {
        color: var(--map-base-dusk-symbol-2, #374151);
        background: var(--map-ground-level-2-background, #f3f4f6);
      }
    }

    &-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      color: var(--map-base-dusk-symbol-2, #394452);
      background: var(--map-ground-level-2-background, #f3f4f6);
    }

    &-main {
      min-width: 0;
    }

    &-name {
      font-size: 14px;
      line-height: 20px;
      color: var(--map-base-dusk-symbol-2, #1f2937);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &--accent {
        color: var(--map-base-dusk-symbol-2, #394452);
      }
    }

    &-pct {
      font-size: 13px;
      color: var(--map-base-dusk-symbol-1, #6b7280);
    }

    &-err-msg {
      font-size: 13px;
      line-height: 18px;
      color: var(--map-status-error-fill-0, #dc2626);
    }

    &-bar {
      height: 4px;
      border-radius: 999px;
      background: var(--map-base-dusk-stroke-2, #e5e7eb);
      overflow: hidden;
    }

    &-bar-fill {
      height: 100%;
      border-radius: inherit;
      background: var(--map-base-dusk-stroke-0, #9ca3af);
      transition: width 0.2s ease;
    }

    &--brand &-icon {
      color: var(--map-base-purple-symbol-0, #6d28d9);
      background: var(--map-base-purple-fill--4, #f3e8ff);
    }

    &--brand &-name--accent {
      color: var(--map-base-purple-symbol-0, #6d28d9);
    }

    &--brand &-bar-fill {
      background: var(--map-base-brand-fill-0, #6366f1);
    }
  }
}
</style>
