import { router } from "expo-router";
import React, { useMemo } from "react";
import {
  ScrollView,
  StatusBar,
  Text,
  TouchableOpacity,
  View,
  DimensionValue,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { useTheme } from "@/hooks/use-theme";
import { createWelcomeStyles } from "@/styles/auth.styles";

interface CardItem {
  id: string;
  dotColor: string;
  line1WidthPercent: number;
  line2WidthPercent: number;
  tagText: string;
  tagBg: string;
  tagColor: string;
  isAccent: boolean;
}

const WelcomeScreen = () => {
  const theme = useTheme();
  const isDark = theme.background === '#0D0D14';

  const getCardColors = (accentType: 'primary' | 'green' | 'orange' | 'pink') => {
    if (isDark) {
      switch (accentType) {
        case 'primary':
          return { tagBg: '#1a1635', tagColor: '#8B7FFF', dotColor: theme.accent };
        case 'green':
          return { tagBg: '#0a1f18', tagColor: '#5DCAA5', dotColor: '#1D9E75' };
        case 'orange':
          return { tagBg: '#1e1500', tagColor: '#EF9F27', dotColor: '#EF9F27' };
        case 'pink':
          return { tagBg: '#1a0d12', tagColor: '#ED93B1', dotColor: '#D4537E' };
      }
    } else {
      switch (accentType) {
        case 'primary':
          return { tagBg: '#EEEEFF', tagColor: '#6C63FF', dotColor: theme.accent };
        case 'green':
          return { tagBg: '#E6F7F0', tagColor: '#1D9E75', dotColor: '#1D9E75' };
        case 'orange':
          return { tagBg: '#FFF3E6', tagColor: '#EF9F27', dotColor: '#EF9F27' };
        case 'pink':
          return { tagBg: '#FFEEF2', tagColor: '#D4537E', dotColor: '#D4537E' };
      }
    }
    return { tagBg: theme.backgroundElement, tagColor: theme.textSecondary, dotColor: theme.textSecondary };
  };

  const cardsData: CardItem[] = [
    {
      id: "1",
      dotColor: getCardColors('primary').dotColor,
      line1WidthPercent: 85,
      line2WidthPercent: 60,
      tagText: "طراحی",
      tagBg: getCardColors('primary').tagBg,
      tagColor: getCardColors('primary').tagColor,
      isAccent: true,
    },
    {
      id: "2",
      dotColor: getCardColors('green').dotColor,
      line1WidthPercent: 75,
      line2WidthPercent: 45,
      tagText: "انجام شد",
      tagBg: getCardColors('green').tagBg,
      tagColor: getCardColors('green').tagColor,
      isAccent: false,
    },
    {
      id: "3",
      dotColor: getCardColors('orange').dotColor,
      line1WidthPercent: 65,
      line2WidthPercent: 40,
      tagText: "بررسی",
      tagBg: getCardColors('orange').tagBg,
      tagColor: getCardColors('orange').tagColor,
      isAccent: false,
    },
    {
      id: "4",
      dotColor: getCardColors('pink').dotColor,
      line1WidthPercent: 80,
      line2WidthPercent: 50,
      tagText: "راه‌اندازی",
      tagBg: getCardColors('pink').tagBg,
      tagColor: getCardColors('pink').tagColor,
      isAccent: true,
    },
  ];

  const percent = (value: number): DimensionValue => `${value}%` as DimensionValue;

  const dynamicStyles = useMemo(
    () => createWelcomeStyles(theme, isDark),
    [theme, isDark]
  );

  const renderMiniCard = (item: CardItem) => {
    const cardStyle = item.isAccent
      ? [dynamicStyles.miniCard, dynamicStyles.miniCardAccent]
      : dynamicStyles.miniCard;

    return (
      <View key={item.id} style={cardStyle}>
        <View style={[dynamicStyles.mcDot, { backgroundColor: item.dotColor }]} />
        <View style={dynamicStyles.mcLines}>
          <View
            style={[
              dynamicStyles.mcLine,
              { width: percent(item.line1WidthPercent) },
            ]}
          />
          <View
            style={[
              dynamicStyles.mcLine,
              { width: percent(item.line2WidthPercent) },
            ]}
          />
        </View>
        <View style={[dynamicStyles.mcTag, { backgroundColor: item.tagBg }]}>
          <Text style={[dynamicStyles.mcTagText, { color: item.tagColor }]}>
            {item.tagText}
          </Text>
        </View>
      </View>
    );
  };

  const statusBarStyle = isDark ? 'light-content' : 'dark-content';

  return (
    <SafeAreaView style={dynamicStyles.container}>
      <StatusBar barStyle={statusBarStyle} backgroundColor={theme.background} />
      <ScrollView
        contentContainerStyle={dynamicStyles.scrollContent}
        showsVerticalScrollIndicator={false}
      >
        <View style={dynamicStyles.logoMark}>
          <View style={dynamicStyles.logoBox}>
            <Text style={dynamicStyles.logoIcon}>◧</Text>
          </View>
          <Text style={dynamicStyles.logoWord}>Plania</Text>
        </View>

        <View style={dynamicStyles.heroGrid}>
          {cardsData.map(renderMiniCard)}
        </View>

        <View style={dynamicStyles.heroCta}>
          <View>
            <Text style={dynamicStyles.tagline}>
              کار را مدیریت کن،{"\n"}
              <Text style={dynamicStyles.taglineAccent}>زیبا.</Text>
            </Text>
            <Text style={dynamicStyles.subText}>
              با تیم خود در زمان واقعی برنامه‌ریزی،{"\n"}پیگیری و همکاری کن.
            </Text>
          </View>

          <TouchableOpacity
            style={dynamicStyles.primaryButton}
            activeOpacity={0.8}
            onPress={() => router.push("/(auth)/SignUp")}
          >
            <Text style={dynamicStyles.primaryButtonText}>شروع رایگان</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={dynamicStyles.outlineButton}
            activeOpacity={0.7}
            onPress={() => router.push("/(auth)/login")}
          >
            <Text style={dynamicStyles.outlineButtonText}>حساب کاربری دارم</Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default WelcomeScreen;