import { useRef, useEffect } from 'react';
import { Sidebar } from './Sidebar';
import { InputBar } from './InputBar';
import { GenerationCard } from './GenerationCard';
import { Toast } from './Toast';
import { UserInfoBar } from './UserInfoBar';
import { useGenerationStore } from '../store/generation';
import styles from './VideoGenerationPage.module.css';

export function VideoGenerationPage() {
  const tasks = useGenerationStore((s) => s.tasks);
  const loadTasks = useGenerationStore((s) => s.loadTasks);
  const scrollRef = useRef<HTMLDivElement>(null);
  const prevCountRef = useRef(tasks.length);

  // Load tasks from backend on mount (persist across page refresh)
  useEffect(() => {
    loadTasks();
  }, [loadTasks]);

  // Auto-scroll to top when new task is added
  useEffect(() => {
    if (tasks.length > prevCountRef.current && scrollRef.current) {
      scrollRef.current.scrollTo({ top: 0, behavior: 'smooth' });
    }
    prevCountRef.current = tasks.length;
  }, [tasks.length]);

  return (
    <div className={styles.layout}>
      <Sidebar />
      <main className={styles.main}>
        <UserInfoBar />
        <div className={styles.contentArea} ref={scrollRef}>
          {tasks.length === 0 ? (
            <div className={styles.emptyArea}>
              <p className={styles.emptyHint}>在下方输入提示词，开始创作 AI 视频</p>
            </div>
          ) : (
            <div className={styles.taskList}>
              {tasks.map((task) => (
                <GenerationCard key={task.id} task={task} />
              ))}
            </div>
          )}
        </div>
        <InputBar />
      </main>
      <Toast />
    </div>
  );
}