import { useEffect, useState } from "react";
import {
  Alert,
  Button,
  Code,
  Divider,
  Group,
  List,
  Loader,
  Modal,
  Stack,
  Text,
  TextInput,
  Title,
} from "@mantine/core";
import { IconAlertTriangle, IconTrash } from "@tabler/icons-react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { notifications } from "@mantine/notifications";
import { isAxiosError } from "axios";
import { deleteSong, fetchDeleteSongPreview, type DeleteSongPreview } from "@/api/songs";
import { translate } from "@/i18n";
import { withLink } from "@/i18n/withLink";

interface Props {
  songId: number | null;
  /** Optional fallback shown while the preview is loading. */
  songTitle?: string;
  songArtist?: string;
  opened: boolean;
  onClose: () => void;
  /** Called after a successful hard-delete. */
  onSuccess?: () => void;
}

/**
 * Two-step delete modal for songs. Mirrors {@link DeleteDanceModal} but for
 * songs (no archive option — songs don't have a listing_status concept yet).
 *
 * Uses the project-wide hard-delete pattern (see ADR-004 and patterns.md).
 */
export function DeleteSongModal({
  songId,
  songTitle,
  songArtist,
  opened,
  onClose,
  onSuccess,
}: Props) {
  const queryClient = useQueryClient();
  const [step, setStep] = useState<1 | 2>(1);
  const [confirmName, setConfirmName] = useState("");
  const [confirmError, setConfirmError] = useState<string | null>(null);

  const previewQuery = useQuery<DeleteSongPreview>({
    queryKey: ["song-delete-preview", songId],
    queryFn: () => fetchDeleteSongPreview(songId as number),
    enabled: opened && songId !== null,
    staleTime: 0,
  });

  useEffect(() => {
    if (!opened) {
      setStep(1);
      setConfirmName("");
      setConfirmError(null);
    }
  }, [opened]);

  const deleteMutation = useMutation({
    mutationFn: () =>
      deleteSong(songId as number, confirmName.trim()),
    onSuccess: () => {
      notifications.show({
        title: translate("songs.delete.cancoEliminada"),
        message: translate("songs.delete.cancoEliminatPermanentment"),
        color: "red",
      });
      queryClient.invalidateQueries({ queryKey: ["song"] });
      queryClient.invalidateQueries({ queryKey: ["songs"] });
      onSuccess?.();
      onClose();
    },
    onError: (error) => {
      let message = translate("songs.delete.pogutEliminarCanco");
      if (isAxiosError(error) && error.response?.data) {
        const data = error.response.data as { detail?: string };
        if (data.detail) message = data.detail;
      }
      notifications.show({ title: translate("songs.merge.error"), message, color: "red" });
    },
  });

  const preview = previewQuery.data;
  const expectedConfirmation = preview
    ? `${preview.songTitle} — ${preview.songArtist}`
    : "";
  const displayName = preview
    ? `${preview.songTitle} — ${preview.songArtist}`
    : songTitle && songArtist
      ? `${songTitle} — ${songArtist}`
      : `#${songId}`;
  const hasBlockers = preview && preview.blockers.length > 0;

  return (
    <Modal opened={opened} onClose={onClose} title={translate("songs.delete.eliminarCanco")} centered size="lg">
      <Stack gap="md">
        {previewQuery.isLoading && (
          <Group gap="xs">
            <Loader size="sm" />
            <Text size="sm" c="dimmed">{translate("songs.delete.calculantImpacteEsborrat")}</Text>
          </Group>
        )}

        {previewQuery.isError && (
          <Alert color="red" icon={<IconAlertTriangle size={16} />}>
            {translate("songs.delete.pogutCarregarResumEsborrat")}
          </Alert>
        )}

        {preview && step === 1 && (
          <>
            <Title order={4}>«{preview.songTitle}» — {preview.songArtist}</Title>

            {hasBlockers ? (
              <Alert color="red" icon={<IconAlertTriangle size={16} />}>
                <Text fw={600} mb={4}>{translate("songs.delete.eliminarPermanentment")}</Text>
                <List size="sm" spacing={4}>
                  {preview.blockers.map((b, i) => (
                    <List.Item key={i}>{b.message}</List.Item>
                  ))}
                </List>
              </Alert>
            ) : (
              <>
                <Alert color="orange" icon={<IconAlertTriangle size={16} />}>
                  <Text size="sm">
                    {withLink(translate("songs.delete.irreversibleIntro"), <b>{translate("songs.delete.irreversible")}</b>)}
                  </Text>
                </Alert>
                <CascadeSummaryView preview={preview} />
              </>
            )}

            <Divider />
            <Group justify="space-between">
              <Button variant="subtle" onClick={onClose}>
                {translate("songs.identify.cancellar")}
              </Button>
              {!hasBlockers && (
                <Button
                  color="red"
                  leftSection={<IconTrash size={16} />}
                  onClick={() => setStep(2)}
                >
                  {translate("songs.delete.continuarEsborrat")}
                </Button>
              )}
            </Group>
          </>
        )}

        {preview && step === 2 && !hasBlockers && (
          <>
            <Alert color="red" icon={<IconAlertTriangle size={16} />}>
              <Text fw={600}>{translate("songs.delete.confirmacioFinal")}</Text>
              <Text size="sm">
                {translate("songs.delete.eliminarPermanentmentCancoEscriu")}
              </Text>
              <Code block mt={4}>{expectedConfirmation}</Code>
            </Alert>

            <TextInput
              label={translate("songs.delete.confirmacio")}
              placeholder={expectedConfirmation}
              value={confirmName}
              onChange={(e) => {
                setConfirmName(e.currentTarget.value);
                if (confirmError) setConfirmError(null);
              }}
              error={confirmError}
              autoFocus
            />

            <Group justify="space-between">
              <Button variant="subtle" onClick={() => setStep(1)}>
                {translate("songs.delete.tornar")}
              </Button>
              <Button
                color="red"
                leftSection={<IconTrash size={16} />}
                disabled={confirmName.trim() !== expectedConfirmation}
                loading={deleteMutation.isPending}
                onClick={() => deleteMutation.mutate()}
              >
                {translate("songs.delete.eliminarPermanentment2")}
              </Button>
            </Group>
          </>
        )}
      </Stack>

      <Text size="xs" c="dimmed" mt="md">
        {translate("songs.delete.songRef", { id: songId ?? "", name: displayName })}
      </Text>
    </Modal>
  );
}

function CascadeSummaryView({ preview }: { preview: DeleteSongPreview }) {
  const c = preview.willCascade;
  return (
    <Stack gap={4}>
      <SummaryRow label={translate("songs.delete.enllacosSpotifyYoutubeEtc")} value={c.links} />
      <SummaryRow
        label={translate("songs.delete.setlistsEventsPerdranCanco")}
        value={c.eventSetlistItemsToOrphan}
      />
      <SummaryRow
        label={translate("songs.delete.propostesBallEliminaranCascade")}
        value={c.danceSuggestionsToCascadeDelete}
      />
    </Stack>
  );
}

function SummaryRow({ label, value }: { label: string; value: number | string }) {
  return (
    <Group justify="space-between">
      <Text size="sm">{label}</Text>
      <Text size="sm" fw={600}>{value}</Text>
    </Group>
  );
}