import React, { useEffect, useState } from 'react';
import type { ReactElement } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import BaseButton from '../components/BaseButton';
import CardBox from '../components/CardBox';
import SectionFullScreen from '../components/SectionFullScreen';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';
import { useAppSelector } from '../stores/hooks';
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
import * as icon from '@mdi/js';
import BaseIcon from '../components/BaseIcon';

export default function Starter() {
    const [illustrationImage, setIllustrationImage] = useState({
        src: undefined,
        photographer: undefined,
        photographer_url: undefined,
    })
    const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
    const [contentType, setContentType] = useState('video');
    const [contentPosition, setContentPosition] = useState('left');
    const textColor = useAppSelector((state) => state.style.linkColor);

    const title = 'Smart Survey Filler AI'

    // Fetch Pexels image/video
    useEffect(() => {
        async function fetchData() {
            const image = await getPexelsImage();
            const video = await getPexelsVideo();
            setIllustrationImage(image);
            setIllustrationVideo(video);
        }
        fetchData();
    }, []);

    const videoBlock = (video) => {
        if (video?.video_files?.length > 0) {
            return (
                <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-2/5'>
                    <video
                        className='absolute top-0 left-0 w-full h-full object-cover'
                        autoPlay
                        loop
                        muted
                    >
                        <source src={video?.video_files[0]?.link} type='video/mp4'/>
                    </video>
                    <div className='absolute inset-0 bg-blue-900/40 mix-blend-multiply'></div>
                    <div className='flex justify-center w-full bg-black/40 py-2 z-10'>
                        <a
                            className='text-[10px] text-white opacity-60 hover:opacity-100'
                            href={video?.user?.url}
                            target='_blank'
                            rel='noreferrer'
                        >
                            Video by {video.user.name} on Pexels
                        </a>
                    </div>
                </div>)
        }
    };

  return (
      <div className="bg-slate-900 min-h-screen text-slate-100">
      <Head>
        <title>{getPageTitle('Smart Survey Filler AI')}</title>
      </Head>

      <SectionFullScreen bg='slate'>
      <div className={`flex flex-row min-h-screen w-full`}>
          {videoBlock(illustrationVideo)}
          
          <div className='flex items-center justify-center flex-col space-y-8 w-full px-6 lg:px-12 py-12'>
            <div className="text-center space-y-4 max-w-2xl">
                <div className="inline-flex items-center space-x-2 bg-blue-500/10 border border-blue-500/20 rounded-full px-4 py-1 text-blue-400 text-sm font-medium mb-4">
                    <BaseIcon path={icon.mdiAutoFix} size={18} />
                    <span>Next-Gen Survey Automation</span>
                </div>
                <h1 className="text-5xl md:text-6xl font-extrabold tracking-tight text-white mb-4">
                    Smart Survey <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400">Filler AI</span>
                </h1>
                <p className="text-xl text-slate-400 leading-relaxed">
                    Automate complex surveys with Groq, Gemini 2.5 Flash, and DeepSeek. 
                    Intelligent persona-based responses with human-like behavior.
                </p>
            </div>

            <CardBox className='w-full md:w-4/5 lg:w-3/4 bg-slate-800/50 border-slate-700 backdrop-blur-md shadow-2xl'>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-8 p-4">
                    <div className="flex flex-col items-center text-center space-y-3">
                        <div className="p-3 bg-blue-500/20 rounded-xl text-blue-400">
                            <BaseIcon path={icon.mdiRobot} size={32} />
                        </div>
                        <h3 className="font-bold text-lg">Multi-Model AI</h3>
                        <p className="text-sm text-slate-400">Support for Llama 3, Gemini Flash, and DeepSeek for maximum intelligence.</p>
                    </div>
                    <div className="flex flex-col items-center text-center space-y-3">
                        <div className="p-3 bg-emerald-500/20 rounded-xl text-emerald-400">
                            <BaseIcon path={icon.mdiAccountSettings} size={32} />
                        </div>
                        <h3 className="font-bold text-lg">Smart Personas</h3>
                        <p className="text-sm text-slate-400">Define your identity once and let the AI fill surveys with consistent personality.</p>
                    </div>
                    <div className="flex flex-col items-center text-center space-y-3">
                        <div className="p-3 bg-violet-500/20 rounded-xl text-violet-400">
                            <BaseIcon path={icon.mdiShieldCheck} size={32} />
                        </div>
                        <h3 className="font-bold text-lg">Anti-Detection</h3>
                        <p className="text-sm text-slate-400">Simulates human-like typing and click patterns to ensure reliability.</p>
                    </div>
                </div>

                <div className="mt-12 flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-4">
                    <BaseButton
                        href='/register'
                        label='Get Started Free'
                        color='info'
                        className='px-8 py-3 text-lg font-bold rounded-xl w-full md:w-auto'
                    />
                    <BaseButton
                        href='/login'
                        label='Sign In'
                        color='white'
                        outline
                        className='px-8 py-3 text-lg font-bold rounded-xl w-full md:w-auto'
                    />
                </div>
            </CardBox>
          </div>
      </div>
      </SectionFullScreen>
      
      <div className='bg-slate-950 border-t border-slate-800 text-slate-500 flex flex-col text-center justify-center md:flex-row py-8'>
        <p className='text-sm'>© 2026 <span className="text-slate-300 font-medium">{title}</span>. Built with AI for the future.</p>
        <div className="flex space-x-6 justify-center mt-4 md:mt-0 md:ml-8">
            <Link className='hover:text-slate-300 transition-colors text-sm' href='/privacy-policy/'>Privacy</Link>
            <Link className='hover:text-slate-300 transition-colors text-sm' href='/terms-of-use/'>Terms</Link>
        </div>
      </div>

    </div>
  );
}

Starter.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
};