import React from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Platform,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useI18n } from "@/hooks/use-i18n";
import { useThemeContext } from "@/hooks/use-theme-context";

interface PortSelectorProps {
  departurePortId: number;
  arrivalPortId: number;
  onDeparturePortChange: (portId: number) => void;
  onArrivalPortChange: (portId: number) => void;
}

export default function PortSelector({
  departurePortId,
  arrivalPortId,
  onDeparturePortChange,
  onArrivalPortChange,
}: PortSelectorProps) {
  const { t } = useI18n();
  const { colors } = useThemeContext();

  const handleSelectDeparturePort = () => {
    console.log("Select departure port pressed");
    // TODO: Implement port selection modal/dropdown
    // For now, just set a dummy ID
    onDeparturePortChange(1);
  };

  const handleSelectArrivalPort = () => {
    console.log("Select arrival port pressed");
    // TODO: Implement port selection modal/dropdown
    // For now, just set a dummy ID
    onArrivalPortChange(1);
  };

  // Helper to display port name (in production, fetch from port list by ID)
  const getPortDisplayName = (portId: number): string => {
    // TODO: Fetch actual port name by ID from port list
    return portId ? `Cảng (ID: ${portId})` : t("diary.selectPort");
  };

  const themedStyles = {
    label: { color: colors.text },
    portSelector: {
      backgroundColor: colors.card,
      borderColor: colors.border,
    },
    portText: { color: colors.text },
    placeholder: { color: colors.textSecondary },
  };

  return (
    <View style={styles.container}>
      <Text style={[styles.label, themedStyles.label]}>
        {t("diary.portLabel")}
      </Text>
      <View style={styles.portContainer}>
        {/* Departure Port */}
        <View style={styles.portSection}>
          <Text style={[styles.subLabel, themedStyles.placeholder]}>
            {t("diary.departurePort")}
          </Text>
          <TouchableOpacity
            style={[styles.portSelector, themedStyles.portSelector]}
            onPress={handleSelectDeparturePort}
            activeOpacity={0.7}
          >
            <Text
              style={[
                styles.portText,
                themedStyles.portText,
                !departurePortId && themedStyles.placeholder,
              ]}
            >
              {getPortDisplayName(departurePortId)}
            </Text>
            <Ionicons
              name="ellipsis-horizontal"
              size={20}
              color={colors.textSecondary}
            />
          </TouchableOpacity>
        </View>

        {/* Arrival Port */}
        <View style={styles.portSection}>
          <Text style={[styles.subLabel, themedStyles.placeholder]}>
            {t("diary.arrivalPort")}
          </Text>
          <TouchableOpacity
            style={[styles.portSelector, themedStyles.portSelector]}
            onPress={handleSelectArrivalPort}
            activeOpacity={0.7}
          >
            <Text
              style={[
                styles.portText,
                themedStyles.portText,
                !arrivalPortId && themedStyles.placeholder,
              ]}
            >
              {getPortDisplayName(arrivalPortId)}
            </Text>
            <Ionicons
              name="ellipsis-horizontal"
              size={20}
              color={colors.textSecondary}
            />
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginBottom: 20,
  },
  label: {
    fontSize: 16,
    fontWeight: "600",
    marginBottom: 12,
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  subLabel: {
    fontSize: 14,
    marginBottom: 6,
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  portContainer: {
    flexDirection: "row",
    gap: 12,
  },
  portSection: {
    flex: 1,
  },
  portSelector: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    borderWidth: 1,
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 12,
  },
  portText: {
    fontSize: 15,
    flex: 1,
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
});