import React from 'react';
import { 
  Printer, 
  Download, 
  FileText, 
  Search, 
  SlidersHorizontal, 
  Sparkles,
  BookOpen, 
  Calculator,
  Shield,
  Layers,
  CheckCheck
} from 'lucide-react';
import { UNIFIED_DOCUMENT_METADATA } from '../data/unifiedDocumentData';

interface Props {
  activeTab: 'document' | 'verification' | 'summary' | 'tabsManifest';
  setActiveTab: (tab: 'document' | 'verification' | 'summary' | 'tabsManifest') => void;
  searchQuery: string;
  setSearchQuery: (q: string) => void;
  showLineNumbers: boolean;
  setShowLineNumbers: (v: boolean) => void;
  fontSize: 'small' | 'medium' | 'large';
  setFontSize: (s: 'small' | 'medium' | 'large') => void;
  onOpenExportModal: () => void;
}

export const Header: React.FC<Props> = ({
  activeTab,
  setActiveTab,
  searchQuery,
  setSearchQuery,
  showLineNumbers,
  setShowLineNumbers,
  fontSize,
  setFontSize,
  onOpenExportModal
}) => {
  const handlePrint = () => {
    window.print();
  };

  return (
    <header className="bg-slate-900 border-b border-slate-800 sticky top-0 z-40 shadow-xl no-print">
      <div className="max-w-7xl mx-auto px-4 py-3">
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-3">
          {/* Title and institution logos / labels */}
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-indigo-500 to-amber-600 flex items-center justify-center text-white shadow-md shadow-indigo-900/30 font-serif font-black text-lg shrink-0">
              §
            </div>
            <div>
              <div className="flex items-center gap-2">
                <span className="text-xs font-semibold px-2 py-0.5 rounded bg-blue-500/20 text-blue-300 border border-blue-500/30">
                  D.C. CIRCUIT COURTS
                </span>
                <span className="text-xs text-slate-500">•</span>
                <span className="text-xs font-semibold px-2 py-0.5 rounded bg-amber-500/20 text-amber-300 border border-amber-500/30">
                  BNY MELLON CORPORATE TRUST
                </span>
                <span className="text-xs font-semibold px-2 py-0.5 rounded bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 hidden sm:inline-block">
                  UNIFIED 100%
                </span>
              </div>
              <h1 className="text-base sm:text-lg font-bold text-slate-100 tracking-tight leading-tight mt-0.5">
                Master Mandamus, Accounting Demand & Custodial Settlement Omnibus
              </h1>
            </div>
          </div>

          {/* Action buttons */}
          <div className="flex flex-wrap items-center gap-2">
            {/* Search input */}
            <div className="relative min-w-[180px] sm:min-w-[220px]">
              <Search className="w-3.5 h-3.5 text-slate-400 absolute left-2.5 top-1/2 -translate-y-1/2 pointer-events-none" />
              <input
                type="text"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                placeholder="Search legal text, CUSIP, counts..."
                className="w-full pl-8 pr-3 py-1.5 text-xs bg-slate-950 border border-slate-700/80 rounded-lg text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 transition-all"
              />
              {searchQuery && (
                <button
                  onClick={() => setSearchQuery('')}
                  className="absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-500 hover:text-slate-300 text-xs"
                >
                  ✕
                </button>
              )}
            </div>

            {/* Print / Save PDF */}
            <button
              onClick={handlePrint}
              title="Print official court pleading or save to PDF"
              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-medium border border-slate-700 transition-colors cursor-pointer"
            >
              <Printer className="w-3.5 h-3.5 text-indigo-400" />
              <span className="hidden sm:inline">Print / PDF</span>
            </button>

            {/* Export Markdown / LaTeX */}
            <button
              onClick={onOpenExportModal}
              title="Export complete merged document in LaTeX, Markdown or Plain Text"
              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-medium shadow-sm transition-colors cursor-pointer"
            >
              <Download className="w-3.5 h-3.5" />
              <span>Export</span>
            </button>
          </div>
        </div>

        {/* Sub-bar with view tabs & reading controls */}
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mt-3 pt-2.5 border-t border-slate-800/80">
          {/* Navigation view modes */}
          <div className="flex items-center gap-1 overflow-x-auto pb-1 sm:pb-0">
            <button
              onClick={() => setActiveTab('document')}
              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer whitespace-nowrap ${
                activeTab === 'document'
                  ? 'bg-indigo-500/20 text-indigo-300 border border-indigo-500/40 shadow-xs'
                  : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60'
              }`}
            >
              <FileText className="w-3.5 h-3.5" />
              <span>Master Pleading & Directives</span>
            </button>

            <button
              onClick={() => setActiveTab('verification')}
              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer whitespace-nowrap ${
                activeTab === 'verification'
                  ? 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/40 shadow-xs'
                  : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60'
              }`}
            >
              <Calculator className="w-3.5 h-3.5" />
              <span>Interactive Audit & Math Engine</span>
            </button>

            <button
              onClick={() => setActiveTab('tabsManifest')}
              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer whitespace-nowrap ${
                activeTab === 'tabsManifest'
                  ? 'bg-amber-500/20 text-amber-300 border border-amber-500/40 shadow-xs'
                  : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60'
              }`}
            >
              <Layers className="w-3.5 h-3.5" />
              <span>Execution Package (Tabs A–I)</span>
            </button>

            <button
              onClick={() => setActiveTab('summary')}
              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer whitespace-nowrap ${
                activeTab === 'summary'
                  ? 'bg-purple-500/20 text-purple-300 border border-purple-500/40 shadow-xs'
                  : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60'
              }`}
            >
              <BookOpen className="w-3.5 h-3.5" />
              <span>Harmonization Synthesis</span>
            </button>
          </div>

          {/* Reading & pleading view controls */}
          <div className="flex items-center gap-2 text-xs text-slate-400 self-end sm:self-auto">
            <label className="flex items-center gap-1.5 cursor-pointer select-none text-[11px] hover:text-slate-200">
              <input
                type="checkbox"
                checked={showLineNumbers}
                onChange={(e) => setShowLineNumbers(e.target.checked)}
                className="rounded border-slate-700 bg-slate-900 text-indigo-500 focus:ring-0 focus:ring-offset-0"
              />
              <span>Pleading Lines</span>
            </label>

            <div className="h-3 w-px bg-slate-800"></div>

            <div className="flex items-center gap-1 text-[11px]">
              <span className="text-slate-500">Text:</span>
              <button
                onClick={() => setFontSize('small')}
                className={`px-1.5 py-0.5 rounded cursor-pointer ${fontSize === 'small' ? 'bg-slate-700 text-white font-bold' : 'hover:text-slate-200'}`}
              >
                A
              </button>
              <button
                onClick={() => setFontSize('medium')}
                className={`px-1.5 py-0.5 rounded cursor-pointer text-xs ${fontSize === 'medium' ? 'bg-slate-700 text-white font-bold' : 'hover:text-slate-200'}`}
              >
                A+
              </button>
              <button
                onClick={() => setFontSize('large')}
                className={`px-1.5 py-0.5 rounded cursor-pointer text-sm ${fontSize === 'large' ? 'bg-slate-700 text-white font-bold' : 'hover:text-slate-200'}`}
              >
                A++
              </button>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
};