"use client"

import { AssignedRoleUser } from "@/types/roles"
import { AvatarBadge } from "@/components/ui/avatar-badge"
import { StatusBadge } from "@/components/ui/status-badge"
import { formatDateTime } from "@/lib/format"
import { Shield, Smartphone, Globe } from "lucide-react"
import i18n from "@/lib/i18n";

interface AssignedUsersTableProps {
  users: AssignedRoleUser[]
}

export function AssignedUsersTable({ users }: AssignedUsersTableProps) {
  if (users.length === 0) {
    return (
      <div className="bg-card border border-border rounded-lg p-12 text-center">
        <Shield className="h-12 w-12 text-muted-foreground/20 mx-auto mb-4" />
        <h4 className="text-[15px] font-semibold text-foreground mb-1">{i18n.t('components.admin.roles.AssignedUsersTable.text_6')}</h4>
        <p className="text-[13px] text-muted-foreground">{i18n.t('components.admin.roles.AssignedUsersTable.text_7')}</p>
      </div>
    )
  }

  return (
    <div className="bg-card border border-border rounded-lg overflow-hidden shadow-sm">
      <table className="w-full text-left border-collapse">
        <thead>
          <tr className="bg-muted/50 border-b border-border">
            <th className="py-3 px-6 text-[12px] font-semibold uppercase tracking-wider text-foreground">{i18n.t('components.admin.roles.AssignedUsersTable.text_8')}</th>
            <th className="py-3 px-6 text-[12px] font-semibold uppercase tracking-wider text-foreground">{i18n.t('components.admin.roles.AssignedUsersTable.text_9')}</th>
            <th className="py-3 px-6 text-[12px] font-semibold uppercase tracking-wider text-foreground">{i18n.t('components.admin.roles.AssignedUsersTable.text_10')}</th>
            <th className="py-3 px-6 text-[12px] font-semibold uppercase tracking-wider text-foreground">{i18n.t('components.admin.roles.AssignedUsersTable.text_11')}</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-border/30 text-[13px]">
          {users.map((user) => (
            <tr key={user.id} className="hover:bg-muted/10 transition-colors">
              <td className="py-4 px-6">
                <div className="flex items-center gap-3">
                  <AvatarBadge name={user.full_name} size="md" />
                  <div className="flex flex-col">
                    <span className="font-semibold text-foreground">{user.full_name}</span>
                    <span className="text-[11px] text-muted-foreground">{user.email}</span>
                  </div>
                </div>
              </td>
              <td className="py-4 px-6">
                <div className="flex flex-col">
                  <span className="text-foreground">{user.department}</span>
                  <span className="text-[11px] text-muted-foreground flex items-center gap-1">
                    <Globe className="h-3 w-3" /> {user.location}
                  </span>
                </div>
              </td>
              <td className="py-4 px-6">
                <div className="flex flex-col gap-1.5">
                  <StatusBadge 
                    tone={user.status === "active" ? "success" : user.status === "suspended" ? "danger" : "warning"}
                    size="sm"
                  >
                    {user.status === "active" ? i18n.t('components.admin.roles.AssignedUsersTable.text_1') : user.status === "suspended" ? i18n.t('components.admin.roles.AssignedUsersTable.text_2') : i18n.t('components.admin.roles.AssignedUsersTable.text_3')}
                  </StatusBadge>
                  <span className="text-[11px] text-muted-foreground">
                    {i18n.t('components.admin.roles.AssignedUsersTable.text_12')}{formatDateTime(user.last_login)}
                  </span>
                </div>
              </td>
              <td className="py-4 px-6">
                <div className="flex items-center gap-3">
                  <div className="flex items-center gap-1 text-[11px] font-medium text-foreground">
                    <Smartphone className={user.otp_enabled ? "text-success h-3.5 w-3.5" : "text-muted-foreground h-3.5 w-3.5"} />
                    {i18n.t('components.admin.roles.AssignedUsersTable.text_13')}{user.otp_enabled ? i18n.t('components.admin.roles.AssignedUsersTable.text_4') : i18n.t('components.admin.roles.AssignedUsersTable.text_5')}
                  </div>
                  <div className={user.allowed_ip_status === "verified" ? "text-success" : "text-muted-foreground"}>
                    <Shield className="h-4 w-4" />
                  </div>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}
