"use client"

import { RoleApiScope } from "@/types/roles"
import { cn } from "@/lib/utils"
import { Zap, ShieldCheck, AlertTriangle, Fingerprint } from "lucide-react"
import i18n from "@/lib/i18n";

interface ApiAccessTableProps {
  scopes: RoleApiScope[]
}

export function ApiAccessTable({ scopes }: ApiAccessTableProps) {
  if (scopes.length === 0) {
    return (
      <div className="bg-card border border-border rounded-lg p-12 text-center">
        <Zap 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.ApiAccessTable.text_8')}</h4>
        <p className="text-[13px] text-muted-foreground">{i18n.t('components.admin.roles.ApiAccessTable.text_9')}</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.ApiAccessTable.text_10')}</th>
            <th className="py-3 px-6 text-[12px] font-semibold uppercase tracking-wider text-foreground text-center">{i18n.t('components.admin.roles.ApiAccessTable.text_11')}</th>
            <th className="py-3 px-6 text-[12px] font-semibold uppercase tracking-wider text-foreground text-center">{i18n.t('components.admin.roles.ApiAccessTable.text_12')}</th>
            <th className="py-3 px-6 text-[12px] font-semibold uppercase tracking-wider text-foreground text-center">{i18n.t('components.admin.roles.ApiAccessTable.text_13')}</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-border/30 text-[13px]">
          {scopes.map((scope) => (
            <tr key={scope.id} className="hover:bg-muted/10 transition-colors">
              <td className="py-4 px-6">
                <div className="flex flex-col">
                  <span className="font-semibold text-foreground flex items-center gap-1.5">
                    <Fingerprint className="h-4 w-4 text-primary/70" />
                    {scope.name}
                  </span>
                  <span className="text-[11px] text-muted-foreground mt-0.5">{scope.description}</span>
                </div>
              </td>
              <td className="py-4 px-6 text-center">
                <span className={cn(
                  "px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider border",
                  scope.access_level === "admin" ? "bg-primary/10 text-primary border-primary/20" :
                  scope.access_level === "write" ? "bg-blue-500/10 text-blue-600 border-blue-500/20" :
                  "bg-muted/50 text-muted-foreground border-border"
                )}>
                  {scope.access_level === "admin" ? i18n.t('components.admin.roles.ApiAccessTable.text_1') : scope.access_level === "write" ? i18n.t('components.admin.roles.ApiAccessTable.text_2') : i18n.t('components.admin.roles.ApiAccessTable.text_3')}
                </span>
              </td>
              <td className="py-4 px-6 text-center">
                <div className="flex items-center justify-center gap-1.5">
                  <div className={cn(
                    "h-2 w-2 rounded-full",
                    scope.risk_level === "critical" ? "bg-destructive shadow-[0_0_8px_rgba(220,38,38,0.5)]" :
                    scope.risk_level === "high" ? "bg-destructive/80" :
                    scope.risk_level === "medium" ? "bg-warning" : "bg-success"
                  )} />
                  <span className="font-medium text-[11px] uppercase">
                    {scope.risk_level === "critical" ? i18n.t('components.admin.roles.ApiAccessTable.text_4') : scope.risk_level === "high" ? i18n.t('components.admin.roles.ApiAccessTable.text_5') : scope.risk_level === "medium" ? i18n.t('components.admin.roles.ApiAccessTable.text_6') : i18n.t('components.admin.roles.ApiAccessTable.text_7')}
                  </span>
                </div>
              </td>
              <td className="py-4 px-6 text-center">
                {scope.approval_required ? (
                  <div className="flex flex-col items-center gap-1">
                    <ShieldCheck className="h-4 w-4 text-primary" />
                    <span className="text-[9px] font-bold uppercase text-primary tracking-tighter">{i18n.t('components.admin.roles.ApiAccessTable.text_14')}</span>
                  </div>
                ) : (
                  <span className="text-muted-foreground/30 text-[10px]">—</span>
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}
