import { Component, Input } from '@angular/core';
import { hasBanner, hasLogoTagline, PublicBranding } from '@calendar/core';

@Component({
  selector: 'cal-branding-header',
  standalone: true,
  template: `
    @if (hasBanner()) {
      <div class="brand-banner" [class.brand-banner--compact]="variant === 'compact'">
        <img [src]="branding.bannerUrl!" [alt]="bannerAlt" />
      </div>
    }
    @if (hasLogoTagline()) {
      <div
        class="brand-hero"
        [class.brand-hero--compact]="variant === 'compact'"
        [class.brand-hero--with-banner]="hasBanner()"
        [style.--brand-accent]="accent()"
      >
        <div class="brand-hero-inner">
          @if (branding.logoUrl) {
            <img [src]="branding.logoUrl" [alt]="logoAlt" class="brand-logo" />
          }
          @if (branding.tagline) {
            <p class="brand-tagline">{{ branding.tagline }}</p>
          }
        </div>
      </div>
    }
  `,
  styles: [
    `
      :host {
        display: block;
      }

      .brand-banner {
        width: 100%;
        height: 160px;
        background: linear-gradient(135deg, #eef2ff, #e2e8f0);
      }

      .brand-banner--compact {
        height: 88px;
      }

      .brand-banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .brand-hero {
        --brand-accent: #4f46e5;
        width: 100%;
        padding: 1.75rem 2rem;
        background:
          radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--brand-accent) 22%, white), transparent 55%),
          linear-gradient(135deg, color-mix(in srgb, var(--brand-accent) 12%, #f8fafc), #f1f5f9);
        border-bottom: 1px solid color-mix(in srgb, var(--brand-accent) 18%, #e2e8f0);
      }

      .brand-hero--with-banner {
        padding: 1rem 1.5rem;
        background: #fff;
        border-bottom: 1px solid var(--cal-border, #e2e8f0);
      }

      .brand-hero--compact {
        padding: 1rem 1.25rem;
      }

      .brand-hero--compact.brand-hero--with-banner {
        padding: 0.75rem 1rem;
      }

      .brand-hero-inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.75rem 1rem;
        max-width: 100%;
      }

      .brand-logo {
        max-height: 52px;
        max-width: min(220px, 100%);
        width: auto;
        object-fit: contain;
        display: block;
      }

      .brand-hero--compact .brand-logo {
        max-height: 36px;
        max-width: min(160px, 100%);
      }

      .brand-tagline {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 600;
        line-height: 1.45;
        letter-spacing: -0.02em;
        color: #1e293b;
      }

      .brand-hero--compact .brand-tagline {
        font-size: 0.88rem;
        font-weight: 600;
      }
    `,
  ],
})
export class BrandingHeaderComponent {
  @Input({ required: true }) branding!: PublicBranding;
  @Input() variant: 'page' | 'compact' = 'page';
  @Input() bannerAlt = '';
  @Input() logoAlt = 'Logo';

  hasBanner(): boolean {
    return hasBanner(this.branding);
  }

  hasLogoTagline(): boolean {
    return hasLogoTagline(this.branding);
  }

  accent(): string {
    return this.branding.accentColor?.trim() || '#4F46E5';
  }
}