"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Code, Database, Server, Shield, Zap, Layers, GitBranch } from "lucide-react"

export default function ArchitectureGenerator() {
  const [selectedArchitecture, setSelectedArchitecture] = useState<string>("")
  const [projectName, setProjectName] = useState("")

  const architecturePatterns = [
    {
      id: "monolithic",
      name: "Monolithic Architecture",
      description: "Single application with all components tightly coupled",
      icon: Layers,
      complexity: "Low",
      bestFor: "Small to medium projects",
      pros: ["Simple to develop", "Easy to deploy", "Lower initial cost"],
      cons: ["Harder to scale", "Technology lock-in", "Difficult to maintain"],
    },
    {
      id: "microservices",
      name: "Microservices Architecture",
      description: "Loosely coupled services that can be developed and deployed independently",
      icon: GitBranch,
      complexity: "High",
      bestFor: "Large, complex applications",
      pros: ["Independent scaling", "Technology diversity", "Easier maintenance"],
      cons: ["Distributed complexity", "Network overhead", "Data consistency challenges"],
    },
    {
      id: "serverless",
      name: "Serverless Architecture",
      description: "Event-driven, auto-scaling functions without server management",
      icon: Zap,
      complexity: "Medium",
      bestFor: "Event-driven applications",
      pros: ["Auto-scaling", "Pay-per-use", "No server management"],
      cons: ["Cold start latency", "Vendor lock-in", "Limited execution time"],
    },
    {
      id: "layered",
      name: "Layered Architecture",
      description: "Separation of concerns with distinct layers for different responsibilities",
      icon: Database,
      complexity: "Medium",
      bestFor: "Business applications",
      pros: ["Clear separation", "Easy to test", "Maintainable"],
      cons: ["Performance overhead", "Tight coupling between layers"],
    },
  ]

  const generateArchitecture = () => {
    if (!selectedArchitecture || !projectName) return
    
    // Here you would typically call an API to generate the architecture
    console.log(`Generating ${selectedArchitecture} architecture for ${projectName}`)
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Header */}
        <div className="text-center space-y-4 mb-12">
          <h1 className="text-4xl font-bold text-gray-900">Architecture Generator</h1>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            Generate optimal architecture patterns for your project based on requirements and scale
          </p>
        </div>

        {/* Project Name Input */}
        <div className="max-w-md mx-auto mb-8">
          <label htmlFor="projectName" className="block text-sm font-medium text-gray-700 mb-2">
            Project Name
          </label>
          <Input
            id="projectName"
            placeholder="Enter your project name"
            value={projectName}
            onChange={(e) => setProjectName(e.target.value)}
            className="text-center"
          />
        </div>

        {/* Architecture Patterns */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
          {architecturePatterns.map((pattern) => {
            const Icon = pattern.icon
            return (
              <Card
                key={pattern.id}
                className={`cursor-pointer transition-all duration-300 hover:shadow-lg ${
                  selectedArchitecture === pattern.id
                    ? "ring-2 ring-blue-500 bg-blue-50"
                    : "hover:border-blue-300"
                }`}
                onClick={() => setSelectedArchitecture(pattern.id)}
              >
                <CardHeader className="text-center pb-4">
                  <div className="mx-auto w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-3">
                    <Icon className="h-6 w-6 text-blue-600" />
                  </div>
                  <CardTitle className="text-lg">{pattern.name}</CardTitle>
                  <Badge variant="outline" className="w-fit mx-auto">
                    {pattern.complexity} Complexity
                  </Badge>
                </CardHeader>
                <CardContent className="space-y-3">
                  <p className="text-sm text-gray-600 text-center">{pattern.description}</p>
                  <div className="text-center">
                    <p className="text-xs font-medium text-gray-700">Best for:</p>
                    <p className="text-xs text-gray-600">{pattern.bestFor}</p>
                  </div>
                </CardContent>
              </Card>
            )
          })}
        </div>

        {/* Generate Button */}
        <div className="text-center">
          <Button
            onClick={generateArchitecture}
            disabled={!selectedArchitecture || !projectName}
            className="bg-blue-600 hover:bg-blue-700 px-8 py-3 text-lg"
          >
            <Code className="mr-2 h-5 w-5" />
            Generate Architecture
          </Button>
        </div>

        {/* Selected Architecture Details */}
        {selectedArchitecture && (
          <div className="mt-12 max-w-4xl mx-auto">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Layers className="mr-2 h-5 w-5" />
                  Architecture Details
                </CardTitle>
              </CardHeader>
              <CardContent>
                {(() => {
                  const pattern = architecturePatterns.find(p => p.id === selectedArchitecture)
                  if (!pattern) return null
                  
                  return (
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div>
                        <h4 className="font-semibold text-green-700 mb-3 flex items-center">
                          <Shield className="mr-2 h-4 w-4" />
                          Advantages
                        </h4>
                        <ul className="space-y-2">
                          {pattern.pros.map((pro, index) => (
                            <li key={index} className="flex items-center text-sm text-gray-700">
                              <div className="w-2 h-2 bg-green-500 rounded-full mr-3"></div>
                              {pro}
                            </li>
                          ))}
                        </ul>
                      </div>
                      <div>
                        <h4 className="font-semibold text-red-700 mb-3 flex items-center">
                          <Server className="mr-2 h-4 w-4" />
                          Considerations
                        </h4>
                        <ul className="space-y-2">
                          {pattern.cons.map((con, index) => (
                            <li key={index} className="flex items-center text-sm text-gray-700">
                              <div className="w-2 h-2 bg-red-500 rounded-full mr-3"></div>
                              {con}
                            </li>
                          ))}
                        </ul>
                      </div>
                    </div>
                  )
                })()}
              </CardContent>
            </Card>
          </div>
        )}
      </div>
    </div>
  )
}
