'use client';

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

function modeLabel(mode?: GenSession['inputMode']) {
  if (mode === 'remix') return '二创';
  if (mode === 'replicate') return '复刻';
  if (mode === 'extend') return '补全';
  return '想法';
}

function projectTitle(session: GenSession) {
  return session.characterSpec?.name || session.prompt || '未命名项目';
}

function ProjectThumbs({ session }: { session: GenSession }) {
  const refs = session.uploadedImages?.map(image => image.url) ?? session.refImages;
  const thumbs = refs.length ? refs : session.images.map(image => image.url);

  return (
    <div className="flex -space-x-2">
      {thumbs.slice(0, 3).map((url, index) => (
        <span key={`${url}-${index}`} className="grid h-8 w-8 overflow-hidden rounded-[8px] bg-white ring-1 ring-white/15">
          <img src={url} alt="" className="h-full w-full object-contain" />
        </span>
      ))}
      {thumbs.length === 0 && (
        <span className="grid h-8 w-8 place-items-center rounded-[8px] bg-white/[0.06] text-[10px] text-white/30 ring-1 ring-white/10">
          -
        </span>
      )}
    </div>
  );
}

function ProjectCard({ session, active, onPick }: { session: GenSession; active: boolean; onPick: () => void }) {
  const selectedCount = session.images.filter(image => image.status === 'selected').length;
  const packCount = session.packs?.length ?? 0;

  return (
    <button
      onClick={onPick}
      className={`project-card-button w-full cursor-pointer rounded-[8px] p-3 text-left transition-all ${
        active
          ? 'bg-[#e6f578]/15 text-white ring-1 ring-[#e6f578]/45 shadow-[0_18px_48px_-34px_rgba(230,245,120,0.85)]'
          : 'bg-white/[0.035] text-white/75 ring-1 ring-white/[0.07] hover:bg-white/[0.06] hover:text-white hover:ring-white/20'
      }`}
    >
      <div className="flex items-start gap-3">
        <ProjectThumbs session={session} />
        <div className="min-w-0 flex-1">
          <div className="flex items-center justify-between gap-2">
            <span className={`rounded-full px-2 py-0.5 text-[9px] ${active ? 'bg-[#e6f578] text-[#081006]' : 'bg-black/25 text-white/45'}`}>
              {modeLabel(session.inputMode)}
            </span>
            <span className="text-[9px] text-white/30">
              {new Date(session.createdAt).toLocaleString('zh-CN', { month: '2-digit', day: '2-digit' })}
            </span>
          </div>
          <div className="mt-2 line-clamp-2 text-[12px] font-semibold leading-snug">
            {projectTitle(session)}
          </div>
          <div className="mt-2 flex items-center gap-2 text-[10px] text-white/40">
            <span>{session.images.length} 图</span>
            <span>{selectedCount} 选</span>
            <span>{packCount} 包</span>
          </div>
        </div>
      </div>
    </button>
  );
}

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="project-dock project-dock--closed w-14 shrink-0">
        <button
          onClick={onToggle}
          className="mt-4 grid h-10 w-10 cursor-pointer place-items-center rounded-[8px] bg-white/[0.06] text-white/60 transition-colors hover:bg-white/[0.10] hover:text-white"
          title="展开项目栏"
          aria-label="展开项目栏"
        >
          <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="project-dock w-[276px] shrink-0 overflow-hidden">
      <div className="flex h-full min-h-0 flex-col p-4">
        <div className="flex items-center gap-3">
          <div className="grid h-10 w-10 place-items-center rounded-[8px] bg-[#e6f578] text-sm font-black text-[#081006]">
            AI
          </div>
          <div className="min-w-0 flex-1">
            <div className="text-[13px] font-semibold tracking-tight text-white">Project Dock</div>
              <div className="text-[10px] text-white/40">一个会话 = 一个项目</div>
          </div>
          <button
            onClick={onToggle}
            className="grid h-9 w-9 cursor-pointer place-items-center rounded-[8px] text-white/55 transition-colors hover:bg-white/[0.08] hover:text-white"
            title="收起项目栏"
            aria-label="收起项目栏"
          >
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M15 18l-6-6 6-6" />
            </svg>
          </button>
        </div>

        <button onClick={onNew} className="btn btn-primary mt-5 w-full justify-center text-sm">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
            <path d="M12 5v14M5 12h14" strokeLinecap="round" />
          </svg>
          新项目
        </button>

        <div className="mt-6 flex items-center justify-between text-[10px] font-semibold uppercase tracking-[0.18em] text-white/35">
          <span>Projects</span>
          <span className="tracking-normal">{sessions.length}</span>
        </div>

        <div className="project-dock-list mt-3 flex-1 space-y-2 overflow-y-auto pr-1">
          {sessions.length === 0 && (
            <div className="rounded-[8px] border border-dashed border-white/10 px-4 py-12 text-center text-xs text-white/30">
              还没有项目
            </div>
          )}
          {sessions.map(session => (
            <ProjectCard
              key={session.id}
              session={session}
              active={currentId === session.id}
              onPick={() => onPick(session.id)}
            />
          ))}
        </div>

        <div className="mt-4 border-t border-white/[0.06] pt-3 text-[10px] text-white/30">
          本地 Docker · 4560
        </div>
      </div>
    </aside>
  );
}
