"use client"

import { CodeBlock } from "@/components/cli-docs/code-block"
import { Badge } from "@/components/ui/badge"
import { Star, Brain, Code, Zap } from "lucide-react"

interface AIIntegrationProps {
  data: {
    title: string
    description: string
    tools: Array<{
      name: string
      file: string
      features: string[]
    }>
    beforeAfter: {
      before: {
        problems: string[]
        code: string
      }
      after: {
        improvements: string[]
        code: string
      }
    }
  }
}

export function AIIntegration({ data }: AIIntegrationProps) {
  return (
    <div className="space-y-8">
      <div>
        <div className="flex items-center space-x-3 mb-4">
          <Star className="h-8 w-8 text-yellow-500" />
          <h1 className="text-4xl font-bold text-gray-900">{data.title}</h1>
        </div>
        <p className="text-xl text-gray-600">{data.description}</p>
      </div>

      {/* Flagship Feature Banner */}
      <section className="bg-gradient-to-r from-yellow-50 to-orange-50 rounded-lg p-6 border border-yellow-200">
        <div className="flex items-center space-x-4 mb-4">
          <div className="w-12 h-12 bg-yellow-500 rounded-lg flex items-center justify-center">
            <Brain className="h-6 w-6 text-white" />
          </div>
          <div>
            <h2 className="text-2xl font-semibold text-gray-900">Flagship Feature</h2>
            <p className="text-gray-600">Revolutionary AI-powered development experience</p>
          </div>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="flex items-center space-x-2">
            <Code className="h-5 w-5 text-yellow-600" />
            <span className="text-gray-700">Smart Code Generation</span>
          </div>
          <div className="flex items-center space-x-2">
            <Zap className="h-5 w-5 text-yellow-600" />
            <span className="text-gray-700">Architecture Understanding</span>
          </div>
          <div className="flex items-center space-x-2">
            <Brain className="h-5 w-5 text-yellow-600" />
            <span className="text-gray-700">Pattern Recognition</span>
          </div>
        </div>
      </section>

      {/* Supported Tools */}
      <section>
        <h2 className="text-2xl font-semibold text-gray-900 mb-6">Supported AI Tools</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {data.tools.map((tool, index) => (
            <div key={index} className="bg-white rounded-lg border border-gray-200 p-6 shadow-sm">
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <h3 className="text-xl font-semibold text-gray-900">{tool.name}</h3>
                  <Badge variant="outline">{tool.file}</Badge>
                </div>
                <ul className="space-y-2">
                  {tool.features.map((feature, featureIndex) => (
                    <li key={featureIndex} className="flex items-start space-x-2">
                      <span className="text-green-500 mt-1">✓</span>
                      <span className="text-gray-700">{feature}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Before/After Comparison */}
      <section>
        <h2 className="text-2xl font-semibold text-gray-900 mb-6">Before vs After AI Integration</h2>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Before */}
          <div className="space-y-4">
            <div className="flex items-center space-x-2">
              <span className="text-red-500 text-xl">❌</span>
              <h3 className="text-lg font-semibold text-gray-900">Before (Common Problems)</h3>
            </div>
            <div className="bg-red-50 rounded-lg p-4 border border-red-200">
              <ul className="space-y-2 mb-4">
                {data.beforeAfter.before.problems.map((problem, index) => (
                  <li key={index} className="text-red-700">
                    {problem}
                  </li>
                ))}
              </ul>
              <CodeBlock code={data.beforeAfter.before.code} language="typescript" />
            </div>
          </div>

          {/* After */}
          <div className="space-y-4">
            <div className="flex items-center space-x-2">
              <span className="text-green-500 text-xl">✅</span>
              <h3 className="text-lg font-semibold text-gray-900">After (With AI Guide)</h3>
            </div>
            <div className="bg-green-50 rounded-lg p-4 border border-green-200">
              <ul className="space-y-2 mb-4">
                {data.beforeAfter.after.improvements.map((improvement, index) => (
                  <li key={index} className="text-green-700">
                    {improvement}
                  </li>
                ))}
              </ul>
              <CodeBlock code={data.beforeAfter.after.code} language="typescript" />
            </div>
          </div>
        </div>
      </section>

      {/* Getting Started */}
      <section className="bg-blue-50 rounded-lg p-6 border border-blue-200">
        <h2 className="text-2xl font-semibold text-gray-900 mb-4">Get Started with AI Integration</h2>
        <div className="space-y-4">
          <div className="flex items-start space-x-3">
            <Badge variant="default" className="mt-0.5">
              1
            </Badge>
            <div>
              <p className="font-medium text-gray-900">Generate AI documentation</p>
              <CodeBlock code="npx ruch guide-ai" language="bash" />
            </div>
          </div>
          <div className="flex items-start space-x-3">
            <Badge variant="default" className="mt-0.5">
              2
            </Badge>
            <div>
              <p className="font-medium text-gray-900">Choose specific tools (optional)</p>
              <CodeBlock code="npx ruch guide-ai --tools cursor,copilot" language="bash" />
            </div>
          </div>
          <div className="flex items-start space-x-3">
            <Badge variant="default" className="mt-0.5">
              3
            </Badge>
            <div>
              <p className="font-medium text-gray-900">Start coding with enhanced AI assistance</p>
              <p className="text-gray-600 text-sm">Your AI tools now understand your hexagonal architecture!</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}