/*
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 17:38:12 
 * @Last Modified by:   ZhaoYing 
 * @Last Modified time: 2026-02-03 17:38:12 
 */
/**
 * Pricing Page
 * Displays subscription plans with features and pricing
 * Supports navigation to payment or order history
 */

import React from 'react';
import { Button } from 'antd';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';

import personal from '@/assets/images/order/personal.png'
import team from '@/assets/images/order/team.png'
import biz from '@/assets/images/order/biz.png'
import commerce from '@/assets/images/order/commerce.png'
import checkIcon from '@/assets/images/login/checkBg.png'
import alertIcon from '@/assets/images/order/alert.svg';
import { useUser } from '@/store/user'
import { useI18n } from '@/store/locale'

/**
 * Price item configuration interface
 */
interface PriceItem {
  type: string;
  label: string;
  typeDesc: string;
  priceDescObj: {
    solution: string;
    targetAudience: string;
  };
  priceObj: {
    type: string;
    price?: number;
    time: string;
  };
  btnType: string;
  memoryCapacity: string;
  intelligentSearchFrequency: string;
  mostPopular?: boolean;
  flexibleDeployment?: boolean;
  reliableGuarantee?: boolean;
}
/** Button style classes by plan type */
const btnClassNames = {
  personal: 'rb:h-10! rb:rounded-[8px]!',
  team: 'rb:h-10! rb:rounded-[8px]! rb:bg-[#FF5D34]! rb:text-white! rb:border-0! rb:hover:border-0! rb:hover:opacity-[0.8]',
  biz: 'rb:h-10! rb:rounded-[8px]!',
  commerce: 'rb:h-10! rb:rounded-[8px]! rb:bg-[#212332]! rb:text-white! rb:border-0! rb:hover:border-0! rb:hover:opacity-[0.8]',
}

/** Price plan list configuration */
export const PRICE_LIST: PriceItem[] = [
  {
    type: 'personal',
    label: 'pricing.personal.label',
    typeDesc: 'pricing.personal.typeDesc',
    priceDescObj: {
      solution: 'pricing.personal.solution',
      targetAudience: 'pricing.personal.targetAudience',
    },
    priceObj: {
      type: 'default',
      price: 0,
      time: 'pricing.personal.priceDesc',
    },
    btnType: 'started', // started / choosePlan / contact
    memoryCapacity: '2000',
    intelligentSearchFrequency: '100',
  },
  {
    type: 'team',
    label: 'pricing.team.label',
    typeDesc: 'pricing.team.typeDesc',
    priceDescObj: {
      solution: 'pricing.team.solution',
      targetAudience: 'pricing.team.targetAudience',
    },
    priceObj: {
      type: 'default',
      price: 19,
      time: 'pricing.team.priceDesc'
    },
    btnType: 'choosePlan', // started / choosePlan / contact
    memoryCapacity: '20,000',
    intelligentSearchFrequency: '10,000',
  },
  {
    type: 'biz',
    label: 'pricing.biz.label',
    typeDesc: 'pricing.biz.typeDesc',
    priceDescObj: {
      solution: 'pricing.biz.solution',
      targetAudience: 'pricing.biz.targetAudience',
    },
    mostPopular: true,
    priceObj: {
      type: 'default', // default / biz
      price: 299,
      time: 'pricing.biz.priceDesc'
    },
    btnType: 'choosePlan', // started / choosePlan / contact
    memoryCapacity: '100,000',
    intelligentSearchFrequency: '50,000',
  },
  {
    type: 'commerce',
    label: 'pricing.commerce.label',
    typeDesc: 'pricing.commerce.typeDesc',
    priceDescObj: {
      solution: 'pricing.commerce.solution',
      targetAudience: 'pricing.commerce.targetAudience',
    },
    priceObj: {
      type: 'commerce', // default / commerce
      time: 'pricing.commerce.priceDesc'
    },
    btnType: 'contact', // started / choosePlan / contact

    memoryCapacity: '20,000',
    intelligentSearchFrequency: '10,000',
    flexibleDeployment: true,
    reliableGuarantee: true
  },
]

