'use client';

import type { GenSession } from '@/lib/types';

export default function Sidebar({
  open,
  onToggle,
  sessions,
  currentId,
  onPick,
  onNew,
}: {
  open: boolean;
  onToggle: () => void;
  sessions: GenSession[];
  currentId: string | null;
  onPick: (id: string) => void;
  onNew: () => void;
}) {
  if (!open) {
    return (
      <aside className="w-12 shrink-0 border-r border-zinc-200 bg-white flex flex-col items-center py-4">
        <button
          onClick={onToggle}
          className="w-8 h-8 rounded-lg hover:bg-zinc-100 flex items-center justify-center text-zinc-500"
          title="展开侧栏"
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M9 18l6-6-6-6" />
          </svg>
        </button>
      </aside>
    );
  }

  return (
    <aside className="w-72 shrink-0 border-r border-zinc-200 bg-white flex flex-col">
      <div className="p-4 flex items-center gap-2">
        <button
          onClick={onNew}
          className="btn btn-primary flex-1 text-sm"
        >
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
            <path d="M12 5v14M5 12h14" />
          </svg>
          新会话
        </button>
        <button
          onClick={onToggle}
          className="w-9 h-9 rounded-xl hover:bg-zinc-100 flex items-center justify-center text-zinc-500 transition-colors"
          title="收起侧栏"
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M15 18l-6-6 6-6" />
          </svg>
        </button>
      </div>

      <div className="px-5 pt-1 pb-2 text-[11px] font-medium text-zinc-400 uppercase tracking-wider">
        最近
      </div>

      <div className="flex-1 overflow-y-auto px-3 pb-4 space-y-1">
        {sessions.length === 0 && (
          <div className="px-3 py-8 text-center text-xs text-zinc-400">
            还没有生成记录
          </div>
        )}
        {sessions.map(s => {
          const selectedCount = s.images.filter(i => i.status === 'selected').length;
          const active = currentId === s.id;
          return (
            <button
              key={s.id}
              onClick={() => onPick(s.id)}
              className={`w-full text-left px-3 py-2.5 rounded-xl text-xs transition-all ${
                active
                  ? 'bg-zinc-900 text-white shadow-sm'
                  : 'hover:bg-zinc-100 text-zinc-700'
              }`}
            >
              <div className={`line-clamp-2 font-medium ${active ? 'text-white' : 'text-zinc-800'}`}>
                {s.prompt}
              </div>
              <div className={`mt-1.5 flex justify-between items-center text-[11px] ${active ? 'text-white/60' : 'text-zinc-500'}`}>
                <span>
                  {new Date(s.createdAt).toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })}
                </span>
                <span className="flex items-center gap-1">
                  <span>{s.images.length}</span>
                  {selectedCount > 0 && (
                    <span className={active ? 'text-white' : 'text-zinc-900 font-semibold'}>
                      · ✓{selectedCount}
                    </span>
                  )}
                </span>
              </div>
            </button>
          );
        })}
      </div>
    </aside>
  );
}
