import { BORDER_RADIUS, COLORS, SPACING } from "@/constants/theme";
import { router } from "expo-router";
import React from "react";
import {
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

type CadastroCard = {
  icon: string;
  label: string;
  description: string;
  onPress: () => void;
  highlight?: boolean;
};

export default function CadastrosPage() {
  const cards: CadastroCard[] = [
    {
      icon: "🏢",
      label: "Empresas",
      description: "Gerencie empresas e custos por km",
      onPress: () => router.push("/empresas"),
      highlight: true,
    },
    {
      icon: "👤",
      label: "Motoristas",
      description: "Cadastro de motoristas",
      onPress: () => {},
    },
    {
      icon: "🚛",
      label: "Veículos",
      description: "Cadastro de veículos",
      onPress: () => {},
    },
    {
      icon: "📍",
      label: "Rotas",
      description: "Rotas e destinos frequentes",
      onPress: () => {},
    },
  ];

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity
          onPress={() => router.back()}
          style={styles.backButton}
          activeOpacity={0.7}
        >
          <Text style={styles.backIcon}>←</Text>
          <Text style={styles.backLabel}>Voltar</Text>
        </TouchableOpacity>
      </View>

      <ScrollView
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={false}
      >
        <View style={styles.titleSection}>
          <Text style={styles.title}>Cadastros</Text>
          <Text style={styles.subtitle}>
            Gerencie os dados base do sistema
          </Text>
        </View>

        <Text style={styles.sectionTitle}>Categorias</Text>
        <View style={styles.grid}>
          {cards.map((card, index) => (
            <TouchableOpacity
              key={index}
              style={[styles.card, card.highlight && styles.cardHighlight]}
              onPress={card.onPress}
              activeOpacity={0.75}
            >
              <Text style={styles.cardIcon}>{card.icon}</Text>
              <Text
                style={[
                  styles.cardLabel,
                  card.highlight && styles.cardLabelHighlight,
                ]}
              >
                {card.label}
              </Text>
              <Text style={styles.cardDescription}>{card.description}</Text>
            </TouchableOpacity>
          ))}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: COLORS.background,
  },
  header: {
    paddingHorizontal: SPACING.lg,
    paddingVertical: SPACING.md,
    borderBottomWidth: 1,
    borderBottomColor: COLORS.border,
  },
  backButton: {
    flexDirection: "row",
    alignItems: "center",
    gap: SPACING.xs,
    alignSelf: "flex-start",
  },
  backIcon: {
    fontSize: 18,
    color: COLORS.text,
  },
  backLabel: {
    fontSize: 15,
    color: COLORS.textSecondary,
    fontWeight: "500",
  },
  scrollContent: {
    padding: SPACING.lg,
    paddingBottom: SPACING.xxl,
  },
  titleSection: {
    marginBottom: SPACING.xl,
    marginTop: SPACING.md,
  },
  title: {
    fontSize: 28,
    fontWeight: "800",
    color: COLORS.text,
    marginBottom: 4,
  },
  subtitle: {
    fontSize: 14,
    color: COLORS.textTertiary,
  },
  sectionTitle: {
    fontSize: 11,
    fontWeight: "700",
    color: COLORS.textTertiary,
    textTransform: "uppercase",
    letterSpacing: 1.2,
    marginBottom: SPACING.md,
  },
  grid: {
    flexDirection: "row",
    flexWrap: "wrap",
    gap: SPACING.sm,
  },
  card: {
    width: "48%",
    backgroundColor: COLORS.surface,
    borderRadius: BORDER_RADIUS.lg,
    padding: SPACING.lg,
    borderWidth: 1,
    borderColor: COLORS.border,
    minHeight: 120,
    justifyContent: "space-between",
  },
  cardHighlight: {
    backgroundColor: COLORS.surfaceLight,
    borderColor: COLORS.text,
  },
  cardIcon: {
    fontSize: 30,
    marginBottom: SPACING.sm,
  },
  cardLabel: {
    fontSize: 15,
    fontWeight: "700",
    color: COLORS.text,
    marginBottom: 3,
  },
  cardLabelHighlight: {
    color: COLORS.text,
  },
  cardDescription: {
    fontSize: 11,
    color: COLORS.textTertiary,
    lineHeight: 15,
  },
});
