import { Trans, useLingui } from "@lingui/react/macro";
import type { VoiceCatalogEntry, VoiceCredential, VoiceInfo, VoiceStatus } from "@rakazo/contracts";
import { preferVoicesForLocale } from "@rakazo/core";
import {
  Button,
  Dialog,
  DialogClose,
  DialogContent,
  DialogTitle,
  Field,
  FieldLabel,
  Input,
  NativeSelect,
  NativeSelectOption,
  Switch,
} from "@rakazo/ui-web";
import { ChevronDownIcon, XIcon } from "lucide-react";
import { useEffect, useId, useMemo, useRef, useState } from "react";
import { ooSound } from "../lib/oo-sound";
import { readOoSoundEnabled } from "../lib/oo-sound-pref";
import { rpc } from "../lib/rpc";
import { readUiLocale } from "../lib/ui-locale";

/** Must match packages/adapters KokoroVoiceProvider placeholder. */
const KOKORO_LOCAL_TOKEN = "local-kokoro";
const LOCAL_PROVIDER_ID = "kokoro";

export function VoiceSettingsOverlay({
  onClose,
  embedded = false,
  onBusyChange,
  activeBotId,
}: {
  onClose: () => void;
  /** Render panel body only for the shared Settings shell. */
  embedded?: boolean;
  onBusyChange?: (busy: boolean) => void;
  /** Active bot whose autoSpeak toggle is controlled here. */
  activeBotId?: string;
}) {
  const { t } = useLingui();
  const apiKeyId = useId();
  const voiceSelectId = useId();
  const [catalog, setCatalog] = useState<VoiceCatalogEntry[]>([]);
  const [credentials, setCredentials] = useState<VoiceCredential[]>([]);
  const [status, setStatus] = useState<VoiceStatus | null>(null);
  const [voices, setVoices] = useState<VoiceInfo[]>([]);
  const [voiceId, setVoiceId] = useState("");
  const [autoSpeak, setAutoSpeak] = useState(false);
  const [loading, setLoading] = useState(true);
  const [pending, setPending] = useState<
    "connect" | "disconnect" | "voice" | "test" | "speak" | null
  >(null);
  const [error, setError] = useState<string | null>(null);
  const [notice, setNotice] = useState<string | null>(null);
  const [soundEnabled, setSoundEnabled] = useState(() => readOoSoundEnabled());
  const [advancedOpen, setAdvancedOpen] = useState(false);
  const [advancedProvider, setAdvancedProvider] = useState("");
  const [advancedApiKey, setAdvancedApiKey] = useState("");
  const advancedChoice = useRef("");

  const busy = pending !== null;
  const uiLocale = readUiLocale();
  const localConnected = credentials.some((entry) => entry.provider === LOCAL_PROVIDER_ID);
  const advancedProviders = catalog.filter((entry) => entry.id !== LOCAL_PROVIDER_ID);
  const selectedAdvanced =
    advancedProviders.find((entry) => entry.id === advancedProvider) ?? advancedProviders[0];
  const advancedCredential = credentials.find((entry) => entry.provider === advancedProvider);

  useEffect(() => {
    return () => onBusyChange?.(false);
  }, [onBusyChange]);

  function markPending(next: "connect" | "disconnect" | "voice" | "test" | "speak" | null) {
    setPending(next);
    onBusyChange?.(next !== null);
  }

  async function refresh() {
    const [nextCatalog, nextCredentials, nextStatus] = await Promise.all([
      rpc.voice.catalog(),
      rpc.voice.credentials(),
      rpc.voice.status(),
    ]);
    setCatalog(nextCatalog);
    setCredentials(nextCredentials);
    setStatus(nextStatus);
    const localCred = nextCredentials.find((entry) => entry.provider === LOCAL_PROVIDER_ID);
    const activeVoice = localCred?.voiceId ?? nextStatus.voiceId ?? "";
    setVoiceId(activeVoice);
    if (localCred || nextStatus.ready) {
      const listed = await rpc.voice.voices({ provider: LOCAL_PROVIDER_ID }).catch(() => []);
      setVoices(listed);
      if (!activeVoice && listed[0]) setVoiceId(listed[0].id);
    } else {
      setVoices([]);
    }
    if (activeBotId) {
      const bots = await rpc.bots.list();
      const bot = bots.find((entry) => entry.id === activeBotId);
      setAutoSpeak(bot?.autoSpeak ?? false);
    }
    if (!advancedChoice.current) {
      const connected = nextCredentials.find((entry) => entry.provider !== LOCAL_PROVIDER_ID);
      const preferred =
        nextCatalog.find((entry) => entry.id === connected?.provider) ??
        nextCatalog.find((entry) => entry.id !== LOCAL_PROVIDER_ID);
      if (preferred) {
        advancedChoice.current = preferred.id;
        setAdvancedProvider(preferred.id);
      }
    }
  }

  useEffect(() => {
    void refresh()
      .catch((err: unknown) =>
        setError(err instanceof Error ? err.message : t`Could not load voice settings`),
      )
      .finally(() => setLoading(false));
  }, [activeBotId]);

  const voiceOptions = useMemo(() => {
    const listed = preferVoicesForLocale(voices, uiLocale);
    if (listed.length) return listed;
    return voiceId ? [{ id: voiceId, label: voiceId }] : [];
  }, [voices, voiceId, uiLocale]);

  const speakingReady = Boolean(localConnected && voiceId && status?.ready);

  async function ensureLocalVoice(): Promise<boolean> {
    if (localConnected) return true;
    markPending("connect");
    setError(null);
    try {
      await rpc.voice.connect({
        provider: LOCAL_PROVIDER_ID,
        apiKey: KOKORO_LOCAL_TOKEN,
        voiceId: voiceId || undefined,
      });
      await refresh();
      return true;
    } catch (err) {
      setError(err instanceof Error ? err.message : t`Could not enable speaking`);
      return false;
    } finally {
      markPending(null);
    }
  }

  async function chooseVoice(nextVoiceId: string) {
    setVoiceId(nextVoiceId);
    if (!localConnected) return;
    markPending("voice");
    setError(null);
    try {
      await rpc.voice.setVoice({ voiceId: nextVoiceId, provider: LOCAL_PROVIDER_ID });
      await refresh();
    } catch (err) {
      setError(err instanceof Error ? err.message : t`Could not save that voice`);
    } finally {
      markPending(null);
    }
  }

  async function setSpeakingEnabled(next: boolean) {
    setAutoSpeak(next);
    markPending("speak");
    setError(null);
    setNotice(null);
    try {
      if (next) {
        const connected = await ensureLocalVoice();
        if (!connected) {
          setAutoSpeak(false);
          return;
        }
        const listed = await rpc.voice.voices({ provider: LOCAL_PROVIDER_ID }).catch(() => []);
        const nextVoice = voiceId || listed[0]?.id;
        if (nextVoice) {
          await rpc.voice.setVoice({ voiceId: nextVoice, provider: LOCAL_PROVIDER_ID });
          setVoiceId(nextVoice);
        }
      }
      if (activeBotId) {
        await rpc.bots.update({ botId: activeBotId, autoSpeak: next });
      }
      await refresh();
      setNotice(next ? t`Speaking is on.` : t`Speaking is off.`);
    } catch (err) {
      setAutoSpeak(!next);
      setError(err instanceof Error ? err.message : t`Could not update speaking`);
    } finally {
      markPending(null);
    }
  }

  async function connectAdvanced() {
    if (!selectedAdvanced || advancedApiKey.trim().length < 8) return;
    markPending("connect");
    setError(null);
    setNotice(null);
    try {
      await rpc.voice.connect({
        provider: selectedAdvanced.id,
        apiKey: advancedApiKey.trim(),
      });
      setAdvancedApiKey("");
      await refresh();
      setNotice(t`Connected ${selectedAdvanced.name}.`);
    } catch (err) {
      setError(err instanceof Error ? err.message : t`Could not connect this voice provider`);
    } finally {
      markPending(null);
    }
  }

  async function disconnectAdvanced() {
    if (!advancedCredential) return;
    markPending("disconnect");
    setError(null);
    try {
      await rpc.voice.disconnect({ provider: advancedCredential.provider });
      setAdvancedApiKey("");
      await refresh();
    } catch (err) {
      setError(err instanceof Error ? err.message : t`Could not disconnect this voice provider`);
    } finally {
      markPending(null);
    }
  }

  async function testVoice() {
    setError(null);
    setNotice(null);
    markPending("test");
    try {
      const { speaker } = await import("../lib/tts.js");
      await speaker.speak(t`Hi, this is how I'll sound when I read replies out loud.`);
      if (speaker.state.error) {
        setError(speaker.state.error);
        return;
      }
      setNotice(t`If you heard that, voice is ready.`);
    } catch (err) {
      setError(err instanceof Error ? err.message : t`Could not play a test clip`);
    } finally {
      markPending(null);
    }
  }

  const body = (
    <>
      {!embedded ? (
        <div className="flex items-start justify-between px-6 pt-6 sm:px-8 sm:pt-7">
          <div>
            <DialogTitle className="text-2xl font-medium text-foreground">
              <Trans>Voice</Trans>
            </DialogTitle>
          </div>
          <DialogClose
            aria-label={t`Close voice settings`}
            disabled={busy}
            render={<Button variant="ghost" size="icon-sm" />}
          >
            <XIcon />
          </DialogClose>
        </div>
      ) : null}

      <div className="rk-scroll min-h-0 flex-1 overflow-y-auto px-6 py-6 sm:px-8">
        {loading ? (
          <p className="text-sm text-muted-foreground">
            <Trans>Loading voice settings…</Trans>
          </p>
        ) : null}
        {error ? <p className="mb-4 text-sm text-destructive">{error}</p> : null}
        {notice ? <p className="mb-4 text-sm text-success">{notice}</p> : null}

        <div className="rounded-xl border border-border px-4 py-4">
          <div className="flex items-start justify-between gap-4">
            <div>
              <p className="text-ui-body font-medium text-foreground">
                {autoSpeak ? <Trans>Can speak</Trans> : <Trans>Does not speak</Trans>}
              </p>
              <p className="mt-1 text-ui-body-sm text-muted-foreground">
                <Trans>Your Oo reads replies aloud when this is on.</Trans>
              </p>
            </div>
            <Switch
              checked={autoSpeak}
              disabled={busy}
              aria-label={t`Speaking on or off`}
              onCheckedChange={(checked) => void setSpeakingEnabled(checked)}
            />
          </div>
        </div>

        {autoSpeak && speakingReady ? (
          <>
            <Field className="mt-6">
              <FieldLabel htmlFor={voiceSelectId}>
                <Trans>Voice</Trans>
              </FieldLabel>
              <NativeSelect
                id={voiceSelectId}
                className="w-full"
                value={voiceId}
                disabled={busy}
                onChange={(event) => void chooseVoice(event.target.value)}
              >
                {voiceOptions.map((voice) => (
                  <NativeSelectOption key={voice.id} value={voice.id}>
                    {voice.label}
                    {voice.description ? ` · ${voice.description}` : ""}
                  </NativeSelectOption>
                ))}
              </NativeSelect>
            </Field>
            <Button
              type="button"
              variant="secondary"
              className="mt-4 rounded-full"
              disabled={busy || !status?.ready}
              onClick={() => void testVoice()}
            >
              {pending === "test" ? <Trans>Playing…</Trans> : <Trans>Hear a sample</Trans>}
            </Button>
          </>
        ) : null}

        <div className="mt-8 rounded-xl border border-border px-4 py-4">
          <div className="flex items-start justify-between gap-4">
            <div>
              <p className="text-ui-body font-medium text-foreground">
                <Trans>Sound feedback</Trans>
              </p>
              <p className="mt-1 text-ui-body-sm text-muted-foreground">
                <Trans>
                  Calm audio cues for finished work, voice phases, and handoffs. Respects reduced
                  motion.
                </Trans>
              </p>
            </div>
            <label className="flex shrink-0 items-center gap-2 text-ui-body-sm">
              <input
                type="checkbox"
                checked={soundEnabled}
                disabled={busy}
                onChange={(event) => {
                  const next = event.target.checked;
                  setSoundEnabled(next);
                  ooSound.setEnabled(next);
                  if (next) ooSound.play("message-sent");
                }}
                className="size-4 rounded border-border"
              />
              <Trans>On</Trans>
            </label>
          </div>
        </div>

        {advancedProviders.length > 0 ? (
          <div className="mt-8">
            <button
              type="button"
              disabled={busy}
              onClick={() => setAdvancedOpen((open) => !open)}
              className="flex w-full items-center justify-between rounded-xl border border-border px-4 py-3 text-start text-ui-body text-muted-foreground transition-colors hover:bg-accent disabled:opacity-50"
            >
              <span>
                <Trans>Other voice providers</Trans>
              </span>
              <ChevronDownIcon
                className={`size-4 shrink-0 transition-transform ${advancedOpen ? "rotate-180" : ""}`}
              />
            </button>
            {advancedOpen && selectedAdvanced ? (
              <div className="mt-3 rounded-xl border border-border px-4 py-4">
                <Field>
                  <FieldLabel htmlFor={apiKeyId}>
                    <Trans>Provider</Trans>
                  </FieldLabel>
                  <NativeSelect
                    id={apiKeyId}
                    className="w-full"
                    value={advancedProvider}
                    disabled={busy}
                    onChange={(event) => {
                      advancedChoice.current = event.target.value;
                      setAdvancedProvider(event.target.value);
                      setAdvancedApiKey("");
                      setError(null);
                      setNotice(null);
                    }}
                  >
                    {advancedProviders.map((entry) => (
                      <NativeSelectOption key={entry.id} value={entry.id}>
                        {entry.name}
                      </NativeSelectOption>
                    ))}
                  </NativeSelect>
                </Field>
                <Field className="mt-4">
                  <FieldLabel htmlFor={`${apiKeyId}-key`}>
                    <Trans>API key</Trans>
                  </FieldLabel>
                  <Input
                    id={`${apiKeyId}-key`}
                    type="password"
                    autoComplete="new-password"
                    value={advancedApiKey}
                    onChange={(event) => setAdvancedApiKey(event.target.value)}
                    placeholder={
                      advancedCredential ? t`Paste a replacement key` : t`Paste your API key`
                    }
                  />
                </Field>
                <Button
                  type="button"
                  className="mt-3"
                  disabled={busy || advancedApiKey.trim().length < 8}
                  onClick={() => void connectAdvanced()}
                >
                  {pending === "connect" ? (
                    <Trans>Connecting…</Trans>
                  ) : advancedCredential ? (
                    <Trans>Replace key</Trans>
                  ) : (
                    <Trans>Connect</Trans>
                  )}
                </Button>
                {advancedCredential ? (
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    className="mt-3"
                    disabled={busy}
                    onClick={() => void disconnectAdvanced()}
                  >
                    {pending === "disconnect" ? (
                      <Trans>Disconnecting…</Trans>
                    ) : (
                      <Trans>Disconnect</Trans>
                    )}
                  </Button>
                ) : null}
              </div>
            ) : null}
          </div>
        ) : null}
      </div>
    </>
  );

  if (embedded) {
    return (
      <div data-testid="voice-settings" className="flex min-h-0 flex-1 flex-col overflow-hidden">
        {body}
      </div>
    );
  }

  return (
    <Dialog
      open
      onOpenChange={(open, details) => {
        if (open) return;
        if (busy) {
          details.cancel();
          return;
        }
        onClose();
      }}
    >
      <DialogContent
        data-testid="voice-settings"
        aria-describedby={undefined}
        showCloseButton={false}
        className="flex h-[min(680px,calc(100%-2rem))] w-[min(720px,calc(100%-2rem))] flex-col gap-0 overflow-hidden rounded-2xl p-0 sm:h-[min(680px,calc(100%-5rem))] sm:max-w-[calc(100%-5rem)]"
      >
        {body}
      </DialogContent>
    </Dialog>
  );
}