import { useEffect } from "react";
import {
  useSessionOperations,
  type Operation,
} from "../../../state/session-operations";
import { useEventContext } from "../../../state/events";
import { Icon } from "../../icon";

interface StepConfig {
  label: string;
  index: number;
}

const steps: StepConfig[] = [
  { label: "Created", index: 1 },
  { label: "Building", index: 2 },
  { label: "Starting", index: 3 },
  { label: "Ready", index: 4 },
];

function OperationItem({
  operation,
  onDismiss,
}: {
  operation: Operation;
  onDismiss: () => void;
}) {
  const isDone = operation.status === "success" || operation.status === "error";
  const isError = operation.status === "error";

  return (
    <div
      className={`session-operation-item ${operation.status}`}
      role="status"
      aria-live="polite"
    >
      <div className="session-operation-header">
        <div className="session-operation-title">
          {isError ? (
            <Icon name="error" size="sm" />
          ) : isDone ? (
            <Icon name="success" size="sm" />
          ) : (
            <Icon name="loading" size="sm" />
          )}
          <span className="session-operation-name">{operation.displayName}</span>
        </div>
        {isDone && (
          <button
            type="button"
            className="session-operation-dismiss"
            onClick={onDismiss}
            aria-label="Dismiss"
          >
            <Icon name="close" size="sm" />
          </button>
        )}
      </div>
      <p className="session-operation-message">{operation.message}</p>
      <div className="session-operation-steps">
        {steps.map((step) => {
          const active = operation.step >= step.index;
          const current = operation.step === step.index && !isDone;
          return (
            <span
              key={step.label}
              className={`session-operation-step ${active ? "active" : ""} ${current ? "current" : ""}`}
            >
              {step.label}
            </span>
          );
        })}
      </div>
    </div>
  );
}

export function SessionProgressPanel() {
  const { operations, updateOperationFromEvent, dismissOperation } =
    useSessionOperations();
  const { events } = useEventContext();

  useEffect(() => {
    if (events.length === 0) return;
    const latestEvent = events[events.length - 1];
    updateOperationFromEvent(latestEvent);
  }, [events, updateOperationFromEvent]);

  const visibleOperations = operations.filter(
    (op) =>
      op.status === "pending" ||
      op.status === "active" ||
      (op.status === "success" && Date.now() - op.createdAt < 5000) ||
      op.status === "error",
  );

  if (visibleOperations.length === 0) return null;

  return (
    <div className="session-progress-panel" role="region" aria-label="Session operations">
      <div className="session-progress-panel-header">
        <span className="session-progress-panel-title">Operations</span>
      </div>
      <div className="session-progress-panel-list">
        {visibleOperations.map((operation) => (
          <OperationItem
            key={operation.id}
            operation={operation}
            onDismiss={() => dismissOperation(operation.id)}
          />
        ))}
      </div>
    </div>
  );
}