'use client';

import React, { useState, useEffect } from 'react';
import { getLeadershipDirectory } from '@/lib/actions/directory';
import { Card } from '@/components/ui/Card';
import { Input } from '@/components/ui/Input';

export default function OrganizationalDirectoryPage() {
  const [tree, setTree] = useState<any[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  
  // Track open node collapses
  const [expandedNodes, setExpandedNodes] = useState<Record<string, boolean>>({});

  useEffect(() => {
    loadDirectory();
  }, []);

  const loadDirectory = async () => {
    setIsLoading(true);
    try {
      const data = await getLeadershipDirectory();
      setTree(data);
      
      // Auto-expand global roots by default
      const defaultExpanded: Record<string, boolean> = {};
      data.forEach(country => {
        defaultExpanded[country._id] = true;
        country.states.forEach((state: any) => {
          defaultExpanded[state._id] = true;
          state.cities.forEach((city: any) => {
            defaultExpanded[city._id] = true;
          });
        });
      });
      setExpandedNodes(defaultExpanded);
    } catch (err) {
      console.error('Failed to load directory structural tree', err);
    } finally {
      setIsLoading(false);
    }
  };

  const toggleNode = (nodeId: string) => {
    setExpandedNodes(prev => ({ ...prev, nodeId: !prev[nodeId] ? true : false }));
    // Wait! Let's do it using exact key replacement:
    setExpandedNodes(prev => ({ ...prev, [nodeId]: !prev[nodeId] }));
  };

  // Safe checks if a center matches search query
  const matchesSearch = (name: string, address: string) => {
    if (!searchQuery.trim()) return true;
    const reg = new RegExp(searchQuery.trim(), 'i');
    return reg.test(name) || reg.test(address);
  };

  if (isLoading) {
    return (
      <div className="text-center py-20">
        <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-brand-primary mx-auto"></div>
        <p className="mt-3 text-sm text-gray-500 font-semibold">Loading structural directory...</p>
      </div>
    );
  }

  return (
    <div className="space-y-6 max-w-4xl mx-auto">
      <div>
        <h1 className="text-2xl md:text-3xl font-bold text-gray-900 font-sans">Parivar Leadership Directory</h1>
        <p className="mt-1 text-sm text-gray-500">Discover geographic structures, leaders assignments, and local Centers.</p>
      </div>

      <div className="relative">
        <Input
          placeholder="Filter centers by name or address..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          className="border-gray-250 py-3"
        />
      </div>

      <Card className="p-6">
        <div className="space-y-4">
          {tree.map(country => (
            <div key={country._id} className="border-b border-gray-150 pb-4 last:border-0 last:pb-0">
              {/* Country Node */}
              <div
                onClick={() => toggleNode(country._id)}
                className="flex items-center gap-2 cursor-pointer font-black text-gray-900 text-lg hover:text-brand-primary select-none"
              >
                <span>{expandedNodes[country._id] ? '▼' : '▶'}</span>
                <span>{country.name}</span>
              </div>

              {expandedNodes[country._id] && (
                <div className="pl-6 mt-3 space-y-4 border-l border-dashed border-gray-200 ml-2">
                  {country.states.map((state: any) => (
                    <div key={state._id} className="space-y-2">
                      {/* State Node */}
                      <div
                        onClick={() => toggleNode(state._id)}
                        className="flex items-center gap-2 cursor-pointer font-extrabold text-gray-800 text-base hover:text-brand-primary select-none"
                      >
                        <span>{expandedNodes[state._id] ? '▼' : '▶'}</span>
                        <span>{state.name}</span>
                      </div>

                      {expandedNodes[state._id] && (
                        <div className="pl-6 mt-2 space-y-4 border-l border-dashed border-gray-200 ml-2">
                          {state.cities.map((city: any) => (
                            <div key={city._id} className="space-y-3">
                              {/* City Node */}
                              <div
                                onClick={() => toggleNode(city._id)}
                                className="flex items-center justify-between cursor-pointer hover:text-brand-primary select-none"
                              >
                                <div className="flex items-center gap-2 font-bold text-gray-900 text-sm">
                                  <span>{expandedNodes[city._id] ? '▼' : '▶'}</span>
                                  <span>City: {city.name}</span>
                                </div>
                                {city.heads.length > 0 && (
                                  <span className="text-[10px] bg-brand-primary/10 text-brand-primary font-bold px-2 py-0.5 rounded">
                                    City Head: {city.heads.map((h: any) => h.name).join(', ')}
                                  </span>
                                )}
                              </div>

                              {expandedNodes[city._id] && (
                                <div className="pl-6 mt-2 space-y-4 border-l border-dashed border-gray-200 ml-2">
                                  {/* City Heads Public Contacts Info */}
                                  {city.heads.map((h: any) => (
                                    (h.publicContactEmail || h.publicContactMobile) && (
                                      <div key={`contact-${h._id}`} className="bg-gray-50 border p-2.5 rounded-lg text-xs flex flex-wrap gap-4 text-gray-600">
                                        <span className="font-bold text-gray-800">City Head Contact ({h.name}):</span>
                                        {h.publicContactEmail && <span>Email: {h.publicContactEmail}</span>}
                                        {h.publicContactMobile && <span>Mob: {h.publicContactMobile}</span>}
                                      </div>
                                    )
                                  ))}

                                  {city.areas.map((area: any) => (
                                    <div key={area._id} className="space-y-2">
                                      {/* Area Node */}
                                      <div className="flex items-center justify-between text-xs border-b border-gray-100 pb-1">
                                        <span className="font-bold text-gray-700">Area: {area.name}</span>
                                        {area.incharges.length > 0 && (
                                          <span className="text-[10px] text-gray-500 font-bold">
                                            Incharge: {area.incharges.map((i: any) => `${i.name}${i.isTemporary ? ' (Temp)' : ''}`).join(', ')}
                                          </span>
                                        )}
                                      </div>

                                      {/* Area Incharge Public Contacts Info */}
                                      <div className="pl-3 space-y-3">
                                        {area.incharges.map((inc: any) => (
                                          (inc.publicContactEmail || inc.publicContactMobile) && (
                                            <div key={`inc-contact-${inc._id}`} className="bg-gray-50 border p-2 rounded text-[10px] flex flex-wrap gap-3 text-gray-500">
                                              <span className="font-bold text-gray-700">Incharge Contact ({inc.name}):</span>
                                              {inc.publicContactEmail && <span>Email: {inc.publicContactEmail}</span>}
                                              {inc.publicContactMobile && <span>Mob: {inc.publicContactMobile}</span>}
                                            </div>
                                          )
                                        ))}

                                        {/* Centers checklist */}
                                        {area.centers.filter((c: any) => matchesSearch(c.name, c.address)).map((center: any) => (
                                          <div key={center._id} className="p-3 border border-gray-200 rounded-xl bg-white shadow-sm flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 text-xs">
                                            <div>
                                              <h5 className="font-extrabold text-gray-950">{center.name}</h5>
                                              <p className="text-gray-500 mt-0.5 font-medium">{center.address}</p>
                                            </div>
                                            <div className="flex flex-col items-start sm:items-end text-[10px] text-gray-400 font-bold">
                                              <span>Contact: {center.contactPerson}</span>
                                              <span className="text-brand-secondary mt-0.5">{center.contactMobile}</span>
                                            </div>
                                          </div>
                                        ))}
                                      </div>
                                    </div>
                                  ))}
                                </div>
                              )}
                            </div>
                          ))}
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}