import { createFileRoute } from "@tanstack/react-router";
import { FrontEndGameTypeDetailed, GameInstallProgress, GameStatusType, RPC_URL } from "@shared/constants";
import { twJoin, twMerge } from "tailwind-merge";
import { JSX, RefObject, useEffect, useRef, useState } from "react";
import { FocusContext, setFocus, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
import classNames from "classnames";
import { Clock, CloudDownload, Download, Folder, HardDrive, Image, PackageOpen, Play, Settings, Store, Trash, TriangleAlert, Trophy } from "lucide-react";
import { HeaderUI } from "../../components/Header";
import prettyBytes from 'pretty-bytes';
import { useEventListener } from "usehooks-ts";
import { PopSource, SaveSource, useFocusEventListener } from "../../scripts/spatialNavigation";
import { AnimatedBackground } from "../../components/AnimatedBackground";
import { rommApi } from "../../scripts/clientApi";
import toast from "react-hot-toast";
import { queryOptions, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Router } from "../..";
import { ContextDialog, ContextList, DialogEntry } from "../../components/ContextDialog";
import Shortcuts from "../../components/Shortcuts";
import { GamePadButtonCode, useShortcutContext, useShortcuts } from "@/mainview/scripts/shortcuts";

const gameQuery = (source: string, id: number) => queryOptions({
  queryKey: ['game', source, id],
  queryFn: async () =>
  {
    const { data, error } = await rommApi.api.romm.game({ source })({ id }).get();
    if (error) throw error;
    return data;
  }
});

export const Route = createFileRoute("/game/$source/$id")({
  loader: ({ params, context }) =>
  {
    context.queryClient.prefetchQuery(gameQuery(params.source, Number(params.id)));
  },
  component: GameDetailsUI,
  pendingComponent: GameDetailsUIPending,
});

function GameDetailsUIPending ()
{
  return <AnimatedBackground>
    <div className="flex flex-col p-2 px-3 w-full h-full">
      <HeaderUI />
      <div className="flex flex-col justify-center items-center grow">
        <span className="loading loading-dots loading-xl"></span>
      </div>
    </div>
  </AnimatedBackground>;
}

function HandleGoBack ()
{
  const source = PopSource('details');
  Router.navigate({ to: source ?? '/', viewTransition: { types: ['zoom-out'] } });
}

function Details (data: { mainAreaRef: RefObject<HTMLDivElement | null>, game?: FrontEndGameTypeDetailed; })
{
  const { ref, focusKey } = useFocusable({
    focusKey: 'main-details', onFocus: () =>
    {
      data.mainAreaRef.current?.scrollIntoView({ block: 'start', behavior: 'smooth' });
    },
    preferredChildFocusKey: "play-btn",
    saveLastFocusedChild: false
  });

  const platformCoverImg = `${RPC_URL(__HOST__)}${data.game?.path_platform_cover}`;
  const gameCoverImg = data.game?.path_cover ? `${RPC_URL(__HOST__)}${data.game?.path_cover}` : undefined;

  let fileSizeIcon: JSX.Element | undefined;
  if (!data.game)
  {
    fileSizeIcon = <span className="loading loading-spinner loading-lg"></span>;
  } else if (data.game.missing)
  {
    fileSizeIcon = <TriangleAlert />;
  } else if (data.game.local)
  {
    fileSizeIcon = <HardDrive />;
  } else
  {
    fileSizeIcon = <CloudDownload />;
  }

  return <main ref={ref} className="flex p-3 flex-col h-[75vh]">
    <FocusContext value={focusKey}>
      <section className="flex my-4 p-12 pt-4 gap-12 h-full rounded-4xl z-0">
        <div className="flex gap-6 overflow-hidden bg-base-300 justify-end h-full rounded-3xl aspect-3/4">
          {gameCoverImg ?
            <img className="drop-shadow-2xl drop-shadow-base-300/40 h-full" src={gameCoverImg}></img> :
            <div className="skeleton w-full h-full"></div>
          }
        </div>
        <div className="flex-2 flex flex-col gap-6 pt-16">
          <div className="flex gap-6">
            <Detail icon={<Clock />} >{data.game?.last_played ? new Date(data.game.last_played).toDateString() : "Never"}</Detail>
            {!!data.game && (data.game.fs_size_bytes !== null || data.game.missing) &&
              <div className={classNames({ "text-error": data.game.missing })}>
                <div className="tooltip" data-tip={data.game.path_fs}>
                  <Detail icon={fileSizeIcon} >{data.game.missing ? 'Missing' : prettyBytes(data.game.fs_size_bytes!)}</Detail>
                </div>
              </div>}
            <Detail icon={<img className="size-6" src={platformCoverImg}></img>} >{data.game?.platform_display_name ?? <div className="skeleton h-4 w-32"></div>}</Detail>
            <Detail icon={
              <Store />
            } >
              {data.game?.source ?? data.game?.id.source}
              {data.game?.local && <small className="text-base-content/60 font-semibold">local</small>}</Detail>
          </div>
          <div className="text-base-content/80 leading-relaxed grow text-wrap whitespace-break-spaces text-ellipsis overflow-hidden">
            {data.game?.summary ?? <div className="flex flex-col gap-4 w-full">
              <div className="skeleton h-4 w-[30%]"></div>
              <div className="skeleton h-4 w-[80%]"></div>
              <div className="skeleton h-4 w-full"></div>
              <div className="skeleton h-4 w-[60%]"></div>
              <div className="skeleton h-4 w-full"></div>
              <div className="skeleton h-4 w-[80%]"></div>
            </div>}
          </div>
          {!!data.game && <ActionButtons key="actions" game={data.game} />}
        </div>
      </section>
    </FocusContext>
  </main>;
}

function Screenshot (data: { path: string; index: number; setFocused?: (index: number) => void; })
{
  const { ref, focused, focusSelf } = useFocusable({
    focusKey: `screenshot-${data.index}`,
    onFocus: () =>
    {
      (ref.current as HTMLElement).scrollIntoView({ inline: 'center', behavior: 'smooth' });
      data.setFocused?.(data.index);
    }
  }); 4096;
  return <img className={twJoin("h-[60vh] rounded-3xl", classNames({
    "ring-7 ring-primary": focused,
    "cursor-pointer": !focused
  }))} onClick={focusSelf} ref={ref} src={`${RPC_URL(__HOST__)}${data.path}`} loading="lazy" />;
}

function Screenshots (data: { screenshots: string[]; })
{
  const scrollRef = useRef(null);
  const [focusedScreenshot, setFocusedScreenshot] = useState(-1);
  const { ref, focusKey } = useFocusable({
    focusKey: 'screenshot-list',
    onFocus: () => (ref.current as HTMLElement).scrollIntoView({ block: 'center', behavior: 'smooth' }),
    onBlur: () => setFocusedScreenshot(-1)
  });

  return <div ref={ref} className="flex flex-col p-16 pt-2 w-full z-0">
    <FocusContext value={focusKey}>
      <div
        ref={scrollRef}
        className="flex gap-6 px-16 py-2 overflow-hidden justify-center-safe"
      >
        {data.screenshots.map((s, i) => <Screenshot key={s} setFocused={setFocusedScreenshot} index={i} path={s} />)}
      </div>
      <div className="flex gap-2 py-6 justify-center items-center h-3">{data.screenshots.map((s, i) =>
      {
        const focused = i === focusedScreenshot;
        return <button key={i} onClick={() => setFocus(`screenshot-${i}`)} className={twMerge("cursor-pointer rounded-full size-2 bg-base-content/40 transition-all", classNames({
          "size-3 bg-base-content drop-shadow-lg drop-shadow-base-300/40": focused
        }))}></button>;
      })}</div>
    </FocusContext>
  </div>;
}

function AchievementsInfo (data: { game: FrontEndGameTypeDetailed; })
{
  if (!data.game.achievements)
  {
    return false;
  }

  return <ActionButton key="achievements" square tooltip="Achievements" type="base" id="achievements" >
    <div className="flex flex-col gap-2 items-center text-2xl">
      <div className="flex flex-row">
        <Trophy />
        {`${data.game.achievements.unlocked}/${data.game.achievements.total}`}
      </div>
      <progress className="progress progress-secondary w-full" value={50} max="100"></progress>
    </div>
  </ActionButton>;
}

function MainActions (data: { game: FrontEndGameTypeDetailed; })
{
  const { source, id } = Route.useParams();
  const installMutation = useMutation({
    mutationKey: ['install'],
    mutationFn: async () =>
    {
      const { error } = await rommApi.api.romm.game({ source: data.game.id.source })({ id: data.game.id.id }).install.post();
      if (error) throw error;
    }
  });
  const playMutation = useMutation({
    mutationKey: ['play'],
    mutationFn: async () =>
    {
      const { error } = await rommApi.api.romm.game({ source: data.game.id.source })({ id: data.game.id.id }).play.post();
      if (error) throw error;
    }
  });
  const [progress, setProgress] = useState<number | undefined>(undefined);
  const [status, setStatus] = useState<GameStatusType | undefined>(undefined);
  const [error, setError] = useState<string | undefined>(undefined);
  const [details, setDetails] = useState<string | undefined>(undefined);
  const queryClient = useQueryClient();

  useEffect(() =>
  {
    const es = new EventSource(`${RPC_URL(__HOST__)}/api/romm/status/${data.game.id.source}/${data.game.id.id}`);

    es.onmessage = ({ data }) =>
    {
      const stats = JSON.parse(data) as GameInstallProgress;
      setProgress(stats.progress);
      setStatus(stats.status);
      setDetails(stats.details);
      setError(stats.error);
    };

    es.addEventListener('refresh', () =>
    {
      queryClient.invalidateQueries({ queryKey: ['game', data.game.id] });
      location.reload();
    });

    es.addEventListener('error', (e) =>
    {
      if ((e as any).data)
      {
        const stats = JSON.parse((e as any).data) as GameInstallProgress;
        toast.error(stats.error);
      }
    });

    es.onerror = (event) =>
    {
      const error = (event as any).data?.error;
      if (error)
      {
        toast.error(error);
      }
    };

    return () => es.close();
  }, [data.game.id]);

  let progressIcon: JSX.Element | undefined = undefined;
  switch (status)
  {
    case 'download':
      progressIcon = <Download />;
      break;
    case 'extract':
      progressIcon = <PackageOpen />;
      break;
  }

  let mainButton: JSX.Element | undefined = undefined;
  if (status === 'installed')
  {
    mainButton = <ActionButton onAction={() =>
    {
      playMutation.mutate();
      SaveSource('launch');
      Router.navigate({ to: '/launcher/$source/$id', viewTransition: { types: ['zoom-in'] }, params: { source, id } });
    }} tooltip={details} key="primary" type='primary' id="mainAction"><Play /></ActionButton>;
  }
  else if (error)
  {
    mainButton = <ActionButton
      key="error"
      tooltip={error}
      tooltip_type="error"
      type='error'
      onAction={() =>
      {
        if (status === 'missing-emulator')
        {
          SaveSource('settings');
          Router.navigate({ to: '/settings/directories', viewTransition: { types: ['zoom-in'] } });
        }
      }}
      id="mainAction">
      <TriangleAlert />
    </ActionButton>;
  }
  else
  {
    mainButton = <ActionButton
      key={status ?? 'unknown'}
      disabled={installMutation.isPending}
      onAction={() =>
      {
        if (status === 'install')
        {
          installMutation.mutate();
        }
      }}
      tooltip={details ?? status}
      type='primary'
      id="mainAction">
      {status === 'install' ? <Download /> : <span className="loading loading-spinner loading-lg"></span>}
    </ActionButton>;
  }

  return <div className="flex gap-2">
    {mainButton}
    <div className="divider divider-horizontal m-0"></div>
    {progress !== null && !!progressIcon && <ActionButton key="progress" square tooltip={details} type="base" id="progress" >
      <div key={`install-${status}`} data-tooltip={details ?? status} className="flex flex-col gap-2 w-16 items-center text-2xl">
        <div className="flex flex-row">
          {progressIcon}
        </div>
        <progress className="progress progress-secondary w-full" value={progress} max="100"></progress>
      </div>
    </ActionButton>}
  </div>;
}

function ActionButtons (data: { game: FrontEndGameTypeDetailed; })
{
  const [hoverText, setHoverText] = useState<string | undefined>(undefined);
  const [hoverTextType, setHoverTextType] = useState<string>('accent');
  const { ref, focusKey } = useFocusable({ focusKey: 'actions', onBlur: () => setHoverText(undefined) });
  const [open, setOpen] = useState(false);
  const deleteMutation = useMutation({
    mutationKey: ['delete', data.game.id],
    mutationFn: () => rommApi.api.romm.game({ source: data.game.id.source })({ id: data.game.id.id }).delete(),
    onSuccess: () =>
    {
      location.reload();
      console.log("Deleted");
    }
  });

  const contextOptions: DialogEntry[] = [];
  if (data.game.local)
  {
    contextOptions.push({
      id: 'delete',
      action: () =>
      {
        deleteMutation.mutate();
      },
      icon: <Trash />,
      content: "Delete",
      type: 'error'
    });
  }

  const handleTooltipSet = (e: HTMLElement) =>
  {
    const dataTooltip = e.getAttribute('data-tooltip');
    setHoverText(dataTooltip ?? undefined);
    setHoverTextType(e.getAttribute('data-tooltip_type') ?? 'accent');
  };

  useFocusEventListener('focuschanged', (e) =>
  {
    if (e.target instanceof HTMLElement)
    {
      handleTooltipSet(e.target);
    }

  }, ref);

  const tooltipStyles = {
    base: 'bg-base-100 text-base-content',
    accent: 'bg-accent text-accent-content',
    error: 'bg-error text-error-content'
  };

  return <div ref={ref} className="flex overflow-hidden p-2 gap-4 min-h-32 items-center">
    <FocusContext value={focusKey}>
      <MainActions game={data.game} />
      <AchievementsInfo game={data.game} />
      <ActionButton tooltip="Settings" onAction={() => setOpen(true)} type="base" id="settings" icon={<Settings />} >

      </ActionButton >
      <ContextDialog id="settings-context" open={open} close={() =>
      {
        setOpen(false);
        setFocus("settings");
      }}>
        <ContextList options={contextOptions} />
      </ContextDialog>
      {!!hoverText && <p className={twMerge("flex py-2 px-4 rounded-4xl text-wrap wrap-anywhere", (tooltipStyles as any)[hoverTextType])}>{hoverText}</p>}
    </FocusContext>
  </div>;
}

function Detail (data: { icon: JSX.Element; children?: any | any[]; })
{
  return (
    <div className="flex gap-2">
      {data.icon}
      {data.children}
    </div>
  );
}

function ActionButton (data: {
  id: string,
  icon?: JSX.Element,
  children?: any | any[];
  className?: string;
  type: "primary" | 'base' | "accent" | 'error';
  square?: boolean,
  onFocus?: () => void;
  tooltip?: string,
  tooltip_type?: 'accent' | 'error';
  onAction?: () => void;
  disabled?: boolean;
})
{
  const { ref, focused } = useFocusable({ focusKey: data.id, onFocus: data.onFocus, onEnterPress: data.onAction, focusable: data.disabled !== true });
  const styles = {
    primary: twMerge("bg-primary text-primary-content",
      classNames({
        "bg-base-content text-base-300 ring-7 ring-primary": focused
      })),
    base: twMerge(" text-base-content border-dashed border-base-content/20 border-2", classNames({
      "bg-base-content text-base-300 ring-7 ring-primary": focused
    })),
    accent: twMerge("bg-primary text-primary-content ", classNames({
      "bg-base-content text-base-300 ring-7 ring-primary": focused
    })),
    error: twMerge("bg-error text-error-content ", classNames({
      "bg-error text-error-content ring-7 ring-primary": focused
    })),
  };
  return (
    <button
      disabled={data.disabled}
      ref={ref}
      onClick={data.onAction}
      data-tooltip={data.tooltip}
      data-tooltip_type={data.tooltip_type}
      className={twMerge("header-icon flex flex-col gap-2 px-5 py-4 rounded-3xl text-2xl justify-center items-center cursor-pointer disabled:opacity-30",
        "hover:ring-7 hover:ring-primary", styles[data.type], classNames({ "rounded-full size-21 hover:bg-base-content hover:text-base-300 hover:ring-7 hover:ring-primary": !data.square }), data.className)}>
      {data.icon}
      {data.children}
    </button>
  );
}

export default function GameDetailsUI ()
{
  const { source, id } = Route.useParams();
  const { data, isSuccess } = useQuery(gameQuery(source, Number(id)));
  const { ref, focusKey, focusSelf } = useFocusable({ focusKey: "game-details", preferredChildFocusKey: "main-details" });
  const backgroundImage = data?.path_cover ? `${RPC_URL(__HOST__)}${data?.path_cover}` : undefined;
  const mainAreaRef = useRef<HTMLDivElement>(null);

  useShortcuts(focusKey, () => [{ label: "Back", button: GamePadButtonCode.B, action: HandleGoBack }]);
  const { shortcuts } = useShortcutContext();

  useEffect(() =>
  {
    if (isSuccess)
    {
      focusSelf();
    }

  }, [isSuccess]);

  return (
    <AnimatedBackground ref={ref} backgroundKey="game-details" backgroundUrl={backgroundImage}>
      <div className="z-0 overflow-y-scroll">
        <FocusContext value={focusKey}>
          <div className="px-3 py-2" ref={mainAreaRef}>
            <HeaderUI />
            <Details mainAreaRef={mainAreaRef} game={data} />
          </div>
          <div className="divider"><div className="flex items-center gap-3 opacity-60"><Image className="size-6" />Screenshots</div></div>
          {!!data && <Screenshots screenshots={data.paths_screenshots} />}
          <footer className="absolute left-0 bottom-0 w-full p-2 flex items-center justify-between z-10">
            <div className="flex gap-2 text-sm">
            </div>
            <Shortcuts shortcuts={shortcuts} />
          </footer>
        </FocusContext>
      </div>
    </AnimatedBackground>
  );
}