import { useState } from 'react';

interface RerenderControlsProps {
  pendingRegenerations: number[];
  pausePointsModified: boolean;
  adVttUploaded: boolean;
  isRendering: boolean;
  onRender: (options: { whisperRefine: boolean }) => void;
  onClearQueue: () => void;
}

export function RerenderControls({
  pendingRegenerations,
  pausePointsModified,
  adVttUploaded,
  isRendering,
  onRender,
  onClearQueue,
}: RerenderControlsProps) {
  const [whisperRefine, setWhisperRefine] = useState(false);

  const hasChanges = pendingRegenerations.length > 0 || pausePointsModified || adVttUploaded;

  return (
    <div className="bg-purple-50 border border-purple-200 rounded-lg p-4">
      <div className="flex items-start justify-between gap-4">
        <div className="flex-1">
          <h4 className="text-sm font-semibold text-purple-900">
            Render Accessible Video Changes
          </h4>

          {pendingRegenerations.length > 0 && (
            <div className="mt-2 flex items-center gap-2">
              <span className="text-sm text-purple-700">
                {pendingRegenerations.length} TTS cue(s) queued for regeneration
              </span>
              <button
                onClick={onClearQueue}
                className="text-xs text-purple-600 hover:text-purple-800 underline"
              >
                Clear queue
              </button>
            </div>
          )}

          {pausePointsModified && (
            <p className="mt-1 text-sm text-purple-700">
              Pause points have been adjusted
            </p>
          )}

          {adVttUploaded && !pausePointsModified && pendingRegenerations.length === 0 && (
            <p className="mt-1 text-sm text-purple-700">
              Audio Description script was replaced
            </p>
          )}

          {!hasChanges && (
            <p className="mt-1 text-sm text-gray-500">
              No changes to render. Adjust pause points or queue TTS regenerations.
            </p>
          )}
        </div>

        <div className="flex flex-col items-end gap-3">
          <div className="flex items-center gap-2">
            <label className="flex items-center text-sm">
              <input
                type="checkbox"
                checked={whisperRefine}
                onChange={(e) => setWhisperRefine(e.target.checked)}
                className="mr-2 rounded"
                disabled={isRendering}
              />
              Run Whisper pause refinement
            </label>
          </div>

          <p className="text-xs text-gray-500 max-w-xs text-right">
            Enable if you changed the number or position of AD cues. Skip if you only adjusted pause timing.
          </p>

          <button
            onClick={() => onRender({ whisperRefine })}
            disabled={!hasChanges || isRendering}
            className={`px-4 py-2 text-sm font-medium rounded transition-colors ${
              !hasChanges || isRendering
                ? 'bg-gray-200 text-gray-500 cursor-not-allowed'
                : 'bg-purple-600 text-white hover:bg-purple-700'
            }`}
          >
            {isRendering ? (
              <span className="flex items-center gap-2">
                <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
                  <circle
                    className="opacity-25"
                    cx="12"
                    cy="12"
                    r="10"
                    stroke="currentColor"
                    strokeWidth="4"
                    fill="none"
                  />
                  <path
                    className="opacity-75"
                    fill="currentColor"
                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                  />
                </svg>
                Rendering...
              </span>
            ) : (
              'Render Changes'
            )}
          </button>
        </div>
      </div>
    </div>
  );
}
