'use client';

import {
  Table,
  TableHeader,
  TableRow,
  TableHead,
  TableBody,
  TableCell,
} from '@usesend/ui/src/table';
import { api } from '~/trpc/react';
import { useUrlState } from '~/hooks/useUrlState';
import { Button } from '@usesend/ui/src/button';
import Spinner from '@usesend/ui/src/spinner';
import { formatDistanceToNow } from 'date-fns';
// import DeleteCampaign from "./delete-campaign";
import Link from 'next/link';
// import DuplicateCampaign from "./duplicate-campaign";

import { TextWithCopyButton } from '@usesend/ui/src/text-with-copy';
import DeleteTemplate from './delete-template';
import DuplicateTemplate from './duplicate-template';

export default function TemplateList() {
  const [page, setPage] = useUrlState('page', '1');

  const pageNumber = Number(page);

  const templateQuery = api.template.getTemplates.useQuery({
    page: pageNumber,
  });

  return (
    <div className="mt-10 flex flex-col gap-4">
      <div className="border-border flex flex-col rounded-xl border shadow">
        <Table className="">
          <TableHeader className="">
            <TableRow className="bg-muted/30">
              <TableHead className="rounded-tl-xl">Name</TableHead>
              <TableHead className="">ID</TableHead>
              <TableHead className="">Created At</TableHead>
              <TableHead className="rounded-tr-xl">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {templateQuery.isLoading ? (
              <TableRow className="h-32">
                <TableCell colSpan={4} className="py-4 text-center">
                  <Spinner
                    className="mx-auto h-6 w-6"
                    innerSvgClass="stroke-primary"
                  />
                </TableCell>
              </TableRow>
            ) : templateQuery.data?.templates.length ? (
              templateQuery.data?.templates.map((template) => (
                <TableRow key={template.id} className="">
                  <TableCell className="font-medium">
                    <Link
                      className="text-foreground hover:text-foreground underline decoration-dashed underline-offset-4"
                      href={`/templates/${template.id}/edit`}
                    >
                      {template.name}
                    </Link>
                  </TableCell>
                  <TableCell>
                    <TextWithCopyButton
                      value={template.id}
                      className="w-[200px] overflow-hidden"
                    />
                  </TableCell>
                  <TableCell className="">
                    {formatDistanceToNow(new Date(template.createdAt), {
                      addSuffix: true,
                    })}
                  </TableCell>
                  <TableCell>
                    <div className="flex gap-2">
                      <DuplicateTemplate template={template} />
                      <DeleteTemplate template={template} />
                    </div>
                  </TableCell>
                </TableRow>
              ))
            ) : (
              <TableRow className="h-32">
                <TableCell colSpan={4} className="py-4 text-center">
                  No templates found
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
      <div className="flex justify-end gap-4">
        <Button
          size="sm"
          onClick={() => setPage((pageNumber - 1).toString())}
          disabled={pageNumber === 1}
        >
          Previous
        </Button>
        <Button
          size="sm"
          onClick={() => setPage((pageNumber + 1).toString())}
          disabled={pageNumber >= (templateQuery.data?.totalPage ?? 0)}
        >
          Next
        </Button>
      </div>
    </div>
  );
}