"use client";

import { ConversationGroup } from "./ConversationGroup";
import { RepositorySelector } from "./RepositorySelector";
import type { groupByDate } from "@/lib/sessions";
import type { Repository } from "@/hooks/useRepositories";

interface ChatSidebarProps {
  groupedSessions: ReturnType<typeof groupByDate>;
  activeSessionId: string | null;
  onSelectSession: (id: string) => void;
  onDeleteSession: (id: string) => void;
  onNewSession: () => void;
  onClose?: () => void;
  onToggleSidebar?: () => void;
  repositories: Repository[];
  selectedRepositoryId: string | null;
  onSelectRepository: (id: string) => void;
  onManageRepositories: () => void;
}

export function ChatSidebar({
  groupedSessions,
  activeSessionId,
  onSelectSession,
  onDeleteSession,
  onNewSession,
  onClose,
  onToggleSidebar,
  repositories,
  selectedRepositoryId,
  onSelectRepository,
  onManageRepositories,
}: ChatSidebarProps) {
  return (
    <>
      <div className="hidden max-md:block sidebar-overlay" onClick={onClose} />
      <aside className="w-60 h-full bg-rp-bg border-r border-rp-border/10 flex flex-col sidebar-enter max-md:sidebar-panel">
        <div className="flex items-center gap-1 px-3 pt-3 pb-0 shrink-0">
          <div className="flex-1 min-w-0">
            <RepositorySelector
              repositories={repositories}
              selectedId={selectedRepositoryId}
              onSelect={onSelectRepository}
              onManage={onManageRepositories}
            />
          </div>
          {onToggleSidebar && (
            <button
              onClick={onToggleSidebar}
              className="shrink-0 p-1.5 text-rp-muted hover:text-rp-text rounded-lg hover:bg-rp-surface transition-colors"
              title="Close sidebar"
            >
              <svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
                <rect x="2" y="3" width="14" height="12" rx="2" />
                <path d="M7 3V15" />
              </svg>
            </button>
          )}
        </div>

        <div className="p-3 shrink-0">
          <button
            onClick={onNewSession}
            disabled={!selectedRepositoryId}
            className="w-full flex items-center gap-2 px-3 py-2.5 text-r-sm text-rp-muted border border-rp-border/40 rounded-lg hover:bg-rp-surface hover:text-rp-text transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
          >
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><path d="M8 3V13M3 8H13" /></svg>
            <span>New chat</span>
          </button>
        </div>

        <div className="flex-1 overflow-y-auto px-2 pb-3">
          {!selectedRepositoryId ? (
            <div className="px-3 py-4 text-r-xs text-rp-muted text-center">Select a repository to start</div>
          ) : groupedSessions.length === 0 ? (
            <div className="px-3 py-4 text-r-xs text-rp-muted text-center">No conversations yet</div>
          ) : (
            groupedSessions.map((group, i) => (
              <ConversationGroup
                key={group.label}
                label={group.label}
                sessions={group.sessions}
                activeSessionId={activeSessionId}
                onSelect={onSelectSession}
                onDelete={onDeleteSession}
                isFirst={i === 0}
              />
            ))
          )}
        </div>
      </aside>
    </>
  );
}