import { useEffect, useState } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { router } from "expo-router";
import { MaterialIcons } from "@expo/vector-icons";
import { markOnboardingComplete } from "@/lib/setupState";
import { loadCodexAuth, loadClaudeSessionKey } from "@/lib/storage";
import { COLORS } from "@/lib/constants";

export default function OnboardingDoneScreen() {
  const [codexConfigured, setCodexConfigured] = useState(false);
  const [claudeConfigured, setClaudeConfigured] = useState(false);

  useEffect(() => {
    Promise.all([loadCodexAuth(), loadClaudeSessionKey()]).then(
      ([codex, claude]) => {
        setCodexConfigured(!!codex);
        setClaudeConfigured(!!claude);
      }
    );
  }, []);

  const handleEnterApp = async () => {
    await markOnboardingComplete();
    router.replace("/(tabs)");
  };

  const noneConfigured = !codexConfigured && !claudeConfigured;

  return (
    <SafeAreaView className="flex-1 bg-neutral-950">
      <View className="flex-1 px-8 items-center justify-center">
        {/* Icon */}
        <View
          className="w-20 h-20 rounded-3xl items-center justify-center mb-8"
          style={{ backgroundColor: `${COLORS.codex}22` }}
        >
          <MaterialIcons
            name={noneConfigured ? "info-outline" : "check-circle"}
            size={40}
            color={noneConfigured ? COLORS.muted : COLORS.codex}
          />
        </View>

        {/* Title */}
        <Text className="text-4xl font-bold text-white mb-3 text-center">
          {noneConfigured ? "Almost there" : "You're all set!"}
        </Text>
        <Text className="text-neutral-400 text-base text-center leading-relaxed mb-10">
          {noneConfigured
            ? "No services configured yet. You can set them up anytime in Settings."
            : "Your services are connected and ready to monitor."}
        </Text>

        {/* Summary cards */}
        <View className="w-full gap-y-3 mb-10">
          <View className="flex-row items-center gap-x-3 bg-neutral-900 rounded-2xl p-4 border border-neutral-800">
            <View
              className="w-10 h-10 rounded-xl items-center justify-center"
              style={{
                backgroundColor: codexConfigured
                  ? `${COLORS.codex}22`
                  : "#27272a",
              }}
            >
              <MaterialIcons
                name={codexConfigured ? "check-circle" : "radio-button-unchecked"}
                size={22}
                color={codexConfigured ? COLORS.codex : "#525252"}
              />
            </View>
            <View className="flex-1">
              <Text
                className="font-semibold"
                style={{ color: codexConfigured ? "white" : "#525252" }}
              >
                Codex CLI
              </Text>
              <Text className="text-neutral-600 text-sm">
                {codexConfigured ? "Auth imported" : "Not configured"}
              </Text>
            </View>
          </View>

          <View className="flex-row items-center gap-x-3 bg-neutral-900 rounded-2xl p-4 border border-neutral-800">
            <View
              className="w-10 h-10 rounded-xl items-center justify-center"
              style={{
                backgroundColor: claudeConfigured
                  ? `${COLORS.claude}22`
                  : "#27272a",
              }}
            >
              <MaterialIcons
                name={claudeConfigured ? "check-circle" : "radio-button-unchecked"}
                size={22}
                color={claudeConfigured ? COLORS.claude : "#525252"}
              />
            </View>
            <View className="flex-1">
              <Text
                className="font-semibold"
                style={{ color: claudeConfigured ? "white" : "#525252" }}
              >
                Claude.ai
              </Text>
              <Text className="text-neutral-600 text-sm">
                {claudeConfigured ? "Session saved" : "Not configured"}
              </Text>
            </View>
          </View>
        </View>

        {/* CTA */}
        <TouchableOpacity
          onPress={handleEnterApp}
          className="w-full rounded-2xl py-4 items-center"
          style={{ backgroundColor: COLORS.codex }}
        >
          <Text className="text-white font-bold text-base">Open App</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
}