<template>
  <div class="space-y-6">
    <h3 class="text-lg font-bold">Company Info & Links</h3>

    <!-- Company Name -->
    <div class="form-control w-full max-w-md">
      <label class="label"><span class="label-text font-semibold">Company Name</span></label>
      <input type="text" v-model="form.company_name" class="input input-bordered w-full" />
    </div>

    <!-- Social Links -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div class="form-control">
        <label class="label"><span class="label-text">Facebook URL</span></label>
        <input type="url" v-model="form.link_facebook" class="input input-bordered" placeholder="https://facebook.com/..." />
      </div>
      <div class="form-control">
        <label class="label"><span class="label-text">Google URL</span></label>
        <input type="url" v-model="form.link_google" class="input input-bordered" placeholder="https://google.com/..." />
      </div>
      <div class="form-control">
        <label class="label"><span class="label-text">Website URL</span></label>
        <input type="url" v-model="form.link_website" class="input input-bordered" placeholder="https://..." />
      </div>
      <div class="form-control">
        <label class="label"><span class="label-text">Google Review URL</span></label>
        <input type="url" v-model="form.link_google_review" class="input input-bordered" placeholder="https://g.page/..." />
      </div>
    </div>

    <!-- Quick Calls -->
    <div>
      <h4 class="font-semibold mb-2">Quick Call Numbers</h4>
      <div class="space-y-2">
        <div v-for="(call, index) in quickCalls" :key="index" class="flex gap-2">
          <input type="text" v-model="call.name" class="input input-bordered input-sm flex-1" placeholder="Name" />
          <input type="text" v-model="call.phone" class="input input-bordered input-sm w-40" placeholder="Phone" />
          <button class="btn btn-ghost btn-sm btn-square" @click="removeCall(index)">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      </div>
      <button v-if="quickCalls.length < 10" class="btn btn-ghost btn-sm mt-2" @click="addCall">+ Add Number</button>
    </div>

    <div class="flex gap-2">
      <button class="btn btn-primary" @click="save" :disabled="saving">
        <span v-if="saving" class="loading loading-spinner loading-xs"></span>
        Save Changes
      </button>
    </div>
    <div v-if="error" class="alert alert-error alert-sm">{{ error }}</div>
    <div v-if="success" class="alert alert-success alert-sm">{{ success }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useSettingsStore } from '../../../stores/settings'
import type { QuickCallEntry } from '../../../types/models'

const settingsStore = useSettingsStore()
const saving = ref(false)
const error = ref('')
const success = ref('')

const form = reactive({
  company_name: '',
  link_facebook: '',
  link_google: '',
  link_website: '',
  link_google_review: '',
})

const quickCalls = ref<QuickCallEntry[]>([])

onMounted(() => {
  form.company_name = settingsStore.settings.company_name || ''
  form.link_facebook = settingsStore.settings.link_facebook || ''
  form.link_google = settingsStore.settings.link_google || ''
  form.link_website = settingsStore.settings.link_website || ''
  form.link_google_review = settingsStore.settings.link_google_review || ''
  quickCalls.value = settingsStore.parseQuickCalls()
})

function addCall() {
  quickCalls.value.push({ name: '', phone: '' })
}

function removeCall(index: number) {
  quickCalls.value.splice(index, 1)
}

async function save() {
  error.value = ''
  success.value = ''
  saving.value = true
  try {
    await settingsStore.updateSettings({
      ...form,
      quick_calls: JSON.stringify(quickCalls.value.filter(c => c.name || c.phone)),
    } as Record<string, unknown>)
    success.value = 'Settings saved'
  } catch {
    error.value = 'Failed to save settings'
  } finally {
    saving.value = false
  }
}
</script>
