import {
  COMPOSER_VOICE_INPUT_START_EVENT,
  composerVoiceEventScope,
} from "../composer-voice-events";
import type {
  ClientVoiceInputConfig,
  OpenGeniClient,
  TranscriptionAdapter,
  WorkspaceTranscriptionPolicy,
} from "@opengeni/sdk";
import {
  ClipboardPasteIcon,
  LoaderCircleIcon,
  MicIcon,
  RefreshCwIcon,
  SquareIcon,
  Trash2Icon,
  XIcon,
} from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { useEffect, useState, type MouseEvent, type ReactElement } from "react";
import { cn } from "../lib/cn";
import { useComposerFooterSignal } from "../lib/composer-footer-signals";
import { useVoiceInput } from "../hooks/use-voice-input";
import type { VoiceRecordingStore } from "../voice-recording-store";
import { useChatComposer } from "./composer";
import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
import { ShimmerText } from "../timeline/shimmer-text";
import { useOpenGeniText, type OpenGeniText } from "../messages/runtime";

function Tip({ tip, children }: { tip: string; children: ReactElement }) {
  return (
    <Tooltip>
      <TooltipTrigger asChild>{children}</TooltipTrigger>
      <TooltipContent side="top">{tip}</TooltipContent>
    </Tooltip>
  );
}

export type ComposerTranscriptionMessages = {
  start: string;
  stop: string;
  cancel: string;
  retry: string;
  /** Transcribe a recording that was stopped without transcribing or recovered. */
  transcribeSaved: string;
  /** Shown near the automatic stop; `{seconds}` is replaced. */
  timeRemaining: string;
  pauseRetrying: string;
  requestingPermission: string;
  recording: string;
  saving: string;
  transcribing: string;
  retrying: string;
  recovered: string;
  recoveredTranscript: string;
  insertRecoveredTranscript: string;
  discardRecovered: string;
  unavailableDisabled: string;
  unavailable: string;
  errorPermissionDenied: string;
  errorNotSupported: string;
  errorUnavailable: string;
  errorInsufficientCredits: string;
  errorAllowanceExhausted: string;
  errorPolicyBlocked: string;
  errorTooLarge: string;
  errorInvalidAudio: string;
  errorStorageUnavailable: string;
  errorRetryable: string;
  errorHandoffUncertain: string;
  errorUnknown: string;
};

const defaultMessages = (t: OpenGeniText): ComposerTranscriptionMessages => ({
  start: t("composerTranscriptionControl.startVoiceInput"),
  stop: t("composerTranscriptionControl.stopAndTranscribe"),
  cancel: t("composerTranscriptionControl.stopWithoutTranscribing"),
  retry: t("composerTranscriptionControl.retryVoiceInput"),
  transcribeSaved: t("composerTranscriptionControl.transcribeSavedRecording"),
  timeRemaining: t("composerTranscriptionControl.stopsAndTranscribesInSeconds", {
    seconds: "{seconds}",
  }),
  pauseRetrying: t("composerTranscriptionControl.pauseAutomaticRetry"),
  requestingPermission: t("composerTranscriptionControl.requestingMicrophone"),
  recording: t("composerTranscriptionControl.recordingPressEscapeToStop"),
  saving: t("composerTranscriptionControl.savingAudioLocally"),
  transcribing: t("composerTranscriptionControl.transcribing"),
  retrying: t("composerTranscriptionControl.savedRetryingTranscription"),
  recovered: t("composerTranscriptionControl.recordingSavedOnThisDevice"),
  recoveredTranscript: t("composerTranscriptionControl.transcriptSavedInsertItInto"),
  insertRecoveredTranscript: t("composerTranscriptionControl.insertSavedTranscript"),
  discardRecovered: t("composerTranscriptionControl.discardSavedRecording"),
  unavailableDisabled: t("composerTranscriptionControl.voiceInputIsUnavailableWhile"),
  unavailable: t("composerTranscriptionControl.voiceInputIsUnavailableFor"),
  errorPermissionDenied: t("composerTranscriptionControl.microphoneAccessIsBlockedAllow"),
  errorNotSupported: t("composerTranscriptionControl.voiceInputIsNotSupported"),
  errorUnavailable: t("composerTranscriptionControl.voiceInputIsNotConfigured"),
  errorInsufficientCredits: t("composerTranscriptionControl.voiceInputNeedsCreditsRecording"),
  errorAllowanceExhausted: t("composerTranscriptionControl.usageLimitReachedRecordingSaved"),
  errorPolicyBlocked: t("composerTranscriptionControl.voiceInputIsnTAllowed"),
  errorTooLarge: t("composerTranscriptionControl.recordingIsTooLargeTry"),
  errorInvalidAudio: t("composerTranscriptionControl.theRecordingCouldNotBe"),
  errorStorageUnavailable: t("composerTranscriptionControl.voiceInputStoppedBecauseAudio"),
  errorRetryable: t("composerTranscriptionControl.savedTranscriptionFailedRetryWhen"),
  errorHandoffUncertain: t("composerTranscriptionControl.transcriptSavedCheckYourDraft"),
  errorUnknown: t("composerTranscriptionControl.voiceInputCouldNotStart"),
});

