import { Ionicons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
import { ScrollView, StyleSheet, Text, View } from "react-native";
import { t } from "../../lib/locales";
import { colors } from "../../lib/theme";
import { Button } from "../../lib/ui";

export default function ContactDetailScreen() {
  const params = useLocalSearchParams<{
    contactName: string;
    contactIdentifier: string;
    contactType: string;
    deviceName: string;
  }>();

  const { contactName, contactIdentifier, contactType, deviceName } = params;

  const getContactTypeIcon = () => {
    switch (contactType) {
      case "phone":
        return "call";
      case "email":
        return "mail";
      default:
        return "person";
    }
  };

  const getContactTypeLabel = () => {
    switch (contactType) {
      case "phone":
        return t("phoneNumber");
      case "email":
        return t("emailAddress");
      default:
        return t("identifier");
    }
  };

  return (
    <ScrollView
      style={styles.container}
      contentContainerStyle={styles.contentContainer}
    >
      <View style={styles.header}>
        <View style={styles.iconContainer}>
          <Ionicons name="person-add" size={48} color={colors.primary} />
        </View>
        <Text style={styles.title}>{t("newContactAddedTitle")}</Text>
        <Text style={styles.subtitle}>{t("newContactAddedSubtitle")}</Text>
      </View>

      <View style={styles.detailsCard}>
        <View style={styles.detailRow}>
          <View style={styles.detailLabel}>
            <Ionicons name="person" size={20} color={colors.onSurfaceVariant} />
            <Text style={styles.detailLabelText}>{t("contactName")}</Text>
          </View>
          <Text style={styles.detailValue}>{contactName || t("unknown")}</Text>
        </View>

        <View style={styles.divider} />

        <View style={styles.detailRow}>
          <View style={styles.detailLabel}>
            <Ionicons
              name={getContactTypeIcon()}
              size={20}
              color={colors.onSurfaceVariant}
            />
            <Text style={styles.detailLabelText}>{getContactTypeLabel()}</Text>
          </View>
          <Text style={styles.detailValue}>
            {contactIdentifier || t("notProvided")}
          </Text>
        </View>

        <View style={styles.divider} />

        <View style={styles.detailRow}>
          <View style={styles.detailLabel}>
            <Ionicons
              name="phone-portrait"
              size={20}
              color={colors.onSurfaceVariant}
            />
            <Text style={styles.detailLabelText}>{t("device")}</Text>
          </View>
          <Text style={styles.detailValue}>
            {deviceName || t("unknownDevice")}
          </Text>
        </View>
      </View>

      <View style={styles.infoCard}>
        <Ionicons name="information-circle" size={24} color={colors.primary} />
        <Text style={styles.infoText}>
          {t("contactAddedInfo").replace(
            "{deviceName}",
            deviceName || t("unknownDevice"),
          )}
        </Text>
      </View>

      <Button title={t("backToHome")} onPress={() => router.push("/(tabs)")} />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.background,
  },
  contentContainer: {
    padding: 20,
    paddingBottom: 40,
  },
  header: {
    alignItems: "center",
    marginBottom: 32,
  },
  iconContainer: {
    width: 96,
    height: 96,
    borderRadius: 48,
    backgroundColor: colors.primaryContainer,
    alignItems: "center",
    justifyContent: "center",
    marginBottom: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: "700",
    color: colors.onBackground,
    marginBottom: 8,
    textAlign: "center",
  },
  subtitle: {
    fontSize: 14,
    color: colors.onSurfaceVariant,
    textAlign: "center",
  },
  detailsCard: {
    backgroundColor: colors.surfaceContainer,
    borderRadius: 16,
    padding: 20,
    marginBottom: 20,
  },
  detailRow: {
    gap: 12,
  },
  detailLabel: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
    marginBottom: 4,
  },
  detailLabelText: {
    fontSize: 12,
    fontWeight: "600",
    color: colors.onSurfaceVariant,
    textTransform: "uppercase",
    letterSpacing: 0.5,
  },
  detailValue: {
    fontSize: 16,
    fontWeight: "500",
    color: colors.onSurface,
  },
  divider: {
    height: 1,
    backgroundColor: colors.outline,
    marginVertical: 16,
  },
  infoCard: {
    flexDirection: "row",
    gap: 12,
    padding: 16,
    backgroundColor: colors.primaryContainer,
    borderRadius: 12,
    marginBottom: 24,
  },
  infoText: {
    flex: 1,
    fontSize: 14,
    color: colors.onPrimaryContainer,
    lineHeight: 20,
  },
  button: {
    marginTop: 8,
  },
});