"use client"

import { useState, useEffect } from "react"
import { X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"

interface AnnouncementBarProps {
  daysRemaining?: number
  onClose?: () => void
  userRole?: string
}

export function AnnouncementBar({ daysRemaining = 7, onClose, userRole = "broker" }: AnnouncementBarProps) {
  const [isVisible, setIsVisible] = useState(false)
  const [isMounted, setIsMounted] = useState(false)

  useEffect(() => {
    setIsMounted(true)
    
    // Check if user has dismissed the announcement
    const dismissed = localStorage.getItem('subscription-announcement-dismissed')
    if (!dismissed) {
      setIsVisible(true)
    }
  }, [])

  const handleClose = () => {
    setIsVisible(false)
    localStorage.setItem('subscription-announcement-dismissed', 'true')
    onClose?.()
  }

  // Get message based on days remaining and user role
  const getMessage = () => {
    const isBuilder = userRole === "builder"
    
    if (daysRemaining === 0) {
      // Expires Today
      return isBuilder
        ? "Final reminder. Subscription expires today. Renew now to continue using Makanify Pro."
        : "Final reminder. Subscription expires today. Renew now to continue using Makanify."
    } else if (daysRemaining === 1) {
      // 1 Day Left
      return "Your subscription expires tomorrow. Renew immediately to avoid access restrictions."
    } else if (daysRemaining >= 2 && daysRemaining <= 7) {
      // 7–2 Days Before Expiry
      return `Only ${daysRemaining} days left in your subscription. Renew now to prevent workflow interruption.`
    } else {
      // 4–8 Days Before Expiry (default)
      return isBuilder
        ? `Your Makanify Pro subscription expires in ${daysRemaining} days. Please renew to ensure uninterrupted access.`
        : `Your Makanify subscription expires in ${daysRemaining} days. Please renew to ensure uninterrupted access.`
    }
  }

  // Determine if close button should be shown
  const showCloseButton = daysRemaining > 1

  // Get background color based on days remaining
  const getBackgroundColor = () => {
    if (daysRemaining === 0) {
      return "bg-red-600"
    }
    return "bg-orange-500"
  }

  const getHoverColor = () => {
    if (daysRemaining === 0) {
      return "hover:bg-red-700"
    }
    return "hover:bg-orange-600"
  }

  // Don't render on server or if not visible
  if (!isMounted || !isVisible) {
    return null
  }

  return (
    <div className={cn(
      "fixed top-0 left-0 right-0 z-50 text-white transition-all duration-300",
      getBackgroundColor(),
      isVisible ? "translate-y-0" : "-translate-y-full"
    )}>
      <div className="container mx-auto px-4 py-2.5 flex items-center justify-between gap-4">
        <div className={cn(
          "flex items-center gap-2",
          showCloseButton ? "flex-1 justify-center" : "flex-1 justify-center"
        )}>
          <p className="text-sm font-medium text-center">
            {getMessage()}
          </p>
        </div>
        {showCloseButton && (
          <Button
            variant="ghost"
            size="icon"
            onClick={handleClose}
            className={cn(
              "h-6 w-6 shrink-0 text-white",
              getHoverColor(),
              "hover:text-white"
            )}
            aria-label="Close announcement"
          >
            <X className="h-4 w-4" />
          </Button>
        )}
      </div>
    </div>
  )
}