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 BaseIcon from '../components/BaseIcon';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';
import { useAppDispatch, useAppSelector } from '../stores/hooks';
import * as icon from '@mdi/js';
import { askGpt } from '../stores/openAiSlice';

export default function LandingPage() {
  const dispatch = useAppDispatch();
  const { gptResponse, isAskingQuestion } = useAppSelector((state) => state.openAi);
  const { currentUser } = useAppSelector((state) => state.auth);
  const [prompt, setPrompt] = useState('');

  const handleAsk = () => {
    if (prompt.trim()) {
      dispatch(askGpt(prompt));
    }
  };

  const features = [
    {
      title: 'Legal Drafting',
      description: 'Draft court-ready documents, motions, and contracts with AI precision.',
      icon: icon.mdiFileDocumentEditOutline,
    },
    {
      title: 'File Analysis',
      description: 'Upload depositions or pleadings for instant AI-driven insights and summaries.',
      icon: icon.mdiFileSearchOutline,
    },
    {
      title: 'Legal Research',
      description: 'Access comprehensive US State & Federal law databases with AI assistance.',
      icon: icon.mdiLibrarySearch,
    },
    {
      title: 'Mock Trial Simulator',
      description: 'Simulate courtroom scenarios with an AI judge and opposing counsel.',
      icon: icon.mdiAccountTieVoiceOutline,
    },
    {
      title: 'Matters Management',
      description: 'Organize your case work, files, and history in dedicated workspaces.',
      icon: icon.mdiBriefcaseOutline,
    },
    {
      title: 'Medical Chronology',
      description: 'Automatically generate timelines and analysis from medical records.',
      icon: icon.mdiTimelineTextOutline,
    },
  ];

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-900">
      <Head>
        <title>{getPageTitle('All-in-One AI Legal Assistant')}</title>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@700;800&display=swap" rel="stylesheet" />
      </Head>

      {/* Navigation */}
      <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16 items-center">
            <div className="flex items-center">
              <span className="text-2xl font-extrabold text-slate-900 font-serif">Pro Se Litigant <span className="text-blue-600">AI</span></span>
            </div>
            <div className="hidden md:flex items-center space-x-8">
              <a href="#features" className="text-sm font-medium text-slate-600 hover:text-blue-600 transition-colors">Features</a>
              <a href="#assistant" className="text-sm font-medium text-slate-600 hover:text-blue-600 transition-colors">Assistant</a>
              <a href="#pricing" className="text-sm font-medium text-slate-600 hover:text-blue-600 transition-colors">Pricing</a>
              {currentUser ? (
                <Link href="/dashboard" className="text-sm font-semibold text-blue-600 hover:text-blue-700">Dashboard</Link>
              ) : (
                <>
                  <Link href="/login" className="text-sm font-medium text-slate-600 hover:text-blue-600 transition-colors">Login</Link>
                  <BaseButton href="/login" label="Get Started" color="info" className="rounded-full px-6" />
                </>
              )}
            </div>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <header className="relative py-20 lg:py-32 overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
          <h1 className="text-5xl lg:text-7xl font-extrabold tracking-tight text-slate-900 font-serif mb-6">
            Your AI-Powered <br />
            <span className="text-blue-600">Legal Partner</span>
          </h1>
          <p className="max-w-2xl mx-auto text-xl text-slate-600 mb-10 leading-relaxed">
            Prepare, research, draft, and simulate court-ready legal matters with precision. 
            Designed for pro se litigants, students, and professionals.
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <BaseButton href={currentUser ? "/dashboard" : "/login"} label={currentUser ? "Go to Dashboard" : "Start Free"} color="info" className="rounded-full px-8 py-4 text-lg" />
            <BaseButton href="#features" label="Explore Features" color="white" className="rounded-full px-8 py-4 text-lg border border-slate-200" />
          </div>
        </div>
        {/* Decorative background element */}
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-0 opacity-10 pointer-events-none">
           <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-400 rounded-full blur-[100px]" />
           <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-indigo-400 rounded-full blur-[100px]" />
        </div>
      </header>

      {/* AI Assistant Widget */}
      <section id="assistant" className="py-20 bg-white">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="bg-slate-900 rounded-3xl p-8 lg:p-12 shadow-2xl relative overflow-hidden">
            <div className="relative z-10">
              <h2 className="text-3xl font-bold text-white mb-4 font-serif">Try the Legal Assistant</h2>
              <p className="text-slate-400 mb-8 text-lg">Ask a legal question or describe a document you need to draft.</p>
              
              <div className="flex gap-2">
                <input 
                  type="text" 
                  value={prompt}
                  onChange={(e) => setPrompt(e.target.value)}
                  placeholder="e.g. What is the California rule for rear-end collisions?" 
                  className="flex-grow bg-slate-800 border-none rounded-xl px-6 py-4 text-white placeholder-slate-500 focus:ring-2 focus:ring-blue-500 outline-none transition-all"
                />
                <button 
                  onClick={handleAsk}
                  disabled={isAskingQuestion || !prompt}
                  className="bg-blue-600 hover:bg-blue-500 disabled:opacity-50 text-white font-bold px-8 py-4 rounded-xl transition-colors flex items-center gap-2"
                >
                  {isAskingQuestion ? 'Consulting...' : 'Ask AI'}
                  {!isAskingQuestion && <BaseIcon path={icon.mdiSend} size={18} />}
                </button>
              </div>

              {gptResponse && (
                <div className="mt-8 p-6 bg-slate-800 rounded-2xl border border-slate-700 animate-fade-in">
                  <p className="text-slate-300 whitespace-pre-wrap leading-relaxed">
                    {gptResponse}
                  </p>
                </div>
              )}
            </div>
            {/* Background accent */}
            <div className="absolute top-0 right-0 w-64 h-64 bg-blue-600/10 rounded-full -mr-32 -mt-32 blur-3xl" />
          </div>
        </div>
      </section>

      {/* Features Grid */}
      <section id="features" className="py-24 bg-slate-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center mb-16">
          <h2 className="text-4xl font-bold text-slate-900 font-serif mb-4">Comprehensive Legal Toolkit</h2>
          <p className="text-slate-600 max-w-2xl mx-auto text-lg">Everything you need to manage your legal matters effectively from a single platform.</p>
        </div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature, idx) => (
            <div key={idx} className="bg-white p-8 rounded-2xl border border-slate-200 hover:border-blue-300 transition-all hover:shadow-xl group">
              <div className="w-14 h-14 bg-blue-50 text-blue-600 rounded-xl flex items-center justify-center mb-6 group-hover:bg-blue-600 group-hover:text-white transition-colors">
                <BaseIcon path={feature.icon} size={28} />
              </div>
              <h3 className="text-xl font-bold text-slate-900 mb-3 font-serif">{feature.title}</h3>
              <p className="text-slate-600 leading-relaxed">{feature.description}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Pricing Section */}
      <section id="pricing" className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-4xl mx-auto text-center mb-16">
            <h2 className="text-4xl font-bold text-slate-900 font-serif mb-4">Transparent Pricing</h2>
            <p className="text-slate-600 text-lg">Start for free and upgrade when you need the full power of Pro Se Litigant AI.</p>
          </div>
          <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            {/* Free Plan */}
            <div className="bg-slate-50 p-10 rounded-3xl border border-slate-200">
              <h3 className="text-2xl font-bold mb-2">Start Free</h3>
              <div className="text-4xl font-extrabold mb-6">$0</div>
              <ul className="space-y-4 mb-10 text-slate-600">
                <li className="flex items-center gap-2"><BaseIcon path={icon.mdiCheckCircle} className="text-green-500" size={20} /> Chat with AI Legal Assistant</li>
                <li className="flex items-center gap-2"><BaseIcon path={icon.mdiCheckCircle} className="text-green-500" size={20} /> Draft simple documents</li>
                <li className="flex items-center gap-2"><BaseIcon path={icon.mdiCheckCircle} className="text-green-500" size={20} /> Upload 1 file (up to 6MB)</li>
              </ul>
              <BaseButton href="/login" label="Get Started" color="white" className="w-full rounded-xl py-4 border border-slate-300" />
            </div>
            {/* Premium Plan */}
            <div className="bg-slate-900 p-10 rounded-3xl text-white shadow-2xl relative">
              <div className="absolute top-0 right-10 transform -translate-y-1/2 bg-blue-600 text-xs font-bold px-3 py-1 rounded-full tracking-wider uppercase">Most Popular</div>
              <h3 className="text-2xl font-bold mb-2">Premium Plan</h3>
              <div className="text-4xl font-extrabold mb-6">$15 <span className="text-lg font-normal text-slate-400">/ year</span></div>
              <ul className="space-y-4 mb-10 text-slate-300">
                <li className="flex items-center gap-2"><BaseIcon path={icon.mdiCheckCircle} className="text-blue-500" size={20} /> Unlimited AI Assistant use</li>
                <li className="flex items-center gap-2"><BaseIcon path={icon.mdiCheckCircle} className="text-blue-500" size={20} /> All Matter workspaces</li>
                <li className="flex items-center gap-2"><BaseIcon path={icon.mdiCheckCircle} className="text-blue-500" size={20} /> Mock Trial simulations</li>
                <li className="flex items-center gap-2"><BaseIcon path={icon.mdiCheckCircle} className="text-blue-500" size={20} /> Medical Chronology tools</li>
                <li className="flex items-center gap-2"><BaseIcon path={icon.mdiCheckCircle} className="text-blue-500" size={20} /> Full Legal Research access</li>
              </ul>
              <BaseButton href="/login" label="Unlock Premium" color="info" className="w-full rounded-xl py-4 text-lg" />
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-950 py-16 text-slate-400">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid md:grid-cols-4 gap-12">
          <div className="col-span-2">
            <span className="text-2xl font-extrabold text-white font-serif mb-6 block">Pro Se Litigant <span className="text-blue-600">AI</span></span>
            <p className="max-w-sm mb-6 leading-relaxed">
              Empowering individuals with high-precision AI legal tools for drafting, research, and simulation. 
              Making the justice system accessible to everyone.
            </p>
          </div>
          <div>
            <h4 className="text-white font-bold mb-6">Platform</h4>
            <ul className="space-y-4 text-sm">
              <li><Link href="/login" className="hover:text-white transition-colors">AI Assistant</Link></li>
              <li><Link href="/login" className="hover:text-white transition-colors">Matters</Link></li>
              <li><Link href="/login" className="hover:text-white transition-colors">Mock Trial</Link></li>
              <li><Link href="/login" className="hover:text-white transition-colors">Legal Research</Link></li>
            </ul>
          </div>
          <div>
            <h4 className="text-white font-bold mb-6">Company</h4>
            <ul className="space-y-4 text-sm">
              <li><Link href="/login" className="hover:text-white transition-colors">Admin Interface</Link></li>
              <li><Link href="/privacy-policy" className="hover:text-white transition-colors">Privacy Policy</Link></li>
              <li><Link href="/terms" className="hover:text-white transition-colors">Terms of Service</Link></li>
            </ul>
          </div>
        </div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-16 pt-8 border-t border-slate-900 text-sm flex justify-between">
          <p>© 2026 Pro Se Litigant AI. All rights reserved.</p>
          <div className="flex gap-6">
            <a href="#" className="hover:text-white"><BaseIcon path={icon.mdiTwitter} size={20} /></a>
            <a href="#" className="hover:text-white"><BaseIcon path={icon.mdiLinkedin} size={20} /></a>
          </div>
        </div>
      </footer>
    </div>
  );
}

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