import { useRef, useState } from 'react';

import { useModal } from '@material-hu/hooks/useModal';
import {
  IconEdit,
  IconInfoCircle,
  IconPlus,
  IconTrash,
} from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuMenuList from '@material-hu/components/composed-components/MenuList';
import Button from '@material-hu/components/design-system/Buttons/Button';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import Skeleton from '@material-hu/components/design-system/Skeleton';
import StateCard from '@material-hu/components/design-system/StateCard';

import AddPrizeDrawer from 'src/pages/dashboard/Prode/components/AddPrizeDrawer';
import ConsiderationsDrawer from 'src/pages/dashboard/Prode/components/ConsiderationsDrawer';
import DeleteConfirmModal from 'src/pages/dashboard/Prode/components/DeleteConfirmModal';
import PrizeCard from 'src/pages/dashboard/Prode/components/PrizeCard';
import { useLokaliseTranslation } from 'src/utils/i18n';

import {
  useConsiderationsQuery,
  useUpdateConsiderations,
} from '../../../hooks/useConsiderations';
import { useBulkReplacePrizes, usePrizesQuery } from '../../../hooks/usePrizes';
import { type Prize } from '../../../types';
import useCompetitionContext from '../../useCompetitionContext';

// ── Helpers ────────────────────────────────────────────────────────────────────

const SKELETON_COUNT = 4;

function toBulkItems(prizes: Prize[]) {
  return prizes.map(p => ({
    name: p.name,
    description: p.description || undefined,
    positionCaption: p.positionCaption || undefined,
  }));
}

// ── Component ──────────────────────────────────────────────────────────────────

