<script setup>
import { Check, FileText, UploadCloud } from 'lucide-vue-next'
const ui = usePublicUi()

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    required: true,
  },
  modelValue: {
    type: Object,
    default: null,
  },
  accept: {
    type: String,
    default: '.jpg,.jpeg,.png,.pdf',
  },
})

const emit = defineEmits(['update:modelValue'])

const inputRef = ref(null)

const fileName = computed(() => props.modelValue?.name || '')

function openPicker() {
  inputRef.value?.click()
}

function onChange(event) {
  const [file] = event.target.files || []
  emit('update:modelValue', file || null)
}
</script>

<template>
  <div>
    <button
      type="button"
      :class="[
        'w-full bg-white/50 backdrop-blur-sm rounded-[2rem] p-8 text-center transition-all cursor-pointer group border shadow-[0_4px_20px_rgba(0,0,0,0.03)]',
        fileName
          ? 'bg-white border-brand-orange/30 shadow-[0_8px_30px_rgba(249,115,22,0.1)]'
          : 'border-white/60 hover:bg-white hover:shadow-[0_8px_30px_rgba(249,115,22,0.1)] hover:border-brand-orange/30',
      ]"
      @click="openPicker"
    >
      <input
        ref="inputRef"
        :accept="accept"
        class="hidden"
        type="file"
        @change="onChange"
      >

      <div class="w-16 h-16 mx-auto bg-white rounded-2xl shadow-sm flex items-center justify-center mb-4 group-hover:scale-110 transition-transform border border-slate-100">
        <Check v-if="fileName" class="w-8 h-8 text-emerald-500" />
        <FileText v-else class="w-8 h-8 text-slate-400 group-hover:text-brand-orange transition-colors" />
      </div>

      <h3 class="font-bold text-slate-900 mb-1">{{ title }}</h3>
      <p class="text-sm text-slate-500 mb-4">
        {{ fileName || description }}
      </p>

      <div
        :class="[
          'inline-flex items-center gap-2 text-sm font-bold px-4 py-2 rounded-full transition-colors',
          fileName
            ? 'text-emerald-600 bg-emerald-50'
            : 'text-brand-orange bg-brand-orange/5 group-hover:bg-brand-orange/10',
        ]"
      >
        <UploadCloud v-if="!fileName" class="w-4 h-4" />
        <Check v-else class="w-4 h-4" />
        {{ fileName ? ui.checkout.documents.uploaded : ui.checkout.documents.upload }}
      </div>
    </button>
  </div>
</template>
