"use client"

import React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Progress } from "@/components/ui/progress"
import { Badge } from "@/components/ui/badge"
import { Users, Server, DollarSign, Shield } from "lucide-react"

interface BusinessContext {
  userScale: {
    expectedUsers: string
    growthRate: string
    peakTraffic: string
    globalReach: boolean
  }
  technical: {
    performance: string
    availability: string
    security: string[]
    integrations: string[]
  }
  business: {
    model: string
    revenue: string
    budget: string
    timeline: string
  }
  operational: {
    team: string
    maintenance: string
    monitoring: string[]
    compliance: string[]
  }
}

export default function BusinessContextGenerator() {
  const [currentSection, setCurrentSection] = useState(0)
  const [context, setContext] = useState<BusinessContext>({
    userScale: {
      expectedUsers: "",
      growthRate: "",
      peakTraffic: "",
      globalReach: false,
    },
    technical: {
      performance: "",
      availability: "",
      security: [],
      integrations: [],
    },
    business: {
      model: "",
      revenue: "",
      budget: "",
      timeline: "",
    },
    operational: {
      team: "",
      maintenance: "",
      monitoring: [],
      compliance: [],
    },
  })

  const sections = [
    { title: "User Scale & Growth", icon: Users, color: "bg-blue-500" },
    { title: "Technical Requirements", icon: Server, color: "bg-green-500" },
    { title: "Business Model", icon: DollarSign, color: "bg-purple-500" },
    { title: "Operational Context", icon: Shield, color: "bg-orange-500" },
  ]

  const progress = ((currentSection + 1) / sections.length) * 100

  const updateContext = (section: keyof BusinessContext, field: string, value: any) => {
    setContext((prev) => ({
      ...prev,
      [section]: {
        ...prev[section],
        [field]: value,
      },
    }))
  }

  const toggleArrayValue = (section: keyof BusinessContext, field: string, value: string) => {
    setContext((prev) => {
      const currentArray = (prev[section] as any)[field] || []
      const newArray = currentArray.includes(value)
        ? currentArray.filter((item: string) => item !== value)
        : [...currentArray, value]

      return {
        ...prev,
        [section]: {
          ...prev[section],
          [field]: newArray,
        },
      }
    })
  }

  const renderUserScaleSection = () => (
    <div className="space-y-6">
      <div>
        <Label htmlFor="expectedUsers">Expected Number of Users</Label>
        <Select
          value={context.userScale.expectedUsers}
          onValueChange={(value) => updateContext("userScale", "expectedUsers", value)}
        >
          <SelectTrigger>
            <SelectValue placeholder="Select user range" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="1-100">1-100 users</SelectItem>
            <SelectItem value="100-1000">100-1,000 users</SelectItem>
            <SelectItem value="1000-10000">1,000-10,000 users</SelectItem>
            <SelectItem value="10000-100000">10,000-100,000 users</SelectItem>
            <SelectItem value="100000+">100,000+ users</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div>
        <Label htmlFor="growthRate">Expected Growth Rate</Label>
        <Select
          value={context.userScale.growthRate}
          onValueChange={(value) => updateContext("userScale", "growthRate", value)}
        >
          <SelectTrigger>
            <SelectValue placeholder="Select growth rate" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="slow">Slow (10-25% annually)</SelectItem>
            <SelectItem value="moderate">Moderate (25-50% annually)</SelectItem>
            <SelectItem value="fast">Fast (50-100% annually)</SelectItem>
            <SelectItem value="explosive">Explosive (100%+ annually)</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div>
        <Label htmlFor="peakTraffic">Peak Traffic Expectations</Label>
        <Select
          value={context.userScale.peakTraffic}
          onValueChange={(value) => updateContext("userScale", "peakTraffic", value)}
        >
          <SelectTrigger>
            <SelectValue placeholder="Select peak traffic" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="2x">2x normal traffic</SelectItem>
            <SelectItem value="5x">5x normal traffic</SelectItem>
            <SelectItem value="10x">10x normal traffic</SelectItem>
            <SelectItem value="50x">50x+ normal traffic</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="flex items-center space-x-2">
        <Checkbox
          id="globalReach"
          checked={context.userScale.globalReach}
          onCheckedChange={(checked) => updateContext("userScale", "globalReach", checked)}
        />
        <Label htmlFor="globalReach">Global user base (multiple regions)</Label>
      </div>
    </div>
  )

  const renderTechnicalSection = () => (
    <div className="space-y-6">
      <div>
        <Label>Performance Requirements</Label>
        <RadioGroup
          value={context.technical.performance}
          onValueChange={(value) => updateContext("technical", "performance", value)}
        >
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="basic" id="perf-basic" />
            <Label htmlFor="perf-basic">Basic (3-5s load time)</Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="good" id="perf-good" />
            <Label htmlFor="perf-good">Good (1-3s load time)</Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="excellent" id="perf-excellent" />
            <Label htmlFor="perf-excellent">Excellent (&lt;1s load time)</Label>
          </div>
        </RadioGroup>
      </div>

      <div>
        <Label>Availability Requirements</Label>
        <RadioGroup
          value={context.technical.availability}
          onValueChange={(value) => updateContext("technical", "availability", value)}
        >
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="99" id="avail-99" />
            <Label htmlFor="avail-99">99% uptime (8.76 hours downtime/year)</Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="99.9" id="avail-999" />
            <Label htmlFor="avail-999">99.9% uptime (8.76 hours downtime/year)</Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="99.99" id="avail-9999" />
            <Label htmlFor="avail-9999">99.99% uptime (52.56 minutes downtime/year)</Label>
          </div>
        </RadioGroup>
      </div>

      <div>
        <Label>Security Requirements</Label>
        <div className="grid grid-cols-2 gap-2 mt-2">
          {[
            "Authentication",
            "Authorization",
            "Data Encryption",
            "GDPR Compliance",
            "SOC2 Compliance",
            "PCI Compliance",
          ].map((security) => (
            <div key={security} className="flex items-center space-x-2">
              <Checkbox
                id={security}
                checked={context.technical.security.includes(security)}
                onCheckedChange={() => toggleArrayValue("technical", "security", security)}
              />
              <Label htmlFor={security}>{security}</Label>
            </div>
          ))}
        </div>
      </div>

      <div>
        <Label>Required Integrations</Label>
        <div className="grid grid-cols-2 gap-2 mt-2">
          {[
            "Payment Processing",
            "Email Service",
            "SMS Service",
            "Analytics",
            "CRM",
            "Social Media",
            "File Storage",
            "CDN",
          ].map((integration) => (
            <div key={integration} className="flex items-center space-x-2">
              <Checkbox
                id={integration}
                checked={context.technical.integrations.includes(integration)}
                onCheckedChange={() => toggleArrayValue("technical", "integrations", integration)}
              />
              <Label htmlFor={integration}>{integration}</Label>
            </div>
          ))}
        </div>
      </div>
    </div>
  )

  const renderBusinessSection = () => (
    <div className="space-y-6">
      <div>
        <Label>Business Model</Label>
        <RadioGroup value={context.business.model} onValueChange={(value) => updateContext("business", "model", value)}>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="saas" id="model-saas" />
            <Label htmlFor="model-saas">SaaS (Subscription)</Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="ecommerce" id="model-ecommerce" />
            <Label htmlFor="model-ecommerce">E-commerce</Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="marketplace" id="model-marketplace" />
            <Label htmlFor="model-marketplace">Marketplace</Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="freemium" id="model-freemium" />
            <Label htmlFor="model-freemium">Freemium</Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="enterprise" id="model-enterprise" />
            <Label htmlFor="model-enterprise">Enterprise B2B</Label>
          </div>
        </RadioGroup>
      </div>

      <div>
        <Label htmlFor="revenue">Expected Revenue (Year 1)</Label>
        <Select value={context.business.revenue} onValueChange={(value) => updateContext("business", "revenue", value)}>
          <SelectTrigger>
            <SelectValue placeholder="Select revenue range" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="0-10k">$0 - $10K</SelectItem>
            <SelectItem value="10k-100k">$10K - $100K</SelectItem>
            <SelectItem value="100k-1m">$100K - $1M</SelectItem>
            <SelectItem value="1m+">$1M+</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div>
        <Label htmlFor="budget">Development Budget</Label>
        <Select value={context.business.budget} onValueChange={(value) => updateContext("business", "budget", value)}>
          <SelectTrigger>
            <SelectValue placeholder="Select budget range" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="0-5k">$0 - $5K</SelectItem>
            <SelectItem value="5k-25k">$5K - $25K</SelectItem>
            <SelectItem value="25k-100k">$25K - $100K</SelectItem>
            <SelectItem value="100k+">$100K+</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div>
        <Label htmlFor="timeline">Launch Timeline</Label>
        <Select
          value={context.business.timeline}
          onValueChange={(value) => updateContext("business", "timeline", value)}
        >
          <SelectTrigger>
            <SelectValue placeholder="Select timeline" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="1-3months">1-3 months</SelectItem>
            <SelectItem value="3-6months">3-6 months</SelectItem>
            <SelectItem value="6-12months">6-12 months</SelectItem>
            <SelectItem value="12months+">12+ months</SelectItem>
          </SelectContent>
        </Select>
      </div>
    </div>
  )

  const renderOperationalSection = () => (
    <div className="space-y-6">
      <div>
        <Label>Team Size</Label>
        <RadioGroup
          value={context.operational.team}
          onValueChange={(value) => updateContext("operational", "team", value)}
        >
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="solo" id="team-solo" />
            <Label htmlFor="team-solo">Solo developer</Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="small" id="team-small" />
            <Label htmlFor="team-small">Small team (2-5 people)</Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="medium" id="team-medium" />
            <Label htmlFor="team-medium">Medium team (5-15 people)</Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="large" id="team-large" />
            <Label htmlFor="team-large">Large team (15+ people)</Label>
          </div>
        </RadioGroup>
      </div>

      <div>
        <Label>Maintenance Approach</Label>
        <RadioGroup
          value={context.operational.maintenance}
          onValueChange={(value) => updateContext("operational", "maintenance", value)}
        >
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="minimal" id="maint-minimal" />
            <Label htmlFor="maint-minimal">Minimal maintenance</Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="regular" id="maint-regular" />
            <Label htmlFor="maint-regular">Regular updates</Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="continuous" id="maint-continuous" />
            <Label htmlFor="maint-continuous">Continuous deployment</Label>
          </div>
        </RadioGroup>
      </div>

      <div>
        <Label>Monitoring Requirements</Label>
        <div className="grid grid-cols-2 gap-2 mt-2">
          {[
            "Error Tracking",
            "Performance Monitoring",
            "User Analytics",
            "Security Monitoring",
            "Uptime Monitoring",
            "Log Management",
          ].map((monitoring) => (
            <div key={monitoring} className="flex items-center space-x-2">
              <Checkbox
                id={monitoring}
                checked={context.operational.monitoring.includes(monitoring)}
                onCheckedChange={() => toggleArrayValue("operational", "monitoring", monitoring)}
              />
              <Label htmlFor={monitoring}>{monitoring}</Label>
            </div>
          ))}
        </div>
      </div>

      <div>
        <Label>Compliance Requirements</Label>
        <div className="grid grid-cols-2 gap-2 mt-2">
          {["GDPR", "CCPA", "HIPAA", "SOX", "PCI DSS", "ISO 27001"].map((compliance) => (
            <div key={compliance} className="flex items-center space-x-2">
              <Checkbox
                id={compliance}
                checked={context.operational.compliance.includes(compliance)}
                onCheckedChange={() => toggleArrayValue("operational", "compliance", compliance)}
              />
              <Label htmlFor={compliance}>{compliance}</Label>
            </div>
          ))}
        </div>
      </div>
    </div>
  )

  const renderSection = () => {
    switch (currentSection) {
      case 0:
        return renderUserScaleSection()
      case 1:
        return renderTechnicalSection()
      case 2:
        return renderBusinessSection()
      case 3:
        return renderOperationalSection()
      default:
        return null
    }
  }

  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <div className="max-w-4xl mx-auto">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Business Context Generator</h1>
          <p className="text-gray-600">
            Help us understand your business requirements to generate the perfect architecture
          </p>
        </div>

        <div className="mb-8">
          <div className="flex items-center justify-between mb-4">
            <span className="text-sm font-medium text-gray-700">Progress</span>
            <span className="text-sm font-medium text-gray-700">
              {currentSection + 1} of {sections.length}
            </span>
          </div>
          <Progress value={progress} className="h-2" />
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-8">
          {sections.map((section, index) => {
            const Icon = section.icon
            return (
              <Card
                key={index}
                className={`cursor-pointer transition-all ${
                  index === currentSection
                    ? "ring-2 ring-blue-500 shadow-lg"
                    : index < currentSection
                      ? "bg-green-50 border-green-200"
                      : "hover:shadow-md"
                }`}
                onClick={() => setCurrentSection(index)}
              >
                <CardContent className="p-4 text-center">
                  <div
                    className={`w-12 h-12 rounded-full ${section.color} flex items-center justify-center mx-auto mb-2`}
                  >
                    <Icon className="w-6 h-6 text-white" />
                  </div>
                  <h3 className="font-semibold text-sm">{section.title}</h3>
                  {index < currentSection && (
                    <Badge variant="secondary" className="mt-2">
                      Completed
                    </Badge>
                  )}
                  {index === currentSection && <Badge className="mt-2">Current</Badge>}
                </CardContent>
              </Card>
            )
          })}
        </div>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              {React.createElement(sections[currentSection].icon, { className: "w-5 h-5" })}
              {sections[currentSection].title}
            </CardTitle>
            <CardDescription>
              {currentSection === 0 && "Define your expected user base and growth patterns"}
              {currentSection === 1 && "Specify technical performance and security requirements"}
              {currentSection === 2 && "Outline your business model and financial expectations"}
              {currentSection === 3 && "Configure operational and compliance requirements"}
            </CardDescription>
          </CardHeader>
          <CardContent>{renderSection()}</CardContent>
        </Card>

        <div className="flex justify-between mt-8">
          <Button
            variant="outline"
            onClick={() => setCurrentSection(Math.max(0, currentSection - 1))}
            disabled={currentSection === 0}
          >
            Previous
          </Button>
          <Button
            onClick={() => {
              if (currentSection < sections.length - 1) {
                setCurrentSection(currentSection + 1)
              } else {
                // Generate architecture
                console.log("Business Context:", context)
              }
            }}
          >
            {currentSection === sections.length - 1 ? "Generate Architecture" : "Next"}
          </Button>
        </div>
      </div>
    </div>
  )
}
