'use client';

import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { FolderTree, LayoutTemplate, Mail, Plus, PanelLeftClose, X, Command } from 'lucide-react';
import { cn } from '@/lib/utils';
import type { DraftSummary } from '@/lib/db/draft-repo';
import type { TemplateSummary } from '@/lib/db/template-repo';
import type { AutoSaveStatus } from '@/hooks/useAutoSave';
import { useHoverPeek } from '@/hooks/useHoverPeek';
import { SidebarSection, type SidebarSectionHandle } from './SidebarSection';
import { DraftItem } from './DraftItem';
import { AutoSaveIndicator } from './AutoSaveIndicator';
import { SidebarRail } from './SidebarRail';

// Bewusst KEINE localStorage-Persistenz für pinnedOpen.
// Begründung: bei jedem Page-Reload startet der User typisch eine "neue Session" —
// die Versions-Historie ist dann eher Ablenkung als Hilfe. Default = collapsed.
// Innerhalb der Session bleibt pinnedOpen über React-State erhalten.

interface BrandLite { id: string; slug: string; name: string; primaryColor: string }

export interface SidebarProps {
  drafts: DraftSummary[];
  workspaces: BrandLite[];
  currentDraftId: string | null;

  autoSaveStatus: AutoSaveStatus;
  autoSaveLastAt: Date | null;
  autoSaveError?: string | null;

  onSelectDraft: (id: string) => void;
  onCreateDraft: (workspaceId: string) => void;
  onDuplicateDraft: (id: string) => void;
  onDeleteDraft: (id: string) => void;
  onOpenVersions: (id: string) => void;
  onLoadTemplate: (templateId: string) => void;
  onDeleteTemplate: (templateId: string) => void;
}

/**
 * Sidebar mit drei Modi:
 *  - pinned-open:      280px, persistent geöffnet (Standard für neue User).
 *  - pinned-collapsed: 56px Rail, persistent zu — Klick auf Toggle expandiert wieder.
 *  - hover-peek:       wenn collapsed + Maus auf Rail → 280px Panel als Overlay
 *                      (kein Layout-Shift). Mouse-Leave → zurück zum Rail.
 *
 * Default beim ersten Besuch: pinned-open. Self-explanatory: alles ist da.
 */