export type ComposerTranscriptionControlProps = {
  client?: Pick<OpenGeniClient, "transcribeAudio"> | null | undefined;
  workspaceId?: string | undefined;
  capability?: ClientVoiceInputConfig | null | undefined;
  workspaceEnabled?: boolean | undefined;
  /** @deprecated Native MediaRecorder input no longer uses host adapters. */
  adapter?: TranscriptionAdapter | null | undefined;
  /** @deprecated Native MediaRecorder input no longer uses host policies. */
  policy?: WorkspaceTranscriptionPolicy | undefined;
  /** @deprecated Native input uses the server capability duration limit. */
  lifecycleTimeouts?: unknown;
  /** @deprecated Native input does not expose provider diagnostics. */
  onDiagnostic?: unknown;
  messages?: Partial<ComposerTranscriptionMessages> | undefined;
  className?: string | undefined;
  /** Test/embed seam. Production defaults to origin-scoped IndexedDB. */
  createRecordingStore?: (() => VoiceRecordingStore) | undefined;
  /** Test/embed seam. Production acquires a coordinated browser-document owner lease. */
  createOwnerId?: (() => string) | undefined;
  /** Hide while realtime voice owns the mic — collapses with a layout-friendly exit. */
  suppressed?: boolean | undefined;
};

const WAVEFORM_BARS = 18;
const WAVEFORM_BAR_KEYS = Array.from(
  { length: WAVEFORM_BARS },
  (_, index) => `voice-waveform-bar-${index + 1}`,
);

