<template>
  <div class="space-y-6">
    <!-- Company Info -->
    <div class="bg-slate-800/50 border border-slate-700 rounded-xl overflow-hidden">
      <div class="px-6 py-4 border-b border-slate-700 flex items-center gap-3">
        <div class="p-2 rounded-lg bg-indigo-500/10 text-indigo-400">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
          </svg>
        </div>
        <h3 class="text-base font-semibold text-white">{{ $t('garages.details.company_info') }}</h3>
      </div>
      <div class="px-6 py-5">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="space-y-4">
            <div>
              <p class="text-xs text-slate-500 uppercase tracking-wider">{{ $t('garages.details.company_name') }}</p>
              <p class="text-sm text-white mt-1">{{ garage.full_name }}</p>
            </div>
            <div>
              <p class="text-xs text-slate-500 uppercase tracking-wider">{{ $t('garages.details.display_name') }}</p>
              <p class="text-sm text-white mt-1">{{ garage.display_name || '—' }}</p>
            </div>
            <div>
              <p class="text-xs text-slate-500 uppercase tracking-wider">{{ $t('garages.details.org_type') }}</p>
              <p class="text-sm text-white mt-1">{{ orgTypeLabel(garage.org_type) }}</p>
            </div>
          </div>
          <div class="space-y-4">
            <div>
              <p class="text-xs text-slate-500 uppercase tracking-wider">{{ $t('garages.details.tax_number') }}</p>
              <p class="text-sm text-white mt-1">{{ garage.tax_number || '—' }}</p>
            </div>
            <div>
              <p class="text-xs text-slate-500 uppercase tracking-wider">{{ $t('garages.details.reg_number') }}</p>
              <p class="text-sm text-white mt-1">{{ garage.reg_number || '—' }}</p>
            </div>
            <div>
              <p class="text-xs text-slate-500 uppercase tracking-wider">{{ $t('garages.details.created_at') }}</p>
              <p class="text-sm text-white mt-1">{{ formatDate(garage.created_at) }}</p>
            </div>
          </div>
        </div>
        <div class="mt-6 pt-6 border-t border-slate-700/50">
          <p class="text-xs text-slate-500 uppercase tracking-wider mb-3">{{ $t('garages.details.address') }}</p>
          <p class="text-sm text-white">{{ formattedAddress }}</p>
        </div>

        <!-- Billing Address -->
        <div v-if="formattedBillingAddress" class="mt-4 pt-4 border-t border-slate-700/50">
          <p class="text-xs text-slate-500 uppercase tracking-wider mb-3">{{ $t('garages.details.billing_address') }}</p>
          <p class="text-sm text-white">{{ formattedBillingAddress }}</p>
        </div>

        <!-- Notification Address -->
        <div v-if="formattedNotificationAddress" class="mt-4 pt-4 border-t border-slate-700/50">
          <p class="text-xs text-slate-500 uppercase tracking-wider mb-3">{{ $t('garages.details.notification_address') }}</p>
          <p class="text-sm text-white">{{ formattedNotificationAddress }}</p>
        </div>

        <!-- System IDs Footer -->
        <div class="mt-6 pt-4 border-t border-slate-700/50">
          <p class="text-xs text-slate-500 uppercase tracking-wider mb-3">Rendszer Azonosítók</p>
          <div class="flex gap-6 text-xs font-mono text-slate-500">
            <span>Garázs ID: <span class="text-slate-400">{{ garage.id }}</span></span>
            <span>User ID: <span class="text-slate-400">{{ garage.owner_user_id ?? 'N/A' }}</span></span>
            <span>Person ID: <span class="text-slate-400">{{ garage.owner_person_id ?? 'N/A' }}</span></span>
          </div>
        </div>
      </div>
    </div>

    <!-- Contact Info -->
    <div class="bg-slate-800/50 border border-slate-700 rounded-xl overflow-hidden">
      <div class="px-6 py-4 border-b border-slate-700 flex items-center gap-3">
        <div class="p-2 rounded-lg bg-emerald-500/10 text-emerald-400">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
        </div>
        <h3 class="text-base font-semibold text-white">{{ $t('garages.details.contact_info') }}</h3>
      </div>
      <div class="px-6 py-5">
        <!-- Show block if ANY contact data exists (top-level fields or primary_contact) -->
        <div v-if="garage.contact_person_name || garage.contact_email || garage.contact_phone || garage.primary_contact" class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="space-y-4">
            <div>
              <p class="text-xs text-slate-500 uppercase tracking-wider">{{ $t('garages.details.contact_name') }}</p>
              <p class="text-sm text-white mt-1 font-medium">{{ garage.contact_person_name || garage.primary_contact?.full_name || '—' }}</p>
            </div>
            <div>
              <p class="text-xs text-slate-500 uppercase tracking-wider">{{ $t('garages.details.contact_email') }}</p>
              <p class="text-sm text-white mt-1 flex items-center gap-1.5">
                <svg class="w-4 h-4 text-slate-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
                <span>{{ garage.contact_email || garage.primary_contact?.email || '—' }}</span>
              </p>
            </div>
          </div>
          <div class="space-y-4">
            <div>
              <p class="text-xs text-slate-500 uppercase tracking-wider">{{ $t('garages.details.contact_phone') }}</p>
              <p class="text-sm text-white mt-1 flex items-center gap-1.5">
                <svg class="w-4 h-4 text-slate-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                </svg>
                <span>{{ garage.contact_phone || garage.primary_contact?.phone || '—' }}</span>
              </p>
            </div>
            <!-- Extra metadata from primary_contact if available -->
            <div v-if="garage.primary_contact?.role || garage.primary_contact?.department">
              <p class="text-xs text-slate-500 uppercase tracking-wider">{{ $t('garages.details.contact_role') }}</p>
              <p class="text-sm text-white mt-1">{{ garage.primary_contact.role || '—' }}<span v-if="garage.primary_contact?.department"> · {{ garage.primary_contact.department }}</span></p>
            </div>
          </div>
        </div>
        <div v-else class="text-center py-4">
          <p class="text-sm text-slate-400">{{ $t('garages.details.no_contact') }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  garage: any
}>()

