import { Logo, TextLogo } from '@/Components/branding/Logo';
import type { Branding } from '@/types';

interface BrandedHeaderProps {
  branding?: Branding | null;
  subtitle?: string;
  dateLabel?: string;
  periodLabel?: string;
  className?: string;
}

/**
 * BrandedHeader Component
 *
 * Displays a header with custom branding (logo, company name, colors) if available,
 * or falls back to default RankWiz branding.
 *
 * Used across report pages to provide consistent white-label branding.
 */
export default function BrandedHeader({
  branding,
  subtitle = 'SEO Performance Report',
  dateLabel,
  periodLabel,
  className = '',
}: BrandedHeaderProps) {
  const hasCustomBranding = branding && (branding.company_name || branding.logo_url);
  const displayName = hasCustomBranding ? branding.company_name : 'RankWiz';
  const primaryColor = branding?.primary_color || 'hsl(var(--primary))';

  // Default date/period if not provided
  const defaultDate = new Date().toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
  });
  const displayDate = dateLabel || defaultDate;
  const displayPeriod = periodLabel || '30-day Analysis';

  return (
    <div className={`flex items-center justify-between border-b pb-4 ${className}`}>
      <div className="flex items-center gap-4">
        {/* Logo */}
        {hasCustomBranding && branding.logo_url ? (
          <img
            src={branding.logo_url}
            alt={`${displayName} logo`}
            className="max-h-12 max-w-[120px] object-contain"
          />
        ) : hasCustomBranding && !branding.logo_url ? (
          // Custom branding without logo - show placeholder with custom color
          <div
            className="h-12 w-24 rounded flex items-center justify-center text-white text-xs font-bold"
            style={{ backgroundColor: primaryColor }}
          >
            LOGO
          </div>
        ) : (
          // Default RankWiz branding
          <div className="flex items-center gap-2">
            <Logo className="h-12 w-12" size={48} />
            <TextLogo className="text-xl font-bold" />
          </div>
        )}

        {/* Company Name and Subtitle */}
        {hasCustomBranding && (
          <div>
            <h2 className="text-lg font-semibold">{displayName}</h2>
            {subtitle && <p className="text-sm text-muted-foreground">{subtitle}</p>}
          </div>
        )}
      </div>

      {/* Date and Period Info */}
      <div className="text-right">
        <p className="text-sm font-medium">{displayDate}</p>
        {displayPeriod && <p className="text-xs text-muted-foreground">{displayPeriod}</p>}
      </div>
    </div>
  );
}