<script setup lang="ts">
const props = defineProps<{
  modelValue: string;
  primaryColor: string;
  secondaryColor: string;
}>();

const emit = defineEmits<{
  'update:modelValue': [value: string];
  'submit': [];
  'open-history': [];
}>();

const manualForm = ref<{ validate: () => boolean; resetValidation: () => void; reset: () => void } | null>(null);

const localValue = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value),
});

const handleSubmit = () => {
  emit('submit');
};

const handleOpenHistory = () => {
  emit('open-history');
};

// Expose form ref for parent component
defineExpose({
  form: manualForm,
});
</script>

<template>
  <div class="tab-content">
    <!-- Status Header -->
    <div class="status-header mb-3">
      <div class="status-icon-wrapper">
        <v-icon :color="secondaryColor" size="24">mdi-keyboard</v-icon>
      </div>
      <div class="status-text">
        <h3 class="status-title">Input Manual</h3>
        <p class="status-subtitle">Masukkan nomor antrean atau ID pasien</p>
      </div>
    </div>

    <v-form @submit.prevent="handleSubmit" ref="manualForm">
      <v-text-field
        v-model="localValue"
        label="Nomor Antrean / ID Pasien"
        placeholder="Contoh: P12345"
        prepend-inner-icon="mdi-account-card-details"
        variant="outlined"
        :color="primaryColor"
        class="input-modern mb-4"
        required
        :rules="[v => !!v || 'Field ini wajib diisi']"
        density="comfortable"
        hide-details="auto"
      >
        <template v-slot:append-inner>
          <v-icon :color="localValue ? 'success' : 'grey'" size="20">
            {{ localValue ? 'mdi-check-circle' : 'mdi-circle-outline' }}
          </v-icon>
        </template>
      </v-text-field>

      <v-btn
        class="btn-primary-modern btn-centered"
        size="large"
        type="submit"
        elevation="0"
      >
        <v-icon start size="20">mdi-login</v-icon>
        Check-in Sekarang
      </v-btn>
    </v-form>

    <!-- Quick Access Buttons -->
    <div class="quick-actions mt-4">
      <p class="text-caption text-grey text-center mb-3">Akses Cepat</p>
      <v-row dense>
        <v-col cols="12">
          <v-btn
            variant="outlined"
            :color="primaryColor"
            block
            size="small"
            class="text-none"
            @click="handleOpenHistory"
          >
            <v-icon start size="18">mdi-history</v-icon>
            Riwayat
          </v-btn>
        </v-col>
      </v-row>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import '~/assets/scss/checkin/components';
</style>