function orgTypeLabel(type: string): string {
  const map: Record<string, string> = {
    dealership: 'Dealership',
    service: 'Service Center',
    rental: 'Rental Agency',
    fleet: 'Fleet Operator',
    individual: 'Individual',
    workshop: 'Workshop',
    garage: 'Garage',
    other: 'Other',
  }
  return map[type?.toLowerCase()] || type || '-'
}

function formatDate(dateStr: string | null | undefined): string {
  if (!dateStr) return '-'
  try {
    return new Intl.DateTimeFormat('hu-HU', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
    }).format(new Date(dateStr))
  } catch {
    return dateStr
  }
}

const formattedAddress = computed(() => {
  if (!props.garage) return ''
  const parts = [
    props.garage.address_zip,
    props.garage.address_city,
    props.garage.address_street_name,
    props.garage.address_street_type,
    props.garage.address_house_number,
  ].filter(Boolean)
  return parts.join(' ') || '-'
})

const formattedBillingAddress = computed(() => {
  if (!props.garage) return ''
  const parts = [
    props.garage.billing_zip,
    props.garage.billing_city,
    props.garage.billing_street_name,
    props.garage.billing_street_type,
    props.garage.billing_house_number,
  ].filter(Boolean)
  return parts.join(' ') || ''
})

const formattedNotificationAddress = computed(() => {
  if (!props.garage) return ''
  const parts = [
    props.garage.notification_zip,
    props.garage.notification_city,
    props.garage.notification_street_name,
    props.garage.notification_street_type,
    props.garage.notification_house_number,
  ].filter(Boolean)
  return parts.join(' ') || ''
})
</script>