export function Sidebar(props: SidebarProps) {
  // Default = collapsed (Rail). Bei jedem Page-Reload startet ein "neuer Session"-Flow,
  // bei dem die Versions-Historie mehr ablenkt als hilft. Innerhalb der Session bleibt
  // der Pin-Status über React-State erhalten — keine localStorage-Persistenz.
  const [pinnedOpen, setPinnedOpen] = useState(false);
  const [hydrated, setHydrated] = useState(false);
  const [templates, setTemplates] = useState<TemplateSummary[]>([]);
  const [showNewDraftMenu, setShowNewDraftMenu] = useState(false);

  // Hydration-Marker: erst nach Mount Hover-Peek aktivieren (vermeidet Flicker beim SSR-Hydrate)
  useEffect(() => {
    setHydrated(true);
  }, []);

  // Broadcast der effektiven Sidebar-Width an den Rest des Layouts (z.B. VersionHistoryPanel
  // muss seine `translate-x` daran ausrichten, ohne Prop-Drilling).
  // Bewusst Pixel-Literals, NICHT CSS-Variablen — Tailwind-4/Turbopack kompilliert raw CSS-
  // Tokens aus globals.css aktuell nicht zuverlässig in den Bundle (verifiziert via .next/dev-Cache).
  useEffect(() => {
    if (typeof document === 'undefined') return;
    document.documentElement.style.setProperty(
      '--mf-sidebar-x',
      pinnedOpen ? '280px' : '56px',
    );
  }, [pinnedOpen]);

  // Hover-Peek: aktiviert sobald wir hydratet sind UND nicht pinned-open
  const peek = useHoverPeek({ enabled: hydrated && !pinnedOpen });

  // Templates-Liste laden (refresh bei Änderungen unten)
  const refreshTemplates = useCallback(async () => {
    try {
      const res = await fetch('/api/templates');
      const data = await res.json();
      setTemplates(data.templates ?? []);
    } catch {
      setTemplates([]);
    }
  }, []);
  useEffect(() => { void refreshTemplates(); }, [refreshTemplates]);

  // Toggle Pin-Status — bleibt nur in React-State, nicht in localStorage.
  const togglePin = useCallback(() => {
    setPinnedOpen((prev) => !prev);
    peek.close();
  }, [peek]);

  // Cmd+\ Shortcut
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === '\\') {
        e.preventDefault();
        togglePin();
      }
    };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [togglePin]);

  // Section-Handles für Rail-Click-Shortcuts (Imperative-Handle-Pattern)
  const sectionHandlesRef = useRef<Map<string, SidebarSectionHandle>>(new Map());
  const registerSectionHandle = useCallback((id: string, handle: SidebarSectionHandle) => {
    sectionHandlesRef.current.set(id, handle);
  }, []);

  const onJumpToSection = useCallback((sectionId: 'projects' | 'templates') => {
    // Wenn collapsed: erst pinnen, dann scrollen — sonst sieht der User nichts
    if (!pinnedOpen) {
      setPinnedOpen(true);
      peek.close();
    }
    // Nach einem Tick rendern lassen, dann scrollen
    requestAnimationFrame(() => {
      sectionHandlesRef.current.get(sectionId)?.expandAndScrollTo();
    });
  }, [pinnedOpen, peek]);

  // Workspace-Picker: bei nur einer Workspace → direkt anlegen, sonst Menü öffnen
  const handleNewDraft = useCallback(() => {
    if (props.workspaces.length === 1) {
      props.onCreateDraft(props.workspaces[0].id);
    } else {
      setShowNewDraftMenu((v) => !v);
    }
  }, [props]);

  // Workspace-Gruppen für die Projekte-Sektion: ALLE Workspaces zeigen, auch leere —
  // so sieht der User auf einen Blick wo er Drafts anlegen kann.
  const groups = useMemo(() => {
    return props.workspaces.map((b) => ({
      workspace: b,
      drafts: props.drafts.filter((d) => d.workspaceId === b.id),
    }));
  }, [props.workspaces, props.drafts]);

  // Effektiver Modus: zeigt das Panel oder den Rail?
  const showPanel = pinnedOpen || peek.peeking;
  const isPeeking = !pinnedOpen && peek.peeking;

  return (
    <aside
      role="navigation"
      aria-label="Entwürfe und Vorlagen"
      data-pin={pinnedOpen ? 'open' : 'rail'}
      data-peek={isPeeking}
      style={{
        width: pinnedOpen ? '280px' : '56px',
        transition: 'width 240ms cubic-bezier(0.32, 0.72, 0, 1)',
      }}
      className="relative z-40 h-full shrink-0 border-r border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950"
      {...peek.bind}
    >
      {/* RAIL — sichtbar wenn pinned-collapsed UND nicht peeking */}
      {!pinnedOpen && (
        <div
          aria-hidden={isPeeking}
          className={cn(
            'absolute inset-0 transition-opacity',
            isPeeking ? 'pointer-events-none opacity-0' : 'opacity-100',
          )}
          style={{ transitionDuration: '240ms' }}
        >
          <SidebarRail
            drafts={props.drafts}
            currentDraftId={props.currentDraftId}
            templateCount={templates.length}
            autoSaveStatus={props.autoSaveStatus}
            autoSaveLastAt={props.autoSaveLastAt}
            autoSaveError={props.autoSaveError}
            onExpand={togglePin}
            onJumpToSection={onJumpToSection}
            onNewDraft={handleNewDraft}
          />
        </div>
      )}

      {/* PANEL — sichtbar wenn pinned-open ODER peeking. Bei Peek: absolute Overlay
          über den Rail mit Schatten, sodass der Content rechts NICHT verschoben wird. */}
      {showPanel && (
        <div
          className={cn(
            'absolute left-0 top-0 flex h-full flex-col bg-white dark:bg-zinc-950',
            isPeeking
              ? 'z-30 border-r border-zinc-200 shadow-2xl dark:border-zinc-800'
              : 'border-r border-zinc-200 dark:border-zinc-800',
          )}
          style={{
            width: '280px',
            transition: isPeeking
              ? 'opacity 240ms cubic-bezier(0.32, 0.72, 0, 1), transform 240ms cubic-bezier(0.32, 0.72, 0, 1)'
              : undefined,
          }}
        >
          <SidebarPanel
            drafts={props.drafts}
            workspaces={props.workspaces}
            currentDraftId={props.currentDraftId}
            templates={templates}
            groups={groups}
            showNewDraftMenu={showNewDraftMenu}
            setShowNewDraftMenu={setShowNewDraftMenu}
            autoSaveStatus={props.autoSaveStatus}
            autoSaveLastAt={props.autoSaveLastAt}
            autoSaveError={props.autoSaveError}
            pinnedOpen={pinnedOpen}
            onTogglePin={togglePin}
            onSelectDraft={(id) => { props.onSelectDraft(id); peek.close(); }}
            onCreateDraft={(workspaceId) => { props.onCreateDraft(workspaceId); setShowNewDraftMenu(false); }}
            onDuplicateDraft={props.onDuplicateDraft}
            onDeleteDraft={props.onDeleteDraft}
            onOpenVersions={(id) => { props.onOpenVersions(id); peek.close(); }}
            onLoadTemplate={async (id) => { await props.onLoadTemplate(id); peek.close(); }}
            onDeleteTemplate={async (id) => { await props.onDeleteTemplate(id); await refreshTemplates(); }}
            onAfterTemplateChange={refreshTemplates}
            registerSectionHandle={registerSectionHandle}
          />
        </div>
      )}
    </aside>
  );
}

