'use client';

import { useState } from 'react';
import { Copy, Check, Trash2 } from 'lucide-react';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from '@/components/ui/tooltip';
import { useI18n } from '@/lib/i18n';
import type { ApiKey } from './types';

interface ApiKeyTableProps {
  keys: ApiKey[];
  onRevoke: (key: ApiKey) => void;
  isRevoking: boolean;
}

export function ApiKeyTable({ keys, onRevoke, isRevoking }: ApiKeyTableProps) {
  const { t } = useI18n();
  const [copiedId, setCopiedId] = useState<string | null>(null);

  const copyPrefix = (keyId: string, prefix: string) => {
    navigator.clipboard.writeText(prefix);
    setCopiedId(keyId);
    setTimeout(() => setCopiedId(null), 2000);
  };

  if (keys.length === 0) {
    return (
      <div className="rounded-lg border border-border p-8 text-center">
        <p className="text-muted-foreground">{t('apiKeys.generateNew')}</p>
      </div>
    );
  }

  return (
    <div className="rounded-lg border border-border">
      <Table>
        <TableHeader>
          <TableRow className="hover:bg-transparent">
            <TableHead className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
              {t('apiKeys.table.name')}
            </TableHead>
            <TableHead className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
              {t('apiKeys.table.prefix')}
            </TableHead>
            <TableHead className="hidden text-xs font-medium uppercase tracking-wider text-muted-foreground md:table-cell">
              {t('apiKeys.table.created')}
            </TableHead>
            <TableHead className="hidden text-xs font-medium uppercase tracking-wider text-muted-foreground lg:table-cell">
              {t('apiKeys.table.lastUsed')}
            </TableHead>
            <TableHead className="hidden text-xs font-medium uppercase tracking-wider text-muted-foreground lg:table-cell">
              {t('apiKeys.table.actions')}
            </TableHead>
            <TableHead className="text-end text-xs font-medium uppercase tracking-wider text-muted-foreground">
              {t('apiKeys.table.actions')}
            </TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {keys.map((key) => (
            <TableRow key={key.id}>
              <TableCell className="font-medium">
                {key.name}
              </TableCell>
              <TableCell>
                <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">
                  {key.key_prefix}...
                </code>
              </TableCell>
              <TableCell className="hidden text-muted-foreground md:table-cell">
                {key.created_at ? new Date(key.created_at).toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' }) : t('apiKeys.table.never')}
              </TableCell>
              <TableCell className="hidden text-muted-foreground lg:table-cell">
                {key.last_used_at ? new Date(key.last_used_at).toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' }) : t('apiKeys.table.never')}
              </TableCell>
              <TableCell className="hidden lg:table-cell">
                <Badge variant="secondary" className="text-xs">
                  {key.usage_count}
                </Badge>
              </TableCell>
              <TableCell>
                <div className="flex items-center justify-end gap-1">
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Button
                        variant="ghost"
                        size="icon-sm"
                        onClick={() => copyPrefix(key.id, key.key_prefix)}
                        aria-label={t('apiKeys.table.copyPrefix')}
                      >
                        {copiedId === key.id ? (
                          <Check className="size-3.5 text-accent" />
                        ) : (
                          <Copy className="size-3.5 text-muted-foreground" />
                        )}
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>
                      {copiedId === key.id ? t('apiKeys.copied') : t('apiKeys.table.copyPrefix')}
                    </TooltipContent>
                  </Tooltip>

                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Button
                        variant="ghost"
                        size="icon-sm"
                        onClick={() => onRevoke(key)}
                        disabled={isRevoking}
                        aria-label={t('apiKeys.table.revokeKey')}
                      >
                        <Trash2 className="size-3.5 text-muted-foreground hover:text-destructive" />
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>{t('apiKeys.table.revoke')}</TooltipContent>
                  </Tooltip>
                </div>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}
