/*
Copyright (C) 2025 QuantumNous

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.

For commercial licensing, please contact support@quantumnous.com
*/

import React, { useContext, useMemo } from 'react';
import { ImagePreview } from '@douyinfe/semi-ui';
import ModelsContent from './ModelsContent';
import ModelDetailSideSheet from '../modal/ModelDetailSideSheet';
import { useModelPricingData } from '../../../../hooks/model-pricing/useModelPricingData';
import { useIsMobile } from '../../../../hooks/common/useIsMobile';
import { StatusContext } from '../../../../context/Status';
import { UserContext } from '../../../../context/User';

const PricingPage = () => {
  const pricingData = useModelPricingData();
  const isMobile = useIsMobile();
  const [showRatio, setShowRatio] = React.useState(false);
  const [viewMode, setViewMode] = React.useState('card');
  const [statusState] = useContext(StatusContext);
  const [userState] = useContext(UserContext);

  const blurPricing = useMemo(() => {
    if (userState?.user) return false;
    try {
      const config = statusState?.status?.HeaderNavModules;
      if (!config) return false;
      const modules = JSON.parse(config);
      const pricing = modules?.pricing;
      if (typeof pricing === 'object' && pricing !== null) {
        return !!pricing.blurPricing;
      }
    } catch {}
    return false;
  }, [statusState?.status?.HeaderNavModules, userState?.user]);

  const allProps = {
    ...pricingData,
    showRatio,
    setShowRatio,
    viewMode,
    setViewMode,
    blurPricing,
  };

  return (
    <div className='sf-pricing-page'>
      <ModelsContent
        {...allProps}
        isMobile={isMobile}
        sidebarProps={allProps}
      />

      <ImagePreview
        src={pricingData.modalImageUrl}
        visible={pricingData.isModalOpenurl}
        onVisibleChange={(visible) => pricingData.setIsModalOpenurl(visible)}
      />

      <ModelDetailSideSheet
        visible={pricingData.showModelDetail}
        onClose={pricingData.closeModelDetail}
        modelData={pricingData.selectedModel}
        groupRatio={pricingData.groupRatio}
        groupModelPrice={pricingData.groupModelPrice}
        groupModelRatio={pricingData.groupModelRatio}
        usableGroup={pricingData.usableGroup}
        currency={pricingData.currency}
        siteDisplayType={pricingData.siteDisplayType}
        tokenUnit={pricingData.tokenUnit}
        displayPrice={pricingData.displayPrice}
        showRatio={allProps.showRatio}
        vendorsMap={pricingData.vendorsMap}
        endpointMap={pricingData.endpointMap}
        autoGroups={pricingData.autoGroups}
        t={pricingData.t}
        selectedGroup={pricingData.selectedGroup}
        blurPricing={blurPricing}
      />
    </div>
  );
};

export default PricingPage;