import { FontAwesome } from "@expo/vector-icons";
import { router } from "expo-router";
import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";

export type PersonLite = {
  id?: number;
  personId?: number;
  name?: string;
  birthDate?: string | null;
  imageUrl?: string | null;
};

const calcAge = (birthDate?: string | null): number | null => {
  if (!birthDate) return null;
  const d = new Date(birthDate);
  if (isNaN(d.getTime())) return null;
  const today = new Date();
  let age = today.getFullYear() - d.getFullYear();
  const m = today.getMonth() - d.getMonth();
  if (m < 0 || (m === 0 && today.getDate() < d.getDate())) age--;
  return age < 0 || age > 130 ? null : age;
};

type Props = {
  person: any;
  onPress?: () => void;
};

export default function PersonRow({ person }: Props) {
  const age = calcAge(person.birthDate);
  const id = person.personId ?? person.id;

  const goToPerson = React.useCallback(
    (id: number) => {
      console.log("go to person", id);
      router.push({
        pathname: "/participant",
        params: { participantId: String(id), name: person.name },
      });
    },
    [person.name]
  );

  return (
    <TouchableOpacity
      onPress={() => {
        goToPerson(Number(id));
      }}
      style={styles.personRow}
    >
      <View style={styles.avatarCircle}>
        <FontAwesome name="user" size={22} color="#ccc" />
      </View>
      <View style={{ flex: 1 }}>
        <Text style={styles.personName}>
          {person.name || "Unbekannt"}
          {age != null ? ` (${age})` : ""}
        </Text>
        {/* <Text style={styles.personMeta}>aus: unterschiedlichen Shows</Text> */}
      </View>
      <FontAwesome name="chevron-right" size={14} color="#888" />
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  personRow: {
    width: "100%",
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#1b1e2b",
    borderRadius: 10,
    paddingHorizontal: 10,
    paddingVertical: 10,
    marginBottom: 8,
  },
  avatarCircle: {
    width: 40,
    height: 40,
    borderRadius: 999,
    backgroundColor: "#2a2f45",
    alignItems: "center",
    justifyContent: "center",
    marginRight: 10,
  },
  personName: { color: "white", fontSize: 16, fontWeight: "600" },
  personMeta: { color: "#bbb", fontSize: 12, marginTop: 2 },
});