"use client";
import { ChevronDown } from "lucide-react";
import React, { useEffect, useState } from "react";
import { FadeUp } from "./animations/FadeUp";
import { StaggerContainer, StaggerItem } from "./animations/StaggerContainer";
import { JobService } from "@/services/job.service";

interface DirectorySection {
  title: string;
  links: string[];
}

export function DirectoryLinks() {
  const [directoryData, setDirectoryData] = useState<DirectorySection[]>([]);
  const [loading, setLoading] = useState(true);
  const [expandedSections, setExpandedSections] = useState<Record<number, boolean>>({});

  const toggleSection = (index: number) => {
    setExpandedSections(prev => ({
      ...prev,
      [index]: !prev[index]
    }));
  };

  useEffect(() => {
    async function loadData() {
      try {
        const data = await JobService.getDirectoryLinks();
        if (data && Array.isArray(data)) {
          setDirectoryData(data);
        }
      } catch (error) {
        console.error("Failed to load directory links:", error);
      } finally {
        setLoading(false);
      }
    }
    loadData();
  }, []);

  if (loading || directoryData.length === 0) return null;

  return (
    <section className="bg-white py-12">
      <div className="container mx-auto px-4 max-w-7xl">
        <div className="p-0">
          <StaggerContainer staggerDelay={0.1}>
          {directoryData.map((section, index) => (
            <StaggerItem 
              key={index}
              yOffset={20}
              className="border-b border-gray-100 last:border-0 py-4 first:pt-0 last:pb-0"
            >
              {/* Title */}
              <div className="mb-4">
                <h3 className="text-gray-900 font-bold text-base md:text-lg inline-block relative">
                  {section.title}
                  <span className="absolute -bottom-1 left-0 w-8 h-[2px] bg-blue-600"></span>
                </h3>
              </div>
              
              {/* Links Grid */}
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-2 gap-x-6 mb-3">
                {(expandedSections[index] ? section.links : section.links.slice(0, 12)).map((link, idx) => (
                  <a 
                    key={idx} 
                    href="#" 
                    className="text-[#4b5563] hover:text-blue-600 text-[13px] transition-colors truncate"
                  >
                    {link}
                  </a>
                ))}
              </div>
              
              {/* View More */}
              {section.links.length > 12 && (
                <div className="flex justify-center mt-4">
                  <button 
                    onClick={() => toggleSection(index)}
                    className="flex items-center gap-1 text-gray-700 hover:text-gray-900 text-[13px] font-medium transition-colors"
                  >
                    {expandedSections[index] ? "View Less" : "View More"} 
                    <ChevronDown className={`w-4 h-4 transition-transform ${expandedSections[index] ? 'rotate-180' : ''}`} />
                  </button>
                </div>
              )}
            </StaggerItem>
          ))}
          </StaggerContainer>
        </div>
      </div>
    </section>
  );
}