import React from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Platform,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { Trip, TRIP_STATUS_CONFIG } from "./types";

interface TripCardProps {
  trip: Trip;
  onPress?: () => void;
}

export default function TripCard({ trip, onPress }: TripCardProps) {
  const statusConfig = TRIP_STATUS_CONFIG[trip.status];

  return (
    <TouchableOpacity style={styles.card} onPress={onPress} activeOpacity={0.7}>
      {/* Header */}
      <View style={styles.header}>
        <View style={styles.headerLeft}>
          <Ionicons
            name={statusConfig.icon as any}
            size={24}
            color={statusConfig.textColor}
          />
          <View style={styles.titleContainer}>
            <Text style={styles.title}>{trip.title}</Text>
            <Text style={styles.code}>{trip.code}</Text>
          </View>
        </View>
        <View
          style={[
            styles.badge,
            {
              backgroundColor: statusConfig.bgColor,
            },
          ]}
        >
          <Text
            style={[
              styles.badgeText,
              {
                color: statusConfig.textColor,
              },
            ]}
          >
            {statusConfig.label}
          </Text>
        </View>
      </View>

      {/* Info Grid */}
      <View style={styles.infoGrid}>
        <View style={styles.infoRow}>
          <Text style={styles.label}>Tàu</Text>
          <Text style={styles.value}>
            {trip.vessel} ({trip.vesselCode})
          </Text>
        </View>

        <View style={styles.infoRow}>
          <Text style={styles.label}>Khởi hành</Text>
          <Text style={styles.value}>{trip.departureDate}</Text>
        </View>

        <View style={styles.infoRow}>
          <Text style={styles.label}>Trở về</Text>
          <Text style={styles.value}>{trip.returnDate || "-"}</Text>
        </View>

        <View style={styles.infoRow}>
          <Text style={styles.label}>Thời gian</Text>
          <Text style={[styles.value, styles.duration]}>{trip.duration}</Text>
        </View>
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: "#FFFFFF",
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.05,
    shadowRadius: 8,
    elevation: 2,
    borderWidth: 1,
    borderColor: "#F3F4F6",
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "flex-start",
    marginBottom: 16,
  },
  headerLeft: {
    flexDirection: "row",
    alignItems: "center",
    flex: 1,
  },
  titleContainer: {
    marginLeft: 12,
    flex: 1,
  },
  title: {
    fontSize: 16,
    fontWeight: "600",
    color: "#111827",
    marginBottom: 2,
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  code: {
    fontSize: 14,
    color: "#6B7280",
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  badge: {
    paddingHorizontal: 12,
    paddingVertical: 4,
    borderRadius: 12,
  },
  badgeText: {
    fontSize: 12,
    fontWeight: "500",
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  infoGrid: {
    gap: 12,
  },
  infoRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  label: {
    fontSize: 14,
    color: "#6B7280",
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  value: {
    fontSize: 14,
    color: "#111827",
    fontWeight: "500",
    textAlign: "right",
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  duration: {
    color: "#3B82F6",
  },
});