'use client'

import { AnimatedCounter } from '@/components/shared/AnimatedCounter'
import { formatCurrency, formatNumber } from '@/lib/utils'
import type { ROIResults } from '@/types/roi'
import { cn } from '@/lib/utils'

interface ROIResultPanelProps {
  results: ROIResults
  isGated: boolean
}

const metrics = [
  {
    key: 'projectedSavings' as keyof ROIResults,
    label: 'Annual savings',
    sublabel: 'projected with automation',
    formatter: (v: number) => formatCurrency(v, true),
    accent: '#6366f1',
    large: true,
  },
  {
    key: 'monthlySavings' as keyof ROIResults,
    label: 'Monthly recovery',
    sublabel: 'back in your pocket',
    formatter: (v: number) => formatCurrency(v, true),
    accent: '#38bdf8',
    large: false,
  },
  {
    key: 'projectedSavedHours' as keyof ROIResults,
    label: 'Hours recovered/year',
    sublabel: 'time back in your day',
    formatter: (v: number) => formatNumber(v),
    accent: '#a78bfa',
    large: false,
  },
]

export function ROIResultPanel({ results, isGated }: ROIResultPanelProps) {
  return (
    <div className={cn('space-y-3 relative', isGated && 'blur-gate')}>
      {isGated && (
        <div className="absolute inset-0 z-10 flex items-center justify-center" aria-hidden="true">
          <div
            className="text-center p-6 rounded-2xl"
            style={{
              background: 'rgba(10, 10, 15, 0.85)',
              backdropFilter: 'blur(12px)',
              border: '1px solid var(--dt-border-accent)',
            }}
          >
            <p className="text-sm font-semibold mb-1" style={{ color: 'var(--dt-text-primary)' }}>
              Unlock your full report
            </p>
            <p className="text-xs" style={{ color: 'var(--dt-text-muted)' }}>
              Enter your email below to see your numbers
            </p>
          </div>
        </div>
      )}

      {metrics.map((m) => (
        <div
          key={m.key}
          className={cn('p-5 rounded-xl', m.large && 'p-6')}
          style={{
            background: 'var(--dt-bg-elevated)',
            border: `1px solid ${m.accent}20`,
          }}
        >
          <div
            className={cn('font-bold tracking-tight tabular-nums', m.large ? 'text-4xl' : 'text-2xl')}
            style={{ color: m.accent }}
          >
            <AnimatedCounter
              to={results[m.key]}
              formatter={m.formatter}
            />
          </div>
          <p className="text-sm font-medium mt-1" style={{ color: 'var(--dt-text-primary)' }}>
            {m.label}
          </p>
          <p className="text-xs mt-0.5" style={{ color: 'var(--dt-text-muted)' }}>
            {m.sublabel}
          </p>
        </div>
      ))}
    </div>
  )
}