"use client"

import { useState } from "react"
import { CodeBlock } from "@/components/cli-docs/code-block"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { ChevronDown, ChevronRight, Star } from "lucide-react"

interface CommandsProps {
  data: {
    [category: string]: {
      [command: string]: {
        syntax: string
        description: string
        flagship?: boolean
        generates?: string[]
        creates?: string | string[]
        flags?: string[]
        alias?: string
        example?: string
        examples?: string[]
        tools?: string[]
        formats?: string[]
      }
    }
  }
}

export function Commands({ data }: CommandsProps) {
  const [expandedCategories, setExpandedCategories] = useState<string[]>(["domain"])

  const toggleCategory = (category: string) => {
    setExpandedCategories((prev) =>
      prev.includes(category) ? prev.filter((c) => c !== category) : [...prev, category],
    )
  }

  const getCategoryIcon = (category: string) => {
    switch (category) {
      case "domain":
        return "🏗️"
      case "context":
        return "🔗"
      case "msw":
        return "🧪"
      case "ai":
        return "🤖"
      case "utils":
        return "🛠️"
      default:
        return "📦"
    }
  }

  const getCategoryDescription = (category: string) => {
    switch (category) {
      case "domain":
        return "Create and manage business domains"
      case "context":
        return "Service context and dependency injection"
      case "msw":
        return "Mock Service Worker integration"
      case "ai":
        return "AI-powered development tools"
      case "utils":
        return "Utility and visualization commands"
      default:
        return "Additional commands"
    }
  }

  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-4xl font-bold text-gray-900 mb-4">Commands Reference</h1>
        <p className="text-xl text-gray-600">Complete guide to all Ruch CLI commands</p>
      </div>

      {Object.entries(data).map(([category, commands]) => (
        <section key={category} className="border border-gray-200 rounded-lg overflow-hidden shadow-sm">
          <Button
            variant="ghost"
            onClick={() => toggleCategory(category)}
            className="w-full justify-between p-6 h-auto hover:bg-gray-50"
          >
            <div className="flex items-center space-x-4">
              <span className="text-2xl">{getCategoryIcon(category)}</span>
              <div className="text-left">
                <h2 className="text-2xl font-semibold text-gray-900 capitalize">{category}</h2>
                <p className="text-gray-600">{getCategoryDescription(category)}</p>
              </div>
            </div>
            {expandedCategories.includes(category) ? (
              <ChevronDown className="h-5 w-5" />
            ) : (
              <ChevronRight className="h-5 w-5" />
            )}
          </Button>

          {expandedCategories.includes(category) && (
            <div className="border-t border-gray-200 bg-white">
              {Object.entries(commands).map(([commandName, command]) => (
                <div key={commandName} className="p-6 border-b border-gray-100 last:border-b-0">
                  <div className="space-y-4">
                    {/* Command Header */}
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <div className="flex items-center space-x-3 mb-2">
                          <h3 className="text-xl font-semibold text-gray-900">{commandName}</h3>
                          {command.flagship && (
                            <Badge
                              variant="default"
                              className="bg-yellow-100 text-yellow-800 flex items-center space-x-1"
                            >
                              <Star className="h-3 w-3" />
                              <span>Flagship</span>
                            </Badge>
                          )}
                        </div>
                        <p className="text-gray-600">{command.description}</p>
                      </div>
                    </div>

                    {/* Syntax */}
                    <div>
                      <h4 className="font-medium text-gray-900 mb-2">Syntax</h4>
                      <CodeBlock code={command.syntax} language="bash" />
                    </div>

                    {/* Alias */}
                    {command.alias && (
                      <div>
                        <h4 className="font-medium text-gray-900 mb-2">Alias</h4>
                        <CodeBlock code={command.alias} language="bash" />
                      </div>
                    )}

                    {/* Examples */}
                    {(command.example || command.examples) && (
                      <div>
                        <h4 className="font-medium text-gray-900 mb-2">Examples</h4>
                        {command.example && <CodeBlock code={command.example} language="bash" />}
                        {command.examples && (
                          <div className="space-y-2">
                            {command.examples.map((example, index) => (
                              <CodeBlock key={index} code={example} language="bash" />
                            ))}
                          </div>
                        )}
                      </div>
                    )}

                    {/* Generates/Creates */}
                    {(command.generates || command.creates) && (
                      <div>
                        <h4 className="font-medium text-gray-900 mb-2">
                          {command.generates ? "Generates" : "Creates"}
                        </h4>
                        <div className="bg-gray-50 rounded-lg p-4">
                          {command.generates && (
                            <ul className="space-y-1">
                              {command.generates.map((item, index) => (
                                <li key={index} className="text-sm text-gray-700 font-mono">
                                  📁 {item}
                                </li>
                              ))}
                            </ul>
                          )}
                          {command.creates && (
                            <div>
                              {Array.isArray(command.creates) ? (
                                <ul className="space-y-1">
                                  {command.creates.map((item, index) => (
                                    <li key={index} className="text-sm text-gray-700 font-mono">
                                      📄 {item}
                                    </li>
                                  ))}
                                </ul>
                              ) : (
                                <p className="text-sm text-gray-700 font-mono">📄 {command.creates}</p>
                              )}
                            </div>
                          )}
                        </div>
                      </div>
                    )}

                    {/* Flags */}
                    {command.flags && (
                      <div>
                        <h4 className="font-medium text-gray-900 mb-2">Flags</h4>
                        <div className="space-y-2">
                          {command.flags.map((flag, index) => (
                            <Badge key={index} variant="outline" className="mr-2">
                              {flag}
                            </Badge>
                          ))}
                        </div>
                      </div>
                    )}

                    {/* Tools/Formats */}
                    {(command.tools || command.formats) && (
                      <div>
                        <h4 className="font-medium text-gray-900 mb-2">
                          {command.tools ? "Supported Tools" : "Available Formats"}
                        </h4>
                        <div className="flex flex-wrap gap-2">
                          {(command.tools || command.formats)?.map((item, index) => (
                            <Badge key={index} variant="secondary">
                              {item}
                            </Badge>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          )}
        </section>
      ))}
    </div>
  )
}