import React, { useEffect, useState } from "react";
import { ActivityIndicator, Pressable, ScrollView, Text, TextInput, View, useWindowDimensions } from "react-native";
import { useQuery } from "@tanstack/react-query";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
import Ionicons from "@react-native-vector-icons/ionicons";

import { AdminCrud, AdminForm } from "@/src/admin/AdminCrud";
import { CONFIG_FIELDS, SECTIONS } from "@/src/admin/schemas";
import { ADMIN_TOKEN, api, getToken, setToken } from "@/src/api";
import { Logo } from "@/src/components/Logo";
import { queryClient } from "@/src/query-client";
import { makeStyles, useTheme } from "@/src/theme";
import { radius, space } from "@/src/ui";

// Painel administrativo separado (rota /admin) com login próprio de administrador.
export default function AdminPanel() {
  const [authed, setAuthed] = useState<boolean | null>(null);
  useEffect(() => {
    getToken(ADMIN_TOKEN).then(async (t) => {
      if (!t) return setAuthed(false);
      try {
        await api("/admin/stats", { tokenKey: ADMIN_TOKEN });
        setAuthed(true);
      } catch {
        setAuthed(false);
      }
    });
  }, []);
  if (authed === null) return <View style={{ flex: 1 }} />;
  return authed ? <Dashboard onLogout={() => setAuthed(false)} /> : <AdminLogin onLogin={() => setAuthed(true)} />;
}

function AdminLogin({ onLogin }: { onLogin: () => void }) {
  const styles = useStyles();
  const { colors } = useTheme();
  const insets = useSafeAreaInsets();
  const [u, setU] = useState("");
  const [p, setP] = useState("");
  const [show, setShow] = useState(false);
  const [err, setErr] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const submit = async () => {
    setLoading(true);
    setErr(null);
    try {
      const r = await api<{ token: string }>("/admin/login", { method: "POST", body: { username: u.trim().toLowerCase(), password: p } });
      await setToken(ADMIN_TOKEN, r.token, true);
      onLogin();
    } catch (e: any) {
      setErr(e.message);
    } finally {
      setLoading(false);
    }
  };
  return (
    <KeyboardAwareScrollView style={styles.root} contentContainerStyle={[styles.loginWrap, { paddingTop: insets.top + space.xxl }]} keyboardShouldPersistTaps="handled">
      <View style={styles.loginCard} testID="admin-login-screen">
        <Logo size={26} />
        <Text style={styles.subtitle}>Painel Administrativo</Text>
        <TextInput testID="admin-username-input" value={u} onChangeText={setU} placeholder="Usuário admin" placeholderTextColor={colors.muted} autoCapitalize="none" style={styles.input} />
        <View style={styles.passRow}>
          <TextInput testID="admin-password-input" value={p} onChangeText={setP} placeholder="Senha" placeholderTextColor={colors.muted} secureTextEntry={!show} style={[styles.input, { flex: 1, marginTop: 0 }]} onSubmitEditing={submit} />
          <Pressable testID="admin-toggle-password" onPress={() => setShow(!show)} style={styles.eye}>
            <Ionicons name={show ? "eye-off" : "eye"} size={20} color={colors.onSurfaceTertiary} />
          </Pressable>
        </View>
        {err && <Text testID="admin-login-error" style={{ color: colors.error, marginTop: space.sm }}>{err}</Text>}
        <Pressable testID="admin-login-submit" onPress={submit} style={styles.btn}>
          {loading ? <ActivityIndicator color={colors.onBrandPrimary} /> : <Text style={styles.btnText}>Entrar no painel</Text>}
        </Pressable>
      </View>
    </KeyboardAwareScrollView>
  );
}

