import { useCallback, useEffect, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Trans, useTranslation } from "react-i18next";
import useSWR from "swr";
import axios from "axios";
import { toast } from "sonner";
import AutoUpdatingCameraImage from "@/components/camera/AutoUpdatingCameraImage";
import { Button, buttonVariants } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import ActivityIndicator from "@/components/indicators/activity-indicator";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import { useCameraActivity } from "@/hooks/use-camera-activity";
import { cn } from "@/lib/utils";
import Heading from "@/components/ui/heading";
import { Toaster } from "@/components/ui/sonner";
import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
import { getIconForLabel } from "@/utils/iconUtil";
import { getTranslatedLabel } from "@/utils/i18n";
import { ObjectType } from "@/types/ws";
import WsMessageFeed from "@/components/ws/WsMessageFeed";
import { ConfigSectionTemplate } from "@/components/config-form/sections/ConfigSectionTemplate";

import { LuInfo, LuSettings } from "react-icons/lu";
import { LuSquare } from "react-icons/lu";
import { MdReplay } from "react-icons/md";
import { isMobile } from "react-device-detect";
import Logo from "@/components/Logo";

type DebugReplayStatus = {
  active: boolean;
  replay_camera: string | null;
  source_camera: string | null;
  start_time: number | null;
  end_time: number | null;
  live_ready: boolean;
};

type DebugOptions = {
  bbox: boolean;
  timestamp: boolean;
  zones: boolean;
  mask: boolean;
  motion: boolean;
  regions: boolean;
  paths: boolean;
};

const DEFAULT_OPTIONS: DebugOptions = {
  bbox: true,
  timestamp: false,
  zones: false,
  mask: false,
  motion: true,
  regions: false,
  paths: false,
};

const DEBUG_OPTION_KEYS: (keyof DebugOptions)[] = [
  "bbox",
  "timestamp",
  "zones",
  "mask",
  "motion",
  "regions",
  "paths",
];

const DEBUG_OPTION_I18N_KEY: Record<keyof DebugOptions, string> = {
  bbox: "boundingBoxes",
  timestamp: "timestamp",
  zones: "zones",
  mask: "mask",
  motion: "motion",
  regions: "regions",
  paths: "paths",
};

const REPLAY_INIT_SKELETON_TIMEOUT_MS = 8000;

