import React from 'react';
import {
  Button,
  Input,
  Table,
  TableHeader,
  TableRow,
  TableHead,
  TableBody,
  TableCell,
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  Badge,
  Card,
} from 'xertica-ui/ui';
import { Search, Plus, MoreHorizontal } from 'lucide-react';
import { useTranslation } from 'react-i18next';

export function CrudTemplate() {
  const { t } = useTranslation();
  return (
    <div className="flex w-full flex-col gap-6 p-6 mx-auto max-w-7xl">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">{t('crudTemplate.title')}</h1>
          <p className="text-muted-foreground">{t('crudTemplate.subtitle')}</p>
        </div>
        <Button className="gap-2">
          <Plus className="size-4" />
          {t('crudTemplate.newMember')}
        </Button>
      </div>

      <Card>
        <div className="flex p-4 border-b gap-2">
          <div className="relative w-full max-w-sm">
            <Search className="absolute left-2.5 top-2.5 size-4 text-muted-foreground" />
            <Input placeholder={t('crudTemplate.searchPlaceholder')} className="w-full h-9 pl-8" />
          </div>
        </div>

        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>{t('crudTemplate.headers.name')}</TableHead>
              <TableHead>{t('crudTemplate.headers.email')}</TableHead>
              <TableHead className="hidden md:table-cell">
                {t('crudTemplate.headers.role')}
              </TableHead>
              <TableHead>{t('crudTemplate.headers.status')}</TableHead>
              <TableHead className="text-right">{t('crudTemplate.headers.action')}</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow>
              <TableCell className="font-medium">Admin Dev</TableCell>
              <TableCell>dev@xertica.com</TableCell>
              <TableCell className="hidden md:table-cell">
                {t('crudTemplate.roles.administrator')}
              </TableCell>
              <TableCell>
                <Badge variant="outline">{t('crudTemplate.status.active')}</Badge>
              </TableCell>
              <TableCell className="text-right">
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="icon" className="size-8">
                      <MoreHorizontal className="size-4" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    <DropdownMenuItem>{t('crudTemplate.actions.editProfile')}</DropdownMenuItem>
                    <DropdownMenuItem className="text-destructive">
                      {t('crudTemplate.actions.revokeAccess')}
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell className="font-medium">João Silva</TableCell>
              <TableCell>joao@xertica.com</TableCell>
              <TableCell className="hidden md:table-cell">
                {t('crudTemplate.roles.editor')}
              </TableCell>
              <TableCell>
                <Badge variant="secondary">{t('crudTemplate.status.inactive')}</Badge>
              </TableCell>
              <TableCell className="text-right">
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="icon" className="size-8">
                      <MoreHorizontal className="size-4" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    <DropdownMenuItem>{t('crudTemplate.actions.editProfile')}</DropdownMenuItem>
                    <DropdownMenuItem className="text-destructive">
                      {t('crudTemplate.actions.revokeAccess')}
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </Card>
    </div>
  );
}