<template>
  <div class="space-y-6">
    <!-- User Search and Summary -->
    <div class="flex items-center gap-4 bg-card/40 p-4 rounded-2xl border border-border/50">
      <div class="relative flex-1">
        <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
        <input 
          :value="searchQuery" 
          @input="e => $emit('update:searchQuery', (e.target as HTMLInputElement).value)"
          :placeholder="t('admin.searchUsersPlaceholder')" 
          class="w-full bg-background/50 border border-border/50 rounded-xl pl-10 pr-4 py-2.5 text-sm focus:ring-2 ring-primary/20 outline-none transition-all" 
        />
      </div>
      <div class="text-xs font-bold text-muted-foreground uppercase tracking-widest bg-muted/30 px-4 py-2 rounded-xl border border-border/50">
        {{ t("admin.total") }}: {{ total }}
      </div>
    </div>

    <!-- Users Table -->
    <div v-if="users.length === 0" class="flex flex-col items-center justify-center py-20 bg-card/40 border border-border/50 rounded-3xl opacity-50">
      <Users class="w-12 h-12 text-muted-foreground/20 mb-4" />
      <p class="text-sm text-muted-foreground">{{ t("admin.fields.noUsers") }}</p>
    </div>

    <div v-else class="bg-card/40 backdrop-blur-md border border-border/50 rounded-3xl overflow-hidden shadow-xl">
      <div class="overflow-x-auto">
        <table class="w-full text-left border-collapse">
          <thead>
            <tr class="bg-muted/30 border-b border-border/50">
              <th class="p-4 text-[10px] font-bold uppercase tracking-wider">{{ t("admin.labels.user") }}</th>
              <th class="p-4 text-[10px] font-bold uppercase tracking-wider">{{ t("admin.labels.contact") }}</th>
              <th class="p-4 text-[10px] font-bold uppercase tracking-wider">{{ t("auth.fields.accountType") }}</th>
              <th class="p-4 text-[10px] font-bold uppercase tracking-wider">{{ t("admin.labels.role") }}</th>
              <th class="p-4 text-[10px] font-bold uppercase tracking-wider text-center">{{ t("admin.labels.chat") }}</th>
              <th class="p-4 text-[10px] font-bold uppercase tracking-wider text-center">{{ t("admin.fields.active") }}</th>
              <th class="p-4 text-[10px] font-bold uppercase tracking-wider">{{ t("admin.labels.registered") }}</th>
              <th class="p-4 text-[10px] font-bold uppercase tracking-wider text-right">{{ t("admin.labels.actions") }}</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-border/30">
            <tr v-for="u in users" :key="u.id" class="hover:bg-primary/5 transition-colors group/row">
              <td class="p-4">
                <div class="flex flex-col">
                  <span class="text-sm font-bold">{{ u.first_name }} {{ u.last_name }}</span>
                  <span class="text-[10px] text-muted-foreground font-mono opacity-50">ID: {{ u.id }}</span>
                </div>
              </td>
              <td class="p-4 text-xs">
                <div class="flex flex-col">
                  <span class="font-bold">{{ u.email }}</span>
                  <span class="text-muted-foreground opacity-70">{{ u.phone }}</span>
                </div>
              </td>
              <td class="p-4">
                <span :class="`px-2 py-0.5 rounded-full text-[9px] font-bold uppercase ${u.is_company ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground border border-border/50'}`">
                  {{ u.is_company ? t("auth.fields.company") : t("auth.fields.individual") }}
                </span>
                <p v-if="u.is_company" class="text-[9px] font-bold mt-1 text-primary truncate max-w-[120px]">{{ u.company_name }}</p>
              </td>
              <td class="p-4">
                <span :class="`px-2 py-0.5 rounded-full text-[9px] font-bold uppercase ${u.role === 'admin' ? 'bg-rose-500/10 text-rose-500 border border-rose-500/20' : 'bg-muted text-muted-foreground border border-border/50'}`">
                  {{ u.role }}
                </span>
              </td>
              <td class="p-4 text-center">
                <button @click="$emit('toggle-chat', u.id, u.can_chat)" class="inline-flex hover:scale-110 transition-transform">
                  <component :is="u.can_chat ? ToggleRight : ToggleLeft" class="w-6 h-6" :class="u.can_chat ? 'text-emerald-500' : 'text-muted-foreground'" />
                </button>
              </td>
              <td class="p-4 text-center">
                <button @click="$emit('toggle-active', u.id, u.is_active)" class="inline-flex hover:scale-110 transition-transform">
                  <component :is="u.is_active ? ToggleRight : ToggleLeft" class="w-6 h-6" :class="u.is_active ? 'text-emerald-500' : 'text-rose-500'" />
                </button>
              </td>
              <td class="p-4 text-[10px] text-muted-foreground font-bold uppercase">
                {{ new Date(u.created_at).toLocaleDateString() }}
              </td>
              <td class="p-4 text-right">
                <div class="flex items-center justify-end gap-1">
                  <button @click="$emit('reset-password', u.id)" class="p-2 rounded-lg hover:bg-white/10 text-muted-foreground hover:text-primary transition-all" :title="t('admin.actions.resetPassword')">
                    <Key class="w-4 h-4" />
                  </button>
                  <button @click="$emit('toggle-role', u.id, u.role === 'admin' ? 'user' : 'admin')" class="p-2 rounded-lg hover:bg-white/10 text-muted-foreground hover:text-primary transition-all" :title="t('admin.actions.toggleAdminRole')">
                    <ShieldCheck class="w-4 h-4" />
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    
    <!-- Pagination -->
    <div v-if="total > 50" class="flex items-center justify-center gap-2 py-4">
       <button v-for="p in Math.ceil(total / 50)" :key="p" 
         @click="$emit('update-page', p)" 
         :class="['w-8 h-8 rounded-lg font-bold text-xs transition-all', currentPage === p ? 'bg-primary text-white shadow-glow' : 'bg-card border border-border/50 text-muted-foreground hover:border-primary/50']">
         {{ p }}
       </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { Search, Users, ToggleRight, ToggleLeft, Key, ShieldCheck } from "lucide-vue-next";
import Button from "@/components/ui/button.vue";

const { t } = useI18n();

defineProps<{
  users: any[];
  total: number;
  currentPage: number;
  searchQuery: string;
}>();

const emit = defineEmits([
  'update:searchQuery', 'toggle-chat', 'toggle-active', 
  'reset-password', 'toggle-role', 'update-page'
]);

const onSearch = (e: Event) => {
  emit('update:searchQuery', (e.target as HTMLInputElement).value);
};
</script>
