import React, { useEffect, useRef, useState } from 'react';
import {
  Card,
  PageContainer,
  TopBar,
  Section,
  Disclaimer,
  CardFooter
} from './components/styles';
import { LoadingView } from './components/LoadingView';
import { ErrorView } from './components/ErrorView';
import { ResponseCard } from './components/ResponseCard';
import { CardHero } from './components/CardHero';
import { CategoriesRows } from './components/CategoriesRows';
import { ClarksonResponse } from './types';
import clarksonResponses from './data/clarkson-responses.json';
import { GradientOverlay } from './components/GradientOverlay';
import { OpenAIIcon } from './assets/OpenAIIcon';
import { ProductBetaBadge } from './components/ProductBetaBadge';

const topics: ClarksonResponse[] = clarksonResponses.data;

const LOADING_MESSAGE_INTERVAL = 3500;

// WARNING: This component is a PROTOTYPE and is not intended for production use.
// Do not copy or reuse this code or any patterns it uses as it is
// AI-generated and may contain errors or anti-patterns.

export function ClarksonSays({
  isEmbeddedMode = false,
  isApp = false
}: {
  isEmbeddedMode?: boolean;
  isApp?: boolean;
}): JSX.Element {
  const [selectedTopic, setSelectedTopic] = useState<string | null>(null);
  const [response, setResponse] = useState<ClarksonResponse | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);
  const cardRef = useRef<HTMLDivElement>(null);

  function scrollToTop(offset: number = 80): void {
    if (cardRef.current) {
      try {
        const rect = cardRef.current.getBoundingClientRect();
        const targetTop = Math.max(0, window.scrollY + rect.top - offset);
        window.scrollTo({ top: targetTop, behavior: 'smooth' });
      } catch (_) {
        // no-op
      }
    }
  }

  function handleTopicClick(topic: ClarksonResponse): void {
    setSelectedTopic(topic.title);
    setIsLoading(true);
    scrollToTop(120);
    setTimeout(() => {
      setIsLoading(false);
      setResponse(topic);
    }, LOADING_MESSAGE_INTERVAL);
  }

  function resetResponse(): void {
    setIsError(false);
    setResponse(null);
    setTimeout(() => scrollToTop(120), 0);
  }

  // Progress bar state
  const [progress, setProgress] = useState(0);
  useEffect(
    () => {
      if (!isLoading) {
        return;
      }
      setProgress(0);
      const interval = setInterval(() => {
        setProgress(prev => {
          if (prev >= 99) {
            clearInterval(interval);
            return 99;
          }
          return prev + Math.random() * (99 - prev) * 0.1;
        });
      }, 100);
      return () => clearInterval(interval);
    },
    [isLoading]
  );

  return (
    <PageContainer isEmbeddedMode={isEmbeddedMode}>
      {!response && (
        <Card ref={cardRef} isApp={isApp} embedded={!isEmbeddedMode}>
          <GradientOverlay />
          <TopBar isApp={isApp} />
          <Section>
            <CardHero isApp={isApp} />
            <CategoriesRows
              topics={topics}
              isLoading={isLoading}
              handleTopicClick={handleTopicClick}
            />
            <CardFooter>
              <Disclaimer isApp={isApp}>
                <span>Powered by</span> <OpenAIIcon />
              </Disclaimer>
              <ProductBetaBadge />
            </CardFooter>
          </Section>

          {isLoading && (
            <LoadingView
              isApp={isApp}
              progress={progress}
              selectedTopic={selectedTopic || undefined}
            />
          )}

          {isError && <ErrorView isApp={isApp} resetResponse={resetResponse} />}
        </Card>
      )}
      {response && (
        <ResponseCard
          isApp={isApp}
          response={response}
          resetResponse={resetResponse}
        />
      )}
    </PageContainer>
  );
}