import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { usePlugins, useInstallPlugin, useActivatePlugin, useDeactivatePlugin, useUninstallPlugin } from '@/api/hooks';
import { Button } from '@/components/ui/Button';
import { Card } from '@/components/ui/Card';
import { Badge } from '@/components/ui/Badge';
import { EmptyState } from '@/components/ui/EmptyState';
import { Skeleton } from '@/components/ui/Skeleton';
import { ConfirmDialog } from '@/components/ui/ConfirmDialog';
import { useToast } from '@/components/ui/Toast';

interface Plugin {
  name: string;
  display_name?: string;
  description?: string;
  version?: string;
  status: 'discovered' | 'installed' | 'active' | 'inactive';
  installed?: boolean;
  active?: boolean;
}

function statusBadgeVariant(status: string): 'secondary' | 'primary' | 'success' | 'warning' {
  switch (status) {
    case 'active':
      return 'success';
    case 'installed':
    case 'inactive':
      return 'warning';
    default:
      return 'secondary';
  }
}

function statusLabel(status: string, t: (k: string) => string): string {
  switch (status) {
    case 'active':
      return t('settings.pluginActive');
    case 'installed':
      return t('settings.pluginInstalled');
    case 'inactive':
      return t('settings.pluginInactive');
    default:
      return t('settings.pluginDiscovered');
  }
}

