'use client';

import Link from 'next/link';
import { PanelBrand } from '@/components/panel/panel-brand';
import { MoreOptionsMenu } from '@/components/panel/more-options-menu';
import { cn } from '@/lib/utils';
import type { SubscriptionSummary } from '@/components/panel/broker-shell';

type PanelHeaderProps = {
  businessName: string;
  businessLogoUrl?: string | null;
  userName: string;
  subscriptionSummary?: SubscriptionSummary;
  className?: string;
};

export function PanelHeader({
  businessName,
  businessLogoUrl = null,
  userName,
  subscriptionSummary = null,
  className,
}: PanelHeaderProps) {
  const initials = userName
    .split(/\s+/)
    .filter(Boolean)
    .slice(0, 2)
    .map(part => part[0]?.toUpperCase() ?? '')
    .join('') || 'C';

  return (
    <header
      className={cn(
        'sticky top-0 z-30 flex h-[var(--panel-header-h)] items-center justify-between gap-3 border-b border-border bg-card/95 px-3 pt-[var(--safe-top)] backdrop-blur-md sm:px-5',
        className,
      )}
    >
      <div className="flex min-w-0 items-center gap-3 lg:hidden">
        {businessLogoUrl ? (
          <img src={businessLogoUrl} alt="" className="size-9 rounded-xl object-cover" />
        ) : (
          <PanelBrand compact />
        )}
        <div className="min-w-0">
          <p className="truncate text-sm font-bold text-navy">{businessName}</p>
          <p className="truncate text-[11px] text-muted-foreground">
            {subscriptionSummary
              ? `${subscriptionSummary.planName} · ${subscriptionSummary.statusLabel}`
              : 'Business panel'}
          </p>
        </div>
      </div>

      <div className="hidden min-w-0 lg:block">
        <p className="truncate text-sm font-semibold text-navy">{businessName}</p>
        {subscriptionSummary && (
          <p className="truncate text-[11px] text-muted-foreground">
            {subscriptionSummary.planName} · {subscriptionSummary.statusLabel}
            {subscriptionSummary.isTrial && subscriptionSummary.daysRemaining != null
              ? ` · ${subscriptionSummary.daysRemaining}d left`
              : ''}
          </p>
        )}
      </div>

      <div className="ml-auto flex items-center gap-1.5 sm:gap-2">
        <Link
          href="/dashboard/billing"
          className="hidden rounded-full bg-muted px-2.5 py-1 text-[11px] font-semibold text-navy transition-colors hover:bg-primary-soft hover:text-primary sm:inline-flex"
        >
          Billing
        </Link>
        <MoreOptionsMenu />
        <Link
          href="/dashboard/account"
          className="inline-flex size-11 items-center justify-center rounded-xl bg-navy text-xs font-bold text-white transition-transform duration-200 active:scale-95"
          aria-label="Account"
        >
          {initials}
        </Link>
      </div>
    </header>
  );
}