"use client";

import type { RouterOutputs } from "@openstatus/api";
import { currentImpactsFromUpdates } from "@openstatus/db/src/schema/page_components/constants";
import { Add } from "@openstatus/icons";
import { Button } from "@openstatus/ui/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@openstatus/ui/components/ui/table";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@openstatus/ui/components/ui/tooltip";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useParams } from "next/navigation";

import { ProcessMessage } from "@/components/content/process-message";
import { TableCellDate } from "@/components/data-table/table-cell-date";
import { FormSheetStatusReportUpdate } from "@/components/forms/status-report-update/sheet";
import { icons } from "@/data/icons";
import {
  colors,
  defaultComponentImpacts,
  getNextStatus,
  toCreateStatusReportUpdateInput,
} from "@/data/status-report-updates.client";
import { useTRPC } from "@/lib/trpc/client";
import { cn } from "@/lib/utils";

import { DataTableRowActions } from "./data-table-row-actions";

type StatusReportUpdates =
  RouterOutputs["statusReport"]["list"][number]["updates"];

export function DataTable({
  updates,
  reportId,
  components = [],
}: {
  updates: StatusReportUpdates;
  reportId: number;
  components?: { id: number; name: string }[];
}) {
  const reportHasImpacts = updates.some((u) => u.componentImpacts.length > 0);
  const currentImpacts = currentImpactsFromUpdates(updates);
  const nextStatus = getNextStatus(
    updates[updates.length - 1]?.status ?? "investigating",
  );
  const trpc = useTRPC();
  const { id } = useParams<{ id: string }>();
  const queryClient = useQueryClient();
  const sendStatusReportUpdateMutation = useMutation(
    trpc.subscriberNotification.statusReport.mutationOptions(),
  );
  const createStatusReportUpdateMutation = useMutation(
    trpc.statusReport.createStatusReportUpdate.mutationOptions({
      onSuccess: (update) => {
        if (update?.notifySubscribers) {
          sendStatusReportUpdateMutation.mutate({ id: update.id });
        }
        queryClient.invalidateQueries({
          queryKey: trpc.statusReport.list.queryKey({
            pageId: Number.parseInt(id),
          }),
        });
        queryClient.invalidateQueries({
          queryKey: trpc.page.list.queryKey(),
        });
        queryClient.invalidateQueries({
          queryKey: trpc.statusReport.list.queryKey({
            period: "7d",
          }),
        });
      },
    }),
  );

  return (
    <Table className="w-full">
      <TableHeader>
        <TableRow>
          <TableHead className="w-7">
            <span className="sr-only">Status</span>
          </TableHead>
          <TableHead>Message</TableHead>
          <TableHead>Date</TableHead>
          <TableHead className="w-[px]">
            <TooltipProvider>
              <Tooltip>
                <FormSheetStatusReportUpdate
                  defaultValues={{
                    status: nextStatus,
                    componentImpacts: defaultComponentImpacts({
                      components,
                      currentImpacts,
                      nextStatus,
                    }),
                  }}
                  components={components}
                  onSubmit={async (values) => {
                    await createStatusReportUpdateMutation.mutateAsync(
                      toCreateStatusReportUpdateInput({
                        statusReportId: reportId,
                        values,
                        reportHasImpacts,
                      }),
                    );
                  }}
                >
                  <TooltipTrigger asChild>
                    <Button size="icon" className="ml-auto flex h-7 w-7 p-0">
                      <Add />
                      <span className="sr-only">Create Report Update</span>
                    </Button>
                  </TooltipTrigger>
                </FormSheetStatusReportUpdate>
                <TooltipContent side="left" align="center">
                  Create Report Update
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          </TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {updates.map((update) => {
          const Icon = icons.status[update.status];
          return (
            <TableRow key={update.id}>
              <TableCell>
                <div className="p-1">
                  <Icon className={cn(colors[update.status])} size={20} />
                </div>
              </TableCell>
              <TableCell>
                <div className="prose dark:prose-invert prose-sm text-muted-foreground line-clamp-3 text-wrap">
                  <ProcessMessage value={update.message} />
                </div>
              </TableCell>
              <TableCell className="text-muted-foreground w-[170px]">
                <TableCellDate value={update.date} />
              </TableCell>
              <TableCell className="w-8">
                <DataTableRowActions row={update} components={components} />
              </TableCell>
            </TableRow>
          );
        })}
      </TableBody>
    </Table>
  );
}