'use client';

import { useState, useEffect, useRef } from 'react';
import { useLocale, useTranslations } from 'next-intl';
import { motion, AnimatePresence } from 'framer-motion';
import { MessageCircle } from 'lucide-react';
import { revealVariants, staggerContainer, viewportOnce } from '@/lib/animations';
import { trackEvent } from '@/lib/analytics';
import VoiceAgentProvider from '@/components/configurator/VoiceAgentProvider';
import VoiceAgent from '@/components/configurator/VoiceAgent';
import StepComplete from '@/components/configurator/StepComplete';
import type { WizardFormData } from '@/components/configurator/WizardContainer';

export default function Discovery() {
  const t = useTranslations('discovery');
  const locale = useLocale();
  const [isOpen, setIsOpen] = useState(false);
  const [completed, setCompleted] = useState<{ brief: string; formData: WizardFormData } | null>(null);
  const panelRef = useRef<HTMLDivElement>(null);
  const [voiceSupported, setVoiceSupported] = useState(false);

  // Check if voice is available (same logic as old ModeToggle)
  useEffect(() => {
    async function check() {
      if (typeof WebSocket === 'undefined') return;
      if (!navigator.mediaDevices?.getUserMedia) return;
      try {
        const res = await fetch('/api/gemini-token');
        const data = (await res.json()) as { success: boolean };
        if (data.success) setVoiceSupported(true);
      } catch {
        // silent — section stays hidden
      }
    }
    void check();
  }, []);

  const handleOpen = () => {
    setIsOpen(true);
    trackEvent('voice_agent_started');
    // Scroll to panel after it renders
    requestAnimationFrame(() => {
      panelRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    });
  };

  const handleComplete = (brief: string, formData: WizardFormData) => {
    setCompleted({ brief, formData });
    trackEvent('voice_agent_brief_generated');
  };

  const handleReset = () => {
    setCompleted(null);
    setIsOpen(false);
  };

  if (!voiceSupported) return null;

  return (
    <section
      id="discover"
      className="relative bg-surface-high py-24 overflow-hidden"
      style={{
        backgroundImage: [
          'repeating-linear-gradient(0deg, rgba(25,28,29,0.02) 0px, rgba(25,28,29,0.02) 1px, transparent 1px, transparent 48px)',
          'repeating-linear-gradient(90deg, rgba(25,28,29,0.02) 0px, rgba(25,28,29,0.02) 1px, transparent 1px, transparent 48px)',
        ].join(', '),
      }}
    >
      {/* Top accent line */}
      <div
        className="absolute top-0 left-0 right-0 h-px pointer-events-none"
        style={{
          background: 'linear-gradient(90deg, transparent 10%, rgba(91,164,217,0.15) 50%, transparent 90%)',
        }}
        aria-hidden="true"
      />

      <div className="relative z-10 container mx-auto px-6">
        <AnimatePresence mode="wait">
          {completed ? (
            <motion.div
              key="completed"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
              className="max-w-2xl mx-auto"
            >
              <StepComplete
                formData={completed.formData}
                brief={completed.brief}
                onReset={handleReset}
              />
            </motion.div>
          ) : (
            <motion.div
              key="discovery"
              variants={staggerContainer}
              initial="hidden"
              whileInView="visible"
              viewport={viewportOnce}
              className="flex flex-col items-center text-center"
            >
              <motion.span
                variants={revealVariants}
                className="label-md text-primary"
              >
                {t('eyebrow')}
              </motion.span>

              <motion.h2
                variants={revealVariants}
                className="font-serif text-4xl font-semibold tracking-headline text-on-surface leading-tight md:text-5xl mt-4 max-w-lg"
              >
                {t('title')}
              </motion.h2>

              <motion.p
                variants={revealVariants}
                className="text-base text-outline leading-relaxed max-w-md mt-4"
              >
                {t('description')}
              </motion.p>

              {!isOpen && (
                <motion.div variants={revealVariants} className="mt-8 flex flex-col items-center">
                  <button
                    type="button"
                    onClick={handleOpen}
                    className="flex items-center gap-2.5 px-7 py-3.5 rounded-xl text-sm font-medium text-white transition-all hover:-translate-y-px active:translate-y-0 shadow-lg shadow-primary/20"
                    style={{ background: 'linear-gradient(135deg, #006494, #5BA4D9)' }}
                  >
                    <MessageCircle size={16} />
                    {t('cta')}
                  </button>
                  <p className="text-[11px] text-outline/60 mt-3">{t('privacy')}</p>
                </motion.div>
              )}

              {/* Voice panel */}
              <AnimatePresence>
                {isOpen && (
                  <motion.div
                    ref={panelRef}
                    initial={{ opacity: 0, height: 0 }}
                    animate={{ opacity: 1, height: 'auto' }}
                    exit={{ opacity: 0, height: 0 }}
                    transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
                    className="w-full max-w-xl mt-10 overflow-hidden"
                  >
                    <div className="relative rounded-2xl bg-surface-high shadow-[0_20px_50px_rgba(25,28,29,0.08)] p-6 sm:p-8 border border-outline-variant/20">
                      {/* Top accent line */}
                      <div
                        className="absolute top-0 left-6 right-6 h-[2px] rounded-full pointer-events-none"
                        style={{
                          background: 'linear-gradient(90deg, #006494, #5BA4D9, transparent)',
                        }}
                        aria-hidden="true"
                      />

                      <VoiceAgentProvider locale={locale}>
                        <VoiceAgent locale={locale} onComplete={handleComplete} />
                      </VoiceAgentProvider>
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </section>
  );
}
