import { useState, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import {
  adminAppsApi,
  AppDefinition,
  LocalizedText,
  AppStep,
  AppButton,
  exportToRemnawaveFormat,
  importFromRemnawaveFormat,
  RemnawaveConfig,
  importFromRemnawaveFormat as convertRemnawave,
} from '../api/adminApps';
import { useBackButton } from '../platform/hooks/useBackButton';
import { usePlatform } from '../platform/hooks/usePlatform';

// Icons

const BackIcon = () => (
  <svg
    className="h-5 w-5 text-dark-400"
    fill="none"
    viewBox="0 0 24 24"
    stroke="currentColor"
    strokeWidth={2}
  >
    <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
  </svg>
);

const AppsIcon = () => (
  <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"
    />
  </svg>
);

const PlusIcon = () => (
  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
  </svg>
);

const EditIcon = () => (
  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
    />
  </svg>
);

const TrashIcon = () => (
  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
    />
  </svg>
);

const ChevronUpIcon = () => (
  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
  </svg>
);

const ChevronDownIcon = () => (
  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
  </svg>
);

const CopyIcon = () => (
  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"
    />
  </svg>
);

const StarIcon = ({ filled }: { filled: boolean }) => (
  <svg
    className={`h-4 w-4 ${filled ? 'fill-warning-400 text-warning-400' : 'text-dark-500'}`}
    viewBox="0 0 24 24"
    stroke="currentColor"
    strokeWidth={2}
  >
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"
    />
  </svg>
);

const DownloadIcon = () => (
  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
    />
  </svg>
);

const UploadIcon = () => (
  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
    />
  </svg>
);

const CloudSyncIcon = () => (
  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z"
    />
  </svg>
);

const RefreshIcon = () => (
  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
    />
  </svg>
);

const SettingsIcon = () => (
  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
    />
    <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
  </svg>
);

const PLATFORM_LABELS: Record<string, string> = {
  ios: 'iOS',
  android: 'Android',
  macos: 'macOS',
  windows: 'Windows',
  linux: 'Linux',
  androidTV: 'Android TV',
  appleTV: 'Apple TV',
};

const PLATFORMS = ['ios', 'android', 'macos', 'windows', 'linux', 'androidTV', 'appleTV'];

// Helper to create empty localized text
const emptyLocalizedText = (): LocalizedText => ({
  en: '',
  ru: '',
  zh: '',
  fa: '',
});

// Helper to create empty app step
const emptyAppStep = (): AppStep => ({
  description: emptyLocalizedText(),
  buttons: [],
});

// Helper to create empty app
const createEmptyApp = (platform: string): AppDefinition => ({
  id: `new-app-${platform}-${Date.now()}`,
  name: '',
  isFeatured: false,
  urlScheme: '',
  installationStep: emptyAppStep(),
  addSubscriptionStep: emptyAppStep(),
  connectAndUseStep: emptyAppStep(),
});

interface AppEditorModalProps {
  app: AppDefinition;
  platform: string;
  isNew: boolean;
  onSave: (app: AppDefinition) => void;
  onClose: () => void;
}

function AppEditorModal({ app, platform, isNew, onSave, onClose }: AppEditorModalProps) {
  const { t } = useTranslation();
  const [editedApp, setEditedApp] = useState<AppDefinition>({ ...app });
  const [activeTab, setActiveTab] = useState<
    'basic' | 'installation' | 'subscription' | 'connect' | 'additional'
  >('basic');

  const updateField = <K extends keyof AppDefinition>(field: K, value: AppDefinition[K]) => {
    setEditedApp((prev) => ({ ...prev, [field]: value }));
  };

  const updateLocalizedText = (
    stepKey:
      | 'installationStep'
      | 'addSubscriptionStep'
      | 'connectAndUseStep'
      | 'additionalBeforeAddSubscriptionStep'
      | 'additionalAfterAddSubscriptionStep',
    field: 'description' | 'title',
    lang: keyof LocalizedText,
    value: string,
  ) => {
    setEditedApp((prev) => {
      const step = prev[stepKey] || emptyAppStep();
      const fieldValue = step[field] || emptyLocalizedText();
      return {
        ...prev,
        [stepKey]: {
          ...step,
          [field]: { ...fieldValue, [lang]: value },
        },
      };
    });
  };

  const updateButtons = (
    stepKey:
      | 'installationStep'
      | 'addSubscriptionStep'
      | 'connectAndUseStep'
      | 'additionalBeforeAddSubscriptionStep'
      | 'additionalAfterAddSubscriptionStep',
    buttons: AppButton[],
  ) => {
    setEditedApp((prev) => {
      const step = prev[stepKey] || emptyAppStep();
      return {
        ...prev,
        [stepKey]: { ...step, buttons },
      };
    });
  };

  const addButton = (
    stepKey:
      | 'installationStep'
      | 'additionalBeforeAddSubscriptionStep'
      | 'additionalAfterAddSubscriptionStep',
  ) => {
    const step = editedApp[stepKey] || emptyAppStep();
    const buttons = step.buttons || [];
    // Generate unique id for React key
    const newButton: AppButton = {
      id: `btn-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
      buttonLink: '',
      buttonText: emptyLocalizedText(),
    };
    updateButtons(stepKey, [...buttons, newButton]);
  };

  const removeButton = (
    stepKey:
      | 'installationStep'
      | 'additionalBeforeAddSubscriptionStep'
      | 'additionalAfterAddSubscriptionStep',
    index: number,
  ) => {
    const step = editedApp[stepKey] || emptyAppStep();
    const buttons = step.buttons || [];
    updateButtons(
      stepKey,
      buttons.filter((_, i) => i !== index),
    );
  };

  const updateButton = (
    stepKey:
      | 'installationStep'
      | 'additionalBeforeAddSubscriptionStep'
      | 'additionalAfterAddSubscriptionStep',
    index: number,
    field: 'buttonLink' | 'buttonText',
    value: string | LocalizedText,
  ) => {
    const step = editedApp[stepKey] || emptyAppStep();
    const buttons = [...(step.buttons || [])];
    buttons[index] = { ...buttons[index], [field]: value };
    updateButtons(stepKey, buttons);
  };

  const renderLocalizedTextInputs = (
    stepKey:
      | 'installationStep'
      | 'addSubscriptionStep'
      | 'connectAndUseStep'
      | 'additionalBeforeAddSubscriptionStep'
      | 'additionalAfterAddSubscriptionStep',
    field: 'description' | 'title',
    label: string,
  ) => {
    const step = editedApp[stepKey];
    const value = step?.[field] || emptyLocalizedText();

    return (
      <div className="space-y-2">
        <label className="block text-sm font-medium text-dark-300">{label}</label>
        {(['en', 'ru'] as const).map((lang) => (
          <div key={lang} className="flex items-center gap-2">
            <span className="w-8 text-xs uppercase text-dark-500">{lang}</span>
            <textarea
              value={value[lang] || ''}
              onChange={(e) => updateLocalizedText(stepKey, field, lang, e.target.value)}
              className="input flex-1 text-sm"
              rows={2}
            />
          </div>
        ))}
      </div>
    );
  };

  const renderButtonsEditor = (
    stepKey:
      | 'installationStep'
      | 'additionalBeforeAddSubscriptionStep'
      | 'additionalAfterAddSubscriptionStep',
  ) => {
    const step = editedApp[stepKey];
    const buttons = step?.buttons || [];

    return (
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <label className="text-sm font-medium text-dark-300">{t('admin.apps.buttons')}</label>
          <button
            type="button"
            onClick={() => addButton(stepKey)}
            className="text-xs text-accent-400 hover:text-accent-300"
          >
            + {t('admin.apps.addButton')}
          </button>
        </div>
        {buttons.map((button, index) => (
          <div
            key={button.id || `fallback-${index}`}
            className="space-y-2 rounded-lg bg-dark-800/50 p-3"
          >
            <div className="flex items-center justify-between">
              <span className="text-xs text-dark-400">
                {t('admin.apps.button')} #{index + 1}
              </span>
              <button
                type="button"
                onClick={() => removeButton(stepKey, index)}
                className="text-error-400 hover:text-error-300"
              >
                <TrashIcon />
              </button>
            </div>
            <input
              type="url"
              value={button.buttonLink}
              onChange={(e) => updateButton(stepKey, index, 'buttonLink', e.target.value)}
              placeholder="https://..."
              className="input w-full text-sm"
            />
            {(['en', 'ru'] as const).map((lang) => (
              <div key={lang} className="flex items-center gap-2">
                <span className="w-8 text-xs uppercase text-dark-500">{lang}</span>
                <input
                  type="text"
                  value={button.buttonText[lang] || ''}
                  onChange={(e) => {
                    const newButtonText = { ...button.buttonText, [lang]: e.target.value };
                    updateButton(stepKey, index, 'buttonText', newButtonText);
                  }}
                  placeholder={t('admin.apps.buttonText')}
                  className="input flex-1 text-sm"
                />
              </div>
            ))}
          </div>
        ))}
      </div>
    );
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
      <div className="flex max-h-[90vh] w-full max-w-3xl flex-col overflow-hidden rounded-xl bg-dark-900">
        {/* Header */}
        <div className="flex items-center justify-between border-b border-dark-700 p-4">
          <h2 className="text-lg font-semibold text-dark-100">
            {isNew ? t('admin.apps.createApp') : t('admin.apps.editApp')} -{' '}
            {PLATFORM_LABELS[platform]}
          </h2>
          <button onClick={onClose} className="text-dark-400 hover:text-dark-200">
            <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>

        {/* Tabs */}
        <div className="flex overflow-x-auto border-b border-dark-700">
          {(['basic', 'installation', 'subscription', 'connect', 'additional'] as const).map(
            (tab) => (
              <button
                key={tab}
                onClick={() => setActiveTab(tab)}
                className={`whitespace-nowrap px-4 py-2 text-sm font-medium ${
                  activeTab === tab
                    ? 'border-b-2 border-accent-400 text-accent-400'
                    : 'text-dark-400 hover:text-dark-200'
                }`}
              >
                {t(`admin.apps.tabs.${tab}`)}
              </button>
            ),
          )}
        </div>

        {/* Content */}
        <div className="flex-1 space-y-4 overflow-y-auto p-4">
          {activeTab === 'basic' && (
            <>
              <div>
                <label className="mb-1 block text-sm font-medium text-dark-300">
                  {t('admin.apps.appId')}
                </label>
                <input
                  type="text"
                  value={editedApp.id}
                  onChange={(e) => updateField('id', e.target.value)}
                  className="input w-full"
                  disabled={!isNew}
                />
              </div>
              <div>
                <label className="mb-1 block text-sm font-medium text-dark-300">
                  {t('admin.apps.appName')}
                </label>
                <input
                  type="text"
                  value={editedApp.name}
                  onChange={(e) => updateField('name', e.target.value)}
                  className="input w-full"
                />
              </div>
              <div>
                <label className="mb-1 block text-sm font-medium text-dark-300">
                  {t('admin.apps.urlScheme')}
                </label>
                <input
                  type="text"
                  value={editedApp.urlScheme}
                  onChange={(e) => updateField('urlScheme', e.target.value)}
                  className="input w-full"
                  placeholder="app://add/"
                />
              </div>
              <div className="flex items-center gap-4">
                <label className="flex cursor-pointer items-center gap-2">
                  <input
                    type="checkbox"
                    checked={editedApp.isFeatured}
                    onChange={(e) => updateField('isFeatured', e.target.checked)}
                    className="h-4 w-4 accent-accent-500"
                  />
                  <span className="text-sm text-dark-300">{t('admin.apps.featured')}</span>
                </label>
                <label className="flex cursor-pointer items-center gap-2">
                  <input
                    type="checkbox"
                    checked={editedApp.isNeedBase64Encoding || false}
                    onChange={(e) =>
                      updateField('isNeedBase64Encoding', e.target.checked || undefined)
                    }
                    className="h-4 w-4 accent-accent-500"
                  />
                  <span className="text-sm text-dark-300">{t('admin.apps.base64Encoding')}</span>
                </label>
              </div>
            </>
          )}

          {activeTab === 'installation' && (
            <>
              {renderLocalizedTextInputs(
                'installationStep',
                'description',
                t('admin.apps.installDescription'),
              )}
              {renderButtonsEditor('installationStep')}
            </>
          )}

          {activeTab === 'subscription' && (
            <>
              {renderLocalizedTextInputs(
                'addSubscriptionStep',
                'description',
                t('admin.apps.subscriptionDescription'),
              )}
            </>
          )}

          {activeTab === 'connect' && (
            <>
              {renderLocalizedTextInputs(
                'connectAndUseStep',
                'description',
                t('admin.apps.connectDescription'),
              )}
            </>
          )}

          {activeTab === 'additional' && (
            <>
              <div className="space-y-4">
                <h3 className="text-sm font-semibold text-dark-200">
                  {t('admin.apps.beforeSubscription')}
                </h3>
                {renderLocalizedTextInputs(
                  'additionalBeforeAddSubscriptionStep',
                  'title',
                  t('admin.apps.stepTitle'),
                )}
                {renderLocalizedTextInputs(
                  'additionalBeforeAddSubscriptionStep',
                  'description',
                  t('admin.apps.stepDescription'),
                )}
                {renderButtonsEditor('additionalBeforeAddSubscriptionStep')}
              </div>
              <div className="space-y-4 border-t border-dark-700 pt-4">
                <h3 className="text-sm font-semibold text-dark-200">
                  {t('admin.apps.afterSubscription')}
                </h3>
                {renderLocalizedTextInputs(
                  'additionalAfterAddSubscriptionStep',
                  'title',
                  t('admin.apps.stepTitle'),
                )}
                {renderLocalizedTextInputs(
                  'additionalAfterAddSubscriptionStep',
                  'description',
                  t('admin.apps.stepDescription'),
                )}
                {renderButtonsEditor('additionalAfterAddSubscriptionStep')}
              </div>
            </>
          )}
        </div>

        {/* Footer */}
        <div className="flex justify-end gap-3 border-t border-dark-700 p-4">
          <button onClick={onClose} className="btn-secondary">
            {t('common.cancel')}
          </button>
          <button onClick={() => onSave(editedApp)} className="btn-primary">
            {t('common.save')}
          </button>
        </div>
      </div>
    </div>
  );
}

export default function AdminApps() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const { capabilities } = usePlatform();

  // Use native Telegram back button in Mini App
  useBackButton(() => navigate('/admin'));

  const [selectedPlatform, setSelectedPlatform] = useState<string>('ios');
  const [editingApp, setEditingApp] = useState<{ app: AppDefinition; isNew: boolean } | null>(null);
  const [copyTarget, setCopyTarget] = useState<{ appId: string; platform: string } | null>(null);
  const [showImportModal, setShowImportModal] = useState(false);
  const [importError, setImportError] = useState<string | null>(null);
  const [importPreview, setImportPreview] = useState<{
    platformApps: Record<string, AppDefinition[]>;
  } | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [useRemnaWave, setUseRemnaWave] = useState(false);
  const [showRemnaWaveSettings, setShowRemnaWaveSettings] = useState(false);
  const [remnaWaveUuidInput, setRemnaWaveUuidInput] = useState('');

  // Check if RemnaWave config is available
  const { data: remnaWaveStatus, refetch: refetchStatus } = useQuery({
    queryKey: ['remnawave-status'],
    queryFn: adminAppsApi.getRemnaWaveStatus,
    staleTime: 60000,
  });

  // List available RemnaWave configs
  const { data: availableConfigs, isLoading: isLoadingConfigs } = useQuery({
    queryKey: ['remnawave-configs-list'],
    queryFn: adminAppsApi.listRemnaWaveConfigs,
    enabled: showRemnaWaveSettings,
    staleTime: 30000,
  });

  // Mutation for setting UUID
  const setUuidMutation = useMutation({
    mutationFn: adminAppsApi.setRemnaWaveUuid,
    onSuccess: () => {
      refetchStatus();
      queryClient.invalidateQueries({ queryKey: ['remnawave-config'] });
      setShowRemnaWaveSettings(false);
    },
  });

  // Fetch RemnaWave config when toggle is enabled
  const {
    data: remnaWaveConfig,
    isLoading: isRemnaWaveLoading,
    refetch: refetchRemnaWave,
  } = useQuery({
    queryKey: ['remnawave-config'],
    queryFn: adminAppsApi.getRemnaWaveConfig,
    enabled: useRemnaWave && remnaWaveStatus?.enabled,
    staleTime: 0,
  });

  // Convert RemnaWave config to local format
  const remnaWaveApps = remnaWaveConfig
    ? convertRemnawave(remnaWaveConfig).platformApps[selectedPlatform] || []
    : [];

  const { data: localApps, isLoading: isLocalLoading } = useQuery({
    queryKey: ['admin-apps', selectedPlatform],
    queryFn: () => adminAppsApi.getPlatformApps(selectedPlatform),
    enabled: !useRemnaWave,
  });

  // Select which apps to show based on toggle
  const apps = useRemnaWave ? remnaWaveApps : localApps;
  const isLoading = useRemnaWave ? isRemnaWaveLoading : isLocalLoading;

  const createMutation = useMutation({
    mutationFn: ({ platform, app }: { platform: string; app: AppDefinition }) =>
      adminAppsApi.createApp(platform, app),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['admin-apps'] });
      setEditingApp(null);
    },
  });

  const updateMutation = useMutation({
    mutationFn: ({
      platform,
      appId,
      app,
    }: {
      platform: string;
      appId: string;
      app: AppDefinition;
    }) => adminAppsApi.updateApp(platform, appId, app),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['admin-apps'] });
      setEditingApp(null);
    },
  });

  const deleteMutation = useMutation({
    mutationFn: ({ platform, appId }: { platform: string; appId: string }) =>
      adminAppsApi.deleteApp(platform, appId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['admin-apps'] });
    },
  });

  const reorderMutation = useMutation({
    mutationFn: ({ platform, appIds }: { platform: string; appIds: string[] }) =>
      adminAppsApi.reorderApps(platform, appIds),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['admin-apps'] });
    },
  });

  const copyMutation = useMutation({
    mutationFn: ({
      platform,
      appId,
      targetPlatform,
    }: {
      platform: string;
      appId: string;
      targetPlatform: string;
    }) => adminAppsApi.copyApp(platform, appId, targetPlatform),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['admin-apps'] });
      setCopyTarget(null);
    },
  });

  // Fetch all platforms for export
  const { data: allPlatformApps } = useQuery({
    queryKey: ['admin-apps-all'],
    queryFn: async () => {
      const result: Record<string, AppDefinition[]> = {};
      for (const platform of PLATFORMS) {
        try {
          result[platform] = await adminAppsApi.getPlatformApps(platform);
        } catch {
          result[platform] = [];
        }
      }
      return result;
    },
  });

  const { data: branding } = useQuery({
    queryKey: ['admin-branding'],
    queryFn: adminAppsApi.getBranding,
  });

  // Export handler
  const handleExport = () => {
    if (!allPlatformApps) return;
    const remnawaveConfig = exportToRemnawaveFormat(allPlatformApps, branding);
    const json = JSON.stringify(remnawaveConfig, null, 2);
    const blob = new Blob([json], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `apps-config-${new Date().toISOString().split('T')[0]}.json`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  // Import file handler
  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    setImportError(null);
    setImportPreview(null);

    const reader = new FileReader();
    reader.onload = (event) => {
      try {
        const json = JSON.parse(event.target?.result as string) as RemnawaveConfig;
        const imported = importFromRemnawaveFormat(json);
        setImportPreview(imported);
        setShowImportModal(true);
      } catch {
        setImportError(t('admin.apps.importError', 'Invalid JSON file'));
        setShowImportModal(true);
      }
    };
    reader.readAsText(file);
    // Reset file input
    if (fileInputRef.current) fileInputRef.current.value = '';
  };

  // Confirm import handler
  const handleConfirmImport = async () => {
    if (!importPreview) return;
    try {
      for (const [platform, apps] of Object.entries(importPreview.platformApps)) {
        for (const app of apps) {
          await adminAppsApi.createApp(platform, app);
        }
      }
      queryClient.invalidateQueries({ queryKey: ['admin-apps'] });
      queryClient.invalidateQueries({ queryKey: ['admin-apps-all'] });
      setShowImportModal(false);
      setImportPreview(null);
    } catch {
      setImportError(t('admin.apps.importCreateError', 'Failed to create some apps'));
    }
  };

  const handleMoveUp = (index: number) => {
    if (!apps || index === 0) return;
    const newOrder = [...apps];
    [newOrder[index - 1], newOrder[index]] = [newOrder[index], newOrder[index - 1]];
    reorderMutation.mutate({ platform: selectedPlatform, appIds: newOrder.map((a) => a.id) });
  };

  const handleMoveDown = (index: number) => {
    if (!apps || index === apps.length - 1) return;
    const newOrder = [...apps];
    [newOrder[index], newOrder[index + 1]] = [newOrder[index + 1], newOrder[index]];
    reorderMutation.mutate({ platform: selectedPlatform, appIds: newOrder.map((a) => a.id) });
  };

  const handleSave = (app: AppDefinition) => {
    if (editingApp?.isNew) {
      createMutation.mutate({ platform: selectedPlatform, app });
    } else {
      updateMutation.mutate({ platform: selectedPlatform, appId: app.id, app });
    }
  };

  const handleDelete = (appId: string) => {
    if (confirm(t('admin.apps.confirmDelete'))) {
      deleteMutation.mutate({ platform: selectedPlatform, appId });
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div className="flex items-center gap-3">
          {/* Show back button only on web, not in Telegram Mini App */}
          {!capabilities.hasBackButton && (
            <button
              onClick={() => navigate('/admin')}
              className="flex h-10 w-10 items-center justify-center rounded-xl border border-dark-700 bg-dark-800 transition-colors hover:border-dark-600"
            >
              <BackIcon />
            </button>
          )}
          <h1 className="text-2xl font-bold text-dark-50 sm:text-3xl">{t('admin.apps.title')}</h1>
        </div>

        {/* RemnaWave Toggle & Settings */}
        <div className="flex items-center gap-2">
          {remnaWaveStatus?.enabled && (
            <>
              <button
                onClick={() => setUseRemnaWave(!useRemnaWave)}
                className={`flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all ${
                  useRemnaWave
                    ? 'bg-accent-500 text-white'
                    : 'bg-dark-800 text-dark-300 hover:bg-dark-700'
                }`}
                title={t('admin.apps.remnaWaveToggle', 'Toggle RemnaWave source')}
              >
                <CloudSyncIcon />
                <span>RemnaWave</span>
              </button>
              {useRemnaWave && (
                <button
                  onClick={() => refetchRemnaWave()}
                  className="rounded-lg p-2 text-dark-400 transition-colors hover:bg-dark-700 hover:text-dark-200"
                  title={t('admin.apps.refreshRemnaWave', 'Refresh from RemnaWave')}
                >
                  <RefreshIcon />
                </button>
              )}
            </>
          )}
          <button
            onClick={() => {
              setRemnaWaveUuidInput(remnaWaveStatus?.config_uuid || '');
              setShowRemnaWaveSettings(true);
            }}
            className="rounded-lg p-2 text-dark-400 transition-colors hover:bg-dark-700 hover:text-dark-200"
            title={t('admin.apps.remnaWaveSettings', 'RemnaWave Settings')}
          >
            <SettingsIcon />
          </button>
        </div>
      </div>

      {/* RemnaWave Info Banner */}
      {useRemnaWave && (
        <div className="flex items-center gap-2 rounded-lg border border-accent-500/30 bg-accent-500/10 p-3 text-sm text-accent-200">
          <CloudSyncIcon />
          <span>
            {t(
              'admin.apps.remnaWaveMode',
              'Showing apps from RemnaWave panel. Changes here are read-only.',
            )}
          </span>
        </div>
      )}

      {/* Platform Tabs */}
      <div className="flex flex-wrap gap-2">
        {PLATFORMS.map((platform) => (
          <button
            key={platform}
            onClick={() => setSelectedPlatform(platform)}
            className={`rounded-lg px-4 py-2 text-sm font-medium transition-colors ${
              selectedPlatform === platform
                ? 'bg-accent-500 text-white'
                : 'bg-dark-800 text-dark-300 hover:bg-dark-700'
            }`}
          >
            {PLATFORM_LABELS[platform]}
          </button>
        ))}
      </div>

      {/* Action Buttons - Only show when not in RemnaWave mode */}
      {!useRemnaWave && (
        <div className="flex flex-wrap items-center justify-between gap-3">
          <div className="flex gap-2">
            <input
              ref={fileInputRef}
              type="file"
              accept=".json"
              onChange={handleFileSelect}
              className="hidden"
            />
            <button
              onClick={() => fileInputRef.current?.click()}
              className="btn-secondary flex items-center gap-2"
              title={t('admin.apps.importApps', 'Import Apps')}
            >
              <UploadIcon />
              {t('admin.apps.import', 'Import')}
            </button>
            <button
              onClick={handleExport}
              disabled={!allPlatformApps}
              className="btn-secondary flex items-center gap-2"
              title={t('admin.apps.exportApps', 'Export Apps')}
            >
              <DownloadIcon />
              {t('admin.apps.export', 'Export')}
            </button>
          </div>
          <button
            onClick={() => setEditingApp({ app: createEmptyApp(selectedPlatform), isNew: true })}
            className="btn-primary flex items-center gap-2"
          >
            <PlusIcon />
            {t('admin.apps.addApp')}
          </button>
        </div>
      )}

      {/* Apps List */}
      {isLoading ? (
        <div className="flex items-center justify-center py-12">
          <div className="h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
        </div>
      ) : apps && apps.length > 0 ? (
        <div className="space-y-3">
          {apps.map((app, index) => (
            <div key={app.id} className="card flex items-center gap-4 p-4">
              {/* Reorder buttons - Only show when not in RemnaWave mode */}
              {!useRemnaWave && (
                <div className="flex flex-col gap-1">
                  <button
                    onClick={() => handleMoveUp(index)}
                    disabled={index === 0}
                    className="p-1 text-dark-400 hover:text-dark-200 disabled:cursor-not-allowed disabled:opacity-30"
                  >
                    <ChevronUpIcon />
                  </button>
                  <button
                    onClick={() => handleMoveDown(index)}
                    disabled={index === apps.length - 1}
                    className="p-1 text-dark-400 hover:text-dark-200 disabled:cursor-not-allowed disabled:opacity-30"
                  >
                    <ChevronDownIcon />
                  </button>
                </div>
              )}

              {/* App Info */}
              <div className="min-w-0 flex-1">
                <div className="flex items-center gap-2">
                  <span className="font-medium text-dark-100">{app.name}</span>
                  {app.isFeatured && <StarIcon filled />}
                  {app.isNeedBase64Encoding && (
                    <span className="rounded bg-dark-700 px-2 py-0.5 text-xs text-dark-400">
                      Base64
                    </span>
                  )}
                </div>
                <div className="truncate font-mono text-xs text-dark-500">{app.id}</div>
                <div className="mt-1 text-xs text-dark-400">{app.urlScheme}</div>
              </div>

              {/* Actions - Only show when not in RemnaWave mode */}
              {!useRemnaWave && (
                <div className="flex items-center gap-2">
                  <button
                    onClick={() => setCopyTarget({ appId: app.id, platform: selectedPlatform })}
                    className="rounded p-2 text-dark-400 hover:bg-dark-700 hover:text-dark-200"
                    title={t('admin.apps.copyTo')}
                  >
                    <CopyIcon />
                  </button>
                  <button
                    onClick={() => setEditingApp({ app, isNew: false })}
                    className="rounded p-2 text-dark-400 hover:bg-dark-700 hover:text-dark-200"
                    title={t('common.edit')}
                  >
                    <EditIcon />
                  </button>
                  <button
                    onClick={() => handleDelete(app.id)}
                    className="rounded p-2 text-error-400 hover:bg-error-500/10 hover:text-error-300"
                    title={t('common.delete')}
                  >
                    <TrashIcon />
                  </button>
                </div>
              )}
            </div>
          ))}
        </div>
      ) : (
        <div className="card py-12 text-center">
          <AppsIcon />
          <p className="mt-4 text-dark-400">{t('admin.apps.noApps')}</p>
          <button
            onClick={() => setEditingApp({ app: createEmptyApp(selectedPlatform), isNew: true })}
            className="btn-primary mt-4"
          >
            {t('admin.apps.addFirstApp')}
          </button>
        </div>
      )}

      {/* Edit Modal */}
      {editingApp && (
        <AppEditorModal
          app={editingApp.app}
          platform={selectedPlatform}
          isNew={editingApp.isNew}
          onSave={handleSave}
          onClose={() => setEditingApp(null)}
        />
      )}

      {/* Copy Modal */}
      {copyTarget && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
          <div className="w-full max-w-md rounded-xl bg-dark-900 p-6">
            <h3 className="mb-4 text-lg font-semibold text-dark-100">{t('admin.apps.copyTo')}</h3>
            <div className="grid grid-cols-2 gap-2">
              {PLATFORMS.filter((p) => p !== copyTarget.platform).map((platform) => (
                <button
                  key={platform}
                  onClick={() =>
                    copyMutation.mutate({
                      platform: copyTarget.platform,
                      appId: copyTarget.appId,
                      targetPlatform: platform,
                    })
                  }
                  className="rounded-lg bg-dark-800 px-4 py-2 text-sm text-dark-200 hover:bg-dark-700"
                >
                  {PLATFORM_LABELS[platform]}
                </button>
              ))}
            </div>
            <button onClick={() => setCopyTarget(null)} className="btn-secondary mt-4 w-full">
              {t('common.cancel')}
            </button>
          </div>
        </div>
      )}

      {/* Import Modal */}
      {showImportModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
          <div className="flex max-h-[80vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-dark-900 p-6">
            <h3 className="mb-4 text-lg font-semibold text-dark-100">
              {t('admin.apps.importPreview', 'Import Preview')}
            </h3>

            {importError && (
              <div className="mb-4 rounded-lg border border-error-500/30 bg-error-500/10 p-3 text-error-400">
                {importError}
              </div>
            )}

            {importPreview && (
              <div className="mb-4 flex-1 space-y-4 overflow-y-auto">
                {Object.entries(importPreview.platformApps).map(
                  ([platform, platformApps]) =>
                    platformApps.length > 0 && (
                      <div key={platform} className="rounded-lg bg-dark-800/50 p-4">
                        <h4 className="mb-2 font-medium text-dark-200">
                          {PLATFORM_LABELS[platform] || platform} ({platformApps.length})
                        </h4>
                        <ul className="space-y-1">
                          {platformApps.map((app, idx) => (
                            <li key={idx} className="flex items-center gap-2 text-sm text-dark-400">
                              {app.isFeatured && <StarIcon filled />}
                              <span>{app.name}</span>
                              <span className="font-mono text-xs text-dark-600">
                                ({app.urlScheme || '-'})
                              </span>
                            </li>
                          ))}
                        </ul>
                      </div>
                    ),
                )}
                {Object.values(importPreview.platformApps).every((arr) => arr.length === 0) && (
                  <div className="py-8 text-center text-dark-400">
                    {t('admin.apps.noAppsToImport', 'No apps to import')}
                  </div>
                )}
              </div>
            )}

            <div className="flex justify-end gap-3 border-t border-dark-700 pt-4">
              <button
                onClick={() => {
                  setShowImportModal(false);
                  setImportPreview(null);
                  setImportError(null);
                }}
                className="btn-secondary"
              >
                {t('common.cancel')}
              </button>
              {importPreview && !importError && (
                <button onClick={handleConfirmImport} className="btn-primary">
                  {t('admin.apps.confirmImport', 'Import Apps')}
                </button>
              )}
            </div>
          </div>
        </div>
      )}

      {/* RemnaWave Settings Modal */}
      {showRemnaWaveSettings && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
          <div className="w-full max-w-lg rounded-xl bg-dark-900 p-6">
            <h3 className="mb-4 flex items-center gap-2 text-lg font-semibold text-dark-100">
              <CloudSyncIcon />
              {t('admin.apps.remnaWaveSettings', 'RemnaWave Settings')}
            </h3>

            <div className="space-y-4">
              <div>
                <label className="mb-2 block text-sm text-dark-300">
                  {t('admin.apps.remnaWaveConfigUuid', 'Config UUID')}
                </label>
                <input
                  type="text"
                  value={remnaWaveUuidInput}
                  onChange={(e) => setRemnaWaveUuidInput(e.target.value)}
                  placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
                  className="input w-full font-mono text-sm"
                />
                <p className="mt-1 text-xs text-dark-500">
                  {t(
                    'admin.apps.remnaWaveConfigUuidHint',
                    'UUID of subscription page config from RemnaWave panel',
                  )}
                </p>
              </div>

              {/* Available configs from RemnaWave */}
              {isLoadingConfigs ? (
                <div className="flex items-center justify-center py-4">
                  <div className="h-6 w-6 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
                </div>
              ) : (
                availableConfigs &&
                availableConfigs.length > 0 && (
                  <div>
                    <label className="mb-2 block text-sm text-dark-300">
                      {t('admin.apps.availableConfigs', 'Available configs')}
                    </label>
                    <div className="max-h-48 space-y-2 overflow-y-auto">
                      {availableConfigs.map((config) => (
                        <button
                          key={config.uuid}
                          onClick={() => setRemnaWaveUuidInput(config.uuid)}
                          className={`w-full rounded-lg border p-3 text-left transition-colors ${
                            remnaWaveUuidInput === config.uuid
                              ? 'border-accent-500 bg-accent-500/10'
                              : 'border-dark-700 bg-dark-800/50 hover:border-dark-600'
                          }`}
                        >
                          <div className="font-medium text-dark-100">{config.name}</div>
                          <div className="mt-1 font-mono text-xs text-dark-500">{config.uuid}</div>
                        </button>
                      ))}
                    </div>
                  </div>
                )
              )}
            </div>

            <div className="mt-6 flex justify-end gap-3 border-t border-dark-700 pt-4">
              <button onClick={() => setShowRemnaWaveSettings(false)} className="btn-secondary">
                {t('common.cancel')}
              </button>
              <button
                onClick={() => setUuidMutation.mutate(remnaWaveUuidInput || null)}
                disabled={setUuidMutation.isPending}
                className="btn-primary"
              >
                {setUuidMutation.isPending ? t('common.loading') : t('common.save')}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
