"use client"

import { useEffect, useState } from "react"
import { Sidebar } from "./dashboard/sidebar"
import { Breadcrumb } from "./dashboard/bread-crumb"
import { AnnouncementTicker } from "@/components/announcements/announcement-ticker"
import { TOP_BAR_ANNOUNCEMENT } from "@/config/announcements"
import { cn } from "@/lib/utils"
import type { User } from "@auth0/nextjs-auth0/types"

export function DashboardShell({
  children,
  user,
  initialSubscription,
}: {
  children: React.ReactNode
  user?: User
  initialSubscription?: {
    optimizations_used: number
    optimizations_limit: number
  } | null
}) {
  const [isAnnouncementVisible, setIsAnnouncementVisible] = useState(true)

  // Auto-collapse announcement after 4 seconds
  useEffect(() => {
    if (TOP_BAR_ANNOUNCEMENT.enabled && isAnnouncementVisible) {
      const timer = setTimeout(() => {
        setIsAnnouncementVisible(false)
      }, 5000)

      return () => clearTimeout(timer)
    }
  }, [isAnnouncementVisible])

  return (
    <div className="h-screen flex flex-col">
      {/* Full-width top announcement bar */}
      {TOP_BAR_ANNOUNCEMENT.enabled && (
        <div
          className={cn(
            "w-full transition-all duration-500 ease-out overflow-hidden z-50 hidden md:block",
            isAnnouncementVisible
              ? "max-h-7 opacity-100 translate-y-0"
              : "max-h-0 opacity-0 -translate-y-2",
          )}
        >
          <div className="w-full backdrop-blur-sm bg-gradient-to-r from-background/50 via-primary/5 to-background/50 border-b border-border/30">
            <div className="flex items-center justify-center px-4 py-1 relative">
              <AnnouncementTicker
                config={TOP_BAR_ANNOUNCEMENT}
                className="border-none bg-transparent text-muted-foreground justify-center text-[10px] font-light hover:bg-transparent py-0 h-5"
                speed={6}
                pauseBeforeStart={30}
                ctaClassName="text-primary/60 group-hover:text-primary text-[9px] font-medium"
                highlightClassName="text-primary/90 font-semibold"
                textClassName="tracking-wide"
              />
              {/* Close button */}
              <button
                onClick={() => setIsAnnouncementVisible(false)}
                className="absolute right-4 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-muted/50 transition-colors"
                aria-label="Close announcement"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="14"
                  height="14"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="text-muted-foreground hover:text-foreground"
                >
                  <line x1="18" y1="6" x2="6" y2="18"></line>
                  <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Main content area with sidebar */}
      <div className="flex-1 flex flex-row overflow-hidden">
        <Sidebar
          className="h-full border-r border-border/30 flex-shrink-0 w-60 bg-background"
          user={user || undefined}
          initialSubscription={initialSubscription}
        />
        <main className="flex-1 flex flex-col gap-5 w-full max-w-none mx-auto h-full overflow-y-auto p-4">
          <div className="hidden md:block sticky top-0 z-20 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b border-border/40">
            <div className="px-6 py-3">
              <Breadcrumb />
            </div>
          </div>
          <div>{children}</div>
        </main>
      </div>
    </div>
  )
}
