"use client"

import Link from "next/link"
import { usePathname, useRouter } from "next/navigation"
import { Activity, ListTree, Clock, Layers } from "lucide-react"
import { cn } from "@/lib/utils"
import { useEffect, useState } from "react"

const navItems = [
  { href: "/observability/traces", label: "Traces", icon: ListTree },
  { href: "/observability/llm-calls", label: "LLM Calls", icon: Activity },
]

type ViewMode = "classic" | "timeline"

export function ObservabilityNav() {
  const pathname = usePathname()
  const router = useRouter()
  const [viewMode, setViewMode] = useState<ViewMode>("classic")

  // Sync view mode with the current pathname
  useEffect(() => {
    if (pathname === "/observability") {
      setViewMode("timeline")
      localStorage.setItem("observability-view-mode", "timeline")
    } else if (pathname.startsWith("/observability/traces") || pathname.startsWith("/observability/llm-calls")) {
      setViewMode("classic")
      localStorage.setItem("observability-view-mode", "classic")
    } else {
      const storedMode = localStorage.getItem("observability-view-mode") as ViewMode | null
      if (storedMode === "timeline" || storedMode === "classic") {
        setViewMode(storedMode)
      }
    }
  }, [pathname])

  // Handle view mode changes
  const handleViewModeChange = (mode: ViewMode) => {
    setViewMode(mode)
    localStorage.setItem("observability-view-mode", mode)

    // Navigate based on the selected mode
    if (mode === "timeline") {
      router.push("/observability")
    } else {
      router.push("/observability/traces")
    }
  }

  return (
    <nav className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-10">
      <div className="container mx-auto px-6 py-3">
        <div className="flex items-center justify-between">
          {/* Logo/Title */}
          <div className="flex items-center gap-2">
            <Activity className="h-6 w-6 text-blue-600 dark:text-blue-400" />
            <h1 className="text-xl font-bold text-gray-900 dark:text-white">
              Codeflash Observability
            </h1>
          </div>

          {/* Navigation Links and View Toggle */}
          <div className="flex items-center gap-4">
            {/* Show navigation links only in classic mode */}
            {viewMode === "classic" && (
              <div className="flex items-center gap-2">
                {navItems.map(item => {
                  const Icon = item.icon
                  const isActive = pathname === item.href || pathname.startsWith(item.href + "/")

                  return (
                    <Link
                      key={item.href}
                      href={item.href}
                      className={cn(
                        "flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors",
                        isActive
                          ? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300"
                          : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white",
                      )}
                    >
                      <Icon className="h-4 w-4" />
                      {item.label}
                    </Link>
                  )
                })}
              </div>
            )}

            {/* View Mode Toggle */}
            <div className="flex items-center bg-gray-100 dark:bg-gray-700 rounded-lg p-1">
              <button
                onClick={() => handleViewModeChange("classic")}
                className={cn(
                  "flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-all",
                  viewMode === "classic"
                    ? "bg-white dark:bg-gray-800 text-blue-700 dark:text-blue-300 shadow-sm"
                    : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
                )}
              >
                <Layers className="h-4 w-4" />
                Classic
              </button>
              <button
                onClick={() => handleViewModeChange("timeline")}
                className={cn(
                  "flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-all",
                  viewMode === "timeline"
                    ? "bg-white dark:bg-gray-800 text-blue-700 dark:text-blue-300 shadow-sm"
                    : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
                )}
              >
                <Clock className="h-4 w-4" />
                Timeline
              </button>
            </div>
          </div>
        </div>
      </div>
    </nav>
  )
}