export function SettingsPluginsPage() {
  const { t } = useTranslation();
  const toast = useToast();
  const { data, isLoading, isError, error, refetch } = usePlugins();
  const installMutation = useInstallPlugin();
  const activateMutation = useActivatePlugin();
  const deactivateMutation = useDeactivatePlugin();
  const uninstallMutation = useUninstallPlugin();

  const [confirmUninstall, setConfirmUninstall] = useState<Plugin | null>(null);
  const [confirmRemoveData, setConfirmRemoveData] = useState(false);

  const plugins: Plugin[] = data?.plugins ?? data ?? [];

  const handleInstall = async (plugin: Plugin) => {
    try {
      await installMutation.mutateAsync(plugin.name);
      toast.success(t('settings.pluginInstalledSuccess'));
    } catch (err: any) {
      toast.error(err.message || t('common.error'));
    }
  };

  const handleActivate = async (plugin: Plugin) => {
    try {
      await activateMutation.mutateAsync(plugin.name);
      toast.success(t('settings.pluginActivatedSuccess'));
    } catch (err: any) {
      toast.error(err.message || t('common.error'));
    }
  };

  const handleDeactivate = async (plugin: Plugin) => {
    try {
      await deactivateMutation.mutateAsync(plugin.name);
      toast.success(t('settings.pluginDeactivatedSuccess'));
    } catch (err: any) {
      toast.error(err.message || t('common.error'));
    }
  };

  const handleUninstall = async () => {
    if (!confirmUninstall) return;
    try {
      await uninstallMutation.mutateAsync({ name: confirmUninstall.name, removeData: confirmRemoveData });
      toast.success(t('settings.pluginUninstalledSuccess'));
      setConfirmUninstall(null);
      setConfirmRemoveData(false);
    } catch (err: any) {
      toast.error(err.message || t('common.error'));
    }
  };

  if (isLoading) {
    return (
      <div className="p-6 max-w-4xl mx-auto" data-testid="settings-plugins-page">
        <Skeleton className="h-8 w-48 mb-6" />
        <div className="space-y-3">
          <Skeleton className="h-20" />
          <Skeleton className="h-20" />
          <Skeleton className="h-20" />
        </div>
      </div>
    );
  }

  if (isError) {
    return (
      <div className="p-6 max-w-4xl mx-auto" data-testid="settings-plugins-page">
        <h1 className="text-2xl font-bold text-secondary-900 mb-6">{t('settings.plugins')}</h1>
        <EmptyState
          title={t('common.error')}
          action={<Button onClick={() => refetch()}>{t('common.reset')}</Button>}
        >
          <p className="text-sm text-secondary-500">{error?.message || t('common.error')}</p>
        </EmptyState>
      </div>
    );
  }

  return (
    <div className="p-6 max-w-4xl mx-auto" data-testid="settings-plugins-page">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-bold text-secondary-900">{t('settings.plugins')}</h1>
        <Button variant="secondary" size="sm" onClick={() => refetch()} data-testid="refresh-plugins-btn">
          {t('common.reset')}
        </Button>
      </div>

      {plugins.length === 0 ? (
        <EmptyState title={t('settings.noPlugins')} />
      ) : (
        <div className="space-y-4">
          {plugins.map((plugin) => {
            const status = plugin.active ? 'active' : plugin.installed ? 'inactive' : plugin.status || 'discovered';
            const isBusy =
              installMutation.isPending ||
              activateMutation.isPending ||
              deactivateMutation.isPending ||
              uninstallMutation.isPending;

            return (
              <Card key={plugin.name}>
                <div className="flex items-start justify-between gap-4">
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-3 mb-1">
                      <h3 className="text-lg font-semibold text-secondary-900">
                        {plugin.display_name || plugin.name}
                      </h3>
                      <Badge variant={statusBadgeVariant(status)}>
                        {statusLabel(status, t)}
                      </Badge>
                      {plugin.version && (
                        <span className="text-xs text-secondary-400">v{plugin.version}</span>
                      )}
                    </div>
                    {plugin.description && (
                      <p className="text-sm text-secondary-600">{plugin.description}</p>
                    )}
                  </div>
                  <div className="flex items-center gap-2 flex-shrink-0">
                    {status === 'discovered' && (
                      <Button
                        size="sm"
                        onClick={() => handleInstall(plugin)}
                        isLoading={installMutation.isPending}
                        disabled={isBusy}
                        data-testid={`install-plugin-${plugin.name}`}
                      >
                        {t('settings.pluginInstall')}
                      </Button>
                    )}
                    {status === 'inactive' && (
                      <>
                        <Button
                          size="sm"
                          onClick={() => handleActivate(plugin)}
                          isLoading={activateMutation.isPending}
                          disabled={isBusy}
                          data-testid={`activate-plugin-${plugin.name}`}
                        >
                          {t('settings.pluginActivate')}
                        </Button>
                        <Button
                          variant="danger"
                          size="sm"
                          onClick={() => setConfirmUninstall(plugin)}
                          disabled={isBusy}
                          data-testid={`uninstall-plugin-${plugin.name}`}
                        >
                          {t('settings.pluginUninstall')}
                        </Button>
                      </>
                    )}
                    {status === 'active' && (
                      <>
                        <Button
                          variant="secondary"
                          size="sm"
                          onClick={() => handleDeactivate(plugin)}
                          isLoading={deactivateMutation.isPending}
                          disabled={isBusy}
                          data-testid={`deactivate-plugin-${plugin.name}`}
                        >
                          {t('settings.pluginDeactivate')}
                        </Button>
                        <Button
                          variant="danger"
                          size="sm"
                          onClick={() => setConfirmUninstall(plugin)}
                          disabled={isBusy}
                          data-testid={`uninstall-plugin-${plugin.name}`}
                        >
                          {t('settings.pluginUninstall')}
                        </Button>
                      </>
                    )}
                  </div>
                </div>
              </Card>
            );
          })}
        </div>
      )}

      <ConfirmDialog
        open={!!confirmUninstall}
        title={t('settings.pluginUninstall')}
        message={`${t('settings.pluginUninstallConfirm')}: ${confirmUninstall?.display_name || confirmUninstall?.name}?`}
        variant="danger"
        onConfirm={handleUninstall}
        onCancel={() => {
          setConfirmUninstall(null);
          setConfirmRemoveData(false);
        }}
      >
        <label className="flex items-center gap-2 mt-3 cursor-pointer min-h-touch">
          <input
            type="checkbox"
            checked={confirmRemoveData}
            onChange={(e) => setConfirmRemoveData(e.target.checked)}
            className="w-4 h-4 rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
          />
          <span className="text-sm text-secondary-700">{t('settings.pluginRemoveData')}</span>
        </label>
      </ConfirmDialog>
    </div>
  );
}