/**
 * Standardized Page Header Component
 * Used across all Planner and Writer module pages
 * Includes: Page title, last updated, site/sector info, and selectors
 */
import React, { ReactNode } from 'react';
import { useSiteStore } from '../../store/siteStore';
import { useSectorStore } from '../../store/sectorStore';
import SiteAndSectorSelector from './SiteAndSectorSelector';

interface PageHeaderProps {
  title: string;
  lastUpdated?: Date;
  showRefresh?: boolean;
  onRefresh?: () => void;
  className?: string;
  badge?: {
    icon: ReactNode;
    color: 'blue' | 'green' | 'purple' | 'orange' | 'red' | 'indigo';
  };
  hideSiteSector?: boolean; // Hide site/sector selector and info for global pages
}

export default function PageHeader({
  title,
  lastUpdated,
  showRefresh = false,
  onRefresh,
  className = "",
  badge,
  hideSiteSector = false,
}: PageHeaderProps) {
  const { activeSite } = useSiteStore();
  const { activeSector } = useSectorStore();

  const badgeColors = {
    blue: 'bg-blue-600 dark:bg-blue-500',
    green: 'bg-green-600 dark:bg-green-500',
    purple: 'bg-purple-600 dark:bg-purple-500',
    orange: 'bg-orange-600 dark:bg-orange-500',
    red: 'bg-red-600 dark:bg-red-500',
    indigo: 'bg-indigo-600 dark:bg-indigo-500',
  };

  return (
    <div className={`flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 ${className}`}>
      <div className="flex-1">
        <div className="flex items-center gap-3">
          {badge && (
            <div className={`flex items-center justify-center w-10 h-10 rounded-xl ${badgeColors[badge.color]} flex-shrink-0`}>
              {badge.icon && typeof badge.icon === 'object' && 'type' in badge.icon
                ? React.cloneElement(badge.icon as React.ReactElement, { className: 'text-white size-5' })
                : badge.icon}
            </div>
          )}
          <h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">{title}</h2>
        </div>
        {!hideSiteSector && (
          <div className="flex items-center gap-3 mt-1">
            {lastUpdated && (
              <>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Last updated: {lastUpdated.toLocaleTimeString()}
                </p>
              </>
            )}
            {activeSite && (
              <>
                {lastUpdated && <span className="text-sm text-gray-400 dark:text-gray-600">•</span>}
                <p className="text-sm font-medium text-gray-700 dark:text-gray-300">
                  Site: <span className="text-brand-600 dark:text-brand-400">{activeSite.name}</span>
                </p>
              </>
            )}
            {activeSector && (
              <>
                <span className="text-sm text-gray-400 dark:text-gray-600">•</span>
                <p className="text-sm font-medium text-gray-700 dark:text-gray-300">
                  Sector: <span className="text-brand-600 dark:text-brand-400">{activeSector.name}</span>
                </p>
              </>
            )}
            {!activeSector && activeSite && (
              <>
                <span className="text-sm text-gray-400 dark:text-gray-600">•</span>
                <p className="text-sm font-medium text-gray-700 dark:text-gray-300">
                  Sector: <span className="text-brand-600 dark:text-brand-400">All Sectors</span>
                </p>
              </>
            )}
          </div>
        )}
        {hideSiteSector && lastUpdated && (
          <div className="flex items-center gap-3 mt-1">
            <p className="text-sm text-gray-500 dark:text-gray-400">
              Last updated: {lastUpdated.toLocaleTimeString()}
            </p>
          </div>
        )}
      </div>
      <div className="flex items-center gap-3">
        {!hideSiteSector && <SiteAndSectorSelector />}
        {showRefresh && onRefresh && (
          <button
            onClick={onRefresh}
            className="px-4 py-2 text-sm font-medium text-brand-500 hover:text-brand-600 border border-brand-200 rounded-lg hover:bg-brand-50 dark:border-brand-800 dark:hover:bg-brand-500/10 transition-colors"
          >
            Refresh
          </button>
        )}
      </div>
    </div>
  );
}