function Dashboard({ onLogout }: { onLogout: () => void }) {
  const styles = useStyles();
  const { colors } = useTheme();
  const insets = useSafeAreaInsets();
  const { width } = useWindowDimensions();
  const wide = width >= 900;
  const [sec, setSec] = useState("config");
  const stats = useQuery({ queryKey: ["admin", "stats"], queryFn: () => api<Record<string, number>>("/admin/stats", { tokenKey: ADMIN_TOKEN }) });
  const cfg = useQuery({ queryKey: ["admin", "config"], queryFn: () => api<any>("/admin/config", { tokenKey: ADMIN_TOKEN }) });
  const nav = [{ key: "config", label: "Aparência e Config.", icon: "color-palette-outline" }, ...SECTIONS];
  const current = SECTIONS.find((s) => s.key === sec);

  const logout = async () => {
    await setToken(ADMIN_TOKEN, null, false);
    onLogout();
  };

  const menu = nav.map((n) => (
    <Pressable key={n.key} testID={`admin-nav-${n.key}`} onPress={() => setSec(n.key)} style={[styles.navItem, sec === n.key && styles.navActive, !wide && { flexShrink: 0 }]}>
      <Ionicons name={n.icon as any} size={18} color={sec === n.key ? colors.onBrandPrimary : colors.onSurfaceTertiary} />
      <Text style={[styles.navText, sec === n.key && { color: colors.onBrandPrimary }]}>
        {n.label}
        {stats.data?.[n.key] !== undefined ? ` (${stats.data[n.key]})` : ""}
      </Text>
    </Pressable>
  ));

  return (
    <View style={[styles.root, { paddingTop: insets.top }]} testID="admin-dashboard">
      <View style={styles.topbar}>
        <Logo size={18} />
        <Text style={styles.badge}>ADMIN</Text>
        <View style={{ flex: 1 }} />
        <Pressable testID="admin-logout" onPress={logout} style={styles.logout}>
          <Ionicons name="log-out-outline" size={18} color={colors.onSurface} />
          <Text style={styles.navText}>Sair</Text>
        </Pressable>
      </View>
      <View style={{ flex: 1, flexDirection: wide ? "row" : "column" }}>
        {wide ? (
          <View style={styles.sidebar}>{menu}</View>
        ) : (
          <View style={{ height: 56 }}>
            <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: space.sm, paddingHorizontal: space.lg, alignItems: "center" }}>
              {menu}
            </ScrollView>
          </View>
        )}
        <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: space.xl, paddingBottom: insets.bottom + space.xl, maxWidth: 960 }}>
          {sec === "config" ? (
            <View testID="admin-section-config">
              <Text style={styles.h2}>Aparência e configurações remotas</Text>
              <Text style={styles.help}>Alterações são aplicadas no app sem recompilar (logo, fundo, nome, VPN).</Text>
              {cfg.data && (
                <AdminForm
                  testPrefix="admin-config-form"
                  fields={CONFIG_FIELDS}
                  initial={cfg.data}
                  onSubmit={async (d) => {
                    await api("/admin/config", { method: "PUT", body: d, tokenKey: ADMIN_TOKEN });
                    queryClient.invalidateQueries({ queryKey: ["config"] });
                    cfg.refetch();
                  }}
                />
              )}
            </View>
          ) : (
            current && <AdminCrud key={current.key} section={current} />
          )}
        </ScrollView>
      </View>
    </View>
  );
}

const useStyles = makeStyles((c) => ({
  root: { flex: 1, backgroundColor: c.surface },
  loginWrap: { flexGrow: 1, alignItems: "center", justifyContent: "center", padding: space.xl },
  loginCard: { width: "100%", maxWidth: 420, backgroundColor: c.surfaceSecondary, borderRadius: radius.lg, padding: space.xl, borderWidth: 1, borderColor: c.border, alignItems: "stretch", gap: space.sm },
  subtitle: { color: c.muted, fontSize: 14, marginBottom: space.md },
  input: { height: 48, backgroundColor: c.surfaceTertiary, color: c.onSurface, borderRadius: radius.sm, paddingHorizontal: space.md, borderWidth: 1, borderColor: c.border, marginTop: space.sm, fontSize: 15 },
  passRow: { flexDirection: "row", alignItems: "center", gap: space.sm, marginTop: space.sm },
  eye: { width: 48, height: 48, alignItems: "center", justifyContent: "center", backgroundColor: c.surfaceTertiary, borderRadius: radius.sm },
  btn: { height: 50, backgroundColor: c.brandPrimary, borderRadius: radius.sm, alignItems: "center", justifyContent: "center", marginTop: space.md },
  btnText: { color: c.onBrandPrimary, fontWeight: "800", fontSize: 16 },
  topbar: { flexDirection: "row", alignItems: "center", gap: space.md, paddingHorizontal: space.lg, height: 60, borderBottomWidth: 1, borderBottomColor: c.border, backgroundColor: c.surfaceSecondary },
  badge: { color: c.onBrandTertiary, backgroundColor: c.brandTertiary, paddingHorizontal: space.sm, paddingVertical: 2, borderRadius: radius.sm, fontSize: 11, fontWeight: "800" },
  logout: { flexDirection: "row", alignItems: "center", gap: space.xs, height: 44, paddingHorizontal: space.md },
  sidebar: { width: 250, padding: space.md, gap: space.xs, borderRightWidth: 1, borderRightColor: c.border, backgroundColor: c.surfaceSecondary },
  navItem: { flexDirection: "row", alignItems: "center", gap: space.sm, height: 40, paddingHorizontal: space.md, borderRadius: radius.sm },
  navActive: { backgroundColor: c.brandPrimary },
  navText: { color: c.onSurfaceTertiary, fontWeight: "600", fontSize: 14 },
  h2: { color: c.onSurface, fontSize: 22, fontWeight: "800" },
  help: { color: c.muted, fontSize: 13, marginTop: space.xs, marginBottom: space.lg },
}));