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";

export default function WelcomeScreen() {
  return (
    <SafeAreaView className="flex-1 bg-neutral-950">
      <View className="flex-1 px-8 justify-between py-12">
        {/* Logo + title */}
        <View className="items-center mt-8">
          <View className="flex-row items-center justify-center mb-8">
            <View
              className="w-16 h-16 rounded-2xl items-center justify-center"
              style={{ backgroundColor: "#10a37f" }}
            >
              <MaterialIcons name="auto-awesome" size={28} color="white" />
            </View>
            <View
              className="w-16 h-16 rounded-2xl items-center justify-center -ml-5"
              style={{ backgroundColor: "#d97706" }}
            >
              <MaterialIcons name="psychology" size={28} color="white" />
            </View>
          </View>
          <Text className="text-5xl font-bold text-white mb-4 tracking-tight">
            Codexbar
          </Text>
          <Text className="text-neutral-400 text-base text-center leading-relaxed">
            Monitor your Codex CLI and Claude.ai{"\n"}usage limits at a glance.
          </Text>
        </View>

        {/* Feature pills */}
        <View className="gap-y-3">
          <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: "#10a37f22" }}
            >
              <MaterialIcons name="auto-awesome" size={20} color="#10a37f" />
            </View>
            <View className="flex-1">
              <Text className="text-white font-semibold mb-0.5">Codex CLI</Text>
              <Text className="text-neutral-500 text-sm">
                Rate limits · Credits · Windows
              </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: "#d9770622" }}
            >
              <MaterialIcons name="psychology" size={20} color="#d97706" />
            </View>
            <View className="flex-1">
              <Text className="text-white font-semibold mb-0.5">Claude.ai</Text>
              <Text className="text-neutral-500 text-sm">
                5-hour · 7-day · Model usage
              </Text>
            </View>
          </View>
        </View>

        {/* CTA */}
        <View>
          <TouchableOpacity
            onPress={() => router.push("/onboarding/codex")}
            className="rounded-2xl py-4 items-center"
            style={{ backgroundColor: "#10a37f" }}
          >
            <Text className="text-white font-bold text-base">Get Started</Text>
          </TouchableOpacity>
          <Text className="text-neutral-600 text-xs text-center mt-4">
            You can configure services at any time in Settings
          </Text>
        </View>
      </View>
    </SafeAreaView>
  );
}