import React from "react";
import {
  View,
  Text,
  StyleSheet,
  Image,
  Platform,
} from "react-native";
import { router } from "expo-router";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useColors } from "@/hooks/useColors";
import { PrimaryButton } from "@/components/PrimaryButton";

export default function WelcomeScreen() {
  const colors = useColors();
  const insets = useSafeAreaInsets();
  const topPad = Platform.OS === "web" ? 67 : insets.top;
  const bottomPad = Platform.OS === "web" ? 34 : insets.bottom;

  return (
    <View
      style={[
        styles.container,
        {
          backgroundColor: colors.primary,
          paddingTop: topPad + 16,
          paddingBottom: bottomPad + 24,
        },
      ]}
    >
      <View style={styles.topSection}>
        <View style={[styles.iconContainer, { backgroundColor: "rgba(255,255,255,0.12)" }]}>
          <View style={[styles.shieldOuter, { borderColor: "rgba(255,255,255,0.4)" }]}>
            <View style={[styles.shieldInner, { backgroundColor: "rgba(255,255,255,0.2)" }]}>
              <Text style={styles.shieldIcon}>🛡️</Text>
            </View>
          </View>
        </View>
        <Text style={[styles.brandName, { color: "#FFFFFF" }]}>VerifyID</Text>
        <Text style={[styles.tagline, { color: "rgba(255,255,255,0.75)" }]}>
          Secure Identity Verification
        </Text>
      </View>

      <View style={[styles.card, { backgroundColor: "#FFFFFF" }]}>
        <Text style={[styles.cardTitle, { color: colors.primary }]}>
          Get verified in 3 steps
        </Text>

        {[
          {
            number: "01",
            title: "Personal Info",
            desc: "Provide your name, email and select your country",
          },
          {
            number: "02",
            title: "National ID",
            desc: "Upload or scan your government-issued ID",
          },
          {
            number: "03",
            title: "Face Verification",
            desc: "Take a selfie to match with your ID photo",
          },
        ].map((step) => (
          <View key={step.number} style={styles.stepRow}>
            <View style={[styles.stepBadge, { backgroundColor: colors.secondary }]}>
              <Text style={[styles.stepBadgeNum, { color: colors.primary }]}>{step.number}</Text>
            </View>
            <View style={styles.stepText}>
              <Text style={[styles.stepTitle, { color: colors.text }]}>{step.title}</Text>
              <Text style={[styles.stepDesc, { color: colors.mutedForeground }]}>{step.desc}</Text>
            </View>
          </View>
        ))}

        <View style={styles.buttonArea}>
          <PrimaryButton
            title="Start Verification"
            onPress={() => router.push("/register")}
          />
          <Text style={[styles.disclaimer, { color: colors.mutedForeground }]}>
            Your data is encrypted and never shared
          </Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-between",
  },
  topSection: {
    alignItems: "center",
    paddingTop: 24,
    paddingBottom: 40,
  },
  iconContainer: {
    width: 96,
    height: 96,
    borderRadius: 48,
    alignItems: "center",
    justifyContent: "center",
    marginBottom: 20,
  },
  shieldOuter: {
    width: 72,
    height: 72,
    borderRadius: 36,
    borderWidth: 2,
    alignItems: "center",
    justifyContent: "center",
  },
  shieldInner: {
    width: 52,
    height: 52,
    borderRadius: 26,
    alignItems: "center",
    justifyContent: "center",
  },
  shieldIcon: {
    fontSize: 28,
  },
  brandName: {
    fontSize: 32,
    fontFamily: "Inter_700Bold",
    letterSpacing: -0.5,
    marginBottom: 6,
  },
  tagline: {
    fontSize: 15,
    fontFamily: "Inter_400Regular",
    letterSpacing: 0.2,
  },
  card: {
    borderTopLeftRadius: 28,
    borderTopRightRadius: 28,
    paddingTop: 32,
    paddingHorizontal: 24,
    paddingBottom: 16,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: -4 },
    shadowOpacity: 0.08,
    shadowRadius: 16,
    elevation: 8,
  },
  cardTitle: {
    fontSize: 20,
    fontFamily: "Inter_700Bold",
    marginBottom: 24,
    letterSpacing: -0.3,
  },
  stepRow: {
    flexDirection: "row",
    alignItems: "flex-start",
    marginBottom: 20,
    gap: 14,
  },
  stepBadge: {
    width: 40,
    height: 40,
    borderRadius: 10,
    alignItems: "center",
    justifyContent: "center",
    flexShrink: 0,
  },
  stepBadgeNum: {
    fontSize: 13,
    fontFamily: "Inter_700Bold",
    letterSpacing: 0.5,
  },
  stepText: {
    flex: 1,
    paddingTop: 4,
  },
  stepTitle: {
    fontSize: 15,
    fontFamily: "Inter_600SemiBold",
    marginBottom: 2,
  },
  stepDesc: {
    fontSize: 13,
    fontFamily: "Inter_400Regular",
    lineHeight: 18,
  },
  buttonArea: {
    marginTop: 8,
    gap: 12,
  },
  disclaimer: {
    fontSize: 12,
    fontFamily: "Inter_400Regular",
    textAlign: "center",
  },
});