import { useSelector } from '@xstate/react'
import { openExternalBrowserIfDesktop } from '@src/lib/openWindow'
import { CustomIcon } from '@src/components/CustomIcon'
import {
  BillingRemaining,
  BillingRemainingMode,
} from '@src/components/BillingRemaining'
import { type BillingActor } from '@src/machines/billingMachine'
import { withSiteBaseURL } from '@src/lib/withBaseURL'

export const BillingDialog = (props: { billingActor: BillingActor }) => {
  const billingContext = useSelector(
    props.billingActor,
    ({ context }) => context
  )
  const hasUnlimited = billingContext.credits === Infinity

  return (
    <div className="bg-ml-green fg-ml-black flex flex-row rounded-lg p-4 gap-2 text-xs">
      <div>
        <div className="rounded bg-ml-black p-1">
          {hasUnlimited ? (
            <CustomIcon name="infinity" className="!text-ml-white w-5 h-5" />
          ) : (
            <CustomIcon name="star" className="!text-ml-white w-5 h-5" />
          )}
        </div>
      </div>
      <div className="flex flex-col gap-2">
        <div className="font-bold text-ml-black h-5 py-1">
          {hasUnlimited ? 'Unlimited Text-to-CAD' : 'Upgrade your plan'}
        </div>
        <div className="text-ml-grey">
          {hasUnlimited
            ? 'You have unlimited use on your paid plan.'
            : 'for unlimited usage of Text-to-CAD and more!'}
        </div>
        <BillingRemaining
          mode={BillingRemainingMode.ProgressBarStretch}
          billingActor={props.billingActor}
        />
        {!hasUnlimited && (
          <a
            className="bg-ml-black text-ml-white rounded-lg text-center p-1 cursor-pointer"
            href={withSiteBaseURL('/design-studio-pricing')}
            target="_blank"
            rel="noopener noreferrer"
            data-testid="billing-upgrade-button"
            onClick={openExternalBrowserIfDesktop()}
          >
            Upgrade
          </a>
        )}
      </div>
    </div>
  )
}