import { Image, Text, View } from "react-native";

import { icons } from "@/constants";
import { tr } from "@/lib/i18n";
import { formatDate, formatTime } from "@/lib/utils";
import type { Ride } from "@/types/type";

export const RideCard = ({ ride }: { ride: Ride }) => {
  const {
    destination_latitude,
    destination_longitude,
    origin_address,
    destination_address,
    created_at,
    ride_time,
    driver,
    payment_status,
  } = ride;

  return (
    <View className="flex flex-row items-center justify-center bg-white dark:bg-neutral-900 rounded-lg shadow-sm shadow-neutral-300 dark:shadow-neutral-950/40 mb-3">
      <View className="flex flex-col items-center justify-center p-3">
        <View className="flex flex-row items-center justify-between">
          <Image
            source={{
              uri: `https://maps.geoapify.com/v1/staticmap?style=osm-bright&width=600&height=400&center=lonlat:${destination_longitude},${destination_latitude}&zoom=14&apiKey=${process.env.EXPO_PUBLIC_GEOAPIFY_API_KEY}`,
            }}
            alt={tr("components.rideCard.mapAlt")}
            className="w-[80px] h-[90px] rounded-lg"
          />

          <View className="flex flex-col mx-5 gap-y-5 flex-1">
            <View className="flex flex-row items-center gap-x-2">
              <Image source={icons.to} alt={tr("components.rideCard.originAlt")} className="w-5 h-5" />

              <Text className="font-JakartaMedium text-black dark:text-white" numberOfLines={1}>
                {origin_address}
              </Text>
            </View>

            <View className="flex flex-row items-center gap-x-2">
              <Image
                source={icons.point}
                alt={tr("components.rideCard.destinationAlt")}
                className="w-5 h-5"
              />

              <Text className="font-JakartaMedium text-black dark:text-white" numberOfLines={1}>
                {destination_address}
              </Text>
            </View>
          </View>
        </View>

        <View className="flex flex-col w-full mt-5 bg-general-500 dark:bg-neutral-800 rounded-lg p-3 items-start justify-center">
          <View className="flex flex-row items-center w-full justify-between mb-5">
            <Text className="font-JakartaMedium text-gray-500 dark:text-neutral-400 text-xs">
              {tr("components.rideCard.dateTime")}
            </Text>

            <Text className="font-JakartaMedium text-gray-500 dark:text-neutral-400 text-xs">
              {formatDate(created_at)}, {formatTime(ride_time)}
            </Text>
          </View>

          <View className="flex flex-row items-center w-full justify-between mb-5">
            <Text className="font-JakartaMedium text-gray-500 dark:text-neutral-400 text-xs">
              {tr("components.rideCard.driver")}
            </Text>

            <Text className="font-JakartaMedium text-gray-500 dark:text-neutral-400 text-xs">
              {driver.first_name} {driver.last_name}
            </Text>
          </View>

          <View className="flex flex-row items-center w-full justify-between mb-5">
            <Text className="font-JakartaMedium text-gray-500 dark:text-neutral-400 text-xs">
              {tr("components.rideCard.carSeats")}
            </Text>

            <Text className="font-JakartaMedium text-gray-500 dark:text-neutral-400 text-xs">
              {driver.car_seats}
            </Text>
          </View>

          <View className="flex flex-row items-center w-full justify-between mb-5">
            <Text className="font-JakartaMedium text-gray-500 dark:text-neutral-400 text-xs">
              {tr("components.rideCard.fare")}
            </Text>

            <Text className="font-JakartaMedium text-gray-500 dark:text-neutral-400 text-xs">
              ${(ride.fare_price / 100).toFixed(2)}
            </Text>
          </View>

          <View className="flex flex-row items-center w-full justify-between mb-5">
            <Text className="font-JakartaMedium text-gray-500 dark:text-neutral-400 text-xs">
              {tr("components.rideCard.paymentStatus")}
            </Text>

            <Text
              className={`font-JakartaMedium capitalize text-xs ${payment_status === "paid" ? "text-emerald-500 dark:text-emerald-400" : "text-gray-500 dark:text-neutral-400"}`}
            >
              {payment_status === "cash"
                ? tr("components.rideCard.paymentCash")
                : payment_status === "paid"
                  ? tr("components.rideCard.paymentPaid")
                  : tr("components.rideCard.paymentOther", { status: payment_status })}
            </Text>
          </View>
        </View>
      </View>
    </View>
  );
};