// ─── SidebarPanel ────────────────────────────────────────────────────────────
// Die "expanded"-Variante: Header + Sektionen + Footer mit Auto-Save.

interface SidebarPanelProps {
  drafts: DraftSummary[];
  workspaces: BrandLite[];
  currentDraftId: string | null;
  templates: TemplateSummary[];
  groups: Array<{ workspace: BrandLite; drafts: DraftSummary[] }>;
  showNewDraftMenu: boolean;
  setShowNewDraftMenu: (v: boolean | ((p: boolean) => boolean)) => void;
  autoSaveStatus: AutoSaveStatus;
  autoSaveLastAt: Date | null;
  autoSaveError?: string | null;
  pinnedOpen: boolean;
  onTogglePin: () => void;
  onSelectDraft: (id: string) => void;
  onCreateDraft: (workspaceId: string) => void;
  onDuplicateDraft: (id: string) => void;
  onDeleteDraft: (id: string) => void;
  onOpenVersions: (id: string) => void;
  onLoadTemplate: (id: string) => Promise<void>;
  onDeleteTemplate: (id: string) => Promise<void>;
  onAfterTemplateChange: () => Promise<void>;
  registerSectionHandle: (id: string, handle: SidebarSectionHandle) => void;
}

function SidebarPanel(p: SidebarPanelProps) {
  return (
    <>
      {/* Header — Logo links, Toggle (oder Close-Hint im Peek) rechts */}
      <div className="flex items-center gap-2 border-b border-zinc-200 px-3 py-3 dark:border-zinc-800">
        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-zinc-900 text-white dark:bg-zinc-100 dark:text-zinc-900">
          <Mail className="h-4 w-4" />
        </div>
        <div className="min-w-0 flex-1">
          <div className="text-sm font-semibold leading-tight">MailForge</div>
          <div className="text-[10px] text-zinc-500">Email Builder</div>
        </div>
        <button
          type="button"
          onClick={p.onTogglePin}
          title={p.pinnedOpen ? 'Sidebar einklappen (⌘\\)' : 'Sidebar pinnen (⌘\\)'}
          aria-label="Sidebar einklappen"
          className="flex h-7 w-7 shrink-0 items-center justify-center rounded text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-100"
        >
          {p.pinnedOpen ? <PanelLeftClose className="h-4 w-4" /> : <X className="h-4 w-4" />}
        </button>
      </div>

      {/* Neuer Entwurf — voller Button mit Beschriftung (selbsterklärend) */}
      <div className="relative px-2 py-2">
        <button
          type="button"
          onClick={() => {
            if (p.workspaces.length === 1) p.onCreateDraft(p.workspaces[0].id);
            else p.setShowNewDraftMenu((v) => !v);
          }}
          className="flex w-full items-center gap-2 rounded-md bg-[#ff006a] px-2.5 py-2 font-medium text-white shadow-sm transition-colors hover:bg-[#e60060]"
        >
          <Plus className="h-4 w-4 shrink-0" />
          <span className="text-xs">Neuer Entwurf</span>
        </button>
        {p.showNewDraftMenu && p.workspaces.length > 1 && (
          <div className="absolute left-2 right-2 z-10 mt-1 overflow-hidden rounded-md border border-zinc-200 bg-white shadow-lg dark:border-zinc-700 dark:bg-zinc-900">
            <div className="border-b border-zinc-100 px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-zinc-500 dark:border-zinc-800">
              Workspace wählen
            </div>
            {p.workspaces.map((b) => (
              <button
                key={b.id}
                type="button"
                onClick={() => p.onCreateDraft(b.id)}
                className="flex w-full items-center gap-2 px-3 py-2 text-left text-xs transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-800"
              >
                <span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: b.primaryColor }} />
                <span className="flex-1 truncate">{b.name}</span>
              </button>
            ))}
          </div>
        )}
      </div>

      {/* Scrollbarer Bereich mit allen Sektionen */}
      <div className="flex-1 overflow-y-auto">
        <SidebarSection
          id="projects"
          title="Projekte"
          count={p.drafts.length}
          icon={<FolderTree className="h-3.5 w-3.5" />}
          registerHandle={p.registerSectionHandle}
        >
          {p.groups.length === 0 ? (
            <div className="px-3 py-2 text-[11px] text-zinc-500">Keine Workspaces konfiguriert.</div>
          ) : (
            p.groups.map((g) => (
              <div key={g.workspace.id} className="mb-1">
                <div className="flex items-center gap-2 px-3 py-1 text-[10px] font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-500">
                  <span className="h-2 w-2 rounded-full" style={{ backgroundColor: g.workspace.primaryColor }} />
                  {g.workspace.name}
                  <span className="ml-auto opacity-60">{g.drafts.length}</span>
                </div>
                {g.drafts.length === 0 ? (
                  <div className="px-3 py-1.5 pl-5 text-[11px] text-zinc-400 dark:text-zinc-600">
                    Noch keine Entwürfe.
                  </div>
                ) : (
                  <div className="pl-2">
                    {g.drafts.map((d) => (
                      <DraftItem
                        key={d.id}
                        draft={d}
                        active={d.id === p.currentDraftId}
                        onSelect={p.onSelectDraft}
                        onOpenVersions={p.onOpenVersions}
                        onDuplicate={p.onDuplicateDraft}
                        onDelete={p.onDeleteDraft}
                      />
                    ))}
                  </div>
                )}
              </div>
            ))
          )}
        </SidebarSection>

        <SidebarSection
          id="templates"
          title="Vorlagen"
          count={p.templates.length}
          icon={<LayoutTemplate className="h-3.5 w-3.5" />}
          registerHandle={p.registerSectionHandle}
        >
          {p.templates.length === 0 ? (
            <div className="px-3 py-2 text-[11px] text-zinc-500">Speichere einen Entwurf als Vorlage zur Wiederverwendung.</div>
          ) : (
            p.templates.map((t) => (
              <div
                key={t.id}
                onClick={() => void p.onLoadTemplate(t.id)}
                className="group flex cursor-pointer items-center gap-2 px-3 py-1.5 text-xs transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-900"
              >
                <span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: t.brandPrimaryColor }} />
                <div className="min-w-0 flex-1 truncate font-medium text-zinc-800 dark:text-zinc-200">{t.name}</div>
                <button
                  type="button"
                  onClick={(e) => { e.stopPropagation(); void p.onDeleteTemplate(t.id); }}
                  className="opacity-0 transition-opacity group-hover:opacity-100"
                  title="Vorlage löschen"
                >
                  <span className="text-[10px] text-red-500 hover:underline">Löschen</span>
                </button>
              </div>
            ))
          )}
        </SidebarSection>
      </div>

      {/* Footer: Auto-Save-Indicator + Tastenkürzel-Hint */}
      <div className="flex items-center justify-between border-t border-zinc-200 px-3 py-2 dark:border-zinc-800">
        <AutoSaveIndicator
          status={p.autoSaveStatus}
          lastSavedAt={p.autoSaveLastAt}
          error={p.autoSaveError}
        />
        <span
          title="Sidebar einklappen"
          className="hidden items-center gap-0.5 text-[10px] text-zinc-400 dark:text-zinc-600 sm:inline-flex"
        >
          <Command className="h-3 w-3" />\
        </span>
      </div>
    </>
  );
}
