<template>
  <div class="p-6">
    <!-- Header -->
    <div class="flex items-center justify-between mb-6">
      <h1 class="text-[1.75rem] font-bold font-[family-name:var(--font-heading)] tracking-tight text-text-primary">Clients</h1>
      <button
        data-tour-id="new-client"
        @click="openCreateDialog"
        class="px-3 py-1.5 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150"
      >
        + Add
      </button>
    </div>

    <!-- Clients Grid -->
    <TransitionGroup v-if="clientsStore.clients.length > 0" name="list" tag="div" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <div
        v-for="(client, index) in clientsStore.clients"
        :key="client.id"
        class="group bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] card-hover cursor-pointer"
        :style="{ transitionDelay: `${index * 30}ms` }"
        tabindex="0"
        role="button"
        @click="openEditDialog(client)"
        @keydown.enter="openEditDialog(client)"
        @keydown.space.prevent="openEditDialog(client)"
      >
        <div class="p-4">
          <div class="flex items-start justify-between">
            <div class="min-w-0 flex-1">
              <h3 class="text-[0.8125rem] font-semibold text-text-primary truncate">{{ client.name }}</h3>
              <p v-if="client.company" class="text-xs text-text-secondary mt-0.5 truncate">{{ client.company }}</p>
              <p v-if="client.email" class="text-xs text-text-tertiary mt-0.5 truncate">{{ client.email }}</p>
            </div>
            <div class="flex items-center gap-1 shrink-0 ml-2">
              <button
                @click.stop="openEditDialog(client)"
                class="p-1.5 text-text-tertiary hover:text-text-secondary transition-colors duration-150"
                aria-label="Edit"
                v-tooltip="'Edit'"
              >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                </svg>
              </button>
              <button
                @click.stop="confirmDelete(client)"
                class="p-1.5 text-text-tertiary hover:text-status-error transition-colors duration-150"
                aria-label="Delete"
                v-tooltip="'Delete'"
              >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </TransitionGroup>

    <!-- Empty State -->
    <div v-else class="flex flex-col items-center justify-center py-16">
      <Users class="w-12 h-12 text-text-tertiary animate-float" :stroke-width="1.5" aria-hidden="true" />
      <p class="text-sm text-text-secondary mt-4">No clients yet</p>
      <p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Clients let you organize projects and generate invoices with billing details.</p>
      <button
        @click="openCreateDialog"
        class="mt-4 px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors"
      >
        Create Client
      </button>
    </div>

    <!-- Create/Edit Dialog -->
    <Transition name="modal">
    <div
      v-if="showDialog"
      class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
      @click.self="tryCloseDialog"
    >
      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-xl p-6 max-h-[calc(100vh-2rem)] overflow-y-auto" role="dialog" aria-modal="true" aria-labelledby="client-dialog-title">
        <h2 id="client-dialog-title" class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4">
          {{ editingClient ? 'Edit Client' : 'Create Client' }}
        </h2>

        <form @submit.prevent="handleSubmit" class="space-y-4">
          <!-- Two-column layout: Contact | Billing -->
          <div class="grid grid-cols-2 gap-6">
            <!-- Left column: Contact -->
            <div class="space-y-4">
              <div>
                <label for="client-name" class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Name *</label>
                <input
                  id="client-name"
                  v-model="formData.name"
                  type="text"
                  required
                  autocomplete="name"
                  class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
                  placeholder="Client name"
                />
              </div>

              <div>
                <label for="client-email" class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Email</label>
                <input
                  id="client-email"
                  v-model="formData.email"
                  type="email"
                  autocomplete="email"
                  class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
                  placeholder="client@example.com"
                />
              </div>

              <div>
                <label for="client-phone" class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Phone</label>
                <input
                  id="client-phone"
                  v-model="formData.phone"
                  type="tel"
                  autocomplete="tel"
                  class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
                  placeholder="+1 (555) 000-0000"
                />
              </div>

              <div>
                <label for="client-address" class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Address</label>
                <textarea
                  id="client-address"
                  v-model="formData.address"
                  rows="2"
                  autocomplete="street-address"
                  class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible resize-none"
                  placeholder="Street, City, State, ZIP"
                />
              </div>
            </div>

            <!-- Right column: Billing -->
            <div class="space-y-4">
              <div>
                <label for="client-company" class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Company</label>
                <input
                  id="client-company"
                  v-model="formData.company"
                  type="text"
                  autocomplete="organization"
                  class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
                  placeholder="Business name for invoices"
                />
              </div>

              <div>
                <label for="client-tax-id" class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Tax ID</label>
                <input
                  id="client-tax-id"
                  v-model="formData.tax_id"
                  type="text"
                  class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
                  placeholder="VAT / Tax number"
                />
              </div>

              <div>
                <label for="client-payment-terms" class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Payment Terms</label>
                <input
                  id="client-payment-terms"
                  v-model="formData.payment_terms"
                  type="text"
                  class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
                  placeholder="e.g. Net 30, Due on receipt"
                />
              </div>

              <div>
                <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Currency</label>
                <AppSelect
                  v-model="formData.currency"
                  :options="currencyOptions"
                  label-key="label"
                  value-key="value"
                  placeholder="Default (global setting)"
                  :placeholder-value="undefined"
                />
              </div>

              <div>
                <label for="client-notes" class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Notes</label>
                <textarea
                  id="client-notes"
                  v-model="formData.notes"
                  rows="2"
                  class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible resize-none"
                  placeholder="Internal notes about this client"
                />
              </div>
            </div>
          </div>

          <!-- Buttons -->
          <div class="flex justify-end gap-3 pt-4">
            <button
              type="button"
              @click="closeDialog"
              class="px-4 py-2 border border-border-subtle text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
            >
              Cancel
            </button>
            <button
              type="submit"
              class="px-4 py-2 bg-accent text-bg-base font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150"
            >
              {{ editingClient ? 'Update' : 'Create' }}
            </button>
          </div>
        </form>
      </div>
    </div>
    </Transition>

    <AppCascadeDeleteDialog
      :show="showCascadeDelete"
      entity-type="client"
      :entity-name="deleteCandidate?.name || ''"
      :impacts="deleteImpacts"
      @confirm="executeDelete"
      @cancel="showCascadeDelete = false"
    />

    <AppDiscardDialog :show="showDiscardDialog" @cancel="cancelDiscard" @discard="confirmDiscard" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { Users } from 'lucide-vue-next'
