import React, { useState } from 'react';
import useArtists from '../hooks/useArtists';
import useSubscriptions from '../hooks/useSubscriptions';
import SubscriptionForm from '../components/SubscriptionForm';
import { Subscription, Artist } from '../types';

const Catalog: React.FC = () => {
  const { artists, loading: artistsLoading, error: artistsError } = useArtists();
  const { 
    getUserSubscription, 
    addSubscription, 
    cancelSubscription, 
    loading: subsLoading, 
    error: subsError 
  } = useSubscriptions(1); // Пример userId = 1
  const subscription: Subscription | undefined = getUserSubscription();
  const [subscriptionStartDate, setSubscriptionStartDate] = useState<Date | null>(null);

  if (artistsLoading || subsLoading) return <p className="text-center text-punk my-5">Загрузка...</p>;
  if (artistsError || subsError) return <p className="text-center text-danger my-5">Ошибка: {artistsError || subsError}</p>;

  const handleAddSubscription = async (subscriptionData: Omit<Subscription, 'id' | 'active' | 'userId'>) => {
    const response = await addSubscription(subscriptionData);
    setSubscriptionStartDate(new Date()); // Установите текущую дату как дату начала подписки
  };

  const handleCancelSubscription = async () => {
    if (subscription) {
      await cancelSubscription(subscription.id);
      setSubscriptionStartDate(null); // Сбросить дату начала подписки
    }
  };

  const calculateEndDate = (startDate: Date): Date => {
    const endDate = new Date(startDate);
    endDate.setMonth(endDate.getMonth() + 1);
    return endDate;
  };

  return (
    <div className="container py-4">
      <h1 className="text-punk mb-3">Каталог</h1>
      
      
      {subscription ? (
        <div className="alert bg-dark border-punk">
          <h5>
            {subscription.type === 'Premium' ? '💎 Премиум' : '🔹 Базовая'} подписка (${subscription.price})
          </h5>
          {subscriptionStartDate && (
            <p className="text-light">
              Подписка действует до: {calculateEndDate(subscriptionStartDate).toLocaleDateString()}
            </p>
          )}
          <button 
            className="btn btn-outline-danger btn-sm mt-2" 
            onClick={handleCancelSubscription}
          >
            Отменить подписку
          </button>
        </div>
      ) : (
        <div className="alert bg-dark border-punk">
          <h5>У вас нет подписки</h5>
          <p>Оформите подписку для доступа к каталогу!</p>
        </div>
      )}

      {/* Форма подписки (если нет активной) */}
      {!subscription && <SubscriptionForm onSubmit={handleAddSubscription} />}

      {/* Контент в зависимости от подписки */}
      {subscription?.type === 'Premium' ? (
        <div>
          <h2 className="text-punk mt-4">Полный каталог артистов</h2>
          {artists.map((artist) => (
            <div key={artist.id} className="card bg-dark border-punk my-2">
              <div className="card-body">
                <h5 className="card-title text-punk">{artist.name}</h5>
                <p className="card-text text-light">{artist.description}</p>
                <small className="text-light">Эпоха: {artist.epoch?.name || 'Не указана'}</small>
              </div>
            </div>
          ))}
        </div>
      ) : subscription?.type === 'Basic' ? (
        <div>
          <h2 className="text-punk mt-4">Базовый каталог</h2>
          <p className="text-light mb-3">Доступны только названия групп. Для полного доступа оформите Premium.</p>
          {artists.map((artist) => (
            <div key={artist.id} className="card bg-dark border-punk my-2">
              <div className="card-body">
                <h5 className="card-title text-punk">{artist.name}</h5>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="alert bg-dark border-punk mt-4">
          <p>🔒 Чтобы увидеть каталог, оформите подписку.</p>
        </div>
      )}
    </div>
  );
};

export default Catalog;