/** One provider-neutral microphone control for the nearest editable composer. */
export function ComposerTranscriptionControl({
  client = null,
  workspaceId = "",
  capability = null,
  workspaceEnabled = false,
  messages: overrides,
  className,
  createRecordingStore,
  createOwnerId,
  suppressed = false,
}: ComposerTranscriptionControlProps) {
  const t = useOpenGeniText();
  const composer = useChatComposer();
  const messages = { ...defaultMessages(t), ...overrides };
  const transcription = useVoiceInput({
    client,
    workspaceId,
    capability,
    enabled: workspaceEnabled && !suppressed,
    value: composer.value,
    setValue: composer.setValue,
    focusInput: composer.focusInput,
    disabled: composer.disabled,
    createRecordingStore,
    createOwnerId,
  });
  const { status } = transcription;
  const retrying = status === "retrying";
  const capturing = status === "requesting-permission" || status === "recording";

  const cancelTranscription = transcription.cancel;
  const discardTranscription = transcription.discard;
  const hasRecoverableRecording = transcription.hasRecoverableRecording;
  useEffect(() => {
    if (!suppressed) return;
    if (status === "recording" || status === "requesting-permission") {
      cancelTranscription();
    } else if (status === "error" && !hasRecoverableRecording) {
      // Live voice took over: a stale start error (nothing saved) would only
      // duplicate whatever live voice reports next to it.
      void discardTranscription();
    }
  }, [cancelTranscription, discardTranscription, hasRecoverableRecording, status, suppressed]);
  const active = capturing || status === "saving" || status === "transcribing";
  const recoverable =
    transcription.hasRecoverableRecording &&
    (retrying || status === "recovered" || status === "transcript-ready" || status === "error");
  const savedTranscript = status === "transcript-ready" && transcription.savedTranscript !== null;
  const unavailableMessage = composer.disabled
    ? messages.unavailableDisabled
    : !capability?.available || !workspaceEnabled
      ? messages.unavailable
      : !transcription.available
        ? messages.errorStorageUnavailable
        : null;
  const idleLabel = unavailableMessage ?? (status === "error" ? messages.retry : messages.start);
  const errorMessage = transcription.error
    ? transcriptionErrorMessage(transcription.error, messages)
    : null;
  const announcement =
    status === "requesting-permission"
      ? messages.requestingPermission
      : status === "recording"
        ? messages.recording
        : status === "saving"
          ? messages.saving
          : status === "transcribing"
            ? messages.transcribing
            : retrying
              ? messages.retrying
              : status === "recovered"
                ? messages.recovered
                : status === "transcript-ready"
                  ? messages.recoveredTranscript
                  : status === "error"
                    ? (errorMessage ?? messages.errorUnknown)
                    : unavailableMessage;

  const recoveredLabel = savedTranscript
    ? (errorMessage ?? messages.recoveredTranscript)
    : retrying
      ? messages.retrying
      : status === "error"
        ? (errorMessage ?? messages.errorRetryable)
        : messages.recovered;

  function start(event: MouseEvent<HTMLButtonElement>) {
    if (unavailableMessage) {
      event.preventDefault();
      return;
    }
    composerVoiceEventScope(event.currentTarget)?.dispatchEvent(
      new Event(COMPOSER_VOICE_INPUT_START_EVENT),
    );
    void transcription.start();
  }

  const needsAttention = !capturing && (recoverable || (status === "error" && !!errorMessage));
  useComposerFooterSignal("transcription-capturing", !suppressed && capturing);
  useComposerFooterSignal("transcription-attention", !suppressed && needsAttention);

  return (
    <AnimatePresence initial={false}>
      {suppressed ? null : (
        <motion.span
          key="composer-dictate"
          initial={{ opacity: 0, width: 0 }}
          animate={{ opacity: 1, width: "auto" }}
          exit={{ opacity: 0, width: 0 }}
          transition={{ duration: 0.36, ease: [0.22, 1, 0.36, 1] }}
          className={cn(
            "inline-flex min-w-0 overflow-hidden",
            // Mobile capture mode reserves the footer for this control. Keep the
            // shell itself from shrinking and clipping its trailing actions.
            capturing && "shrink-0",
            className,
          )}
          data-transcription-status={status}
          data-transcription-capturing={capturing ? "" : undefined}
          data-transcription-attention={needsAttention ? "" : undefined}
        >
          <span className="inline-flex min-w-0 items-center gap-1.5">
            <AnimatePresence mode="popLayout" initial={false}>
              {recoverable ? (
                <motion.span
                  key="recovered"
                  initial={{ opacity: 0, scale: 0.96 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0, scale: 0.96 }}
                  transition={{ duration: 0.16, ease: [0.22, 1, 0.36, 1] }}
                  className={cn(
                    "inline-flex h-8 min-w-0 items-center gap-1 rounded-og-md border border-og-border/80",
                    "bg-og-surface-2/70 pl-2 pr-1 pointer-coarse:h-11",
                  )}
                >
                  <span
                    title={recoveredLabel}
                    className="og-transcription-recovered-label max-w-56 line-clamp-2 text-og-xs leading-tight text-og-fg-muted max-sm:max-w-32"
                  >
                    {recoveredLabel}
                  </span>
                  <Tip
                    tip={
                      savedTranscript
                        ? messages.insertRecoveredTranscript
                        : retrying
                          ? messages.pauseRetrying
                          : status === "recovered"
                            ? messages.transcribeSaved
                            : messages.retry
                    }
                  >
                    <button
                      type="button"
                      disabled={composer.disabled && !retrying}
                      onClick={() =>
                        savedTranscript
                          ? void transcription.insertSavedTranscript()
                          : retrying
                            ? transcription.cancel()
                            : transcription.retry()
                      }
                      aria-label={
                        savedTranscript
                          ? messages.insertRecoveredTranscript
                          : retrying
                            ? messages.pauseRetrying
                            : status === "recovered"
                              ? messages.transcribeSaved
                              : messages.retry
                      }
                      className={cn(
                        "inline-flex size-7 shrink-0 items-center justify-center rounded-og-sm",
                        "border border-og-primary-border bg-og-primary text-og-primary-fg hover:bg-og-primary-hover transition-colors duration-150 motion-reduce:transition-none",
                        "disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:size-11",
                      )}
                    >
                      {savedTranscript ? (
                        <ClipboardPasteIcon className="size-3.5" />
                      ) : retrying ? (
                        <SquareIcon className="size-3.5" />
                      ) : (
                        <RefreshCwIcon className="size-3.5" />
                      )}
                    </button>
                  </Tip>
                  <Tip tip={messages.discardRecovered}>
                    <button
                      type="button"
                      disabled={composer.disabled}
                      onClick={() => void transcription.discard()}
                      aria-label={messages.discardRecovered}
                      className={cn(
                        "inline-flex size-7 shrink-0 items-center justify-center rounded-og-sm",
                        "text-og-fg-muted transition-colors duration-150 motion-reduce:transition-none",
                        "hover:bg-og-surface-3 hover:text-og-status-failed disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:size-11",
                      )}
                    >
                      <Trash2Icon className="size-3.5" />
                    </button>
                  </Tip>
                </motion.span>
              ) : active ? (
                <motion.span
                  key={status === "transcribing" || status === "saving" ? "processing" : "capture"}
                  initial={{ opacity: 0, scale: 0.96 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0, scale: 0.96 }}
                  transition={{ duration: 0.16, ease: [0.22, 1, 0.36, 1] }}
                  className={cn(
                    "inline-flex h-8 items-center gap-1 rounded-og-md border border-og-border/80",
                    "bg-og-surface-2/70 pl-2 pr-1 pointer-coarse:h-11",
                  )}
                >
                  {status === "requesting-permission" ? (
                    <LoaderCircleIcon
                      className="size-3.5 shrink-0 text-og-fg-muted animate-og-spin motion-reduce:animate-none"
                      aria-hidden
                    />
                  ) : (
                    <span className="flex items-center gap-1.5">
                      {status === "recording" ? (
                        <span
                          aria-hidden
                          className="size-1.5 shrink-0 rounded-full bg-og-status-failed animate-og-pulse motion-reduce:animate-none"
                        />
                      ) : null}
                      <VoiceWaveform
                        stream={status === "recording" ? transcription.stream : null}
                        mode={status === "recording" ? "recording" : "transcribing"}
                      />
                      {status === "recording" && transcription.recordingStartedAt !== null ? (
                        <RecordingClock
                          startedAt={transcription.recordingStartedAt}
                          maxSeconds={transcription.maxRecordingSeconds}
                          remainingLabel={messages.timeRemaining}
                        />
                      ) : null}
                    </span>
                  )}
                  {status === "recording" ? (
                    <>
                      <Tip tip={messages.cancel}>
                        <button
                          type="button"
                          onClick={() => transcription.cancel()}
                          aria-label={messages.cancel}
                          aria-keyshortcuts="Escape"
                          className={cn(
                            "inline-flex size-7 shrink-0 items-center justify-center rounded-og-sm",
                            "text-og-fg-muted transition-colors duration-150 motion-reduce:transition-none",
                            "hover:bg-og-surface-3 hover:text-og-fg pointer-coarse:size-11",
                          )}
                        >
                          <XIcon className="size-3.5" />
                        </button>
                      </Tip>
                      <Tip tip={messages.stop}>
                        <button
                          type="button"
                          onClick={() => transcription.stop()}
                          aria-label={messages.stop}
                          className={cn(
                            "inline-flex size-7 shrink-0 items-center justify-center rounded-og-sm",
                            "border border-og-primary-border bg-og-primary text-og-primary-fg hover:bg-og-primary-hover",
                            "transition-colors duration-150 motion-reduce:transition-none pointer-coarse:size-11",
                          )}
                        >
                          <SquareIcon className="size-2.5 fill-current" />
                        </button>
                      </Tip>
                    </>
                  ) : status === "transcribing" || status === "saving" ? (
                    <ShimmerText className="px-1.5 text-og-xs font-medium whitespace-nowrap">
                      {status === "saving" ? messages.saving : messages.transcribing}
                    </ShimmerText>
                  ) : (
                    <span className="px-1.5 text-og-xs text-og-fg-muted whitespace-nowrap">
                      {messages.requestingPermission}
                    </span>
                  )}
                </motion.span>
              ) : (
                <Tip key="idle" tip={idleLabel}>
                  <motion.button
                    type="button"
                    data-og-composer-dictate
                    initial={{ opacity: 0, scale: 0.96 }}
                    animate={{ opacity: 1, scale: 1 }}
                    exit={{ opacity: 0, scale: 0.96 }}
                    transition={{ duration: 0.14, ease: [0.22, 1, 0.36, 1] }}
                    onClick={start}
                    aria-label={idleLabel}
                    aria-pressed={false}
                    aria-disabled={unavailableMessage !== null}
                    className={cn(
                      "inline-flex size-8 shrink-0 items-center justify-center rounded-og-md pointer-coarse:size-11",
                      "text-og-fg-muted transition-colors duration-150 motion-reduce:transition-none",
                      unavailableMessage
                        ? "cursor-not-allowed opacity-45"
                        : "hover:bg-og-surface-2 hover:text-og-fg",
                    )}
                  >
                    <MicIcon className="size-4" />
                  </motion.button>
                </Tip>
              )}
            </AnimatePresence>
            {status === "error" && errorMessage && !recoverable ? (
              // Nothing is saved in this state, so dismissing loses no speech.
              <button
                type="button"
                title={errorMessage}
                aria-label={t("composerTranscriptionControl.dismissErrormessage", { errorMessage })}
                onClick={() => void transcription.discard()}
                className={cn(
                  "inline-flex min-w-0 items-center gap-1 rounded-og-sm text-left outline-hidden",
                  "text-og-status-failed focus-visible:ring-2 focus-visible:ring-og-accent/45",
                )}
              >
                <span className="og-transcription-error-label max-w-56 line-clamp-2 text-og-xs leading-tight max-sm:max-w-32">
                  {errorMessage}
                </span>
                <XIcon className="size-3 shrink-0 opacity-70" aria-hidden />
              </button>
            ) : null}
            <span
              className="sr-only"
              role={status === "error" ? "alert" : "status"}
              aria-live="polite"
            >
              {announcement}
            </span>
          </span>
        </motion.span>
      )}
    </AnimatePresence>
  );
}

