'use client';

import React from 'react';

// === BRAND COLORS ===
const brandColors = {
  star: '#FBBC05',
  magnifier: '#1E293B',
  magnifierDark: '#1E293B',
  barLight: '#86EFAC',
  barMid: '#22C55E',
  barDark: '#15803D',
  lensLight: '#FEF3C7',
  lensDark: '#FEF3C7',
  wordmark: '#1E293B',
  wordmarkDark: '#FAFAFA',
  wordmarkAccent: '#F59E0B',
  tagline: '#64748B',
  taglineDark: '#A3A3A3',
} as const;

const logoRatios = {
  wordmarkFont: 0.18,
  taglineFont: 0.11,
  gapIconToWordmark: 0.08,
  gapWordmarkToTagline: 0.04,
  clearSpace: 0.15,
} as const;

interface WhyMyRatingLogoProps {
  size?: number;
  variant?: 'icon' | 'primary' | 'full' | 'horizontal';
  colorScheme?: 'light' | 'dark';
}

function WhyMyRatingLogo({ size = 120, variant = 'primary', colorScheme = 'light' }: WhyMyRatingLogoProps) {
  const u = size;
  const calc = {
    icon: u,
    wordmarkFont: u * logoRatios.wordmarkFont,
    taglineFont: u * logoRatios.taglineFont,
    gapIconToWordmark: u * logoRatios.gapIconToWordmark,
    gapWordmarkToTagline: u * logoRatios.gapWordmarkToTagline,
    clearSpace: u * logoRatios.clearSpace,
  };

  const isDark = colorScheme === 'dark';
  const magnifierColor = isDark ? brandColors.magnifierDark : brandColors.magnifier;
  const lensColor = isDark ? brandColors.lensDark : brandColors.lensLight;
  const wordmarkColor = isDark ? brandColors.wordmarkDark : brandColors.wordmark;
  const taglineColor = isDark ? brandColors.taglineDark : brandColors.tagline;
  const strokeColor = isDark ? '#475569' : 'none';
  const clipId = `circleClip-${size}-${variant}-${colorScheme}-${Math.random().toString(36).substr(2, 9)}`;

  const LogoIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width={calc.icon} height={calc.icon} aria-label="WhyMyRating logo icon">
      <defs>
        <clipPath id={clipId}>
          <circle cx="60" cy="62" r="21"/>
        </clipPath>
      </defs>
      <polygon points="60,15 71.5,42 101,46 79.5,66 85,95 60,82 35,95 40.5,66 19,46 48.5,42" fill={brandColors.star} stroke={brandColors.star} strokeWidth="6" strokeLinejoin="round"/>
      <g>
        {isDark && <line x1="83" y1="81" x2="95" y2="91" stroke="#475569" strokeWidth="11" strokeLinecap="round"/>}
        <circle cx="60" cy="62" r="27" fill={magnifierColor} stroke={strokeColor} strokeWidth={isDark ? 1.5 : 0}/>
        <line x1="83" y1="81" x2="95" y2="91" stroke={magnifierColor} strokeWidth="9" strokeLinecap="round"/>
        <circle cx="60" cy="62" r="21" fill={lensColor}/>
        <g clipPath={`url(#${clipId})`}>
          <rect x="42" y="58" width="11" height="35" rx="1.5" ry="1.5" fill={brandColors.barLight}/>
          <rect x="55" y="51" width="11" height="42" rx="1.5" ry="1.5" fill={brandColors.barMid}/>
          <rect x="68" y="44" width="11" height="49" rx="1.5" ry="1.5" fill={brandColors.barDark}/>
        </g>
        <rect x="68" y="44" width="11" height="18" rx="1.5" ry="1.5" fill={brandColors.barDark}/>
      </g>
    </svg>
  );

  const Wordmark = () => (
    <span style={{
      fontFamily: "'Nunito', sans-serif",
      fontWeight: 700,
      fontSize: calc.wordmarkFont,
      color: wordmarkColor,
      lineHeight: 1.2,
      letterSpacing: '-0.01em',
    }}>
      whyrating<span style={{ color: brandColors.wordmarkAccent }}>.com</span>
    </span>
  );

  const Tagline = () => (
    <span style={{
      fontFamily: "'Inter', sans-serif",
      fontWeight: 400,
      fontSize: calc.taglineFont,
      color: taglineColor,
      lineHeight: 1.4,
    }}>
      The story behind your stars
    </span>
  );

  const containerStyle: React.CSSProperties = {
    display: 'inline-flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: calc.clearSpace,
  };

  if (variant === 'icon') {
    return <div style={{ display: 'inline-flex', padding: calc.clearSpace }}><LogoIcon /></div>;
  }

  if (variant === 'primary') {
    return (
      <div style={containerStyle}>
        <LogoIcon />
        <div style={{ height: calc.gapIconToWordmark }} />
        <Wordmark />
      </div>
    );
  }

  if (variant === 'full') {
    return (
      <div style={containerStyle}>
        <LogoIcon />
        <div style={{ height: calc.gapIconToWordmark }} />
        <Wordmark />
        <div style={{ height: calc.gapWordmarkToTagline }} />
        <Tagline />
      </div>
    );
  }

  if (variant === 'horizontal') {
    return (
      <div style={{ display: 'inline-flex', flexDirection: 'row', alignItems: 'center', gap: calc.gapIconToWordmark }}>
        <LogoIcon />
        <Wordmark />
      </div>
    );
  }

  return null;
}

// === REPORT LOGO WRAPPER ===

interface ReportLogoProps {
  variant: 'header' | 'cover' | 'footer';
}

export default function ReportLogo({ variant }: ReportLogoProps) {
  if (variant === 'cover') {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
        <WhyMyRatingLogo size={90} variant="full" colorScheme="dark" />
        <span style={{ fontSize: 11, fontWeight: 500, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.12em', textTransform: 'uppercase' as const }}>
          Reputation Intelligence
        </span>
      </div>
    );
  }

  const size = variant === 'header' ? 80 : 60;

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <WhyMyRatingLogo size={size} variant="horizontal" colorScheme="light" />
    </div>
  );
}
