import { FileInput, Stack, TextInput } from "@mantine/core";
import { useForm, UseFormInput } from "@mantine/form";
import { LinkIcon } from "@phosphor-icons/react";
import SlidePanel from "@/components/sheet/slide-panel";
import { isNotEmpty } from "@mantine/form";
import useCreateTeam from "../../hooks/use-create-team";
import useUpdateTeam from "../../hooks/use-update-team";
import toast from "@/lib/sonner";
import { logger } from "../..";
import { useQueryClient } from "@tanstack/react-query";
import { tournamentKeys } from "@/features/tournaments/queries";
import { useCallback } from "react";
import { TeamInput } from "../../types";
import { teamKeys } from "../../queries";
import SongPicker from "./song-picker";
import PlayersPicker from "./players-picker";
import { useLingui } from "@lingui/react/macro";

interface TeamFormProps {
  close: () => void;
  initialValues?: Partial<TeamInput>;
  teamId?: string;
  tournamentId?: string;
  onSubmit?: (teamId: string) => void;
}

const TeamForm = ({
  close,
  initialValues,
  teamId,
  tournamentId,
  onSubmit
}: TeamFormProps) => {
  const isEditMode = !!teamId;
  const { t } = useLingui();

  const config: UseFormInput<TeamInput> = {
    initialValues: {
      name: initialValues?.name || "",
      // primary_color: initialValues?.primary_color,
      // accent_color: initialValues?.accent_color,
      song_id: initialValues?.song_id,
      song_name: initialValues?.song_name,
      song_artist: initialValues?.song_artist,
      song_album: initialValues?.song_album,
      song_start: initialValues?.song_start,
      song_end: initialValues?.song_end,
      song_image_url: initialValues?.song_image_url,
      logo: undefined,
      players: initialValues?.players || [],
    },
    onSubmitPreventDefault: "always",
    validate: {
      name: isNotEmpty(t`Name is required`),
      players: (value: string[]) =>
        value.length > 1 && value[1] !== ""
          ? undefined
          : t`Players are required`,
      song_name: isNotEmpty(t`Song is required`),
      song_start: (value, values) => {
        if (values.song_name && values.song_id) {
          if (value === undefined || value === null) {
            return t`Song start time is required`;
          }
        }
        return undefined;
      },
      song_end: (value, values) => {
        if (values.song_name && values.song_id) {
          if (value === undefined || value === null) {
            return t`Song end time is required`;
          }
          if (values.song_start !== undefined && value !== undefined) {
            const duration = value - values.song_start;
            if (duration < 10) {
              return t`Song segment must be at least 10 seconds`;
            }
            if (duration > 15) {
              return t`Song segment must be no more than 15 seconds`;
            }
          }
        }
        return undefined;
      },
    },
  };

  const form = useForm(config);
  const queryClient = useQueryClient();

  const { mutate: createTeam, isPending: createPending } =
    useCreateTeam();
  const { mutate: updateTeam, isPending: updatePending } = useUpdateTeam(
    teamId!
  );

  const isPending = createPending || updatePending;

  const handleSubmit = useCallback(
    async (values: TeamInput) => {
      const { logo, ...teamData } = values;

      const mutation = isEditMode ? updateTeam : createTeam;
      const errorMessage = isEditMode
        ? t`Failed to update team`
        : t`Failed to create team`;

      mutation(teamData, {
        onSuccess: async (team: any) => {
          close();
          if (logo && team) {
            try {
              let processedLogo = logo;

              if (logo.size > 500 * 1024) {
                const compressionOptions = {
                  maxSizeMB: 0.5,
                  maxWidthOrHeight: 800,
                  useWebWorker: true,
                  fileType: logo.type,
                };

                try {
                  const { default: imageCompression } = await import("browser-image-compression");
                  processedLogo = await imageCompression(logo, compressionOptions);
                  logger.info("image compressed", {
                    originalSize: logo.size,
                    compressedSize: processedLogo.size,
                    reduction: ((logo.size - processedLogo.size) / logo.size * 100).toFixed(1) + "%"
                  });
                } catch (compressionError) {
                  logger.warn("compression failed, falling back", compressionError);
                  processedLogo = logo;
                }
              }

              const formData = new FormData();
              formData.append("teamId", team.id);
              formData.append("logo", processedLogo);

              const response = await fetch("/api/teams/upload-logo", {
                method: "POST",
                body: formData,
              });

              if (!response.ok) {
                const error = await response.json();
                throw new Error(error.error || t`Failed to upload logo`);
              }

              const result = await response.json();

              console.log("Logo upload result:", result);

              queryClient.invalidateQueries({ queryKey: teamKeys.list });
              queryClient.invalidateQueries({
                queryKey: teamKeys.details(team.id),
              });
              queryClient.setQueryData(
                tournamentKeys.details(result.team!.id),
                result.team
              );
            } catch (error: any) {
              const logoErrorMessage = isEditMode
                ? t`Team updated but logo upload failed: ${error.message}`
                : t`Team created but logo upload failed: ${error.message}`;
              toast.error(logoErrorMessage);
              logger.error("Team logo upload error", error);
            }
          } else {
            queryClient.invalidateQueries({ queryKey: teamKeys.list });
            queryClient.invalidateQueries({
              queryKey: teamKeys.details(team.id),
            });
          }

          if (team && team.id) {
            onSubmit?.(team.id)
          }
        },
        onError: (error: any) => {
          toast.error(`${errorMessage}: ${error.message}`);
          logger.error(`Team ${isEditMode ? "update" : "create"} error`, error);
        },
      });
    },
    [isEditMode, createTeam, updateTeam, queryClient, t]
  );

  return (
    <SlidePanel
      onSubmit={form.onSubmit(handleSubmit)}
      onCancel={close}
      submitText={isEditMode ? t`Update Team` : t`Create Team`}
      cancelText={t`Cancel`}
      loading={isPending}
    >
      <Stack>
        <TextInput
          label={t`Name`}
          withAsterisk
          disabled={isEditMode}
          key={form.key("name")}
          {...form.getInputProps("name")}
        />

        <FileInput
          key={form.key("logo")}
          accept="image/png,image/jpeg,image/gif,image/jpg"
          label={isEditMode ? t`Change Logo` : t`Logo`}
          leftSection={<LinkIcon size={16} />}
          {...form.getInputProps("logo")}
        />

        {tournamentId && (
          <PlayersPicker
            tournamentId={tournamentId}
            key={form.key("players")}
            {...form.getInputProps("players")}
            disabled={isEditMode}
          />
        )}

        <SongPicker
          form={form}
          error={form.errors.song_name as string}
        />

        {/*
          <SlidePanelField
            key={form.key("primary_color")}
            {...form.getInputProps("primary_color")}
            Component={TeamColorPicker}
            title="Select Primary Color"
            placeholder="Select Primary Color"
            label="Primary Color"
            formatValue={(value) => (
              <Group>
                <Badge variant="filled" radius="sm" color={value} />
                {value}
              </Group>
            )}
          />

          <SlidePanelField
            key={form.key("accent_color")}
            {...form.getInputProps("accent_color")}
            Component={TeamColorPicker}
            title="Select Accent Color"
            placeholder="Select Accent Color"
            label="Accent Color"
            formatValue={(value) => (
              <Group>
                <Badge variant="filled" radius="sm" color={value} />
                {value}
              </Group>
            )}
          />
        */}

      </Stack>
    </SlidePanel>
  );
};

export default TeamForm;