/** Elapsed dictation time; warns before the automatic stop-and-transcribe. */
function RecordingClock({
  startedAt,
  maxSeconds,
  remainingLabel,
}: {
  startedAt: number;
  maxSeconds: number | null;
  remainingLabel: string;
}) {
  const [now, setNow] = useState(() => Date.now());
  useEffect(() => {
    const timer = setInterval(() => setNow(Date.now()), 500);
    return () => clearInterval(timer);
  }, []);
  const elapsed = Math.max(0, Math.floor((now - startedAt) / 1_000));
  const remaining = maxSeconds === null ? null : Math.max(0, maxSeconds - elapsed);
  const warn = remaining !== null && remaining <= 15;
  const label = `${Math.floor(elapsed / 60)}:${String(elapsed % 60).padStart(2, "0")}`;
  return (
    <span
      data-recording-clock
      title={warn ? remainingLabel.replace("{seconds}", String(remaining)) : undefined}
      className={cn(
        "min-w-[2.25rem] text-right text-og-xs tabular-nums",
        warn ? "font-medium text-og-status-failed" : "text-og-fg-muted",
      )}
    >
      {label}
      {warn ? (
        <span className="sr-only">{remainingLabel.replace("{seconds}", String(remaining))}</span>
      ) : null}
    </span>
  );
}

