import { Box } from '@mui/material';
import { Typography } from '@mui/material';
import CapeCard from '../components/CapeCard';
import {
  Cape,
  fetchCapes,
  fetchCapesStore,
  purchaseCape,
  StoreCape,
} from '../api';
import { useEffect, useState } from 'react';

export default function Shop() {
  const [storeCapes, setStoreCapes] = useState<StoreCape[]>([]);
  const [userCapes, setUserCapes] = useState<Cape[]>([]);
  const [username, setUsername] = useState<string>('');
  const [uuid, setUuid] = useState<string>('');
  const [loading, setLoading] = useState<boolean>(false);

  // Функция для загрузки плащей из магазина
  const loadStoreCapes = async () => {
    try {
      const capes = await fetchCapesStore();
      setStoreCapes(capes);
    } catch (error) {
      console.error('Ошибка при получении плащей магазина:', error);
      setStoreCapes([]);
    }
  };

  // Функция для загрузки плащей пользователя
  const loadUserCapes = async (username: string) => {
    try {
      const userCapes = await fetchCapes(username);
      setUserCapes(userCapes);
    } catch (error) {
      console.error('Ошибка при получении плащей пользователя:', error);
      setUserCapes([]);
    }
  };

  const handlePurchaseCape = async (cape_id: string) => {
    try {
      await purchaseCape(username, cape_id);
      await loadUserCapes(username);
    } catch (error) {
      console.error('Ошибка при покупке плаща:', error);
    }
  };

  // Загружаем данные при монтировании
  useEffect(() => {
    const savedConfig = localStorage.getItem('launcher_config');
    if (savedConfig) {
      const config = JSON.parse(savedConfig);
      if (config.uuid && config.username) {
        setUsername(config.username);
        setUuid(config.uuid);

        setLoading(true);

        // Загружаем оба списка плащей
        Promise.all([loadStoreCapes(), loadUserCapes(config.username)]).finally(
          () => {
            setLoading(false);
          },
        );
      }
    }
  }, []);

  // Фильтруем плащи, которые уже куплены пользователем
  const availableCapes = storeCapes.filter(
    (storeCape) =>
      !userCapes.some((userCape) => userCape.cape_id === storeCape.id),
  );

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        gap: '2vw',
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%',
        height: '100%',
      }}
    >
      {loading ? (
        <Typography>Загрузка...</Typography>
      ) : (
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            flexWrap: 'wrap',
            alignContent: 'flex-start',
            width: '90%',
            height: '80%',
            gap: '2vw',
          }}
        >
          <Typography variant="h6">Доступные плащи</Typography>
          {availableCapes.length > 0 ? (
            <Box
              sx={{
                display: 'flex',
                flexDirection: 'row',
                gap: '2vw',
                flexWrap: 'wrap',
              }}
            >
              {availableCapes.map((cape) => (
                <CapeCard
                  key={cape.id}
                  cape={cape}
                  mode="shop"
                  onAction={handlePurchaseCape}
                />
              ))}
            </Box>
          ) : (
            <Typography>У вас уже есть все доступные плащи!</Typography>
          )}
        </Box>
      )}
    </Box>
  );
}
