'use client';

import { useEffect, useState } from 'react';
import {
  fetchMe,
  setAgentRuntimePreference,
  setSandboxPreference,
  setSessionPrewarmPreference,
  type AgentRuntime,
} from '@/lib/auth';
import { useTranslation, type TranslationKey } from '@/lib/i18n';

const RUNTIMES: Array<{
  id: AgentRuntime;
  labelKey: TranslationKey;
  descriptionKey: TranslationKey;
}> = [
  {
    id: 'opencode',
    labelKey: 'settings.agentRuntimeOpencode',
    descriptionKey: 'settings.agentRuntimeOpencodeDescription',
  },
  {
    id: 'pi',
    labelKey: 'settings.agentRuntimePi',
    descriptionKey: 'settings.agentRuntimePiDescription',
  },
];

export default function AgentRuntimeSection() {
  const { t } = useTranslation();
  const [runtime, setRuntime] = useState<AgentRuntime | null>(null);
  const [saving, setSaving] = useState<AgentRuntime | null>(null);
  const [sandboxProvider, setSandboxProvider] = useState<string | null>(null);
  const [availableSandboxProvider, setAvailableSandboxProvider] = useState<string | null>(null);
  const [savingSandbox, setSavingSandbox] = useState(false);
  const [sessionPrewarmEnabled, setSessionPrewarmEnabled] = useState(false);
  const [savingSessionPrewarm, setSavingSessionPrewarm] = useState(false);
  const [error, setError] = useState(false);

  useEffect(() => {
    let cancelled = false;
    void fetchMe()
      .then((me) => {
        if (!cancelled) {
          setRuntime(me.agent_runtime);
          setSandboxProvider(me.sandbox_provider);
          setSessionPrewarmEnabled(me.session_prewarm_enabled);
          setAvailableSandboxProvider(
            me.available_sandbox_providers.includes(me.sandbox_provider)
              ? me.sandbox_provider
              : me.available_sandbox_providers[0] ?? null
          );
        }
      })
      .catch(() => {
        if (!cancelled) setError(true);
      });
    return () => { cancelled = true; };
  }, []);

  const selectRuntime = async (nextRuntime: AgentRuntime) => {
    if (saving || nextRuntime === runtime) return;
    setSaving(nextRuntime);
    setError(false);
    try {
      await setAgentRuntimePreference(nextRuntime);
      setRuntime(nextRuntime);
    } catch {
      setError(true);
    } finally {
      setSaving(null);
    }
  };

  const toggleSandbox = async () => {
    if (savingSandbox || sandboxProvider === null || !availableSandboxProvider) return;
    const enabled = sandboxProvider === availableSandboxProvider;
    const nextProvider = enabled ? null : availableSandboxProvider;
    setSavingSandbox(true);
    setError(false);
    try {
      await setSandboxPreference(nextProvider);
      setSandboxProvider(nextProvider ?? '');
    } catch {
      setError(true);
    } finally {
      setSavingSandbox(false);
    }
  };

  const sandboxEnabled = !!availableSandboxProvider && sandboxProvider === availableSandboxProvider;
  const sandboxProviderLabel = availableSandboxProvider
    ? availableSandboxProvider.charAt(0).toUpperCase() + availableSandboxProvider.slice(1)
    : '';

  const toggleSessionPrewarm = async () => {
    if (savingSessionPrewarm) return;
    const nextEnabled = !sessionPrewarmEnabled;
    setSavingSessionPrewarm(true);
    setError(false);
    try {
      await setSessionPrewarmPreference(nextEnabled);
      setSessionPrewarmEnabled(nextEnabled);
    } catch {
      setError(true);
    } finally {
      setSavingSessionPrewarm(false);
    }
  };

  return (
    <div>
      <div style={{ marginBottom: '20px' }}>
        <div style={{ fontSize: '15px', fontWeight: 600, color: '#1a1a2e', marginBottom: '4px' }}>
          {t('settings.agentRuntimeTitle')}
        </div>
        <div style={{ fontSize: '13px', color: '#6b7280' }}>
          {t('settings.agentRuntimeDescription')}
        </div>
      </div>

      {runtime === null && !error ? (
        <div style={{ fontSize: '13px', color: '#6b7280' }}>
          {t('settings.agentRuntimeLoading')}
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
          {RUNTIMES.map(item => {
            const isActive = runtime === item.id;
            const isSaving = saving === item.id;
            return (
              <button
                key={item.id}
                type="button"
                onClick={() => void selectRuntime(item.id)}
                disabled={saving !== null}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  gap: '16px',
                  width: '100%',
                  padding: '14px 16px',
                  border: isActive ? '1.5px solid #5c5fbc' : '1px solid #e5e7eb',
                  borderRadius: '10px',
                  background: isActive ? '#f0f0fb' : '#fff',
                  cursor: saving ? 'wait' : isActive ? 'default' : 'pointer',
                  textAlign: 'left',
                  opacity: saving && !isSaving ? 0.65 : 1,
                }}
              >
                <span style={{ display: 'flex', flexDirection: 'column', gap: '3px' }}>
                  <span style={{ fontSize: '14px', fontWeight: 600, color: '#1a1a2e' }}>
                    {t(item.labelKey)}
                  </span>
                  <span style={{ fontSize: '12px', color: '#6b7280' }}>
                    {t(item.descriptionKey)}
                  </span>
                </span>
                <span style={{ color: '#5c5fbc', fontSize: '12px', fontWeight: 600, whiteSpace: 'nowrap' }}>
                  {isSaving
                    ? t('settings.agentRuntimeSaving')
                    : isActive
                      ? t('settings.agentRuntimeSelected')
                      : ''}
                </span>
              </button>
            );
          })}
        </div>
      )}

      {error && (
        <div style={{ marginTop: '12px', fontSize: '12px', color: '#dc2626' }}>
          {t('settings.agentRuntimeError')}
        </div>
      )}

      <div style={{ height: '1px', background: '#e5e7eb', margin: '24px 0' }} />

      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: '20px' }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: '15px', fontWeight: 600, color: '#1a1a2e', marginBottom: '4px' }}>
            {t('settings.sandboxTitle')}
          </div>
          <div style={{ fontSize: '13px', color: '#6b7280', lineHeight: 1.5 }}>
            {t('settings.sandboxDescription', { provider: sandboxProviderLabel })}
          </div>
        </div>
        <button
          type="button"
          role="switch"
          aria-checked={sandboxEnabled}
          aria-label={t('settings.sandboxToggleLabel')}
          disabled={sandboxProvider === null || !availableSandboxProvider || savingSandbox}
          onClick={() => void toggleSandbox()}
          style={{
            position: 'relative',
            flex: '0 0 auto',
            width: '40px',
            height: '22px',
            padding: 0,
            border: 0,
            borderRadius: '11px',
            background: sandboxEnabled ? '#5c5fbc' : '#d1d5db',
            cursor: sandboxProvider === null || !availableSandboxProvider ? 'not-allowed' : savingSandbox ? 'wait' : 'pointer',
            opacity: availableSandboxProvider ? 1 : 0.55,
          }}
        >
          <span
            style={{
              position: 'absolute',
              top: '3px',
              left: sandboxEnabled ? '21px' : '3px',
              width: '16px',
              height: '16px',
              borderRadius: '50%',
              background: '#fff',
              boxShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
              transition: 'left 120ms ease',
            }}
          />
        </button>
      </div>

      <div style={{ marginTop: '10px', fontSize: '12px', lineHeight: 1.5, color: availableSandboxProvider ? '#92400e' : '#6b7280' }}>
        {availableSandboxProvider ? t('settings.sandboxArtifactNotice') : t('settings.sandboxUnavailable')}
      </div>

      <div style={{ height: '1px', background: '#e5e7eb', margin: '24px 0' }} />

      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: '20px' }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: '15px', fontWeight: 600, color: '#1a1a2e', marginBottom: '4px' }}>
            {t('settings.sessionPrewarmTitle')}
          </div>
          <div style={{ fontSize: '13px', color: '#6b7280', lineHeight: 1.5 }}>
            {t('settings.sessionPrewarmDescription')}
          </div>
        </div>
        <button
          type="button"
          role="switch"
          aria-checked={sessionPrewarmEnabled}
          aria-label={t('settings.sessionPrewarmToggleLabel')}
          disabled={savingSessionPrewarm}
          onClick={() => void toggleSessionPrewarm()}
          style={{
            position: 'relative',
            flex: '0 0 auto',
            width: '40px',
            height: '22px',
            padding: 0,
            border: 0,
            borderRadius: '11px',
            background: sessionPrewarmEnabled ? '#5c5fbc' : '#d1d5db',
            cursor: savingSessionPrewarm ? 'wait' : 'pointer',
            opacity: savingSessionPrewarm ? 0.65 : 1,
          }}
        >
          <span
            style={{
              position: 'absolute',
              top: '3px',
              left: sessionPrewarmEnabled ? '21px' : '3px',
              width: '16px',
              height: '16px',
              borderRadius: '50%',
              background: '#fff',
              boxShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
              transition: 'left 120ms ease',
            }}
          />
        </button>
      </div>
    </div>
  );
}