import React, { useState, useEffect } from 'react';

// Permanent logo URL provided by user
const DEFAULT_LOGO = "https://i.ibb.co/jkMPwJfj/logo-Photoroom.png";

const CrazeLogo = () => {
  const [logoSrc, setLogoSrc] = useState<string>(DEFAULT_LOGO);

  useEffect(() => {
    // Check if user has uploaded a custom override locally
    // Using v2 key to reset any previous cached logos and force the new default
    const saved = localStorage.getItem('craze_custom_logo_v2');
    if (saved) {
        setLogoSrc(saved);
    }
  }, []);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      const reader = new FileReader();
      reader.onload = (ev) => {
        const result = ev.target?.result as string;
        setLogoSrc(result);
        localStorage.setItem('craze_custom_logo_v2', result);
      };
      reader.readAsDataURL(e.target.files[0]);
    }
  };

  return (
    <div className="w-full h-full relative group flex items-center justify-start">
        {/* Invisible file input for manual override */}
        <input 
            type="file" 
            accept="image/png, image/jpeg, image/jpg" 
            onChange={handleFileChange} 
            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-20"
            title="Click to replace this permanent logo with a custom file"
        />
        
        {/* The Image - Scaled 3x from the left */}
        <img 
            src={logoSrc} 
            alt="Craze Analytix Logo" 
            className="h-full w-auto object-contain object-left drop-shadow-lg scale-[3] origin-left transition-transform duration-300"
            onError={(e) => {
                // Fallback if external URL fails
                console.warn("Failed to load external logo, reverting to placeholder or text");
                e.currentTarget.style.display = 'none';
            }}
        />
    </div>
  );
};

export default CrazeLogo;