/**
 * Experimental branch switcher — RTO.25A
 *
 * Smallest branch representation needed to test passive late-result indication.
 * Does NOT replace production branch navigation. Temporary fixture only.
 */

"use client";

import React, { useState, useEffect } from "react";

/* ── Keyframes (injected once via <style> at render) ───── */

const PulseStyle = () => (
  <style>{`
    @keyframes rto-pulse {
      0%, 100% { opacity: 0.6; }
      50% { opacity: 1; }
    }
  `}</style>
);

/* ── Status dot (passive new-result indicator) ─────────── */

function NewIndicator({ visible }) {
  if (!visible) return null;

  return (
    <span
      className="ml-2 inline-flex items-center"
      title="Something new is available here"
      aria-label="New result available"
    >
      <span
        className="relative inline-block h-[8px] w-[8px]"
        style={{ animation: "rto-pulse 3s ease-in-out infinite" }}
      >
        <span
          className="absolute inset-0 rounded-full bg-blue-400/70"
          aria-hidden="true"
        />
      </span>
    </span>
  );
}

/* ── Single branch row ─────────────────────────────────── */

function BranchRow({ id, label, active, isNew, isPaused, origin, onClick }) {
  const isActive = Boolean(active);

  return (
    <button
      onClick={onClick}
      disabled={isActive}
      aria-current={isActive ? "page" : undefined}
      className={`w-full flex items-start gap-2 rounded-md px-3 py-2 text-left transition text-sm ${
        isActive
          ? "bg-blue-50/80 border border-blue-200/60 text-blue-900 font-medium"
          : "text-gray-600 hover:bg-gray-100/70 hover:text-gray-800 border border-transparent"
      } ${!isActive ? "cursor-pointer" : "cursor-default"}`}
    >
      {/* Active indicator — ● vs ○ */}
      <span
        className={`flex-none leading-none text-base ${
          isActive ? "text-blue-500" : "text-gray-400"
        }`}
        aria-hidden="true"
      >
        {isActive ? "●" : "○"}
      </span>

      {/* Branch label + origin */}
      <span className="flex-1 min-w-0">
        <span className="truncate block">{label}</span>
        {origin && (
          <span className="block text-[11px] leading-tight text-gray-500/80 truncate" title={origin}>
            {origin}
          </span>
        )}
      </span>

      {/* Passive indicators: pause + new */}
      <span className="flex items-center gap-1.5 flex-none">
        {!isActive && isPaused && (
          <span
            className="text-[10px] text-gray-400"
            title="Done for now"
          >
            Paused
          </span>
        )}
        {!isActive && <NewIndicator visible={isNew} />}
      </span>
    </button>
  );
}

/* ── Card wrapper ────────────────────────────────────────── */

export default function ExperimentalBranchSwitcher({
  branches = [],
  activeBranchId,
  branchNewResults = {},
  branchPauseState = [],
  onBranchSelect,
}) {
  if (!branches.length) return null;

  return (
    <div
      className="rounded-lg border border-gray-200/60 bg-gray-50/30 p-4"
      role="radiogroup"
      aria-label="Experimental branch switcher — RTO.25A"
    >
      {/* Label — clearly experimental */}
      <h2 className="mb-1 text-[10px] font-semibold tracking-widest uppercase text-gray-600">
        Branches{" "}
        <span className="font-normal text-gray-500">(exp)</span>
      </h2>
      <p className="mb-3 text-[11px] font-medium leading-tight text-gray-500/80">
        Browse branches. Current focus is preserved.
      </p>

      <div className="space-y-1" role="list" aria-label="Available branches">
        {branches.map((branch) => (
          <BranchRow
            key={branch.id}
            id={branch.id}
            label={branch.label}
            active={activeBranchId === branch.id}
            isNew={Boolean(branchNewResults[branch.id])}
            isPaused={branchPauseState.includes(branch.id)}
            origin={branch.origin}
            onClick={() => onBranchSelect?.(branch.id)}
          />
        ))}
      </div>
    </div>
  );
}

export { PulseStyle };