import AppDiscardDialog from '../components/AppDiscardDialog.vue'
import AppCascadeDeleteDialog from '../components/AppCascadeDeleteDialog.vue'
import AppSelect from '../components/AppSelect.vue'
import { invoke } from '@tauri-apps/api/core'
import { handleInvokeError } from '../utils/errorHandler'
import { useClientsStore, type Client } from '../stores/clients'
import { useToastStore } from '../stores/toast'
import { useFormGuard } from '../utils/formGuard'
import { getCurrencies } from '../utils/locale'

const clientsStore = useClientsStore()
const toastStore = useToastStore()

const { showDiscardDialog, snapshot: snapshotForm, tryClose: tryCloseForm, confirmDiscard, cancelDiscard } = useFormGuard()

const currencyOptions = computed(() =>
  getCurrencies().map(c => ({ label: `${c.code} - ${c.name}`, value: c.code }))
)

function getFormData() {
  return { name: formData.name, email: formData.email, phone: formData.phone, address: formData.address, company: formData.company, tax_id: formData.tax_id, payment_terms: formData.payment_terms, notes: formData.notes, currency: formData.currency }
}

function tryCloseDialog() {
  tryCloseForm(getFormData(), closeDialog)
}

// Dialog state
const showDialog = ref(false)
const showCascadeDelete = ref(false)
const deleteCandidate = ref<Client | null>(null)
const deleteImpacts = ref<Array<{ label: string; count: number }>>([])
const editingClient = ref<Client | null>(null)

// Form data
const formData = reactive<Client>({
  name: '',
  email: undefined,
  phone: undefined,
  address: undefined,
  company: undefined,
  tax_id: undefined,
  payment_terms: undefined,
  notes: undefined,
  currency: undefined,
})

// Open create dialog
function openCreateDialog() {
  editingClient.value = null
  formData.name = ''
  formData.email = undefined
  formData.phone = undefined
  formData.address = undefined
  formData.company = undefined
  formData.tax_id = undefined
  formData.payment_terms = undefined
  formData.notes = undefined
  formData.currency = undefined
  snapshotForm(getFormData())
  showDialog.value = true
}

// Open edit dialog
function openEditDialog(client: Client) {
  editingClient.value = client
  formData.id = client.id
  formData.name = client.name
  formData.email = client.email
  formData.phone = client.phone
  formData.address = client.address
  formData.company = client.company
  formData.tax_id = client.tax_id
  formData.payment_terms = client.payment_terms
  formData.notes = client.notes
  formData.currency = client.currency
  snapshotForm(getFormData())
  showDialog.value = true
}

// Close dialog
function closeDialog() {
  showDialog.value = false
  editingClient.value = null
}

// Handle form submit
async function handleSubmit() {
  if (editingClient.value) {
    await clientsStore.updateClient({ ...formData })
  } else {
    await clientsStore.createClient({ ...formData })
  }
  closeDialog()
}

// Confirm delete - fetch dependents and show cascade dialog
async function confirmDelete(client: Client) {
  try {
    const deps = await invoke<{ projects: number; invoices: number; expenses: number }>('get_client_dependents', { clientId: client.id })
    const impacts: Array<{ label: string; count: number }> = []
    if (deps.projects > 0) impacts.push({ label: 'Projects', count: deps.projects })
    if (deps.invoices > 0) impacts.push({ label: 'Invoices', count: deps.invoices })
    if (deps.expenses > 0) impacts.push({ label: 'Expenses', count: deps.expenses })
    deleteCandidate.value = client
    deleteImpacts.value = impacts
    showCascadeDelete.value = true
  } catch (error) {
    handleInvokeError(error, 'Failed to check client dependencies')
  }
}

// Execute cascade delete
async function executeDelete() {
  if (!deleteCandidate.value?.id) return
  try {
    await clientsStore.deleteClient(deleteCandidate.value.id)
    toastStore.success(`Client "${deleteCandidate.value.name}" deleted`)
  } catch (error) {
    handleInvokeError(error, 'Failed to delete client')
  } finally {
    showCascadeDelete.value = false
    deleteCandidate.value = null
  }
}

// Load data on mount
onMounted(async () => {
  await clientsStore.fetchClients()
})
</script>
