import { useState, useEffect, useCallback } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import { useConfig } from '../../hooks/useConfig';
import { useUnsavedGuard } from '../../lib/unsavedGuard';
import { updateConfig } from '../../api';
import { LlmWorkersForm } from './LlmWorkersForm';
import { WorkspaceForm } from './WorkspaceForm';
import { PathsStorageForm } from './PathsStorageForm';
import { ExecutionForm } from './ExecutionForm';
import { ToolsForm } from './ToolsForm';
import { ToolsWebForm } from './ToolsWebForm';
import { ToolsMediaForm } from './ToolsMediaForm';
import { ToolsExternalForm } from './ToolsExternalForm';
import { KnowledgeNamespacesForm } from './KnowledgeNamespacesForm';
import { AskSubtasksForm } from './AskSubtasksForm';
import { SearchFilterForm } from './SearchFilterForm';
import { BrowserSettingsForm } from './BrowserSettingsForm';
import { ContextForm } from './ContextForm';
import { SafetyForm } from './SafetyForm';
import { PreferencesForm } from './PreferencesForm';
import { NotificationsForm } from './NotificationsForm';
import { BrandingForm } from './BrandingForm';
import { MemoryLearningForm } from './MemoryLearningForm';
import { MetricsForm } from './MetricsForm';
import { ReflectionForm } from './ReflectionForm';
import { McpForm } from './McpForm';
import { SshForm } from './SshForm';
import { GatewayServerForm } from './GatewayServerForm';

import { useAuthState } from '../../App';

interface ConfigFormProps {
  section: string;
  isAdmin: boolean;
}

function PreferencesFormWrapper() {
  const auth = useAuthState();
  if (auth.mode !== 'authenticated') {
    return <div className="text-sm text-slate-500">Log in to manage preferences.</div>;
  }
  return (
    <PreferencesForm
      user={{
        defaultVisibility: auth.user.defaultVisibility ?? 'private',
        defaultVisibilityOrgId: auth.user.defaultVisibilityOrgId ?? null,
      }}
    />
  );
}

/** Set a value at a dot-separated path in an object (immutable). */
function setNestedValue(obj: any, path: string, value: any): any {
  const keys = path.split('.');
  if (keys.length === 1) {
    return { ...obj, [keys[0]]: value };
  }
  const [first, ...rest] = keys;
  return { ...obj, [first]: setNestedValue(obj[first] ?? {}, rest.join('.'), value) };
}

/** Count leaf-level differences between two values. Arrays are compared as a single leaf. */
function countDiff(a: any, b: any): number {
  if (a === b) return 0;
  if (Array.isArray(a) || Array.isArray(b)) {
    return JSON.stringify(a) === JSON.stringify(b) ? 0 : 1;
  }
  if (a && b && typeof a === 'object' && typeof b === 'object') {
    const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
    let total = 0;
    for (const k of keys) total += countDiff(a[k], b[k]);
    return total;
  }
  // Treat undefined/null/empty-string as equivalent to reduce noise from optional fields.
  const norm = (v: any) => (v === undefined || v === null || v === '' ? null : v);
  return norm(a) === norm(b) ? 0 : 1;
}

export function ConfigForm({ section, isAdmin }: ConfigFormProps) {
  // User-scoped sections use their own per-user APIs and should not load the
  // admin /api/config draft. Render them stand-alone without the global save bar.
  if (section === 'preferences') {
    return <div className="max-w-2xl"><PreferencesFormWrapper /></div>;
  }
  if (section === 'notifications') {
    return <div className="max-w-2xl"><NotificationsForm /></div>;
  }
  if (section === 'memory-learning') {
    return <div className="max-w-2xl"><MemoryLearningForm /></div>;
  }
  if (!isAdmin) {
    return <div className="max-w-2xl text-sm text-slate-500">この設定は管理者のみ閲覧できます。</div>;
  }
  // Step 8: 'gateway-keys' bookmarks are redirected to 'gateway-server'
  // by SettingsPage via LEGACY_SECTION_REDIRECT, so we no longer need a
  // dedicated branch here. The keys UI lives inside GatewayServerForm
  // as the Virtual Keys section.
  return <ConfigFormInner section={section} isAdmin={isAdmin} />;
}