const PricingView: React.FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const { user } = useUser();
  const { language } = useI18n()

  /** Handle plan selection */
  const handleChoosePlan = (type: string) => {
    switch(type) {
      case 'team':
      case 'biz':
        navigate(`/order-pay?type=${type}`);
        break
      case 'personal':
        navigate(user.current_workspace_id ? '/' : '/space');
        break
      case 'commerce':
        window.open(`https://docs.redbearai.com/s/${language || 'en'}-memorybear`, '_blank')
        break
    }
  };
  /** Navigate to order history */
  const goToHistory = () => {
    navigate('/orders');
  }

  /** Get card icon by plan type */
  const getCardIcon = (type: string) => {
    const iconMap: Record<string, string> = {
      personal: personal,
      team: team, 
      biz: biz,
      commerce: commerce
    };
    return iconMap[type] || commerce;
  };

  return (
    <div className="rb:h-[calc(100vh-88px)] rb:overflow-y-auto rb:w-full rb:p-3">
      {/* <div className="rb:p-[20px_24px] rb:flex rb:items-center rb:justify-end rb:bg-[url(@/assets/images/order/bg.png)] rb:h-25 rb:rounded-xl rb:mb-6 rb:bg-cover rb:bg-no-repeat rb:bg-center rb:mb-[20px rb:w-full">
        <div className="rb:flex rb:items-center">
          <img src={getCardIcon('personal')} className="rb:size-15 rb:mr-3.5 rb:shrink-0" />
          <div className="rb:text-white rb:text-[24px] rb:font-semibold rb:leading-8">
            {t(`pricing.${'personal'}.type`)}
            <div className="rb:mt-1 rb:leading-5 rb:text-[14px] rb:font-regular">
              {t('pricing.currentAccountType')} | {t(`pricing.validUntil`)} <span className="rb:font-medium">December 31, 2024</span>
            </div>
          </div>
        </div>
        <Button className="rb:group rb:text-[#212332] rb:font-medium!" onClick={goToHistory}>
          <div
            className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/order/order.svg')] rb:group-hover:bg-[url('@/assets/images/order/order_hover.svg')]"
          ></div>
          {t('pricing.orderHistory')}
        </Button>
      </div> */}
      <div className="rb:flex rb:items-center rb:justify-end  rb:rounded-xl rb:mb-6 rb:w-full">
        <Button className="rb:group rb:text-[#212332] rb:font-medium!" onClick={goToHistory}>
          <div
            className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/order/order.svg')] rb:group-hover:bg-[url('@/assets/images/order/order_hover.svg')]"
          ></div>
          {t('pricing.orderHistory')}
        </Button>
      </div>
      
      <div className="rb:grid rb:grid-cols-4 rb:gap-6">
        {PRICE_LIST.map((item) => (
          <div
            key={item.type}
            className={`rb:relative rb:bg-[#FBFDFF] rb:rounded-xl rb:border rb:border-[#DFE4ED] rb:px-5 rb:py-6 rb:shadow-sm rb:transition-all rb:duration-200 hover:rb:shadow-lg ${
              item.mostPopular ? 'rb:-top-3' : ''
            }`}
          >
            {item.mostPopular && (
              <div className="rb:absolute rb:right-0 rb:top-0 rb:bg-[#FF5D34] rb:rounded-[0px_12px_0px_12px] rb:text-[12px] rb:text-white rb:font-regular rb:leading-4 rb:p-[4px_8px]">
                {t('pricing.mostPopular')}
              </div>
            )}

            {/* Icon */}
            <img src={getCardIcon(item.type)} className="rb:size-15 rb:mb-6" />

            {/* Title */}
            <h3 className="rb:text-[28px] rb:font-extrabold rb:mb-2">
              {t(`pricing.${item.type}.type`)}
            </h3>

            {/* Description */}
            <p className="rb:text-[#5B6167] rb:mb-8">
              {t(item.typeDesc)}
            </p>

            {/* Price */}
            <div className="rb:mb-5">
              {typeof item.priceObj.price !== 'undefined' ? (
                <div className="rb:flex rb:items-baseline rb:h-16">
                  <span className="rb:text-[16px] rb:text-[#5B6167] rb:font-regular rb:mr-1 rb:mb-1">$</span>
                  <span className="rb:text-[40px] rb:font-extrabold">
                    {item.priceObj.price.toLocaleString()}
                  </span>
                  <span className="rb:text-[16px] rb:text-[#5B6167] rb:ml-1 rb:mb-1">
                    {t(item.priceObj.time)}
                  </span>
                </div>
              ) : (
                  <div className="rb:text-[28px] rb:h-16 rb:pb-1 rb:font-extrabold rb:flex rb:items-end">
                    {t(item.priceObj.time)}
                </div>
              )}
            </div>

            {/* CTA Button */}
            <Button
              type={item.type === 'biz' ? 'primary' : 'default'}
              block
              className={btnClassNames[item.type as keyof typeof btnClassNames]}
              onClick={() => handleChoosePlan(item.type)}
            >
              {item.btnType === 'started' ? t('pricing.startedBtn') : item.btnType === 'choosePlan' ? t('pricing.choosePlanBtn') : t('pricing.contactBtn')}
            </Button>
            {Object.keys(item.priceDescObj).map(key => (
              <div key={key} className="rb:mt-4 rb:border-t rb:border-[#DFE4ED]">
                <div className="rb:font-[Gilroy] rb:font-extrabold rb:text-[12px] rb:h-auto rb:leading-4 rb:mt-4">{t(`pricing.${key}`)}</div>
                <div className="rb:font-[PingFangSC] rb:font-normal rb:text-[12px] rb:text-[#5B6167] rb:leading-4 rb:mt-1.5">{t(item.priceDescObj[key as keyof typeof item.priceDescObj])}</div>
              </div>
            ))}

            {/* Features */}
            <div className="rb:space-y-3 rb:border-t rb:border-t-[#DFE4ED] rb:mt-6 rb:pt-6">
              <div className="rb:flex rb:mb-2">
                <img src={checkIcon} className="rb:w-4 rb:h-4 rb:mr-1 rb:mt-0.5" />
                <div className="rb:font-regular rb:text-[12px] rb:text-[#5B6167] rb:leading-5">
                  {t('pricing.memoryCapacity')} { item.memoryCapacity } {t('pricing.entries')}
                </div>
              </div>
              <div className="rb:flex rb:mb-2">
                <img src={checkIcon} className="rb:w-4 rb:h-4 rb:mr-1 rb:mt-0.5" />
                <div className="rb:font-regular rb:text-[12px] rb:text-[#5B6167] rb:leading-5">
                  {t('pricing.intelligentSearchFrequency')}<span>{ item.intelligentSearchFrequency } {t('pricing.timesMonth')}</span>
                </div>
              </div>
              {['supportServices', 'flexibleDeployment', 'reliableGuarantee'].map(type => {
                if ((item as any)[type] || type === 'supportServices') {
                  return (
                    <div key={type} className="rb:flex rb:mb-2">
                      <img src={checkIcon} className="rb:w-4 rb:h-4 rb:mr-1 rb:mt-0.5" />
                      <div className="rb:font-regular rb:text-[12px] rb:text-[#5B6167] rb:leading-5">
                        {t(`pricing.${type}`)}{t(`pricing.${item.type}.${type}`)}
                      </div>
                    </div>
                  )
                }
                return null
              })}
            </div>
          </div>
        ))}
      </div>

      {/* Warning Notice */}
      <div className="rb:mt-6 rb:bg-[rgba(255,93,52,0.06)] rb:border rb:border-[rgba(255,93,52,0.25)] rb:rounded-lg rb:p-4">
        <div className="rb:flex rb:items-start rb:gap-2">
          <img src={alertIcon} className="rb:w-5 rb:h-5 rb:shrink-0" />
          <div>
            <h4 className="rb:text-sm rb:font-medium rb:text-[#FF5D34] rb:mb-1">
              {t('pricing.alertTitle')}
            </h4>
            <p className="rb:mt-2 rb:font-regular rb:text-[12px] rb:leading-4.25 rb:text-[#5B6167]">
              {t('pricing.alertContent')}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PricingView;