"use client";
import React from "react";
import Link from "next/link";
import Image from "next/image";
import { useSettingsStore } from "../lib/store/settingsStore";

interface BrandLogoProps {
  className?: string;
  isDarkBackground?: boolean;
  href?: string;
  size?: "sm" | "md" | "lg";
}

export default function BrandLogo({
  className = "",
  isDarkBackground = false,
  href = "/",
  size = "md",
}: BrandLogoProps) {
  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 subtitle = getText(
    "site_logo_subtitle",
    "نماینده رسمی CANINA PHARMA GMBH GERMANY"
  );

  const iconSizes = {
    sm: "w-8 h-8 text-base rounded-xl",
    md: "w-10 h-10 sm:w-12 sm:h-12 text-xl sm:text-2xl rounded-2xl",
    lg: "w-14 h-14 sm:w-16 sm:h-16 text-2xl sm:text-3xl rounded-3xl",
  };

  const titleSizes = {
    sm: "text-sm sm:text-base",
    md: "text-base sm:text-2xl",
    lg: "text-xl sm:text-3xl",
  };

  const isBlobOrData = typeof logoUrl === 'string' && (logoUrl.startsWith('blob:') || logoUrl.startsWith('data:'));

  const content = (
    <div className={`flex items-center gap-2.5 sm:gap-3 group shrink-0 ${className}`}>
      {logoUrl ? (
        <Image
          src={logoUrl}
          alt={`${textEn} ${textFa}`}
          width={180}
          height={48}
          priority
          unoptimized={isBlobOrData}
          className="h-10 sm:h-12 w-auto max-w-[160px] sm:max-w-[200px] object-contain shrink-0"
        />
      ) : (
        <>
          <div
            className={`${iconSizes[size]} bg-canina-blue flex items-center justify-center text-white font-black group-hover:bg-medical-gray-900 transition-all shadow-md italic shrink-0`}
          >
            {textEn.charAt(0).toUpperCase() || "C"}
          </div>
          <div className="flex flex-col justify-center">
            <span
              className={`${titleSizes[size]} font-black italic font-sans flex items-center gap-1 leading-none pl-1 whitespace-nowrap ${
                isDarkBackground ? "text-white" : "text-canina-blue"
              }`}
            >
              {textEn}
              {textFa && (
                <span
                  className={`text-[11px] sm:text-sm not-italic font-bold border-r pr-1.5 mr-0.5 font-vazir ${
                    isDarkBackground
                      ? "text-medical-gray-200 border-white/20"
                      : "text-medical-gray-700 border-medical-gray-300"
                  }`}
                >
                  {textFa}
                </span>
              )}
            </span>
            {subtitle && (
              <span
                className={`hidden sm:block text-[8px] sm:text-[9px] font-bold uppercase tracking-wider leading-tight mt-1 whitespace-nowrap ${
                  isDarkBackground ? "text-medical-gray-400" : "text-medical-gray-400"
                }`}
              >
                {subtitle}
              </span>
            )}
          </div>
        </>
      )}
    </div>
  );

  if (href) {
    return (
      <Link href={href} className="inline-block">
        {content}
      </Link>
    );
  }

  return content;
}