const PrizesTab = () => {
  const { t } = useLokaliseTranslation(['sportsPool', 'general']);
  const { competition } = useCompetitionContext();
  const competitionId = competition.id;
  const [addOpen, setAddOpen] = useState(false);
  const [editIndex, setEditIndex] = useState<number | null>(null);
  const [considerationsOpen, setConsiderationsOpen] = useState(false);

  const {
    data: serverPrizes,
    isLoading,
    isError,
    refetch,
  } = usePrizesQuery(competitionId);

  const { mutate, isLoading: isSaving } = useBulkReplacePrizes(competitionId);

  const { data: considerationsData } = useConsiderationsQuery(competitionId);
  const { mutate: updateConsiderations, isLoading: isSavingConsiderations } =
    useUpdateConsiderations(competitionId);

  const prizes = serverPrizes ?? [];

  const handleAdd = (prize: {
    name: string;
    description: string;
    positionCaption: string;
  }) => {
    const updated = [
      ...toBulkItems(prizes),
      {
        name: prize.name,
        description: prize.description || undefined,
        positionCaption: prize.positionCaption || undefined,
      },
    ];
    mutate(updated, { onSuccess: () => setAddOpen(false) });
  };

  const handleEdit = (prize: {
    name: string;
    description: string;
    positionCaption: string;
  }) => {
    if (editIndex === null) return;
    const updated = toBulkItems(prizes).map((p, i) =>
      i === editIndex
        ? {
            name: prize.name,
            description: prize.description || undefined,
            positionCaption: prize.positionCaption || undefined,
          }
        : p,
    );
    mutate(updated, { onSuccess: () => setEditIndex(null) });
  };

  const handleDelete = (index: number) => {
    const updated = toBulkItems(prizes).filter((_, i) => i !== index);
    mutate(updated);
  };

  // biome-ignore lint/suspicious/noEmptyBlockStatements: noop default for ref
  const deleteActionRef = useRef<() => void>(() => {});

  const deletePrizeModal = useModal(
    DeleteConfirmModal,
    { maxWidth: 'sm' },
    {
      title: t('admin.prizes.delete_title'),
      textBody: t('admin.prizes.delete_confirm'),
      onConfirm: () => deleteActionRef.current(),
      onCancel: () => deletePrizeModal.closeModal(),
      loading: isSaving,
    },
  );

  const deleteConsiderationsModal = useModal(
    DeleteConfirmModal,
    { maxWidth: 'sm' },
    {
      title: t('admin.considerations.delete_title'),
      textBody: t('admin.considerations.delete_confirm'),
      onConfirm: () => {
        updateConsiderations('', {
          onSuccess: () => deleteConsiderationsModal.closeModal(),
        });
      },
      onCancel: () => deleteConsiderationsModal.closeModal(),
      loading: isSavingConsiderations,
    },
  );

  const handleConsiderationsConfirm = (considerations: string) => {
    updateConsiderations(considerations, {
      onSuccess: () => setConsiderationsOpen(false),
    });
  };

  // ── Loading ─────────────────────────────────────────────────────────────────
  if (isLoading) {
    return (
      <Stack spacing={1}>
        {Array.from({ length: SKELETON_COUNT }).map((_, i) => (
          <Skeleton
            key={i}
            variant="rounded"
            sx={{ height: 52 }}
          />
        ))}
      </Stack>
    );
  }

  // ── Error ───────────────────────────────────────────────────────────────────
  if (isError) {
    return (
      <StateCard
        icon={IconInfoCircle}
        variant="primary"
        title={t('admin.prizes.error_title')}
        description={t('admin.prizes.error_description')}
        primaryAction={{ label: t('general:retry'), onClick: () => refetch() }}
      />
    );
  }

  const editingPrize = editIndex !== null ? prizes[editIndex] : null;

  // ── Render ──────────────────────────────────────────────────────────────────
  return (
    <Stack sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      {deletePrizeModal.modal}
      {deleteConsiderationsModal.modal}
      <AddPrizeDrawer
        open={addOpen}
        positionIndex={prizes.length}
        onClose={() => setAddOpen(false)}
        onConfirm={handleAdd}
        isSaving={isSaving}
      />

      {editingPrize && (
        <AddPrizeDrawer
          open={editIndex !== null}
          positionIndex={editIndex ?? 0}
          initialValues={{
            name: editingPrize.name,
            description: editingPrize.description ?? '',
            positionCaption: editingPrize.positionCaption ?? '',
          }}
          onClose={() => setEditIndex(null)}
          onConfirm={handleEdit}
          onDelete={() => {
            if (editIndex !== null) handleDelete(editIndex);
            setEditIndex(null);
          }}
          isSaving={isSaving}
        />
      )}

      <Stack>
        {/* Header */}
        <Stack
          direction="row"
          justifyContent="space-between"
          alignItems="center"
          sx={{ mb: 2 }}
        >
          <Typography
            variant="globalS"
            sx={{ fontWeight: 'fontWeightSemiBold' }}
          >
            {t('rules_tab.prizes')}
          </Typography>
          <Button
            variant="secondary"
            startIcon={<IconPlus />}
            onClick={() => setAddOpen(true)}
          >
            {t('admin.prizes.add')}
          </Button>
        </Stack>

        {/* Empty state */}
        {prizes.length === 0 ? (
          <StateCard
            icon={IconInfoCircle}
            variant="primary"
            title={t('admin.prizes.empty_title')}
            description={t('admin.prizes.empty_description')}
          />
        ) : (
          <Stack spacing={1}>
            {prizes.map((prize, index) => (
              <PrizeCard
                key={prize.id}
                name={prize.name}
                description={prize.description}
                positionCaption={prize.positionCaption}
                onEdit={() => setEditIndex(index)}
                onDelete={() => {
                  deleteActionRef.current = () => {
                    const updated = toBulkItems(prizes).filter(
                      (_, i) => i !== index,
                    );
                    mutate(updated, {
                      onSuccess: () => deletePrizeModal.closeModal(),
                    });
                  };
                  deletePrizeModal.showModal();
                }}
              />
            ))}
          </Stack>
        )}
      </Stack>

      <ConsiderationsDrawer
        open={considerationsOpen}
        initialValue={considerationsData?.considerations ?? undefined}
        onClose={() => setConsiderationsOpen(false)}
        onConfirm={handleConsiderationsConfirm}
        isSaving={isSavingConsiderations}
      />

      <Stack>
        {/* Header */}
        <Stack
          direction="row"
          justifyContent="space-between"
          alignItems="center"
          sx={{ mb: 2 }}
        >
          <Typography
            variant="globalS"
            sx={{ fontWeight: 'fontWeightSemiBold' }}
          >
            {t('rules_tab.considerations')}
          </Typography>
          <Button
            variant="secondary"
            startIcon={<IconPlus />}
            onClick={() => setConsiderationsOpen(true)}
          >
            {considerationsData?.considerations
              ? t('admin.considerations.edit')
              : t('admin.considerations.add')}
          </Button>
        </Stack>

        {!considerationsData?.considerations && (
          <StateCard
            icon={IconInfoCircle}
            variant="primary"
            title={t('admin.considerations.empty_title')}
            description={t('admin.considerations.empty_description')}
          />
        )}

        {considerationsData?.considerations && (
          <CardContainer
            padding={0}
            fullWidth
          >
            <Stack
              sx={{
                flexDirection: 'row',
                alignItems: 'center',
                p: { xs: 2, sm: 3 },
              }}
            >
              <Typography
                variant="globalXS"
                sx={{
                  flex: 1,
                  color: theme => theme.palette.new.text.neutral.default,
                }}
              >
                {considerationsData.considerations}
              </Typography>
              <HuMenuList
                options={[
                  {
                    Icon: IconEdit,
                    title: t('general:edit'),
                    onClick: () => setConsiderationsOpen(true),
                  },
                  {
                    Icon: IconTrash,
                    title: t('general:delete'),
                    onClick: () => deleteConsiderationsModal.showModal(),
                  },
                ]}
                position="left"
              />
            </Stack>
          </CardContainer>
        )}
      </Stack>
    </Stack>
  );
};

export default PrizesTab;