function VoiceWaveform({
  stream,
  mode,
}: {
  stream: MediaStream | null;
  mode: "recording" | "transcribing";
}) {
  const [levels, setLevels] = useState<number[]>(() => restingLevels(WAVEFORM_BARS));
  const [live, setLive] = useState(false);

  useEffect(() => {
    if (!stream || mode !== "recording") {
      setLive(false);
      setLevels(restingLevels(WAVEFORM_BARS));
      return;
    }

    const AudioCtx =
      window.AudioContext ??
      (window as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
    if (!AudioCtx) return;

    let cancelled = false;
    let frame = 0;
    let context: AudioContext | null = null;

    try {
      context = new AudioCtx();
      const source = context.createMediaStreamSource(stream);
      const analyser = context.createAnalyser();
      analyser.fftSize = 64;
      analyser.smoothingTimeConstant = 0.8;
      source.connect(analyser);
      const bins = new Uint8Array(analyser.frequencyBinCount);

      const tick = () => {
        if (cancelled) return;
        analyser.getByteFrequencyData(bins);
        const next = new Array<number>(WAVEFORM_BARS);
        const usable = Math.max(8, Math.floor(bins.length * 0.65));
        for (let i = 0; i < WAVEFORM_BARS; i++) {
          const start = Math.floor((i / WAVEFORM_BARS) * usable);
          const end = Math.max(start + 1, Math.floor(((i + 1) / WAVEFORM_BARS) * usable));
          let sum = 0;
          for (let j = start; j < end; j++) sum += bins[j] ?? 0;
          const avg = sum / (end - start) / 255;
          next[i] = Math.min(1, 0.14 + avg * 1.65);
        }
        setLevels(next);
        setLive(true);
        frame = requestAnimationFrame(tick);
      };

      void context.resume().then(() => {
        if (!cancelled) frame = requestAnimationFrame(tick);
      });
    } catch {
      setLive(false);
    }

    return () => {
      cancelled = true;
      cancelAnimationFrame(frame);
      void context?.close();
    };
  }, [stream, mode]);

  return (
    <span
      aria-hidden
      data-voice-waveform={live ? "live" : "fallback"}
      className="flex h-4 w-[3.75rem] items-center justify-center gap-px"
    >
      {WAVEFORM_BAR_KEYS.map((key, index) => {
        const level = levels[index] ?? 0;
        return (
          <span
            key={key}
            className={cn(
              "w-0.5 rounded-full bg-og-fg-muted/90 origin-center",
              !live && "animate-og-waveform motion-reduce:animate-none",
              mode === "transcribing" && "opacity-45",
            )}
            style={{
              height: live ? `${Math.max(3, Math.round(level * 14))}px` : "14px",
              animationDelay: live ? undefined : `${(index % 9) * 0.07}s`,
              opacity: live ? 0.55 + level * 0.45 : undefined,
            }}
          />
        );
      })}
    </span>
  );
}

function restingLevels(count: number): number[] {
  return Array.from({ length: count }, (_, index) => 0.22 + ((index * 17) % 5) * 0.06);
}

function transcriptionErrorMessage(code: string, messages: ComposerTranscriptionMessages): string {
  switch (code) {
    case "insufficient_credits":
      return messages.errorInsufficientCredits;
    case "allowance_exhausted":
    case "monthly_model_cost_limit":
      return messages.errorAllowanceExhausted;
    case "policy_blocked":
      return messages.errorPolicyBlocked;
    case "permission_denied":
      return messages.errorPermissionDenied;
    case "not_supported":
      return messages.errorNotSupported;
    case "unavailable":
      return messages.errorUnavailable;
    case "too_large":
      return messages.errorTooLarge;
    case "invalid_audio":
      return messages.errorInvalidAudio;
    case "storage_unavailable":
      return messages.errorStorageUnavailable;
    case "network":
    case "provider":
    case "timeout":
      return messages.errorRetryable;
    case "handoff_uncertain":
      return messages.errorHandoffUncertain;
    case "unknown":
      return messages.errorUnknown;
    default:
      return messages.errorUnknown;
  }
}