"use client";
import React from "react";
import { useSettingsStore } from "../lib/store/settingsStore";
import { Sparkles } from "lucide-react";

import Link from "next/link";
import Image from "next/image";

export default function TickerBanner() {
  const getText = useSettingsStore((state) => state.getText);
  const logoUrl = getText("site_logo", "");
  const textEn = getText("site_logo_text_en", "Canina");
  const textFa = getText("site_logo_text_fa", "ایران");
  const isBlobOrData = typeof logoUrl === 'string' && (logoUrl.startsWith('blob:') || logoUrl.startsWith('data:'));

  const announcementText = getText(
    "shipping_notice",
    "ارسال رایگان برای سفارش‌های بالای ۱۵۰ هزار تومان — گارانتی اصالت کنینا آلمان — مشاوره تخصصی مکمل‌های دارویی سگ و گربه با کادر دامپزشکان مجرب"
  );

  return (
    <div className="bg-canina-gold text-canina-dark select-none shadow-xs border-b border-amber-300/40">
      {/* Mobile: Logo on the right + Ticker marquee on the left in one single row */}
      <div className="lg:hidden flex items-center h-10 px-2.5 overflow-hidden">
        {/* Mobile Compact Logo */}
        <Link href="/" className="flex items-center gap-1.5 shrink-0 pl-2 ml-1 border-l border-amber-500/30">
          {logoUrl ? (
            <Image
              src={logoUrl}
              alt={`${textEn} ${textFa}`}
              width={80}
              height={26}
              priority
              unoptimized={isBlobOrData}
              className="h-6 w-auto max-w-[85px] object-contain shrink-0"
            />
          ) : (
            <div className="flex items-center gap-1">
              <span className="w-6 h-6 rounded-lg bg-canina-blue text-white flex items-center justify-center font-black text-xs italic shadow-xs">
                {textEn.charAt(0).toUpperCase() || "C"}
              </span>
              <span className="font-black text-xs text-canina-blue italic">
                {textEn}
              </span>
              {textFa && (
                <span className="text-[10px] font-bold text-canina-dark/80 font-vazir pr-0.5">
                  {textFa}
                </span>
              )}
            </div>
          )}
        </Link>

        {/* Marquee ticker filling the rest */}
        <div className="flex-1 overflow-hidden relative text-[11px] font-black">
          <div className="flex items-center gap-2 whitespace-nowrap animate-marquee">
            <span className="flex items-center gap-1.5 px-3">
              <Sparkles className="w-3 h-3 text-canina-dark animate-pulse inline" />
              {announcementText}
            </span>
            <span className="flex items-center gap-1.5 px-3">
              <Sparkles className="w-3 h-3 text-canina-dark animate-pulse inline" />
              {announcementText}
            </span>
            <span className="flex items-center gap-1.5 px-3">
              <Sparkles className="w-3 h-3 text-canina-dark animate-pulse inline" />
              {announcementText}
            </span>
          </div>
        </div>
      </div>

      {/* Desktop: Full-width ticker banner as before */}
      <div className="hidden lg:block text-xs font-black py-1.5 overflow-hidden relative">
        <div className="flex items-center gap-2 whitespace-nowrap animate-marquee">
          <span className="flex items-center gap-2 px-4">
            <Sparkles className="w-3.5 h-3.5 text-canina-dark animate-pulse inline" />
            {announcementText}
          </span>
          <span className="flex items-center gap-2 px-4">
            <Sparkles className="w-3.5 h-3.5 text-canina-dark animate-pulse inline" />
            {announcementText}
          </span>
          <span className="flex items-center gap-2 px-4">
            <Sparkles className="w-3.5 h-3.5 text-canina-dark animate-pulse inline" />
            {announcementText}
          </span>
          <span className="flex items-center gap-2 px-4">
            <Sparkles className="w-3.5 h-3.5 text-canina-dark animate-pulse inline" />
            {announcementText}
          </span>
        </div>
      </div>
    </div>
  );
}