import usePreventAutoFocus from '@hooks/use-prevent-auto-focus';
import { m } from '@paraglide/messages';
import { EyeIcon } from '@phosphor-icons/react';
import { Button } from '@ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@ui/dialog';
import { Label } from '@ui/label';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@ui/table';
import { Tooltip, TooltipContent, TooltipTrigger } from '@ui/tooltip';
import { formatters } from '@utils/formatters';
import RoleBadge from '../avatar/role-badge';

type ViewDetailProps = {
  data: HouseWithMembers;
};

const ViewDetailHouse = ({ data }: ViewDetailProps) => {
  const prevent = usePreventAutoFocus();

  return (
    <Dialog>
      <Tooltip>
        <TooltipTrigger asChild>
          <DialogTrigger asChild>
            <Button
              type="button"
              variant="ghost"
              size="icon"
              className="rounded-full cursor-pointer text-teal-500 hover:bg-teal-100 hover:text-teal-600"
            >
              <EyeIcon size={16} />
              <span className="sr-only">{m.ui_view_btn()}</span>
            </Button>
          </DialogTrigger>
        </TooltipTrigger>
        <TooltipContent
          side="left"
          className="bg-teal-500 [&_svg]:bg-teal-500 [&_svg]:fill-teal-500 text-white"
        >
          <Label>{m.ui_view_btn()}</Label>
        </TooltipContent>
      </Tooltip>
      <DialogContent
        className="max-w-100 xl:max-w-2xl"
        {...prevent}
        onPointerDownOutside={(e) => e.preventDefault()}
      >
        <DialogHeader>
          <DialogTitle className="flex items-center gap-3 text-lg font-bold text-teal-600">
            <EyeIcon size={20} />
            {m.ui_dialog_view_title({ type: m.nav_houses() })}
          </DialogTitle>
          <DialogDescription className="sr-only">
            {m.ui_dialog_view_title({ type: m.nav_houses() })}
          </DialogDescription>
        </DialogHeader>
        <div className="flex flex-col gap-2">
          <div className="flex items-center gap-2">
            <span className="font-bold">
              {m.houses_page_ui_table_header_name()}:
            </span>
            <Label>{data.name}</Label>
          </div>
          <div className="flex items-center gap-2">
            <span className="font-bold">
              {m.houses_page_ui_table_header_created_at()}:
            </span>
            <Label>{formatters.dateTime(new Date(data.createdAt))}</Label>
          </div>
          <div className="flex flex-col gap-2">
            <span className="font-bold">
              {m.houses_page_ui_table_header_members()}:
            </span>
            <div className="flex items-center gap-2">
              <span className="font-bold">
                {m.houses_page_ui_view_label_count()}:
              </span>
              <Label>{data.members.length}</Label>
            </div>
            <div className="overflow-hidden rounded-md border">
              <Table className="bg-white">
                <TableHeader>
                  <TableRow>
                    <TableHead className="px-2 h-7 bg-primary text-white text-xs w-1/2">
                      {m.houses_page_ui_view_table_header_email()}
                    </TableHead>
                    <TableHead className="px-2 h-7 bg-primary text-white text-xs w-1/2">
                      {m.houses_page_ui_view_table_header_role()}
                    </TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {data.members.map((member) => (
                    <TableRow key={member.user.email}>
                      <TableCell>{member.user.email}</TableCell>
                      <TableCell>
                        <RoleBadge type={member.role} />
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
};
export default ViewDetailHouse;
