import React from "react";
import type { Phase, PermissionMode, TokenUsage } from "../types";

interface ActionBarProps {
  phase: Phase;
  hasChanges: boolean;
  isLoading: boolean;
  tokenUsage: TokenUsage;
  permissionMode: PermissionMode;
  onReview: () => void;
  onSubmit: () => void;
  onPermissionModeChange: (mode: PermissionMode) => void;
  disabled: boolean;
  modelName?: string | null;
}

export function ActionBar({
  phase,
  hasChanges,
  isLoading,
  tokenUsage,
  permissionMode,
  onReview,
  onSubmit,
  onPermissionModeChange,
  disabled,
  modelName,
}: ActionBarProps) {
  const totalTokens = tokenUsage.inputTokens + tokenUsage.outputTokens;
  const maxTokens = 200000;
  const usagePercent = Math.min((totalTokens / maxTokens) * 100, 100);

  const getBarColor = () => {
    if (usagePercent > 80) return "#ef4444";
    if (usagePercent > 50) return "#f59e0b";
    return "#10b981";
  };

  return (
    <div className="action-bar">
      <div className="action-bar-left">
        <div className="token-indicator">
          <div className="token-bar">
            <div
              className="token-fill"
              style={{
                width: `${usagePercent}%`,
                backgroundColor: getBarColor(),
              }}
            />
          </div>
          <span className="token-label">
            {(totalTokens / 1000).toFixed(1)}k / 200k
          </span>
        </div>

        {/* ── Model badge ── */}
        {modelName && (
          <span className="model-badge" title="Active model">
            {modelName}
          </span>
        )}

        {phase === "implement" && (
          <label className="permission-toggle">
            <input
              type="checkbox"
              checked={permissionMode === "bypassPermissions"}
              onChange={(e) =>
                onPermissionModeChange(
                  e.target.checked ? "bypassPermissions" : "acceptEdits"
                )
              }
              disabled={disabled}
            />
            Bypass Permissions
          </label>
        )}
      </div>

      <div className="action-bar-right">
        {phase !== "implement" && (
          <>
            <button
              onClick={onReview}
              disabled={disabled || isLoading || !hasChanges}
              className="btn-secondary"
            >
              Review
            </button>
            <button
              onClick={onSubmit}
              disabled={disabled || isLoading}
              className="btn-primary"
            >
              Submit →
            </button>
          </>
        )}
        {phase === "implement" && isLoading && (
          <span className="implementing-status">Implementing...</span>
        )}
      </div>
    </div>
  );
}