<script setup lang="ts">
import { type DirectoryItem } from '@/types/directory'
import {
  MapPin,
  Phone,
  ExternalLink,
  Zap,
  MessageCircle,
  Facebook,
  Instagram,
  Twitter,
  Youtube,
  UtensilsCrossed,
  Bed,
  ShoppingBag,
  Car,
  Ship,
  HelpCircle,
  Sparkles,
} from 'lucide-vue-next'
import {
  Card,
  CardContent,
  CardTitle,
  CardDescription,
} from '@/components/ui/card'
import { useRouter } from 'vue-router'

const props = defineProps<{
  item: DirectoryItem
}>()

const router = useRouter()

const categoryIcons = {
  restaurant: UtensilsCrossed,
  lodging: Bed,
  goods: ShoppingBag,
  services: Sparkles,
  taxi: Car,
  lancha: Ship,
  other: HelpCircle,
} as const

const categoryColors = {
  restaurant: 'text-orange-500',
  lodging: 'text-purple-500',
  goods: 'text-green-500',
  services: 'text-pink-500',
  taxi: 'text-yellow-500',
  lancha: 'text-blue-500',
  other: 'text-gray-500',
} as const

const socials = {
  facebook: Facebook,
  instagram: Instagram,
  twitter: Twitter,
  youtube: Youtube,
}

const socialColors = {
  facebook: 'text-blue-600 hover:text-blue-700',
  instagram: 'text-pink-600 hover:text-pink-700',
  twitter: 'text-blue-400 hover:text-blue-500',
  youtube: 'text-red-600 hover:text-red-700',
}
</script>

<template>
  <Card 
    class="hover:shadow-md transition-shadow relative overflow-hidden group cursor-pointer"
    @click="$router.push(`/directory/${item.id}`)"
  >
    <!-- Local watermark -->
    <div v-if="item.local" class="absolute right-3 bottom-2 text-2xl tracking-widest font-bold text-primary opacity-30">
      LOCAL
    </div>

    <CardContent class="p-6 space-y-4 relative z-20">
      <!-- Image -->
      <div v-if="item.imageUrl" class="aspect-video w-full overflow-hidden rounded-md">
        <img :src="item.imageUrl" :alt="item.name" class="h-full w-full object-cover" />
      </div>

      <!-- Content -->
      <div class="space-y-3">
        <div class="flex items-start justify-between">
          <div class="flex items-center gap-3">
            <component 
              :is="categoryIcons[item.category]" 
              class="h-6 w-6"
              :class="categoryColors[item.category]"
              :title="item.category"
            />
            <CardTitle>{{ item.name }}</CardTitle>
          </div>
        </div>

        <CardDescription>
          {{ item.description }}
        </CardDescription>

        <!-- Contact Info -->
        <div class="space-y-2">
          <div v-if="item.town || item.address" class="flex items-center text-sm group">
            <MapPin class="mr-2 h-4 w-4 text-red-400" />
            <a v-if="item.mapsUrl" 
              :href="item.mapsUrl" 
              target="_blank" 
              rel="noopener noreferrer"
              class="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors relative"
              @click.stop
            >
              <span>{{ [item.address, item.town].filter(Boolean).join(', ') }}</span>
              <ExternalLink class="h-3 w-3 ml-1" />
            </a>
            <span v-else>{{ [item.address, item.town].filter(Boolean).join(', ') }}</span>
          </div>

          <div v-if="item.contact" class="flex items-center text-sm gap-2">
            <Phone class="h-4 w-4" />
            <span>{{ item.contact }}</span>
            <div v-if="item.contactType" class="flex gap-1">
              <a v-if="item.contactType.includes('whatsapp')" 
                :href="`https://wa.me/${item.contact.replace(/\D/g, '')}`"
                target="_blank" 
                rel="noopener noreferrer"
                class="bg-green-100 text-green-800 px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1 hover:bg-green-200 transition-colors relative"
                @click.stop
              >
                <MessageCircle class="h-3 w-3" />
                WhatsApp
              </a>
              <a v-if="item.contactType.includes('telegram')" 
                :href="`https://t.me/${item.contact.replace(/\D/g, '')}`"
                target="_blank" 
                rel="noopener noreferrer"
                class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1 hover:bg-blue-200 transition-colors relative"
                @click.stop
              >
                <MessageCircle class="h-3 w-3" />
                Telegram
              </a>
            </div>
          </div>

          <div v-if="item.lightning" class="flex items-center text-sm">
            <Zap class="mr-2 h-4 w-4 text-amber-500" />
            <a 
              :href="`lightning:${item.lightning}`"
              class="text-muted-foreground hover:text-foreground transition-colors"
              @click.stop
            >
              {{ item.lightning }}
            </a>
          </div>

          <!-- Website -->
          <div v-if="item.url" class="flex items-center text-sm">
            <ExternalLink class="mr-2 h-4 w-4" />
            <a 
              :href="item.url" 
              target="_blank" 
              rel="noopener noreferrer"
              class="text-muted-foreground hover:text-foreground transition-colors"
              @click.stop
            >
              {{ item.url.replace(/^https?:\/\//, '').split('/')[0] }}
            </a>
          </div>

          <!-- Social Media Links -->
          <div v-if="item.social" class="flex items-center gap-2 text-sm">
            <template v-for="(url, platform) in item.social" :key="platform">
              <a v-if="url" 
                :href="url" 
                target="_blank" 
                rel="noopener noreferrer" 
                :class="[
                  'transition-colors relative',
                  socialColors[platform as keyof typeof socialColors]
                ]" 
                :title="platform.charAt(0).toUpperCase() + platform.slice(1)"
                @click.stop
              >
                <component :is="socials[platform as keyof typeof socials]" class="h-4 w-4" />
              </a>
            </template>
          </div>
        </div>
      </div>
    </CardContent>
  </Card>
</template>
