import { useEffect, useState } from 'react'
import { estimatePlatformFunds } from '@/lib/fundingCalculation'
import { Card } from './ui'
import { t } from '@/lib/i18n'

interface FundingProgressBarProps {
  progressPercent: number
}

function FundingProgressBar({ progressPercent }: FundingProgressBarProps): React.ReactElement {
  return (
    <div className="relative w-full h-4 bg-cyber-dark rounded-full overflow-hidden border border-neon-cyan/30">
      <div
        className="absolute top-0 left-0 h-full bg-gradient-to-r from-neon-cyan to-neon-green transition-all duration-500"
        style={{ width: `${progressPercent}%` }}
      />
      <div className="absolute inset-0 flex items-center justify-center">
        <span className="text-xs font-mono text-cyber-darker font-bold">
          {progressPercent.toFixed(1)}%
        </span>
      </div>
    </div>
  )
}

function FundingStats({ stats }: { stats: ReturnType<typeof estimatePlatformFunds> }): React.ReactElement {
  const progressPercent = Math.min(100, stats.progressPercent)
  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between text-sm">
        <span className="text-cyber-accent">{t('home.funding.current', { current: stats.totalBTC.toFixed(6) })}</span>
        <span className="text-cyber-accent">{t('home.funding.target', { target: stats.targetBTC.toFixed(2) })}</span>
      </div>
      <FundingProgressBar progressPercent={progressPercent} />
      <p className="text-xs text-cyber-accent/70">
        {t('home.funding.progress', { percent: progressPercent.toFixed(1) })}
      </p>
      <p className="text-sm text-cyber-accent mt-4">
        {t('home.funding.description')}
      </p>
    </div>
  )
}

export function FundingGauge(): React.ReactElement {
  const state = useFundingGaugeState()

  if (state.loading) {
    return <FundingGaugeLoading />
  }

  return (
    <div className="space-y-6">
      <Card variant="default" className="bg-cyber-dark/50">
        <h2 className="text-xl font-semibold text-neon-cyan mb-4">
          {t('home.funding.title')} - {t('home.funding.priority.ia')}
        </h2>
        <FundingStats stats={state.stats} />
      </Card>
      <Card variant="default" className="bg-cyber-dark/50">
        <h2 className="text-xl font-semibold text-neon-cyan mb-4">
          {t('home.funding.certification.title')} - {t('home.funding.priority.ancrage')}
        </h2>
        <FundingStats stats={state.certificationStats} />
      </Card>
    </div>
  )
}

function FundingGaugeLoading(): React.ReactElement {
  return (
    <Card variant="default" className="bg-cyber-dark/50 mb-8">
      <p className="text-cyber-accent">{t('common.loading')}</p>
    </Card>
  )
}

function useFundingGaugeState(): {
  stats: ReturnType<typeof estimatePlatformFunds>
  certificationStats: ReturnType<typeof estimatePlatformFunds>
  loading: boolean
} {
  const [stats, setStats] = useState(estimatePlatformFunds())
  const [certificationStats, setCertificationStats] = useState(estimatePlatformFunds())
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const loadStats = async (): Promise<void> => {
      try {
        const fundingStats = estimatePlatformFunds()
        setStats(fundingStats)
        setCertificationStats(fundingStats)
      } catch (e) {
        console.error('Error loading funding stats:', e)
      } finally {
        setLoading(false)
      }
    }
    void loadStats()
  }, [])

  return { stats, certificationStats, loading }
}