'use client';

import Link from 'next/link';
import { Bell, ShieldCheck, LogOut, Home } from 'lucide-react';
import { UserRole } from '@/types';

interface AAMovementHeaderProps {
  currentUser: {
    id: string;
    full_name: string;
    role: UserRole;
    assigned_scope_type: string;
    assigned_scope_id: string;
  };
  onOpenNotifications?: () => void;
  onOpenHotline?: () => void;
  onLogout?: () => void;
  unreadCount?: number;
}

export function AAMovementHeader({
  currentUser,
  onOpenNotifications,
  onOpenHotline,
  onLogout,
  unreadCount = 3,
}: AAMovementHeaderProps) {
  // Format current live date/time matching "Sat, 16 Jan 2027 • 4:32 PM (WAT)" style
  const now = new Date();
  const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  
  const dayName = days[now.getDay()];
  const dateNum = now.getDate();
  const monthName = months[now.getMonth()];
  const yearNum = 2027; // 2027 General Election context
  const timeStr = now.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });

  const formatRoleLabel = (role: UserRole) => {
    switch (role) {
      case 'NATIONAL_COORDINATOR':
        return 'National Coordinator';
      case 'REGIONAL_COORDINATOR':
        return 'Zonal Coordinator (Zone by Zone)';
      case 'STATE_SUPERVISOR':
        return 'State Coordinator';
      case 'LGA_SUPERVISOR':
        return 'LGA Supervisor';
      case 'WARD_SUPERVISOR':
        return 'Ward Supervisor';
      case 'PU_AGENT':
        return 'PU Agent';
      default:
        return 'Command Officer';
    }
  };

  return (
    <header className="bg-white border-b border-slate-200/90 px-3 sm:px-4 py-2 sticky top-0 z-30 shadow-xs">
      <div className="flex min-h-12 items-center justify-between gap-2 sm:gap-4">
        {/* Left: AA Movement Nigeria Logo & Election Tagline */}
        <div className="flex min-w-0 flex-1 items-center gap-2 sm:gap-3">
          {/* Official AA Movement 2027 Bold Prominent Logo */}
          <div className="relative flex items-center justify-center w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-white p-1 shadow-sm border border-emerald-600 shrink-0 overflow-hidden">
            <img
              src="/aa-movement-logo.jpg"
              alt="AA Movement 2027 Official Logo"
              className="w-full h-full object-contain"
            />
          </div>

          <div className="min-w-0">
            <div className="flex min-w-0 items-center gap-2">
              <h1 className="truncate text-sm sm:text-base font-black tracking-tight text-slate-950 leading-tight" title="AA MOVEMENT NIGERIA">
                AA MOVEMENT NIGERIA
              </h1>
              {/* Flag of Nigeria (Green-White-Green pill) */}
              <div aria-hidden="true" className="hidden lg:inline-flex items-center h-3 w-5 rounded-xs overflow-hidden border border-slate-300 shadow-2xs shrink-0">
                <span className="w-1/3 h-full bg-[#008751]" />
                <span className="w-1/3 h-full bg-white" />
                <span className="w-1/3 h-full bg-[#008751]" />
              </div>
            </div>
            <p className="mt-0.5 flex min-w-0 items-center gap-1.5 text-xs font-semibold text-emerald-800">
              <span className="truncate" title="Presidential Election 2027 Situation Room">Presidential Election 2027 Situation Room</span>
              <span className="hidden 2xl:inline-block shrink-0 text-xs font-bold text-purple-700 bg-purple-50 px-2 rounded border border-purple-200">
                ADC Coalition
              </span>
            </p>
          </div>
        </div>

        {/* Right: Date/Time Badge, Hotline Button, Alert Bell, User Profile Pill */}
        <div className="flex shrink-0 items-center gap-1.5 sm:gap-2">
          {/* Live Date/Time Badge */}
          <div className="hidden 2xl:flex shrink-0 items-center gap-2 whitespace-nowrap bg-slate-50 border border-slate-200/90 text-slate-600 px-2 py-1.5 rounded-lg text-xs font-semibold font-mono">
            <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
            <span>
              {dayName}, {dateNum} {monthName} {yearNum} • {timeStr} (WAT)
            </span>
          </div>

          {/* Situation Room SOS Hotline Shortcut */}
          {onOpenHotline && (
            <button
              onClick={onOpenHotline}
              className="hidden lg:flex min-h-11 shrink-0 items-center gap-1.5 whitespace-nowrap bg-rose-50 hover:bg-rose-100 border border-rose-200 text-rose-700 px-2.5 py-1.5 rounded-lg text-xs font-bold transition-colors"
              title="Open Situation Room SOS Incident Hotline"
            >
              <ShieldCheck className="w-3.5 h-3.5 text-rose-600" />
              <span>SOS Hotline</span>
            </button>
          )}

          {/* Notifications Bell with unread badge */}
          <button
            onClick={onOpenNotifications}
            aria-label="Incident notifications"
            className="relative flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-slate-600 hover:text-slate-900 hover:bg-slate-100 border border-slate-200 transition-colors"
            title="Incident Notifications & Signals"
          >
            <Bell className="w-5 h-5 text-slate-700" />
            {unreadCount > 0 && (
              <span className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-rose-600 text-white font-mono text-[10px] font-black flex items-center justify-center ring-2 ring-white shadow-xs">
                {unreadCount}
              </span>
            )}
          </button>

          {/* User Profile Pill */}
          <div className="hidden sm:flex shrink-0 items-center gap-2 pl-2 border-l border-slate-200">
            <div title={currentUser.full_name} className="w-9 h-9 shrink-0 rounded-full bg-slate-900 border-2 border-emerald-500 flex items-center justify-center text-white font-bold text-xs shadow-xs">
              {currentUser.full_name
                .split(' ')
                .map((n) => n[0])
                .slice(0, 2)
                .join('')}
            </div>
            <div className="hidden xl:block min-w-0 max-w-36 text-left leading-tight">
              <span className="block text-xs font-bold text-slate-900 truncate max-w-[170px]">
                {currentUser.full_name}
              </span>
              <span title={`${formatRoleLabel(currentUser.role)} - ${currentUser.assigned_scope_id}`} className="block truncate text-xs font-semibold text-emerald-700">
                {formatRoleLabel(currentUser.role)} • {currentUser.assigned_scope_id}
              </span>
            </div>
          </div>

          {/* Explicit Landing Page Link (Preserves user session, does NOT log out) */}
          <Link
            href="/"
            aria-label="Landing page"
            className="flex min-h-11 min-w-11 shrink-0 items-center justify-center gap-1.5 whitespace-nowrap px-2 py-1.5 rounded-lg bg-emerald-50 hover:bg-emerald-100 border border-emerald-300 text-emerald-900 text-xs font-bold transition-all shadow-2xs cursor-pointer active:scale-95"
            title="Return to Public Landing Page (Keeps your situation room session active)"
          >
            <Home className="w-3.5 h-3.5 text-emerald-700" />
            <span className="hidden xl:inline">Landing Page</span>
          </Link>

          {/* Prominent Log Out / Sign Out Button */}
          {onLogout && (
            <button
              type="button"
              onClick={onLogout}
              aria-label="Logout"
              className="flex min-h-11 min-w-11 shrink-0 items-center justify-center gap-1 whitespace-nowrap px-2 py-1.5 rounded-lg bg-rose-50 hover:bg-rose-100 border border-rose-200 text-rose-700 text-xs font-bold transition-all shadow-2xs cursor-pointer active:scale-95"
              title="Sign Out / Exit Dashboard"
            >
              <LogOut className="w-3.5 h-3.5 text-rose-600" />
              <span className="hidden xl:inline">Logout</span>
            </button>
          )}
        </div>
      </div>
    </header>
  );
}