import React, { useState, useEffect } from 'react';
import { GUIDE_CONTENT } from '../constants';
import { Leaf, Menu, X, GitBranch, ArrowRight } from 'lucide-react';

export const Sidebar: React.FC = () => {
  const [activeId, setActiveId] = useState<string>('');
  const [isMobileOpen, setIsMobileOpen] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setActiveId(entry.target.id);
          }
        });
      },
      { rootMargin: '-20% 0px -60% 0px' }
    );

    GUIDE_CONTENT.forEach((section) => {
      const element = document.getElementById(section.id);
      if (element) observer.observe(element);
    });

    return () => observer.disconnect();
  }, []);

  const scrollToSection = (id: string) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
      setIsMobileOpen(false);
    }
  };

  return (
    <>
      {/* Mobile Toggle & Drawer (unchanged logic, adjusted styling for mobile-only) */}
      <div className="fixed top-4 right-4 z-50 lg:hidden">
        <button 
          onClick={() => setIsMobileOpen(!isMobileOpen)}
          className="p-3 bg-card rounded-full shadow-lg border border-border text-foreground hover:bg-muted transition-colors min-w-[44px] min-h-[44px] flex items-center justify-center"
          aria-label="Toggle Menu"
        >
          {isMobileOpen ? <X size={24} /> : <Menu size={24} />}
        </button>
      </div>

      {isMobileOpen && (
        <div 
            className="fixed inset-0 bg-background/80 backdrop-blur-sm z-40 lg:hidden animate-in fade-in duration-200"
            onClick={() => setIsMobileOpen(false)}
        />
      )}

      {/* Mobile Sidebar Content */}
      <nav className={`
        fixed top-0 left-0 h-full bg-card border-r border-border 
        w-[85vw] max-w-xs transform transition-transform duration-300 z-50 shadow-2xl lg:hidden flex flex-col
        ${isMobileOpen ? 'translate-x-0' : '-translate-x-full'} 
      `}>
         <div className="p-6 pb-2">
            <div className="flex items-center gap-3 mb-8">
                <div className="p-2 bg-primary/10 rounded-lg">
                    <Leaf className="text-primary" size={20} />
                </div>
                <div>
                    <h1 className="font-bold text-foreground text-lg leading-tight">Git Guide</h1>
                    <span className="text-xs text-muted-foreground font-mono">v1.0.0</span>
                </div>
            </div>
        </div>

        <div className="flex-1 overflow-y-auto px-4 custom-scrollbar">
            <ul className="space-y-1 pb-8">
                {GUIDE_CONTENT.map((section) => {
                    const isActive = activeId === section.id;
                    return (
                        <li key={section.id}>
                            <button
                                onClick={() => scrollToSection(section.id)}
                                className={`
                                    w-full text-left px-4 py-3 rounded-md text-base transition-all duration-200
                                    flex items-center justify-between
                                    ${isActive 
                                        ? 'bg-primary/10 text-foreground font-bold' 
                                        : 'text-muted-foreground font-medium active:bg-muted/50'
                                    }
                                `}
                            >
                                <span className="truncate">{section.title.split('. ')[1]}</span>
                                {isActive && (
                                    <span className="w-1.5 h-1.5 rounded-full bg-primary shrink-0"></span>
                                )}
                            </button>
                        </li>
                    );
                })}
            </ul>
        </div>

        <div className="p-6 border-t border-border/50 bg-card">
             <div className="flex items-center gap-2 text-sm text-muted-foreground">
                <GitBranch size={16} />
                <span>Happy Coding! 🌱</span>
            </div>
        </div>
      </nav>

      {/* NEW: Minimal Desktop Navigation */}
      <nav className="hidden lg:block fixed top-0 left-0 h-full w-64 pl-6 pr-4" aria-label="Desktop Navigation">
        {/* Positioning container to match the 'mt-[187px]' feel, centered vertically or with specific top padding */}
        <div className="h-full flex flex-col justify-center max-h-[calc(100vh-40px)] overflow-y-auto overflow-x-hidden custom-scrollbar pb-10">
            
            {/* Header/Logo Area for Desktop */}
            <div className="mb-6 px-3 group cursor-default">
                <div className="flex items-center gap-3 opacity-70 group-hover:opacity-100 transition-opacity">
                     <Leaf className="text-primary" size={18} />
                     <span className="font-bold text-foreground tracking-tight text-sm">Git Guide</span>
                </div>
            </div>

            <ul className="space-y-0.5">
                {GUIDE_CONTENT.map((section) => {
                    const isActive = activeId === section.id;
                    return (
                        <li key={section.id} className="group relative">
                            {/* Hover/Active Pill Background */}
                            <div 
                                className={`
                                    absolute left-0 top-0 z-[-1] h-full w-full rounded-md transition-all duration-200 ease-linear
                                    ${isActive ? 'bg-primary/10 opacity-100' : 'bg-primary/5 opacity-0 group-hover:opacity-100'}
                                `}
                            />
                            
                            <button
                                onClick={() => scrollToSection(section.id)}
                                className={`
                                    relative block w-full text-left px-3 py-1.5 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 rounded-md
                                    ${isActive 
                                        ? 'text-foreground font-bold' 
                                        : 'text-muted-foreground font-medium hover:text-foreground'
                                    }
                                `}
                            >
                                <span className="flex items-center justify-between text-sm">
                                    <span>{section.title.split('. ')[1]}</span>
                                    
                                    {/* Minimal Arrow on Hover/Active */}
                                    <span 
                                        className={`
                                            transition-all duration-200 transform
                                            ${isActive 
                                                ? 'opacity-100 translate-x-0 text-primary' 
                                                : 'opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 text-muted-foreground'
                                            }
                                        `}
                                    >
                                        <ArrowRight size={12} strokeWidth={2.5} />
                                    </span>
                                </span>
                            </button>
                        </li>
                    );
                })}
            </ul>

             {/* Footer Area */}
            <div className="mt-8 px-3 pt-4 border-t border-border/50">
                <div className="flex items-center gap-2 text-[10px] text-muted-foreground hover:text-primary transition-colors cursor-pointer group">
                    <GitBranch size={12} className="group-hover:rotate-12 transition-transform" />
                    <span>v1.0.0</span>
                </div>
            </div>
        </div>
      </nav>
    </>
  );
};