'use client'

import { motion } from 'framer-motion'
import { useState, useEffect, useMemo } from 'react'
import { Bell, ArrowDown } from 'lucide-react'

function resolveHsl(cssVar: string): string {
  if (typeof window === 'undefined') return 'transparent'
  const value = getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim()
  return value ? `hsl(${value})` : 'transparent'
}

export function CompetitorDemoVisual() {
  const [phase, setPhase] = useState(0)
  const [colors, setColors] = useState({ burgundy: '#993350', border: '#27272a' })

  useEffect(() => {
    setColors({
      burgundy: resolveHsl('--burgundy'),
      border: resolveHsl('--border'),
    })
  }, [])

  useEffect(() => {
    const interval = setInterval(() => {
      setPhase(p => (p + 1) % 2)
    }, 3000)
    return () => clearInterval(interval)
  }, [])

  return (
    <div className="relative h-full bg-gradient-to-br from-background via-background to-[hsl(var(--primary))]/5 rounded-xl p-4 overflow-hidden">
      {/* Browser Header */}
      <div className="mb-3 flex items-center gap-2 px-2 py-1.5 rounded-md bg-secondary/50 border border-border">
        <div className="flex gap-1">
          <div className="w-1.5 h-1.5 rounded-full bg-red-400" />
          <div className="w-1.5 h-1.5 rounded-full bg-yellow-400" />
          <div className="w-1.5 h-1.5 rounded-full bg-green-400" />
        </div>
        <div className="text-[9px] text-muted-foreground font-mono">
          competitor.com/pricing
        </div>
      </div>

      {/* Pricing Table */}
      <div className="space-y-3">
        <h4 className="text-xs font-bold text-foreground">Professional Plan</h4>

        {/* Price Card */}
        <motion.div
          className="p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 relative overflow-hidden shadow-xl"
          animate={{
            borderColor: phase === 1 ? colors.burgundy : colors.border,
            boxShadow: phase === 1
              ? `0 0 20px ${colors.burgundy}33`
              : '0 1px 3px rgba(0,0,0,0.5)'
          }}
          transition={{ duration: 0.5 }}
        >
          {/* Shine effect on change */}
          {phase === 1 && (
            <motion.div
              initial={{ x: '-100%', skewX: -20 }}
              animate={{ x: '200%' }}
              transition={{ duration: 0.8, ease: 'easeInOut' }}
              className="absolute inset-0 bg-gradient-to-r from-transparent via-[hsl(var(--burgundy))]/10 to-transparent"
            />
          )}

          <div className="relative z-10 space-y-2">
            {/* Old Price */}
            <motion.div
              animate={{
                opacity: phase === 1 ? 0.3 : 1,
                scale: phase === 1 ? 0.95 : 1
              }}
              transition={{ duration: 0.3 }}
            >
              <div className="flex items-baseline gap-2">
                <motion.span
                  className="text-3xl font-bold"
                  animate={{
                    textDecoration: phase === 1 ? 'line-through' : 'none',
                    color: phase === 1 ? colors.burgundy : '#f4f4f5'
                  }}
                >
                  $99
                </motion.span>
                <span className="text-sm text-zinc-500">/month</span>
              </div>
            </motion.div>

            {/* New Price with animated arrow */}
            {phase === 1 && (
              <motion.div
                initial={{ opacity: 0, x: -10, scale: 0.9 }}
                animate={{ opacity: 1, x: 0, scale: 1 }}
                transition={{ delay: 0.1, type: 'spring', stiffness: 300, damping: 20 }}
                className="flex items-center gap-3 mt-1"
              >
                <div className="flex items-center justify-center h-6 w-6 rounded-full bg-[hsl(var(--burgundy))]/10">
                  <ArrowDown className="h-4 w-4 text-[hsl(var(--burgundy))]" strokeWidth={3} />
                </div>
                <div className="flex items-baseline gap-2">
                  <span className="text-5xl font-extrabold text-[hsl(var(--burgundy))] tracking-tight">
                    $79
                  </span>
                  <span className="text-sm font-medium text-[hsl(var(--burgundy))]">/month</span>
                </div>
              </motion.div>
            )}

            {/* Savings Badge */}
            {phase === 1 && (
              <motion.div
                initial={{ opacity: 0, scale: 0.8, rotate: -3 }}
                animate={{ opacity: 1, scale: 1, rotate: 0 }}
                transition={{ delay: 0.3, type: 'spring' }}
                className="mt-2 inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-[hsl(var(--burgundy))]/10 border border-[hsl(var(--burgundy))]/20"
              >
                <span className="text-[10px] font-extrabold text-[hsl(var(--burgundy))] uppercase tracking-wider">
                  Save $240/year
                </span>
              </motion.div>
            )}
          </div>
        </motion.div>

        {/* Alert Notification */}
        {
          phase === 1 && (
            <motion.div
              initial={{ opacity: 0, y: 10, scale: 0.95 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              transition={{ delay: 0.6 }}
              className="flex items-center gap-2 p-2 rounded-lg bg-[hsl(var(--burgundy))]/10 border border-[hsl(var(--burgundy))]/30"
            >
              <div className="relative flex-shrink-0">
                <Bell className="h-3 w-3 text-[hsl(var(--burgundy))]" />
                <motion.span
                  animate={{ scale: [1, 1.3, 1] }}
                  transition={{ duration: 1, repeat: Infinity }}
                  className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full bg-[hsl(var(--burgundy))]"
                />
              </div>
              <span className="text-[9px] font-semibold text-[hsl(var(--burgundy))]">
                Alert sent to your team
              </span>
            </motion.div>
          )
        }
      </div>
    </div>
  )
}