import { useCallback, useEffect, useRef, useState } from 'react';
import { AppState, Platform, ScrollView, View, Alert, ActivityIndicator } from 'react-native';
import { useRouter } from 'expo-router';
import { useBottomTabBarHeight } from 'react-native-bottom-tabs';
import { useTranslation } from 'react-i18next';
import { AppHeader } from '../../components/AppHeader';
import { LayerSwitchCard } from '../../components/blocker/LayerSwitchCard';
import { ProtectionLockedCard } from '../../components/blocker/ProtectionLockedCard';
import { CooldownBanner } from '../../components/blocker/CooldownBanner';
import { AddDomainSheet } from '../../components/blocker/AddDomainSheet';
import { MyFiltersList, VipDomainList } from '../../components/blocker/VipDomainList';
import { ProtectionDetailsSheet } from '../../components/blocker/ProtectionDetailsSheet';
import { DeactivationExplainerSheet } from '../../components/blocker/DeactivationExplainerSheet';
import { PermissionDeniedSheet } from '../../components/PermissionDeniedSheet';
import { ProtectionOffSheet } from '../../components/ProtectionOffSheet';
import { useProtectionState } from '../../hooks/useProtectionState';
import { useCustomDomains } from '../../hooks/useCustomDomains';
import { useBlocklistSync } from '../../hooks/useBlocklistSync';
import { useDomainSubmissionRealtime } from '../../hooks/useDomainSubmissionRealtime';
import { protection, FAMILY_CONTROLS_AVAILABLE } from '../../lib/protection';
import { useColors } from '../../lib/theme';

