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

import React, { useMemo, useState } from "react";
import { Employee } from "../types";
import { Users, ChevronDown, ChevronRight, User, ShieldCheck } from "lucide-react";

interface OrgChartProps {
  employees: Employee[];
  onSelectEmployee: (empId: string) => void;
}

export default function OrgChart({ employees, onSelectEmployee }: OrgChartProps) {
  const [expandedNodes, setExpandedNodes] = useState<Record<string, boolean>>({});

  // Parse hierarchy tree
  const orgTree = useMemo(() => {
    // Map of id -> child employees
    const childrenMap: Record<string, Employee[]> = {};
    const topLevel: Employee[] = [];

    employees.forEach(emp => {
      if (!emp.reportingTo || emp.reportingTo === "none") {
        topLevel.push(emp);
      } else {
        if (!childrenMap[emp.reportingTo]) {
          childrenMap[emp.reportingTo] = [];
        }
        childrenMap[emp.reportingTo].push(emp);
      }
    });

    return { topLevel, childrenMap };
  }, [employees]);

  const toggleNode = (id: string) => {
    setExpandedNodes(prev => ({
      ...prev,
      [id]: !prev[id]
    }));
  };

  // Render a recursive node tree
  const renderNode = (emp: Employee, depth: number) => {
    const children = orgTree.childrenMap[emp.id] || [];
    const hasChildren = children.length > 0;
    const isExpanded = expandedNodes[emp.id] !== false; // expanded by default

    return (
      <div key={emp.id} className="ml-6 relative" id={`org-node-${emp.id}`}>
        {/* Draw joining line for hierarchy levels */}
        {depth > 0 && (
          <div className="absolute -left-4 top-0 bottom-0 w-px bg-[#222]">
            <div className="absolute top-5 left-0 w-4 h-px bg-[#222]"></div>
          </div>
        )}

        <div className="flex items-center gap-2 py-2">
          {hasChildren && (
            <button 
              onClick={() => toggleNode(emp.id)}
              className="p-1 hover:bg-[#111] hover:text-white rounded-none text-slate-500"
            >
              {isExpanded ? <ChevronDown className="w-3.5 h-3.5" /> : <ChevronRight className="w-3.5 h-3.5" />}
            </button>
          )}
          {!hasChildren && <div className="w-5.5"></div>}

          {/* Employee Node Card */}
          <div 
            onClick={() => onSelectEmployee(emp.id)}
            className="flex items-center gap-3 bg-[#0a0a0a] border border-[#222] hover:border-[#facc15] hover:bg-[#111] cursor-pointer rounded-none p-3.5 transition-all w-80 group"
          >
            <div className="w-9 h-9 rounded-none bg-[#111] border border-[#222] text-[#facc15] flex items-center justify-center overflow-hidden">
              {emp.photoUrl ? (
                <img src={emp.photoUrl} alt={emp.name} className="w-full h-full object-cover" />
              ) : (
                <User className="w-4 h-4" />
              )}
            </div>
            <div className="flex-1 min-w-0">
              <h5 className="text-xs font-black text-white truncate uppercase group-hover:text-[#facc15] transition-colors">{emp.name}</h5>
              <p className="text-[10px] text-slate-400 truncate uppercase font-bold">{emp.position} • {emp.division}</p>
              <span className="text-[9px] font-mono text-slate-500">NIP: {emp.nip}</span>
            </div>
            
            {/* Badges based on seniority */}
            {["CEO", "COO", "CFO", "CTO", "CHR", "Komisaris"].some(role => emp.position.includes(role)) ? (
              <span className="text-[8px] bg-[#facc15] text-black font-black px-1.5 py-0.5 rounded-none uppercase">C-Suite</span>
            ) : emp.position.includes("Manager") ? (
              <span className="text-[8px] bg-[#111] text-slate-300 border border-[#222] font-black px-1.5 py-0.5 rounded-none uppercase">MGMT</span>
            ) : null}
          </div>
        </div>

        {/* Render children recursively */}
        {hasChildren && isExpanded && (
          <div className="space-y-1">
            {children.map(child => renderNode(child, depth + 1))}
          </div>
        )}
      </div>
    );
  };

  return (
    <div className="bg-[#0a0a0a] border border-[#222] rounded-none p-6 space-y-6 animate-fadeIn" id="org-chart-container">
      <div>
        <h3 className="text-sm font-black text-white uppercase tracking-wider flex items-center gap-2">
          <Users className="w-4 h-4 text-[#facc15]" />
          Struktur Hierarki Organisasi Berjenjang (Atasan & Bawahan)
        </h3>
        <p className="text-xs text-slate-500 font-mono mt-1">Pemetaan "Reporting To" otomatis. Klik pada kartu pegawai untuk melihat profil 360°.</p>
      </div>

      {/* Directorate Overview Matrix */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 bg-[#050505] border border-[#222] p-4">
        {/* CFO */}
        <div className="bg-[#0d0d0d] border border-[#222] p-3.5 space-y-2">
          <div className="flex items-center gap-2 border-b border-[#222] pb-2">
            <ShieldCheck className="w-4 h-4 text-[#facc15]" />
            <div>
              <h4 className="text-xs font-black text-white uppercase">Direktur Keuangan (CFO)</h4>
              <p className="text-[10px] text-slate-400 font-mono">Hendra Wijaya, S.E., Ak., M.M.</p>
            </div>
          </div>
          <div className="space-y-1 pt-1">
            <span className="text-[9px] text-slate-500 font-mono uppercase block">2 Divisi Naungan:</span>
            <div className="text-[11px] font-bold text-slate-200 bg-[#141414] px-2 py-1 border border-[#222]">1. Bendahara</div>
            <div className="text-[11px] font-bold text-slate-200 bg-[#141414] px-2 py-1 border border-[#222]">2. Akuntansi</div>
          </div>
        </div>

        {/* CTO */}
        <div className="bg-[#0d0d0d] border border-[#222] p-3.5 space-y-2">
          <div className="flex items-center gap-2 border-b border-[#222] pb-2">
            <ShieldCheck className="w-4 h-4 text-[#facc15]" />
            <div>
              <h4 className="text-xs font-black text-white uppercase">Direktur IT (CTO)</h4>
              <p className="text-[10px] text-slate-400 font-mono">Ir. Rahmat Hidayat, M.T.</p>
            </div>
          </div>
          <div className="space-y-1 pt-1">
            <span className="text-[9px] text-slate-500 font-mono uppercase block">2 Divisi Naungan:</span>
            <div className="text-[11px] font-bold text-slate-200 bg-[#141414] px-2 py-1 border border-[#222]">1. Developer dan Maintenance</div>
            <div className="text-[11px] font-bold text-slate-200 bg-[#141414] px-2 py-1 border border-[#222]">2. Backend system dan network</div>
          </div>
        </div>

        {/* CHR */}
        <div className="bg-[#0d0d0d] border border-[#222] p-3.5 space-y-2">
          <div className="flex items-center gap-2 border-b border-[#222] pb-2">
            <ShieldCheck className="w-4 h-4 text-[#facc15]" />
            <div>
              <h4 className="text-xs font-black text-white uppercase">Direktur Human Resources (CHR)</h4>
              <p className="text-[10px] text-slate-400 font-mono">Ratna Sarumpaet, S.Psi., M.M.</p>
            </div>
          </div>
          <div className="space-y-1 pt-1">
            <span className="text-[9px] text-slate-500 font-mono uppercase block">2 Divisi Naungan:</span>
            <div className="text-[11px] font-bold text-slate-200 bg-[#141414] px-2 py-1 border border-[#222]">1. Payroll dan kesejahteraan</div>
            <div className="text-[11px] font-bold text-slate-200 bg-[#141414] px-2 py-1 border border-[#222]">2. Rekrutmen dan jenjang Karir</div>
          </div>
        </div>

        {/* COO */}
        <div className="bg-[#0d0d0d] border border-[#222] p-3.5 space-y-2">
          <div className="flex items-center gap-2 border-b border-[#222] pb-2">
            <ShieldCheck className="w-4 h-4 text-[#facc15]" />
            <div>
              <h4 className="text-xs font-black text-white uppercase">Direktur Operasional (COO)</h4>
              <p className="text-[10px] text-slate-400 font-mono">Susi Susanti, M.T.</p>
            </div>
          </div>
          <div className="space-y-1 pt-1">
            <span className="text-[9px] text-slate-500 font-mono uppercase block">3 Divisi Naungan:</span>
            <div className="text-[11px] font-bold text-slate-200 bg-[#141414] px-2 py-1 border border-[#222]">1. General Affair (GA)</div>
            <div className="text-[11px] font-bold text-slate-200 bg-[#141414] px-2 py-1 border border-[#222]">2. Marketing dan Legal Corporate</div>
            <div className="text-[11px] font-bold text-slate-200 bg-[#141414] px-2 py-1 border border-[#222]">3. Core bisnis (Dev & Sewa Web)</div>
          </div>
        </div>
      </div>

      <div className="border border-[#222] rounded-none p-6 bg-[#050505] overflow-x-auto min-h-96">
        <div className="min-w-fit space-y-2">
          {orgTree.topLevel.map(top => renderNode(top, 0))}
          {orgTree.topLevel.length === 0 && (
            <p className="text-center py-12 text-xs text-slate-500 italic font-mono uppercase">Tidak ada struktur organisasi terdeteksi. Silakan tetapkan supervisor.</p>
          )}
        </div>
      </div>
    </div>
  );
}