'use client';

import { useEffect } from 'react';
import { useEditor } from '@/store/editor';
import { useAuth } from '@/store/auth';
import { TopBar } from './TopBar';
import { MediaLibrary } from './MediaLibrary';
import { Timeline } from './Timeline';
import { Preview } from './Preview';
import { PropertiesPanel } from './PropertiesPanel';
import { RestoreBanner } from './RestoreBanner';
import { ShareRestore } from './ShareRestore';
import { Toast } from './Toast';

export default function Editor() {
  const setToast = useEditor((s) => s.setToast);
  const refreshAuth = useAuth((s) => s.refresh);

  useEffect(() => {
    // Expose store state for headless debugging / e2e tests.
    if (typeof window !== 'undefined') {
      import('@/store/editor').then(({ useEditor }) => {
        type EditorState = ReturnType<typeof useEditor.getState>;
        (window as unknown as { __editor_state: () => EditorState }).__editor_state = () =>
          useEditor.getState();
      }).catch(() => {});
    }
    // Restore login session if token present in localStorage.
    void refreshAuth();
    // Quick "ready" toast after mount
    const t = setTimeout(() => {
      setToast({
        message: 'พร้อมใช้งาน — ลากไฟล์มาวางที่ไลบรารีสื่อเพื่อเริ่มต้น',
        level: 'info',
      });
    }, 600);
    return () => clearTimeout(t);
  }, [setToast, refreshAuth]);

  return (
    <div className="flex flex-col h-screen w-screen overflow-hidden bg-capcut-black">
      <TopBar />
      <div className="flex-1 flex overflow-hidden flex-col md:flex-row">
        <aside className="hidden md:flex w-72 shrink-0 border-r border-capcut-border bg-capcut-dark flex-col">
          <MediaLibrary />
        </aside>
        <details className="md:hidden border-b border-capcut-border bg-capcut-dark">
          <summary className="px-3 py-2 text-xs font-semibold uppercase tracking-wider text-capcut-muted cursor-pointer hover:text-capcut-text list-none flex items-center justify-between">
            <span>📁 ไลบรารีสื่อ</span>
            <span className="text-[10px]">▼</span>
          </summary>
          <div className="h-72 overflow-y-auto border-t border-capcut-border">
            <MediaLibrary />
          </div>
        </details>
        <main className="flex-1 flex flex-col overflow-hidden min-h-0">
          <div className="flex-1 min-h-0 bg-capcut-black">
            <Preview />
          </div>
          <div className="border-t border-capcut-border shrink-0">
            <Timeline />
          </div>
        </main>
        <aside className="hidden lg:flex w-80 shrink-0 border-l border-capcut-border bg-capcut-dark overflow-y-auto">
          <PropertiesPanel />
        </aside>
        <details className="lg:hidden border-t border-capcut-border bg-capcut-dark shrink-0">
          <summary className="px-3 py-2 text-xs font-semibold uppercase tracking-wider text-capcut-muted cursor-pointer hover:text-capcut-text list-none flex items-center justify-between">
            <span>🛠️ คุณสมบัติ</span>
            <span className="text-[10px]">▼</span>
          </summary>
          <div className="p-3 max-h-96 overflow-y-auto border-t border-capcut-border">
            <PropertiesPanel />
          </div>
        </details>
      </div>
      <RestoreBanner />
      <ShareRestore />
      <Toast />
    </div>
  );
}