export default function BlockerScreen() {
  const router = useRouter();
  const { t } = useTranslation();
  const colors = useColors();
  // react-native-bottom-tabs Tab-Bar ist iOS-nativ + translucent → unsere Content-View
  // erstreckt sich UNTER den Tab-Bar. Ohne diese Höhe würden FAB + Bottom-Padding
  // hinterm Tab-Bar verschwinden.
  const tabBarHeight = useBottomTabBarHeight();
  const {
    state,
    loading,
    cooldownRemainingFormatted,
    refresh,
    activateUrlFilter,
    activateFamilyControls,
    requestDeactivation,
    cancelDeactivation,
  } = useProtectionState();

  const plan = state?.plan ?? 'free';
  const {
    domains,
    tier,
    countsByType,
    limits,
    addDomain,
    submitDomain,
    refresh: refreshDomains,
  } = useCustomDomains(plan);
  const { sync: syncBlocklist, syncWebContent } = useBlocklistSync();

  // Realtime: Domain-Submission-Status (approved/rejected/in_review) live patchen.
  const onDomainChange = useCallback(async () => {
    await refreshDomains();
    if (urlFilterActiveRef.current) {
      const sync = await syncBlocklist();
      console.log('[blocker] resync after domain change:', sync);
      await refresh();
    }
  }, [refreshDomains, syncBlocklist, refresh]);
  useDomainSubmissionRealtime(onDomainChange, true);

  const [vipOpen, setVipOpen] = useState(false);
  const [addSheetOpen, setAddSheetOpen] = useState(false);

  const [detailsOpen, setDetailsOpen] = useState(false);
  const [explainerOpen, setExplainerOpen] = useState(false);
  const [permissionDeniedOpen, setPermissionDeniedOpen] = useState(false);
  const [familyControlsErrorOpen, setFamilyControlsErrorOpen] = useState(false);
  const [protectionOffOpen, setProtectionOffOpen] = useState(false);

  const urlFilterActive = state?.layers.urlFilter === true;
  const familyControlsActive = state?.layers.familyControls === true;
  const appDeletionLockActive = (state?.layers.appDeletionLock ?? familyControlsActive) === true;
  // "lockedIn" = beide Layer aktiv: URL-Filter (echter Schutz) UND App-Lock
  // (Hardening). Family-Controls ALLEINE = kein Schutz, nur denyAppRemoval —
  // ohne URL-Filter sieht der User trotzdem Glücksspielseiten. Daher BEIDE
  // müssen an sein damit der "Schutz aktiv"-Banner gezeigt wird.
  // "lockedIn" normal = URL-Filter UND App-Lock aktiv. Wenn Family Controls
  // build-seitig nicht verfügbar ist (Distribution-Entitlement pending), kann
  // es keinen App-Lock geben → dann reicht der URL-Filter allein für "geschützt".
  const lockedIn =
    urlFilterActive && (appDeletionLockActive || !FAMILY_CONTROLS_AVAILABLE);

  const urlFilterActiveRef = useRef(urlFilterActive);
  useEffect(() => { urlFilterActiveRef.current = urlFilterActive; }, [urlFilterActive]);

  // Auto-Sync wenn URL-Filter beim Page-Mount/-Resume schon aktiv ist.
  const syncedOnceRef = useRef(false);
  useEffect(() => {
    if (!urlFilterActive) return;
    if (syncedOnceRef.current) return;
    syncedOnceRef.current = true;
    syncBlocklist().then((res) => {
      console.log('[blocker] auto-sync on mount:', res);
      if (res.ok) refresh();
    });
  }, [urlFilterActive, syncBlocklist, refresh]);

  // Layer 2 / VIP: webContent-Domain-Liste IMMER beim Mount syncen — ungated,
  // da Layer 2 an Family Controls hängt, nicht am URL-Filter.
  const webContentSyncedRef = useRef(false);
  useEffect(() => {
    if (webContentSyncedRef.current) return;
    webContentSyncedRef.current = true;
    syncWebContent();
  }, [syncWebContent]);

  // Wenn User aus System-Settings zurückkommt (z.B. nach a11y-Aktivierung) → State neu laden.
  useEffect(() => {
    const sub = AppState.addEventListener('change', (next) => {
      if (next === 'active') {
        refresh();
        syncWebContent();
      }
    });
    return () => sub.remove();
  }, [refresh, syncWebContent]);

  // ─── Activate-Handler pro Layer ──────────────────────────────────────

  async function handleActivateUrlFilter() {
    try {
      const result = await activateUrlFilter();
      console.log('[blocker] activateUrlFilter:', result);
      if (!result.enabled) {
        // iOS-spezifisch: NEFilterErrorDomain code 5 = User hat „Nicht erlauben"
        // im System-Dialog getippt → iOS cached den Denied-State. Special-Sheet
        // statt rohem Alert (Recovery via removeFromPreferences + Settings-Deep-Link).
        const isPermissionDenied =
          Platform.OS === 'ios' &&
          typeof result.error === 'string' &&
          /NEFilterErrorDomain:\s*5/i.test(result.error);
        if (isPermissionDenied) {
          setPermissionDeniedOpen(true);
          return result;
        }
        Alert.alert(
          t('blocker.activate_url_failed_title'),
          result.error ?? t('blocker.activate_url_failed_msg'),
          [
            { text: t('common.ok') },
            { text: t('blocker.activate_settings_btn'), onPress: () => protection.openSystemSettings() },
          ],
        );
      } else {
        const sync = await syncBlocklist();
        console.log('[blocker] post-activate sync:', sync);
        if (sync.ok) {
          await refresh();
        } else {
          Alert.alert(
            t('blocker.sync_list_failed_title'),
            sync.error ?? t('blocker.sync_list_failed_msg'),
          );
        }
      }
      return result;
    } catch (e: any) {
      console.error('[blocker] activateUrlFilter threw:', e);
      Alert.alert(t('blocker.activation_failed_title'), e?.message ?? t('common.unknown_error'));
      return { enabled: false };
    }
  }

  async function handleActivateFamilyControls() {
    try {
      const result = await activateFamilyControls();
      console.log('[blocker] activateFamilyControls:', result);
      // `accessibility_pending` = a11y-Berechtigung fehlt noch → System-Settings wurden
      // geöffnet. Kein Fehler-Modal (sonst Modal-Loop bei jedem Tap).
      if (!result.enabled && result.error !== 'accessibility_pending') {
        // iOS: NSCocoaErrorDomain code 4099 = XPC-Communication-Failure zum
        // FamilyControls-Daemon (häufig nach „Don't Allow" oder bei iOS-Auth-
        // Daemon-State-Issue). Recovery-Sheet statt rohem Alert — mit Anleitung
        // (Restart Device / Settings / App reinstall).
        const isXpcFailure =
          Platform.OS === 'ios' &&
          typeof result.error === 'string' &&
          /NSCocoaErrorDomain:\s*4099/i.test(result.error);
        if (isXpcFailure) {
          setFamilyControlsErrorOpen(true);
          return result;
        }
        Alert.alert(
          t('blocker.activate_app_lock_failed_title'),
          result.error ?? t('blocker.activate_app_lock_failed_msg'),
        );
      }
      return result;
    } catch (e: any) {
      console.error('[blocker] activateFamilyControls threw:', e);
      Alert.alert(t('blocker.activation_failed_title'), e?.message ?? t('common.unknown_error'));
    }
    return { enabled: false };
  }

  // ─── 3-Click Cooldown-Trigger ────────────────────────────────────────

  function openDetails() {
    setDetailsOpen(true);
  }

  function fromDetailsToExplainer() {
    setDetailsOpen(false);
    setTimeout(() => setExplainerOpen(true), 250);
  }

  function deflectToLyra() {
    setDetailsOpen(false);
    setTimeout(() => router.push('/lyra' as any), 250);
  }

  function deflectToBreathe() {
    setExplainerOpen(false);
    setTimeout(() => router.push('/urge' as any), 250);
  }

  async function handleStartCooldown(reason: string) {
    await requestDeactivation(reason);
  }

  async function handleCancelCooldown() {
    try {
      await cancelDeactivation();
    } catch (e: any) {
      Alert.alert(t('common.error'), e?.message ?? t('blocker.deactivation_cancel_failed'));
    }
  }

  const bypassAlertShownRef = useRef(false);
  useEffect(() => {
    if (state?.phase !== 'recoveringFromBypass') {
      bypassAlertShownRef.current = false;
      return;
    }
    if (bypassAlertShownRef.current) return;
    bypassAlertShownRef.current = true;
    setProtectionOffOpen(true);
  }, [state?.phase]);

  // ─── Render ──────────────────────────────────────────────────────────

  return (
    <View className="flex-1 bg-neutral-50">
      <AppHeader />

      {loading && !state ? (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <ActivityIndicator size="large" color="#737373" />
        </View>
      ) : state ? (
        <>
          <ScrollView
            contentContainerStyle={{
              padding: 16,
              paddingBottom: tabBarHeight + 80,
              gap: 14,
            }}
            showsVerticalScrollIndicator={false}
          >
            {/* Locked-In Mode (FC aktiv) → NUR Schutz-Status + Cooldown-Pfad */}
            {lockedIn ? (
              <ProtectionLockedCard state={state} onPressSettings={openDetails} />
            ) : (
              <View style={{ gap: 10 }}>
                <LayerSwitchCard
                  icon="globe-outline"
                  title={t('blocker.layers_url_filter_title')}
                  subtitle={
                    urlFilterActive
                      ? t('blocker.layers_url_filter_subtitle_active')
                      : t('blocker.layers_url_filter_subtitle_inactive')
                  }
                  active={urlFilterActive}
                  onActivate={handleActivateUrlFilter}
                />
                {Platform.OS === 'android' ? (
                  <LayerSwitchCard
                    icon="lock-closed-outline"
                    title={t('blocker.layers_app_lock_title')}
                    subtitle={
                      state.layers.accessibility === true
                        ? t('blocker.layers_a11y_subtitle_active')
                        : t('blocker.layers_a11y_subtitle_inactive')
                    }
                    active={state.layers.accessibility === true}
                    onActivate={handleActivateFamilyControls}
                    warning={t('blocker.layers_app_lock_warning')}
                  />
                ) : FAMILY_CONTROLS_AVAILABLE ? (
                  /* iOS App-Lock nur zeigen wenn das Family-Controls-Entitlement
                     im Build aktiv ist. Distribution-Builds ohne Apple-Approval
                     → Card ausblenden statt ein sandbox-blockiertes Feature
                     anzubieten (NSCocoaErrorDomain:4099). */
                  <LayerSwitchCard
                    icon="lock-closed-outline"
                    title={t('blocker.layers_app_lock_title')}
                    subtitle={
                      appDeletionLockActive
                        ? t('blocker.layers_app_lock_subtitle_active')
                        : t('blocker.layers_app_lock_subtitle_inactive')
                    }
                    active={appDeletionLockActive}
                    onActivate={handleActivateFamilyControls}
                    warning={t('blocker.layers_app_lock_warning')}
                    lockedHint={t('blocker.layers_app_lock_locked_hint')}
                  />
                ) : null}
              </View>
            )}

            {/* CooldownBanner */}
            {state.cooldown.active && (
              <CooldownBanner
                remainingFormatted={cooldownRemainingFormatted}
                onCancel={handleCancelCooldown}
              />
            )}

            {/* Sektion 1: Meine Filter (unified web + mail_domain) */}
            <MyFiltersList
              domains={domains}
              tier={tier}
              totalCount={countsByType.web + countsByType.mail}
              totalLimit={limits.web + limits.mail}
              globalBlocklistCount={state.blocklistCount}
              onAddPress={() => setAddSheetOpen(true)}
              onSubmitDomain={submitDomain}
              colors={colors}
            />

            {/* Sektion 2: VIP-Liste (Zweitschutz, collapsible) */}
            <VipDomainList
              domains={domains}
              open={vipOpen}
              onToggle={() => setVipOpen((v) => !v)}
              colors={colors}
            />
          </ScrollView>

          {/* Sheets */}
          <AddDomainSheet
            visible={addSheetOpen}
            tier={tier}
            onClose={() => {
              setAddSheetOpen(false);
              refreshDomains();
            }}
            onAdd={async (pattern, kind, opts) => {
              const result = await addDomain(pattern, kind, opts);
              if (result.ok) {
                syncWebContent();
                const sync = await syncBlocklist();
                if (sync.ok) refresh();
              }
              return result;
            }}
          />

          <ProtectionDetailsSheet
            visible={detailsOpen}
            state={state}
            onClose={() => setDetailsOpen(false)}
            onRequestDeactivation={fromDetailsToExplainer}
            onTalkToLyra={deflectToLyra}
          />

          <DeactivationExplainerSheet
            visible={explainerOpen}
            onClose={() => setExplainerOpen(false)}
            onBreathe={deflectToBreathe}
            onStartCooldown={handleStartCooldown}
          />

          <PermissionDeniedSheet
            visible={permissionDeniedOpen}
            onClose={() => setPermissionDeniedOpen(false)}
            onRetry={async () => {
              const res = await protection.resetUrlFilter();
              if (res.enabled) {
                await refresh();
              }
              return res;
            }}
          />

          <PermissionDeniedSheet
            visible={familyControlsErrorOpen}
            onClose={() => setFamilyControlsErrorOpen(false)}
            variant="family_controls"
            onRetry={async () => {
              const res = await protection.activateFamilyControls();
              if (res.enabled) {
                await refresh();
              }
              return res;
            }}
          />

          <ProtectionOffSheet
            visible={protectionOffOpen}
            onClose={() => setProtectionOffOpen(false)}
            onReactivate={() => handleActivateUrlFilter()}
          />
        </>
      ) : null}
    </View>
  );
}

