/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React from "react";
import { User } from "../types";
import { LogOut, RefreshCw, Landmark, Shield, User as UserIcon } from "lucide-react";

interface HeaderProps {
  currentUser: User | null;
  onLogout: () => void;
  onQuickSwitch: () => void;
}

export default function Header({ currentUser, onLogout, onQuickSwitch }: HeaderProps) {
  const getRoleLabel = (role: string) => {
    switch (role) {
      case "admin": return { text: "Administrator (Tata Usaha)", color: "bg-rose-50 text-rose-700 border-rose-200" };
      case "siswa": return { text: "Siswa (Pemohon)", color: "bg-indigo-50 text-indigo-700 border-indigo-200" };
      case "guru_mapel": return { text: "Guru Mata Pelajaran (Verifikator 1)", color: "bg-emerald-50 text-emerald-700 border-emerald-200" };
      case "guru_piket": return { text: "Guru Piket (Verifikator 2)", color: "bg-amber-50 text-amber-700 border-amber-200" };
      case "satpam": return { text: "Satpam Gate (Validator Akhir)", color: "bg-slate-100 text-slate-800 border-slate-300" };
      default: return { text: "Tamu", color: "bg-gray-50 text-gray-700 border-gray-200" };
    }
  };

  const badge = currentUser ? getRoleLabel(currentUser.role) : null;

  return (
    <header className="bg-white border-b border-slate-200 sticky top-0 z-30 print:hidden shadow-xs">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-20">
          {/* School Brand Block */}
          <div className="flex items-center space-x-3">
            <div className="h-11 w-11 rounded-lg bg-indigo-600 flex items-center justify-center text-white font-sans font-bold shadow-sm border border-indigo-700">
              <span className="text-xl tracking-tight">B</span>
            </div>
            <div>
              <div className="flex items-center space-x-2">
                <span className="text-mono text-[9px] uppercase font-bold text-indigo-600 tracking-wider bg-indigo-50 px-1.5 py-0.5 rounded-sm">SIP-SMAN1B</span>
              </div>
              <h1 className="text-base font-sans font-bold text-slate-900 tracking-tight leading-4 mt-0.5">
                SIKAD SMAN 1 BANTARAN
              </h1>
              <p className="text-[10px] text-slate-500 font-sans hidden sm:block">
                Sistem Izin Pelajar Digital & Monitor Pos Satpam
              </p>
            </div>
          </div>

          {/* User Block & Switcher */}
          {currentUser && (
            <div className="flex items-center space-x-3 sm:space-x-4">
              <div className="text-right hidden md:block">
                <p className="text-sm font-semibold text-slate-900">{currentUser.name}</p>
                <div className="flex items-center justify-end space-x-1 mt-0.5">
                  <span className="text-[10px] text-slate-400 font-mono">NISN/NIP: {currentUser.indukNumber}</span>
                  {currentUser.siswaClass && (
                    <span className="text-[10px] bg-slate-100 text-slate-700 px-1.5 py-0.2 rounded font-medium">Kelas {currentUser.siswaClass}</span>
                  )}
                </div>
              </div>

              {badge && (
                <span className={`inline-flex items-center px-2.5 py-1 rounded-full text-[10px] font-semibold tracking-wide uppercase border ${badge.color}`}>
                  {badge.text}
                </span>
              )}

              {/* Quick Switch Switcher for easy testing */}
              <button 
                id="header-btn-switch"
                onClick={onQuickSwitch}
                title="Ganti Akun Demo"
                className="p-2 text-slate-500 hover:text-indigo-600 hover:bg-indigo-50/50 rounded-lg transition-colors flex items-center space-x-1"
              >
                <RefreshCw className="h-4 w-4" />
                <span className="text-xs font-semibold hidden sm:inline">Ganti Peran</span>
              </button>

              <button
                id="header-btn-logout"
                onClick={onLogout}
                title="Keluar"
                className="p-2 text-slate-500 hover:text-rose-600 hover:bg-rose-50 rounded-lg transition-colors flex items-center space-x-1 border border-transparent hover:border-rose-100"
              >
                <LogOut className="h-4 w-4" />
                <span className="text-xs font-semibold hidden sm:inline">Keluar</span>
              </button>
            </div>
          )}
        </div>
      </div>
    </header>
  );
}