export default function Replay() {
  const { t } = useTranslation(["views/replay", "views/settings", "common"]);
  const navigate = useNavigate();

  const {
    data: status,
    mutate: refreshStatus,
    isLoading,
  } = useSWR<DebugReplayStatus>("debug_replay/status", {
    refreshInterval: 1000,
  });
  const [isInitializing, setIsInitializing] = useState(true);

  // Refresh status immediately on mount to avoid showing "no session" briefly
  useEffect(() => {
    const initializeStatus = async () => {
      await refreshStatus();
      setIsInitializing(false);
    };
    initializeStatus();
  }, [refreshStatus]);

  useEffect(() => {
    if (status?.live_ready) {
      setShowReplayInitSkeleton(false);
    }
  }, [status?.live_ready]);

  const [options, setOptions] = useState<DebugOptions>(DEFAULT_OPTIONS);
  const [isStopping, setIsStopping] = useState(false);
  const [configDialogOpen, setConfigDialogOpen] = useState(false);

  const searchParams = useMemo(() => {
    const params = new URLSearchParams();
    for (const key of DEBUG_OPTION_KEYS) {
      params.set(key, options[key] ? "1" : "0");
    }
    return params;
  }, [options]);

  const handleSetOption = useCallback(
    (key: keyof DebugOptions, value: boolean) => {
      setOptions((prev) => ({ ...prev, [key]: value }));
    },
    [],
  );

  const handleStop = useCallback(() => {
    setIsStopping(true);
    axios
      .post("debug_replay/stop")
      .then(() => {
        toast.success(t("dialog.toast.stopped"), {
          position: "top-center",
        });
        refreshStatus();
        navigate("/review");
      })
      .catch((error) => {
        const errorMessage =
          error.response?.data?.message ||
          error.response?.data?.detail ||
          "Unknown error";
        toast.error(t("dialog.toast.stopError", { error: errorMessage }), {
          position: "top-center",
        });
      })
      .finally(() => {
        setIsStopping(false);
      });
  }, [navigate, refreshStatus, t]);

  // Camera activity for the replay camera
  const { data: config } = useSWR<FrigateConfig>("config", {
    revalidateOnFocus: false,
  });
  const replayCameraName = status?.replay_camera ?? "";
  const replayCameraConfig = replayCameraName
    ? config?.cameras?.[replayCameraName]
    : undefined;

  const { objects } = useCameraActivity(replayCameraConfig);

  const [showReplayInitSkeleton, setShowReplayInitSkeleton] = useState(false);

  useEffect(() => {
    if (!status?.active || !status.replay_camera) {
      setShowReplayInitSkeleton(false);
      return;
    }

    setShowReplayInitSkeleton(true);

    const timeout = window.setTimeout(() => {
      setShowReplayInitSkeleton(false);
    }, REPLAY_INIT_SKELETON_TIMEOUT_MS);

    return () => {
      window.clearTimeout(timeout);
    };
  }, [status?.active, status?.replay_camera]);

  useEffect(() => {
    if (status?.live_ready) {
      setShowReplayInitSkeleton(false);
    }
  }, [status?.live_ready]);

  // Format time range for display
  const timeRangeDisplay = useMemo(() => {
    if (!status?.start_time || !status?.end_time) return "";
    const start = new Date(status.start_time * 1000).toLocaleString();
    const end = new Date(status.end_time * 1000).toLocaleString();
    return `${start} — ${end}`;
  }, [status]);

  // Show loading state
  if (isInitializing || (isLoading && !status?.active)) {
    return (
      <div className="flex size-full items-center justify-center">
        <ActivityIndicator />
      </div>
    );
  }

  // No active session
  if (!status?.active) {
    return (
      <div className="flex size-full flex-col items-center justify-center gap-4 p-8">
        <MdReplay className="size-12" />
        <Heading as="h2" className="text-center">
          {t("page.noSession")}
        </Heading>
        <p className="max-w-md text-center text-muted-foreground">
          {t("page.noSessionDesc")}
        </p>
        <Button variant="default" onClick={() => navigate("/review")}>
          {t("page.goToRecordings")}
        </Button>
      </div>
    );
  }

  return (
    <div className="flex size-full flex-col overflow-hidden">
      <Toaster position="top-center" closeButton={true} />

      {/* Top bar */}
      <div className="flex min-h-12 items-end justify-end border-b border-secondary px-2 py-2 md:min-h-16 md:px-3 md:py-3">
        {isMobile && (
          <Logo className="absolute inset-x-1/2 h-8 -translate-x-1/2" />
        )}
        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            size="sm"
            className="flex items-center gap-2"
            onClick={() => setConfigDialogOpen(true)}
          >
            <LuSettings className="size-4" />
            <span className="hidden md:inline">{t("page.configuration")}</span>
          </Button>

          <AlertDialog>
            <AlertDialogTrigger asChild>
              <Button
                variant="destructive"
                size="sm"
                className="flex items-center gap-2 text-white"
                disabled={isStopping}
              >
                {isStopping && <ActivityIndicator className="size-4" />}
                <span className="hidden md:inline">{t("page.stopReplay")}</span>
                <LuSquare className="size-4 md:hidden" />
              </Button>
            </AlertDialogTrigger>
            <AlertDialogContent>
              <AlertDialogHeader>
                <AlertDialogTitle>
                  {t("page.confirmStop.title")}
                </AlertDialogTitle>
                <AlertDialogDescription>
                  {t("page.confirmStop.description")}
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>
                  {t("page.confirmStop.cancel")}
                </AlertDialogCancel>
                <AlertDialogAction
                  onClick={handleStop}
                  className={cn(
                    buttonVariants({ variant: "destructive" }),
                    "text-white",
                  )}
                >
                  {t("page.confirmStop.confirm")}
                </AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        </div>
      </div>

      {/* Main content */}
      <div className="flex flex-1 flex-col overflow-hidden pb-2 md:flex-row">
        {/* Camera feed */}
        <div className="flex max-h-[40%] px-2 pt-2 md:h-dvh md:max-h-full md:w-7/12 md:grow md:px-4 md:pt-2">
          {isStopping ? (
            <div className="flex size-full items-center justify-center rounded-lg bg-background_alt">
              <div className="flex flex-col items-center justify-center gap-2">
                <ActivityIndicator className="size-8" />
                <div className="text-secondary-foreground">
                  {t("page.stoppingReplay")}
                </div>
              </div>
            </div>
          ) : (
            status.replay_camera && (
              <div className="relative size-full min-h-10">
                <AutoUpdatingCameraImage
                  className="size-full"
                  cameraClasses="relative w-full h-full flex flex-col justify-start"
                  searchParams={searchParams}
                  camera={status.replay_camera}
                  showFps={false}
                />
                {showReplayInitSkeleton && (
                  <div className="pointer-events-none absolute inset-0 z-10 size-full rounded-lg bg-background">
                    <Skeleton className="size-full rounded-lg" />
                    <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center gap-2">
                      <ActivityIndicator className="size-8" />
                      <div className="text-secondary-foreground">
                        {t("page.initializingReplay")}
                      </div>
                    </div>
                  </div>
                )}
              </div>
            )
          )}
        </div>

        {/* Side panel */}
        <div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0 md:w-4/12">
          <div className="mb-5 flex flex-col space-y-2">
            <Heading as="h3" className="mb-0">
              {t("title")}
            </Heading>
            <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
              <span className="smart-capitalize">{status.source_camera}</span>
              {timeRangeDisplay && (
                <>
                  <span className="hidden md:inline">•</span>
                  <span className="hidden md:inline">{timeRangeDisplay}</span>
                </>
              )}
            </div>
            <div className="mb-5 space-y-3 text-sm text-muted-foreground">
              <p>{t("description")}</p>
            </div>
          </div>
          <Tabs defaultValue="debug" className="flex h-full w-full flex-col">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="debug">
                {t("debug.debugging", { ns: "views/settings" })}
              </TabsTrigger>
              <TabsTrigger value="objects">{t("page.objects")}</TabsTrigger>
              <TabsTrigger value="messages">
                {t("websocket_messages")}
              </TabsTrigger>
            </TabsList>
            <TabsContent value="debug" className="mt-2">
              <div className="mt-2 space-y-6">
                <div className="my-2.5 flex flex-col gap-2.5">
                  {DEBUG_OPTION_KEYS.map((key) => {
                    const i18nKey = DEBUG_OPTION_I18N_KEY[key];
                    return (
                      <div
                        key={key}
                        className="flex w-full flex-row items-center justify-between"
                      >
                        <div className="mb-1 flex flex-col">
                          <div className="flex items-center gap-2">
                            <Label
                              className="mb-0 cursor-pointer text-primary smart-capitalize"
                              htmlFor={`debug-${key}`}
                            >
                              {t(`debug.${i18nKey}.title`, {
                                ns: "views/settings",
                              })}
                            </Label>
                            {(key === "bbox" ||
                              key === "motion" ||
                              key === "regions" ||
                              key === "paths") && (
                              <Popover>
                                <PopoverTrigger asChild>
                                  <div className="cursor-pointer p-0">
                                    <LuInfo className="size-4" />
                                    <span className="sr-only">
                                      {t("button.info", { ns: "common" })}
                                    </span>
                                  </div>
                                </PopoverTrigger>
                                <PopoverContent className="w-80 text-sm">
                                  {key === "bbox" ? (
                                    <>
                                      <p className="mb-2">
                                        <strong>
                                          {t(
                                            "debug.boundingBoxes.colors.label",
                                            {
                                              ns: "views/settings",
                                            },
                                          )}
                                        </strong>
                                      </p>
                                      <ul className="list-disc space-y-1 pl-5">
                                        <Trans ns="views/settings">
                                          debug.boundingBoxes.colors.info
                                        </Trans>
                                      </ul>
                                    </>
                                  ) : (
                                    <Trans ns="views/settings">
                                      {`debug.${i18nKey}.tips`}
                                    </Trans>
                                  )}
                                </PopoverContent>
                              </Popover>
                            )}
                          </div>
                          <div className="mt-1 text-xs text-muted-foreground">
                            {t(`debug.${i18nKey}.desc`, {
                              ns: "views/settings",
                            })}
                          </div>
                        </div>
                        <Switch
                          id={`debug-${key}`}
                          className="ml-1"
                          checked={options[key]}
                          onCheckedChange={(checked) =>
                            handleSetOption(key, checked)
                          }
                        />
                      </div>
                    );
                  })}
                </div>
              </div>
            </TabsContent>
            <TabsContent value="objects" className="mt-2">
              <ObjectList
                cameraConfig={replayCameraConfig}
                objects={objects}
                config={config}
              />
            </TabsContent>
            <TabsContent
              value="messages"
              className="mt-2 flex min-h-0 flex-1 flex-col"
            >
              <div className="flex h-full flex-col overflow-hidden rounded-md border border-secondary">
                <WsMessageFeed
                  maxSize={2000}
                  lockedCamera={status.replay_camera ?? undefined}
                  showCameraBadge={false}
                />
              </div>
            </TabsContent>
          </Tabs>
        </div>
      </div>

      <Dialog open={configDialogOpen} onOpenChange={setConfigDialogOpen}>
        <DialogContent className="scrollbar-container max-h-[90dvh] overflow-y-auto sm:max-w-xl md:max-w-3xl lg:max-w-4xl">
          <DialogHeader>
            <DialogTitle>{t("page.configuration")}</DialogTitle>
            <DialogDescription className="mb-5">
              {t("page.configurationDesc")}
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-6">
            <ConfigSectionTemplate
              sectionKey="motion"
              level="replay"
              cameraName={status.replay_camera ?? undefined}
              skipSave
              noStickyButtons
              requiresRestart={false}
              collapsible
              defaultCollapsed={false}
              showTitle
              showOverrideIndicator={false}
            />
            <ConfigSectionTemplate
              sectionKey="objects"
              level="replay"
              cameraName={status.replay_camera ?? undefined}
              skipSave
              noStickyButtons
              requiresRestart={false}
              collapsible
              defaultCollapsed={false}
              showTitle
              showOverrideIndicator={false}
            />
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}

type ObjectListProps = {
  cameraConfig?: CameraConfig;
  objects?: ObjectType[];
  config?: FrigateConfig;
};

function ObjectList({ cameraConfig, objects, config }: ObjectListProps) {
  const { t } = useTranslation(["views/settings"]);

  const colormap = useMemo(() => {
    if (!config) {
      return;
    }
    return config.model?.colormap;
  }, [config]);

  const getColorForObjectName = useCallback(
    (objectName: string) => {
      return colormap && colormap[objectName]
        ? `rgb(${colormap[objectName][2]}, ${colormap[objectName][1]}, ${colormap[objectName][0]})`
        : "rgb(128, 128, 128)";
    },
    [colormap],
  );

  if (!objects || objects.length === 0) {
    return (
      <div className="p-3 text-center text-sm text-muted-foreground">
        {t("debug.noObjects", { ns: "views/settings" })}
      </div>
    );
  }

  return (
    <div className="flex w-full flex-col gap-2">
      {objects.map((obj: ObjectType) => {
        return (
          <div
            key={obj.id}
            className="flex flex-col rounded-lg bg-secondary/30 p-2"
          >
            <div className="flex flex-row items-center gap-3 pb-1">
              <div
                className="rounded-lg p-2"
                style={{
                  backgroundColor: obj.stationary
                    ? "rgb(110,110,110)"
                    : getColorForObjectName(obj.label),
                }}
              >
                {getIconForLabel(obj.label, "object", "size-4 text-white")}
              </div>
              <div className="text-sm font-medium">
                {getTranslatedLabel(obj.label)}
              </div>
            </div>
            <div className="flex flex-col gap-1 pl-1 text-xs text-primary-variant">
              <div className="flex items-center justify-between">
                <span>
                  {t("debug.objectShapeFilterDrawing.score", {
                    ns: "views/settings",
                  })}
                  :
                </span>
                <span className="text-primary">
                  {obj.score ? (obj.score * 100).toFixed(1) : "-"}%
                </span>
              </div>
              {obj.ratio && (
                <div className="flex items-center justify-between">
                  <span>
                    {t("debug.objectShapeFilterDrawing.ratio", {
                      ns: "views/settings",
                    })}
                    :
                  </span>
                  <span className="text-primary">{obj.ratio.toFixed(2)}</span>
                </div>
              )}
              {obj.area && cameraConfig && (
                <div className="flex items-center justify-between">
                  <span>
                    {t("debug.objectShapeFilterDrawing.area", {
                      ns: "views/settings",
                    })}
                    :
                  </span>
                  <span className="text-primary">
                    {obj.area} px (
                    {(
                      (obj.area /
                        (cameraConfig.detect.width *
                          cameraConfig.detect.height)) *
                      100
                    ).toFixed(2)}
                    %)
                  </span>
                </div>
              )}
            </div>
          </div>
        );
      })}
    </div>
  );
}