'use client';

import { ChevronRight } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';
import { cn } from '@/lib/utils';

/**
 * Aufklappbare Section in der erweiterten Sidebar.
 *
 * Animation:
 *  - Chevron rotiert (rotate-90) — primärer Affordance.
 *  - Inhalt expandiert via grid-rows `[0fr] → [1fr]`-Trick: weicher max-height-Übergang
 *    OHNE feste Höhe definieren zu müssen.
 *
 * Scroll-Target: das wrapping `<section>`-Element bekommt eine `data-section-id` und
 * eine ref. Der Sidebar-Container scrollt darauf, wenn der User im Rail eine
 * Section anklickt.
 *
 * Der collapsed-Mode wurde entfernt — der Rail übernimmt diese Anzeige separat.
 */
export interface SidebarSectionHandle {
  /** Sidebar-Parent ruft das auf um zu dieser Section zu scrollen + sie aufzuklappen. */
  expandAndScrollTo: () => void;
}

export function SidebarSection({
  id,
  title,
  count,
  icon,
  defaultOpen = true,
  children,
  registerHandle,
}: {
  id: string;
  title: string;
  count?: number;
  icon: React.ReactNode;
  defaultOpen?: boolean;
  children: React.ReactNode;
  /** Parent kann eine Handle bekommen, um die Section programmatisch zu öffnen+scrollen. */
  registerHandle?: (id: string, handle: SidebarSectionHandle) => void;
}) {
  const lsKey = `mailforge:sidebar-section:${id}`;
  const [open, setOpen] = useState(defaultOpen);
  const ref = useRef<HTMLElement | null>(null);

  useEffect(() => {
    if (typeof window === 'undefined') return;
    const v = window.localStorage.getItem(lsKey);
    if (v != null) setOpen(v === '1');
  }, [lsKey]);

  // Handle für Parent registrieren (für Rail-Click-Shortcut)
  useEffect(() => {
    if (!registerHandle) return;
    registerHandle(id, {
      expandAndScrollTo: () => {
        setOpen(true);
        if (typeof window !== 'undefined') {
          window.localStorage.setItem(lsKey, '1');
        }
        // Scroll passiert nach dem Render → ein Tick warten
        requestAnimationFrame(() => {
          ref.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
        });
      },
    });
  }, [id, lsKey, registerHandle]);

  const toggle = () => {
    setOpen((prev) => {
      const next = !prev;
      if (typeof window !== 'undefined') {
        window.localStorage.setItem(lsKey, next ? '1' : '0');
      }
      return next;
    });
  };

  return (
    <section ref={ref} data-section-id={id} className="scroll-mt-2">
      <button
        type="button"
        onClick={toggle}
        className="group flex w-full items-center gap-2 px-3 py-2 text-left transition-colors hover:bg-zinc-100/60 dark:hover:bg-zinc-900/60"
        aria-expanded={open}
      >
        <ChevronRight
          className={cn(
            'h-3.5 w-3.5 text-zinc-400 transition-transform duration-200',
            open && 'rotate-90',
          )}
        />
        <span className="flex h-4 w-4 items-center justify-center text-zinc-500 dark:text-zinc-400">
          {icon}
        </span>
        <span className="flex-1 text-[11px] font-semibold uppercase tracking-wider text-zinc-600 dark:text-zinc-400">
          {title}
        </span>
        {typeof count === 'number' && (
          <span className="rounded-full bg-zinc-100 px-1.5 py-0.5 text-[10px] font-medium text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
            {count}
          </span>
        )}
      </button>
      <div
        className={cn(
          'grid transition-[grid-template-rows] duration-300 ease-out',
          open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
        )}
      >
        <div className="overflow-hidden">
          <div className="pb-2">{children}</div>
        </div>
      </div>
    </section>
  );
}
