"use client"

import { useState } from "react"
import { SectionHeading } from "@/components/ui/section-heading"
import { ComponentContainer } from "@/components/ui/component-container"
import { TopNavigation } from "@/components/ui/top-navigation"
import { Card, CardContent } from "@/components/ui/card"

export function TopNavigationSection() {
  // Interactive component state
  const [variant, setVariant] = useState<"default" | "minimal" | "with-search" | "with-breadcrumbs">("default")
  const [showNotifications, setShowNotifications] = useState(true)
  const [showUserMenu, setShowUserMenu] = useState(true)
  const [showSearch, setShowSearch] = useState(false)
  const [showMobileMenu, setShowMobileMenu] = useState(true)
  const [userName, setUserName] = useState("John Doe")
  const [notificationCount, setNotificationCount] = useState(3)

  const properties = [
    {
      name: "variant",
      type: "select" as const,
      options: ["default", "minimal", "with-search", "with-breadcrumbs"],
      defaultValue: "default",
      label: "Variant",
    },
    {
      name: "showNotifications",
      type: "boolean" as const,
      defaultValue: true,
      label: "Show Notifications",
    },
    {
      name: "showUserMenu",
      type: "boolean" as const,
      defaultValue: true,
      label: "Show User Menu",
    },
    {
      name: "showSearch",
      type: "boolean" as const,
      defaultValue: false,
      label: "Show Search",
    },
    {
      name: "showMobileMenu",
      type: "boolean" as const,
      defaultValue: true,
      label: "Show Mobile Menu",
    },
    {
      name: "userName",
      type: "text" as const,
      defaultValue: "John Doe",
      label: "User Name",
    },
    {
      name: "notificationCount",
      type: "text" as const,
      defaultValue: "3",
      label: "Notification Count",
    },
  ]

  const renderComponent = (props: Record<string, any>) => {
    return (
      <div className="border rounded-lg overflow-hidden">
        <TopNavigation
          variant={props.variant || "default"}
          showNotifications={props.showNotifications !== false}
          showUserMenu={props.showUserMenu !== false}
          showSearch={props.showSearch === true || props.variant === "with-search"}
          showMobileMenu={props.showMobileMenu !== false}
          userName={props.userName || "John Doe"}
          notificationCount={Number.parseInt(props.notificationCount) || 3}
        />
        <div className="p-8 bg-muted/20 text-center text-muted-foreground">
          <p>Page content would go here</p>
        </div>
      </div>
    )
  }

  return (
    <div className="space-y-8">
      <SectionHeading
        title="Top Navigation"
        description="Navigation bars for application headers with logo, menu items, search, and user controls."
      />

      {/* Interactive Example */}
      <ComponentContainer title="Interactive Example" properties={properties} renderComponent={renderComponent} />

      {/* Variants */}
      <div className="space-y-6">
        <h3 className="text-lg font-semibold">Variants</h3>

        <div className="space-y-6">
          {/* Default */}
          <ComponentContainer
            title="Default"
            description="Standard navigation with logo, menu items, and user controls"
          >
            <div className="border rounded-lg overflow-hidden">
              <TopNavigation variant="default" />
              <div className="p-4 bg-muted/20 text-center text-sm text-muted-foreground">
                Standard navigation with logo, menu items, and user controls
              </div>
            </div>
          </ComponentContainer>

          {/* Minimal */}
          <ComponentContainer title="Minimal" description="Clean, reduced padding with essential elements only">
            <div className="border rounded-lg overflow-hidden">
              <TopNavigation variant="minimal" />
              <div className="p-4 bg-muted/20 text-center text-sm text-muted-foreground">
                Clean, reduced padding with essential elements only
              </div>
            </div>
          </ComponentContainer>

          {/* With Search */}
          <ComponentContainer title="With Search" description="Prominent search bar in the center of the navigation">
            <div className="border rounded-lg overflow-hidden">
              <TopNavigation variant="with-search" />
              <div className="p-4 bg-muted/20 text-center text-sm text-muted-foreground">
                Prominent search bar in the center of the navigation
              </div>
            </div>
          </ComponentContainer>

          {/* With Breadcrumbs */}
          <ComponentContainer
            title="With Breadcrumbs"
            description="Shows current page hierarchy with breadcrumb navigation"
          >
            <div className="border rounded-lg overflow-hidden">
              <TopNavigation variant="with-breadcrumbs" />
              <div className="p-4 bg-muted/20 text-center text-sm text-muted-foreground">
                Shows current page hierarchy with breadcrumb navigation
              </div>
            </div>
          </ComponentContainer>
        </div>
      </div>

      {/* Usage Examples */}
      <div className="space-y-6">
        <h3 className="text-lg font-semibold">Usage Examples</h3>

        <div className="grid gap-6 md:grid-cols-2">
          <Card>
            <CardContent className="p-6">
              <h4 className="font-medium mb-2">Dashboard Application</h4>
              <p className="text-sm text-muted-foreground mb-4">
                Perfect for admin panels and internal tools with full navigation and user controls.
              </p>
              <div className="border rounded overflow-hidden">
                <TopNavigation variant="default" />
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-6">
              <h4 className="font-medium mb-2">Content Management</h4>
              <p className="text-sm text-muted-foreground mb-4">
                Ideal for CMS and content-heavy applications with search functionality.
              </p>
              <div className="border rounded overflow-hidden">
                <TopNavigation variant="with-search" />
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-6">
              <h4 className="font-medium mb-2">E-commerce Platform</h4>
              <p className="text-sm text-muted-foreground mb-4">
                Great for online stores with breadcrumb navigation for product categories.
              </p>
              <div className="border rounded overflow-hidden">
                <TopNavigation variant="with-breadcrumbs" />
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-6">
              <h4 className="font-medium mb-2">Minimal App</h4>
              <p className="text-sm text-muted-foreground mb-4">
                Clean design for focused applications with minimal distractions.
              </p>
              <div className="border rounded overflow-hidden">
                <TopNavigation variant="minimal" />
              </div>
            </CardContent>
          </Card>
        </div>
      </div>

      {/* Best Practices */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold">Best Practices</h3>
        <div className="space-y-3 text-sm">
          <div className="flex items-start space-x-2">
            <div className="w-1.5 h-1.5 rounded-full bg-primary mt-2 flex-shrink-0" />
            <p>
              <strong>Keep it simple:</strong> Include only essential navigation items to avoid clutter
            </p>
          </div>
          <div className="flex items-start space-x-2">
            <div className="w-1.5 h-1.5 rounded-full bg-primary mt-2 flex-shrink-0" />
            <p>
              <strong>Mobile-first:</strong> Ensure navigation works well on mobile devices with collapsible menus
            </p>
          </div>
          <div className="flex items-start space-x-2">
            <div className="w-1.5 h-1.5 rounded-full bg-primary mt-2 flex-shrink-0" />
            <p>
              <strong>Clear hierarchy:</strong> Use breadcrumbs for deep navigation structures
            </p>
          </div>
          <div className="flex items-start space-x-2">
            <div className="w-1.5 h-1.5 rounded-full bg-primary mt-2 flex-shrink-0" />
            <p>
              <strong>Consistent branding:</strong> Include your logo and maintain brand consistency
            </p>
          </div>
          <div className="flex items-start space-x-2">
            <div className="w-1.5 h-1.5 rounded-full bg-primary mt-2 flex-shrink-0" />
            <p>
              <strong>User feedback:</strong> Show notification badges and active states clearly
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}