"use client";

import { useState } from 'react';
import Link from 'next/link';
import { Bot, TreePine, Sparkles, Users, MessageSquare, TrendingUp } from 'lucide-react';

export default function AIShowcasePage() {
  const [demoStep, setDemoStep] = useState(0);

  const demoSteps = [
    {
      title: "🗣️ Natural Conversation",
      description: "Staff simply describe their goals in plain English",
      example: `👤 Staff: "We have too many no-shows. Patients book and then don't come."`,
      highlight: "Zero technical knowledge required"
    },
    {
      title: "🧠 AI Understanding", 
      description: "AI analyzes requirements and clinic personality",
      example: `🤖 AI: "I'll create a Smart No-Show Prevention System with caring check-ins and predictive intervention..."`,
      highlight: "Intelligent context recognition"
    },
    {
      title: "🌳 Automatic Tree Creation",
      description: "Complex decision trees built automatically", 
      example: `✨ Generated: 12 intelligent nodes with behavioral routing and personalization`,
      highlight: "Sophisticated logic, simple setup"
    },
    {
      title: "🚀 Instant Deployment",
      description: "System goes live immediately with smart messaging",
      example: `📱 "Hi Sarah! 💙 We noticed you might be having second thoughts about your appointment..."`,
      highlight: "Immediate patient engagement"
    }
  ];

  const features = [
    {
      icon: Bot,
      title: "Conversational AI Builder",
      description: "Create complex patient journeys just by chatting with AI",
      color: "from-blue-500 to-cyan-500",
      benefit: "5-minute setup vs 5 hours"
    },
    {
      icon: TreePine,
      title: "Smart Decision Trees", 
      description: "Intelligent routing based on patient behavior and risk",
      color: "from-emerald-500 to-green-500",
      benefit: "60% reduction in no-shows"
    },
    {
      icon: Sparkles,
      title: "AI Personality Engine",
      description: "Messages adapt to clinic style and patient psychology", 
      color: "from-purple-500 to-pink-500",
      benefit: "3x increase in engagement"
    },
    {
      icon: Users,
      title: "Behavioral Scoring",
      description: "Predictive analytics identify at-risk patients",
      color: "from-amber-500 to-orange-500", 
      benefit: "Proactive intervention"
    },
    {
      icon: MessageSquare,
      title: "Interactive Messaging",
      description: "Rich WhatsApp buttons and context-aware responses",
      color: "from-indigo-500 to-blue-500",
      benefit: "Human-like conversations"
    },
    {
      icon: TrendingUp,
      title: "Continuous Learning",
      description: "System learns and optimizes from every interaction",
      color: "from-rose-500 to-red-500",
      benefit: "Self-improving performance"
    }
  ];

  const successStories = [
    {
      clinic: "Luxury Dermatology",
      challenge: "High no-show rate (40%)",
      solution: "AI No-Show Prevention System",
      result: "Reduced to 8% in 30 days",
      quote: "The AI understood exactly what we needed!"
    },
    {
      clinic: "Family Practice", 
      challenge: "Poor patient satisfaction",
      solution: "Patient Delight Experience", 
      result: "4.9/5 star reviews",
      quote: "Patients love our communication now!"
    },
    {
      clinic: "Cosmetic Surgery",
      challenge: "Low referral rates",
      solution: "Referral Multiplication Engine",
      result: "400% increase in referrals", 
      quote: "Referrals happen automatically!"
    }
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50">
      <div className="container mx-auto px-4 py-8">
        
        {/* Hero Section */}
        <div className="text-center mb-16">
          <div className="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-blue-100 to-purple-100 rounded-full text-sm font-semibold text-blue-700 mb-6">
            <Bot size={16} />
            AI-Powered Patient Engagement
            <Sparkles size={16} />
          </div>
          
          <h1 className="text-4xl md:text-6xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-6">
            Build Patient Journeys<br/>
            Just by Talking
          </h1>
          
          <p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
            Revolutionary AI Tree Builder that lets clinic staff create sophisticated reminder systems 
            through simple conversation - no technical knowledge required.
          </p>
          
          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
            <Link href="/admin/ai-tree-builder" 
              className="px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-lg hover:shadow-lg transition-all hover:scale-105">
              🤖 Try AI Tree Builder
            </Link>
            <Link href="/admin/reminder-trees"
              className="px-8 py-4 border border-gray-300 text-gray-700 font-semibold rounded-lg hover:bg-gray-50 transition-all">
              🌳 View Reminder Trees
            </Link>
          </div>
        </div>

        {/* Interactive Demo */}
        <div className="bg-white rounded-2xl shadow-xl p-8 mb-16">
          <h2 className="text-2xl font-bold text-center mb-8">See How It Works</h2>
          
          <div className="flex justify-center mb-8">
            <div className="flex gap-2">
              {demoSteps.map((_, index) => (
                <button
                  key={index}
                  onClick={() => setDemoStep(index)}
                  className={`w-3 h-3 rounded-full transition-all ${
                    index === demoStep ? 'bg-blue-600' : 'bg-gray-300 hover:bg-gray-400'
                  }`}
                />
              ))}
            </div>
          </div>

          <div className="grid md:grid-cols-2 gap-8 items-center">
            <div>
              <h3 className="text-xl font-semibold mb-4">{demoSteps[demoStep].title}</h3>
              <p className="text-gray-600 mb-4">{demoSteps[demoStep].description}</p>
              <div className="bg-gray-50 rounded-lg p-4 mb-4">
                <code className="text-sm">{demoSteps[demoStep].example}</code>
              </div>
              <div className="inline-flex items-center gap-2 px-3 py-1 bg-emerald-100 text-emerald-700 rounded-full text-sm font-semibold">
                <Sparkles size={14} />
                {demoSteps[demoStep].highlight}
              </div>
            </div>
            
            <div className="relative">
              <div className="w-full h-64 bg-gradient-to-br from-blue-100 to-purple-100 rounded-xl flex items-center justify-center">
                <div className="text-6xl animate-bounce">{['🗣️', '🧠', '🌳', '🚀'][demoStep]}</div>
              </div>
            </div>
          </div>

          <div className="flex justify-center mt-8">
            <button
              onClick={() => setDemoStep((demoStep + 1) % demoSteps.length)}
              className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
            >
              Next Step →
            </button>
          </div>
        </div>

        {/* Features Grid */}
        <div className="mb-16">
          <h2 className="text-3xl font-bold text-center mb-12">Revolutionary Features</h2>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <div key={index} className="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all hover:scale-105">
                <div className={`w-12 h-12 rounded-lg bg-gradient-to-r ${feature.color} flex items-center justify-center mb-4`}>
                  <feature.icon size={24} className="text-white" />
                </div>
                
                <h3 className="text-lg font-semibold mb-2">{feature.title}</h3>
                <p className="text-gray-600 mb-4">{feature.description}</p>
                
                <div className="inline-flex items-center gap-1 px-3 py-1 bg-emerald-50 text-emerald-700 rounded-full text-sm font-semibold">
                  📈 {feature.benefit}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Success Stories */}
        <div className="mb-16">
          <h2 className="text-3xl font-bold text-center mb-12">Real Results</h2>
          
          <div className="grid md:grid-cols-3 gap-8">
            {successStories.map((story, index) => (
              <div key={index} className="bg-gradient-to-br from-white to-gray-50 rounded-xl shadow-lg p-6">
                <div className="text-center mb-4">
                  <h3 className="font-semibold text-lg">{story.clinic}</h3>
                  <p className="text-red-500 text-sm">❌ {story.challenge}</p>
                </div>
                
                <div className="bg-blue-50 rounded-lg p-4 mb-4 text-center">
                  <p className="text-blue-700 font-semibold text-sm">{story.solution}</p>
                </div>
                
                <div className="text-center mb-4">
                  <p className="text-emerald-600 font-bold text-lg">✅ {story.result}</p>
                </div>
                
                <blockquote className="italic text-gray-600 text-sm text-center">
                  "{story.quote}"
                </blockquote>
              </div>
            ))}
          </div>
        </div>

        {/* Call to Action */}
        <div className="bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl shadow-2xl p-12 text-center text-white">
          <h2 className="text-3xl font-bold mb-4">Transform Your Patient Communication Today</h2>
          <p className="text-xl opacity-90 mb-8">
            Start building intelligent patient journeys in the next 5 minutes
          </p>
          
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/admin/ai-tree-builder"
              className="px-8 py-4 bg-white text-blue-600 font-semibold rounded-lg hover:shadow-lg transition-all hover:scale-105">
              🤖 Start Building with AI
            </Link>
            <Link href="/dashboard" 
              className="px-8 py-4 border border-white text-white font-semibold rounded-lg hover:bg-white hover:text-blue-600 transition-all">
              📊 Back to Dashboard
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}