import React, { useEffect, useState } from 'react';
import type { Audit } from './types';
import { fetchAudit } from './api/fetchAudit';
import { useQuiz } from './hooks/useQuiz';
import { LandingHook } from './components/LandingHook';
import { ProgressBar } from './components/ProgressBar';
import { QuestionCard } from './components/QuestionCard';
import { EmailGate } from './components/EmailGate';
import { ResultsScreen } from './components/ResultsScreen';
import { Loader2, AlertTriangle } from 'lucide-react';
import styles from './styles/quiz.module.css';

import './styles/variables.css';

const config = window.noon_audit_config;

export const App: React.FC = () => {
  const [audit, setAudit] = useState<Audit | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  const {
    step,
    currentQuestion,
    answers,
    scoreResult,
    totalQuestions,
    progress,
    selectAnswer,
    goBack,
    startQuiz,
    submitEmail,
  } = useQuiz(audit);

  // Apply accent colour from WP settings.
  useEffect(() => {
    if (config.accentColor) {
      document.documentElement.style.setProperty('--noon-accent', config.accentColor);
      
      // Parse Hex to RGB to set --noon-accent-rgb for shadows
      const hex = config.accentColor.replace(/^#/, '');
      let r = 0, g = 0, b = 0;
      if (hex.length === 3) {
        r = parseInt(hex[0] + hex[0], 16);
        g = parseInt(hex[1] + hex[1], 16);
        b = parseInt(hex[2] + hex[2], 16);
      } else if (hex.length === 6) {
        r = parseInt(hex.substring(0, 2), 16);
        g = parseInt(hex.substring(2, 4), 16);
        b = parseInt(hex.substring(4, 6), 16);
      }
      
      if (!isNaN(r) && !isNaN(g) && !isNaN(b)) {
        document.documentElement.style.setProperty('--noon-accent-rgb', `${r}, ${g}, ${b}`);
        
        // Calculate hover colour (darker by ~15%)
        const hr = Math.max(0, Math.floor(r * 0.85));
        const hg = Math.max(0, Math.floor(g * 0.85));
        const hb = Math.max(0, Math.floor(b * 0.85));
        const hoverHex = '#' + (1 << 24 | hr << 16 | hg << 8 | hb).toString(16).slice(1);
        document.documentElement.style.setProperty('--noon-accent-hover', hoverHex);
      }
    }
  }, []);

  // Fetch audit data.
  useEffect(() => {
    const slug = config.auditSlug || 'salesforce-health';

    fetchAudit(slug)
      .then((data) => {
        setAudit(data);
        setLoading(false);
      })
      .catch((err) => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return (
      <div className={styles.quizContainer} style={{ textAlign: 'center', padding: '4rem 1rem' }}>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '1rem', color: 'var(--noon-accent)' }}>
          <Loader2 size={32} className={styles.spin} />
        </div>
        <p style={{ color: 'var(--noon-text-secondary)' }}>Loading audit…</p>
      </div>
    );
  }

  if (error || !audit) {
    return (
      <div className={styles.quizContainer} style={{ textAlign: 'center', padding: '4rem 1rem' }}>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '1rem', color: 'var(--noon-danger)' }}>
          <AlertTriangle size={32} />
        </div>
        <p style={{ color: 'var(--noon-danger)' }}>{error || 'Audit not found.'}</p>
      </div>
    );
  }

  const isDarkMode = config.themeMode !== 'light';
  
  const wrapperClasses = [
    styles.quizContainer,
    isDarkMode ? styles.darkTheme : styles.lightTheme,
    (isDarkMode && config.glassMode) ? 'glassMode' : ''
  ].filter(Boolean).join(' ');

  return (
    <div className={wrapperClasses}>
      {/* ── Logo Header ──────────────────────────────────────────────────── */}
      {config.logoUrl && (
        <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
          <img 
            src={config.logoUrl} 
            alt="Company Logo" 
            style={{ maxHeight: '60px', maxWidth: '100%', objectFit: 'contain' }} 
          />
        </div>
      )}

      {/* ── Landing ──────────────────────────────────────────────────────── */}
      {step === 'landing' && (
        <LandingHook audit={audit} onStart={startQuiz} />
      )}

      {/* ── Quiz ─────────────────────────────────────────────────────────── */}
      {step === 'quiz' && (
        <>
          <ProgressBar
            current={currentQuestion}
            total={totalQuestions}
            progress={progress}
          />
          <QuestionCard
            question={audit.questions[currentQuestion]}
            category={audit.categories.find(
              (c) => c.id === audit.questions[currentQuestion].categoryId
            )}
            currentAnswer={answers.find(
              (a) => a.questionId === audit.questions[currentQuestion].id
            )}
            onSelectAnswer={selectAnswer}
            onBack={goBack}
            showBack={currentQuestion > 0}
          />
        </>
      )}

      {/* ── Email Gate ───────────────────────────────────────────────────── */}
      {step === 'email-gate' && scoreResult && (
        <EmailGate
          auditId={audit.id}
          scoreResult={scoreResult}
          answers={answers}
          onComplete={submitEmail}
        />
      )}

      {/* ── Results ──────────────────────────────────────────────────────── */}
      {step === 'results' && scoreResult && (
        <ResultsScreen
          scoreResult={scoreResult}
          consultantName={config.consultantName}
          bookingUrl={config.bookingUrl}
        />
      )}

      {/* ── Watermark ────────────────────────────────────────────────────── */}
      {config.showWatermark && (
        <div className={styles.watermark}>
          <a
            href={config.watermarkUrl || 'https://noonelite.com'}
            target="_blank"
            rel="noopener noreferrer"
          >
            {config.watermarkText ? config.watermarkText : 'Powered by Noon Elite'}
          </a>
        </div>
      )}
    </div>
  );
};