<script setup>
import { reactive, ref } from 'vue'
import { api } from '@/api/client'

const props = defineProps({
  defaultInterest: { type: String, default: 'other' },
})

const form = reactive({
  name: '',
  email: '',
  company: '',
  role: '',
  country: '',
  interest: props.defaultInterest,
  message: '',
  referrer: typeof document !== 'undefined' ? document.referrer : '',
})

const status = ref('idle')   // idle | loading | success | error
const errors = ref({})
const errorMessage = ref('')

async function submit() {
  status.value = 'loading'
  errors.value = {}
  errorMessage.value = ''
  try {
    await api.submitContact(form)
    status.value = 'success'
  } catch (err) {
    status.value = 'error'
    if (err.response?.data && typeof err.response.data === 'object') {
      errors.value = err.response.data
      errorMessage.value = 'Please check the fields below.'
    } else {
      errorMessage.value = 'Something went wrong. Please try again.'
    }
  }
}
</script>

<template>
  <form class="contact-form" @submit.prevent="submit" novalidate>
    <template v-if="status !== 'success'">
      <div class="form-row">
        <div class="field">
          <label for="cf-name">Name</label>
          <input id="cf-name" v-model="form.name" type="text" required autocomplete="name" />
          <span v-if="errors.name" class="form-error">{{ errors.name[0] }}</span>
        </div>
        <div class="field">
          <label for="cf-email">Work email</label>
          <input id="cf-email" v-model="form.email" type="email" required autocomplete="email" />
          <span v-if="errors.email" class="form-error">{{ errors.email[0] }}</span>
        </div>
      </div>

      <div class="form-row">
        <div class="field">
          <label for="cf-company">Company</label>
          <input id="cf-company" v-model="form.company" type="text" autocomplete="organization" />
        </div>
        <div class="field">
          <label for="cf-role">Role</label>
          <input id="cf-role" v-model="form.role" type="text" />
        </div>
      </div>

      <div class="form-row">
        <div class="field">
          <label for="cf-country">Country</label>
          <input id="cf-country" v-model="form.country" type="text" autocomplete="country-name" />
        </div>
        <div class="field">
          <label for="cf-interest">Interest</label>
          <select id="cf-interest" v-model="form.interest">
            <option value="ai-ip">AI Inference IP</option>
            <option value="security-ip">Cybersecurity IP</option>
            <option value="comms-ip">Communication IP</option>
            <option value="custom-asic">Custom ASIC</option>
            <option value="careers">Careers</option>
            <option value="press">Press</option>
            <option value="other">Other</option>
          </select>
        </div>
      </div>

      <div class="field">
        <label for="cf-message">What are you looking for?</label>
        <textarea
          id="cf-message"
          v-model="form.message"
          required
          placeholder="A few lines about the project, target node / FPGA, and timeline."
        ></textarea>
        <span v-if="errors.message" class="form-error">{{ errors.message[0] }}</span>
      </div>

      <p v-if="errorMessage" class="form-error">{{ errorMessage }}</p>

      <button type="submit" class="btn btn--primary btn--full" :disabled="status === 'loading'">
        {{ status === 'loading' ? 'Sending…' : 'Send enquiry' }}
      </button>
      <p class="dim contact-form__legal">
        We typically reply within one business day. By submitting, you agree to be
        contacted about your enquiry.
      </p>
    </template>

    <div v-else class="form-success">
      <h3>Thanks — message received.</h3>
      <p>One of the founders will follow up at <strong>{{ form.email }}</strong> within one business day.</p>
    </div>
  </form>
</template>

<style scoped>
.contact-form {
  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-2));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.contact-form__legal {
  font-size: 0.78rem;
  margin: var(--space-3) 0 0;
}
</style>