function ConfigFormInner({ section }: ConfigFormProps) {
  const { data, isLoading, error, refetch } = useConfig();
  const queryClient = useQueryClient();

  const [draft, setDraft] = useState<any>(null);
  const [etag, setEtag] = useState('');
  const [overriddenByEnv, setOverriddenByEnv] = useState<Record<string, boolean>>({});
  const [isDirty, setIsDirty] = useState(false);
  const [saving, setSaving] = useState(false);
  const [toast, setToast] = useState<string | null>(null);

  // Sync fetched config into draft
  useEffect(() => {
    if (data) {
      setDraft(data.config);
      setEtag(data.etag);
      setOverriddenByEnv(data.overriddenByEnv);
      setIsDirty(false);
    }
  }, [data]);

  const handleChange = useCallback((path: string, value: any) => {
    setDraft((prev: any) => setNestedValue(prev, path, value));
    setIsDirty(true);
  }, []);

  const handleDiscard = () => {
    if (data) {
      setDraft(data.config);
      setIsDirty(false);
    }
  };

  const handleSave = async () => {
    if (!draft) return;
    setSaving(true);
    try {
      const result = await updateConfig(draft, etag);
      if (result.conflict) {
        if (confirm('設定が他で変更されました。再読み込みしますか？')) {
          await refetch();
        }
        return;
      }
      await queryClient.invalidateQueries({ queryKey: ['config'] });
      setIsDirty(false);
      setToast('保存しました');
      setTimeout(() => setToast(null), 2000);
    } catch (e: any) {
      setToast(`エラー: ${e.message}`);
      setTimeout(() => setToast(null), 3000);
    } finally {
      setSaving(false);
    }
  };

  const dirtyCount = isDirty && data ? countDiff(data.config, draft) : 0;
  // Arm beforeunload + register an in-app guard so navigating elsewhere
  // (e.g. clicking a TopBar tab) prompts when there are unsaved fields.
  useUnsavedGuard(dirtyCount > 0);

  if (isLoading) return <div className="text-sm text-slate-400">Loading...</div>;
  if (error) return <div className="text-sm text-red-500">設定の読み込みに失敗しました</div>;
  if (!draft) return null;

  const formProps = { config: draft, onChange: handleChange, overriddenByEnv };

  const sectionForm = (() => {
    switch (section) {
      // ── System
      case 'branding': return <BrandingForm {...formProps} />;
      case 'paths-storage': return <PathsStorageForm {...formProps} />;
      case 'execution': return <ExecutionForm {...formProps} />;

      // ── LLM (Step 7: LlmWorkersForm replaces ProviderForm; reads llm.workers,
      // not provider.workers. 'provider' alias kept for URL backwards compat.)
      case 'provider':
      case 'llm-workers':
        return <LlmWorkersForm {...formProps} />;
      case 'gateway-server': return <GatewayServerForm {...formProps} />;
      case 'llm-metrics': return <MetricsForm {...formProps} />;

      // ── Agent Runtime
      case 'ask-subtasks': return <AskSubtasksForm {...formProps} />;
      case 'context': return <ContextForm {...formProps} />;
      case 'safety': return <SafetyForm {...formProps} />;
      case 'reflection': return <ReflectionForm {...formProps} />;

      // ── Tools sub-sections — Step 9 split the legacy grab-bag
      // ToolsForm into focused per-category forms. Each binds to the
      // same `tools.*` config keys as before (functionally equivalent),
      // just without the in-form sub-tab nav.
      case 'tools-web':
        // Folds SearchFilterForm in as a sub-section (Step 3
        // INVESTIGATE #3 follow-up).
        return <ToolsWebForm {...formProps} />;
      case 'tools-browser':
        // Browser runtime (page/action timeouts, channel, etc.) is its
        // own form — kept verbatim, just relocated.
        return <BrowserSettingsForm {...formProps} />;
      case 'tools-media':
        return <ToolsMediaForm {...formProps} />;
      case 'tools-external':
        return <ToolsExternalForm {...formProps} />;
      case 'tools-legacy-knowledge':
        return <KnowledgeNamespacesForm {...formProps} />;

      // ── MCP & Connections
      case 'mcp': return <McpForm {...formProps} />;

      // ── SSH (admin)
      case 'ssh': return <SshForm {...formProps} showToast={(msg) => {
        setToast(msg);
        setTimeout(() => setToast(null), 3000);
      }} />;

      // ── Legacy ids — kept here only so a direct URL hit still renders
      // something during the transition window. The Settings page also
      // rewrites the URL to the new id via `LEGACY_SECTION_REDIRECT`, so
      // these branches are mostly defensive. ('provider' moved to the
      // LLM-Workers case above — Step 7 — so it now lands on the new
      // form. 'tools' bookmark still resolves to the legacy ToolsForm
      // with all sub-tabs visible per Step 9 fallback design.)
      case 'workspace': return <WorkspaceForm {...formProps} />;
      case 'tools': return <ToolsForm {...formProps} />;
      case 'search-filter': return <SearchFilterForm {...formProps} />;
      case 'browser-settings': return <BrowserSettingsForm {...formProps} />;

      default: return <div className="text-sm text-slate-400">Unknown section: {section}</div>;
    }
  })();

  const dirty = dirtyCount > 0;

  return (
    <div className="max-w-2xl pb-20">
      {sectionForm}

      {/* Sticky save bar: stays visible while scrolling, gets a strong amber
          accent when dirty so it cannot be missed. The pb-20 on the parent
          reserves space so the bar never overlaps the last form field. */}
      <div
        className={`sticky bottom-0 px-3 py-2.5 mt-6 border rounded-md flex items-center justify-end gap-2 transition-colors ${
          dirty
            ? 'bg-amber-50 border-amber-300 shadow-[0_2px_8px_rgba(180,83,9,0.08)]'
            : 'bg-white border-hairline'
        }`}
      >
        {toast ? (
          <span className={`text-2xs mr-auto ${toast.startsWith('エラー') ? 'text-red-600' : 'text-emerald-700'}`}>
            {toast}
          </span>
        ) : dirty ? (
          <span className="text-xs mr-auto text-amber-800 flex items-center gap-1.5 font-medium min-w-0">
            <span className="inline-block w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse flex-shrink-0" aria-hidden />
            <span className="truncate">
              <span className="hidden sm:inline">未保存: {dirtyCount} 項目 — 「Save &amp; Apply」を押すまで反映されません</span>
              <span className="sm:hidden">未保存 {dirtyCount}</span>
            </span>
          </span>
        ) : null}
        <button
          onClick={handleDiscard}
          disabled={!dirty}
          className="px-3 h-8 text-xs text-slate-700 border border-hairline bg-white rounded-md hover:bg-surface disabled:opacity-50 transition-colors whitespace-nowrap flex-shrink-0"
        >
          <span className="hidden sm:inline">Discard Changes</span>
          <span className="sm:hidden">Discard</span>
        </button>
        <button
          onClick={handleSave}
          disabled={!dirty || saving}
          className="px-3 h-8 text-xs font-semibold bg-accent text-accent-fg rounded-md hover:bg-accent-deep disabled:opacity-50 transition-colors whitespace-nowrap flex-shrink-0"
        >
          {saving ? 'Saving...' : (
            <>
              <span className="hidden sm:inline">Save &amp; Apply</span>
              <span className="sm:hidden">Save</span>
            </>
          )}
        </button>
      </div>
    </div>
  );
}