import React from 'react';
import { 
  FileCheck, 
  ChevronRight, 
  Scale, 
  Building, 
  Landmark, 
  Mail, 
  ExternalLink,
  ShieldAlert,
  Hash,
  Database
} from 'lucide-react';
import { UNIFIED_DOCUMENT_PARTS, COURT_ROUTING_TABLE, COUNTERPARTIES_TABLE, UNIFIED_DOCUMENT_METADATA } from '../data/unifiedDocumentData';

interface Props {
  activePartId: string;
  onSelectPart: (partId: string) => void;
  searchFilter: string;
}

export const NavigationSidebar: React.FC<Props> = ({
  activePartId,
  onSelectPart,
  searchFilter
}) => {
  const [showCourtsList, setShowCourtsList] = React.useState(false);
  const [showCounterparties, setShowCounterparties] = React.useState(false);

  const filteredParts = UNIFIED_DOCUMENT_PARTS.filter(part => {
    if (!searchFilter) return true;
    const query = searchFilter.toLowerCase();
    return (
      part.title.toLowerCase().includes(query) ||
      part.roman.toLowerCase().includes(query) ||
      part.subsections.some(sub => sub.toLowerCase().includes(query))
    );
  });

  return (
    <aside className="w-full md:w-80 lg:w-96 bg-slate-900/90 border-r border-slate-800 shrink-0 p-4 flex flex-col gap-4 overflow-y-auto max-h-[calc(100vh-120px)] sticky top-28 no-print custom-scrollbar">
      {/* Table of contents header */}
      <div className="flex items-center justify-between border-b border-slate-800 pb-2">
        <div className="flex items-center gap-2">
          <Scale className="w-4 h-4 text-indigo-400" />
          <h2 className="text-xs font-bold uppercase tracking-wider text-slate-300">
            Unified Master Table of Contents
          </h2>
        </div>
        <span className="text-[11px] font-mono text-indigo-400 px-1.5 py-0.5 rounded bg-indigo-500/10">
          12 Parts
        </span>
      </div>

      {/* Part list */}
      <div className="flex flex-col gap-1.5">
        {filteredParts.length === 0 ? (
          <div className="text-xs text-slate-500 italic p-3 text-center">
            No sections match "{searchFilter}"
          </div>
        ) : (
          filteredParts.map((part) => {
            const isActive = activePartId === part.id;
            return (
              <div key={part.id} className="flex flex-col">
                <button
                  onClick={() => onSelectPart(part.id)}
                  className={`text-left p-2.5 rounded-lg text-xs transition-all flex items-start gap-2.5 cursor-pointer ${
                    isActive
                      ? 'bg-indigo-600/20 text-indigo-200 border border-indigo-500/50 shadow-sm font-semibold'
                      : 'text-slate-300 hover:bg-slate-800/80 hover:text-white'
                  }`}
                >
                  <span className="font-serif font-bold text-amber-400/90 shrink-0 min-w-[28px] pt-0.5">
                    Part {part.roman}
                  </span>
                  <div className="flex-1 min-w-0">
                    <div className="truncate font-medium">{part.title}</div>
                    <div className="text-[10px] text-slate-500 truncate mt-0.5">
                      {part.subsections[0]}
                    </div>
                  </div>
                  <ChevronRight className={`w-3.5 h-3.5 mt-0.5 text-slate-500 shrink-0 transition-transform ${isActive ? 'rotate-90 text-indigo-400' : ''}`} />
                </button>

                {/* Subsections when active */}
                {isActive && (
                  <div className="ml-8 my-1 pl-2.5 border-l border-indigo-500/30 flex flex-col gap-1 py-1">
                    {part.subsections.map((sub, idx) => (
                      <div
                        key={idx}
                        className="text-[11px] text-slate-400 hover:text-indigo-300 py-0.5 transition-colors cursor-pointer"
                        onClick={() => onSelectPart(part.id)}
                      >
                        {sub}
                      </div>
                    ))}
                  </div>
                )}
              </div>
            );
          })
        )}
      </div>

      {/* Accordion 1: Court Intake Routing List */}
      <div className="border border-slate-800 rounded-lg p-3 bg-slate-950/50 mt-2">
        <button
          onClick={() => setShowCourtsList(!showCourtsList)}
          className="w-full flex items-center justify-between text-xs font-semibold text-slate-300 hover:text-white cursor-pointer"
        >
          <div className="flex items-center gap-2">
            <Landmark className="w-3.5 h-3.5 text-blue-400" />
            <span>Court Electronic Intake Endpoints</span>
          </div>
          <span className="text-[10px] text-slate-500">{showCourtsList ? 'Hide' : 'Show'}</span>
        </button>

        {showCourtsList && (
          <div className="mt-2.5 pt-2 border-t border-slate-800 flex flex-col gap-2">
            {COURT_ROUTING_TABLE.map((court, i) => (
              <div key={i} className="text-[11px] bg-slate-900/60 p-2 rounded border border-slate-800/80">
                <div className="font-semibold text-slate-200">{court.courtName}</div>
                <div className="text-indigo-400 font-mono text-[10px] break-all mt-0.5">{court.email}</div>
                <div className="text-slate-500 text-[10px] mt-0.5">{court.jurisdiction}</div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Accordion 2: Counterparties and Depository Desks */}
      <div className="border border-slate-800 rounded-lg p-3 bg-slate-950/50">
        <button
          onClick={() => setShowCounterparties(!showCounterparties)}
          className="w-full flex items-center justify-between text-xs font-semibold text-slate-300 hover:text-white cursor-pointer"
        >
          <div className="flex items-center gap-2">
            <Building className="w-3.5 h-3.5 text-amber-400" />
            <span>BNY Mellon & Counterparties</span>
          </div>
          <span className="text-[10px] text-slate-500">{showCounterparties ? 'Hide' : 'Show'}</span>
        </button>

        {showCounterparties && (
          <div className="mt-2.5 pt-2 border-t border-slate-800 flex flex-col gap-2">
            {COUNTERPARTIES_TABLE.map((item, i) => (
              <div key={i} className="text-[11px] bg-slate-900/60 p-2 rounded border border-slate-800/80">
                <div className="text-[10px] font-bold uppercase tracking-wider text-amber-400/90">{item.role}</div>
                <div className="font-semibold text-slate-200">{item.name}</div>
                <div className="text-slate-400 text-[10px]">{item.address}</div>
                <div className="text-indigo-400 font-mono text-[10px] break-all">{item.email}</div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* On-chain endpoint badge */}
      <div className="p-3 bg-slate-950 border border-slate-800/90 rounded-lg text-[11px]">
        <div className="flex items-center justify-between text-slate-400 mb-1">
          <span className="flex items-center gap-1.5 font-medium text-slate-300">
            <Database className="w-3 h-3 text-emerald-400" />
            <span>Digital Reserve Vault</span>
          </span>
          <span className="font-mono text-[10px] text-emerald-400">ACTIVE</span>
        </div>
        <div className="font-mono text-[10px] text-slate-400 break-all bg-slate-900 p-1.5 rounded border border-slate-800">
          {UNIFIED_DOCUMENT_METADATA.onChainBitcoinReserveAddress}
        </div>
        <div className="text-[10px] text-slate-500 mt-1">
          M&T DTC ABA: <span className="font-mono text-slate-400">{UNIFIED_DOCUMENT_METADATA.abaRouting}</span> | SWIFT: <span className="font-mono text-slate-400">{UNIFIED_DOCUMENT_METADATA.swiftCode}</span>
        </div>
      </div>
    </aside>
  );
};