import { Images } from 'lucide-react';
import { cn } from '@/lib/utils';
import type { DesignWorkspace } from '../../../shared/image-workspace';
import { DesignPlanHistory } from './DesignPlanHistory';

export function DesignHistoryRail({ workspace }: { workspace: DesignWorkspace | null }) {
  const taskCount = workspace?.tasks.length ?? 0;
  const resultCount = workspace?.assets.filter((asset) => asset.generationTaskId).length ?? 0;
  const platform = window.electron?.platform;

  return (
    <aside
      data-testid="image-workspace-history-rail"
      aria-label="历史作品"
      className="flex h-full min-h-0 w-[320px] shrink-0 flex-col border-l border-border/70 bg-background font-sans xl:w-[340px]"
    >
      <header
        data-testid="image-workspace-history-header"
        className={cn(
          'flex h-16 shrink-0 items-center border-b border-border/70 px-4',
          platform === 'darwin' && 'pr-[116px]',
          platform === 'win32' && 'items-end pb-1.5 pr-[156px]',
        )}
      >
        <div className="min-w-0">
          <div className="flex items-center gap-2">
            <Images className="h-4 w-4 shrink-0 text-brand" aria-hidden="true" />
            <h2 className="truncate text-sm font-semibold text-foreground">历史作品</h2>
          </div>
          <p className={cn(
            'mt-1 truncate text-[11px] tabular-nums text-muted-foreground',
            platform === 'win32' && 'hidden',
          )}>
            {taskCount > 0 ? `${taskCount} 次制作 · ${resultCount} 个结果` : '当前设计项目的制作记录'}
          </p>
        </div>
      </header>

      <div data-testid="image-workspace-history-scroll" className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-3">
        {!workspace ? (
          <div className="rounded-2xl border border-dashed border-border/80 bg-surface-subtle/35 px-4 py-7 text-center">
            <Images className="mx-auto h-5 w-5 text-muted-foreground" aria-hidden="true" />
            <p className="mt-3 text-xs font-semibold text-foreground">先选择一个设计项目</p>
            <p className="mt-1 text-[11px] leading-5 text-muted-foreground">
              这个项目生成过的图片和视频会集中显示在这里。
            </p>
          </div>
        ) : taskCount === 0 ? (
          <div className="rounded-2xl border border-dashed border-border/80 bg-surface-subtle/35 px-4 py-7 text-center">
            <Images className="mx-auto h-5 w-5 text-muted-foreground" aria-hidden="true" />
            <p className="mt-3 text-xs font-semibold text-foreground">还没有历史作品</p>
            <p className="mt-1 text-[11px] leading-5 text-muted-foreground">
              确认制作方案后，图片和视频会按时间保留在这里。
            </p>
          </div>
        ) : (
          <DesignPlanHistory workspace={workspace} />
        )}
      </div>
    </aside>
  );
}