/**
 * Tickets feature container: the sidebar list (F2) plus the full-screen detail
 * overlay (F3/F4/F5/F7). Owns the currently-open `#ref` so a click in the list
 * — or on any inline `#ref` inside the detail — swaps the overlay to that
 * ticket.
 */

import { useState } from "react";

import { TicketsPanel } from "./TicketsPanel";
import { TicketDetail } from "./TicketDetail";

export interface TicketsViewProps {
  projectId: string;
}

export function TicketsView({ projectId }: TicketsViewProps) {
  const [openRef, setOpenRef] = useState<string | null>(null);

  return (
    <>
      <TicketsPanel projectId={projectId} onOpen={setOpenRef} />
      {openRef && (
        <TicketDetail
          key={`${projectId}-${openRef}`}
          projectId={projectId}
          ticketRef={openRef}
          onClose={() => setOpenRef(null)}
          onOpenRef={setOpenRef}
        />
      )}
    </>
  );
}