sgw-owner-app/app/trip-crew.tsx

import React, { useEffect, useState, useCallback } from "react";
import {
  View,
  Text,
  StyleSheet,
  Platform,
  TouchableOpacity,
  ActivityIndicator,
  Alert,
  ScrollView,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { useLocalSearchParams, useRouter } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { useI18n } from "@/hooks/use-i18n";
import { useThemeContext } from "@/hooks/use-theme-context";
import { queryTripCrew, deleteTripCrew } from "@/controller/TripCrewController";
import CrewList from "@/components/diary/TripCrewModal/CrewList";
import AddEditCrewModal from "@/components/diary/TripCrewModal/AddEditCrewModal";

export default function TripCrewPage() {
  const { t } = useI18n();
  const { colors } = useThemeContext();
  const router = useRouter();
  const { tripId, tripName, tripStatus } = useLocalSearchParams<{
    tripId: string;
    tripName?: string;
    tripStatus?: string;
  }>();

  // State
  const [loading, setLoading] = useState(false);
  const [crews, setCrews] = useState<Model.TripCrews[]>([]);
  const [error, setError] = useState<string | null>(null);

  // Add/Edit modal state
  const [showAddEditModal, setShowAddEditModal] = useState(false);
  const [editingCrew, setEditingCrew] = useState<Model.TripCrews | null>(null);

  // Fetch crew data
  const fetchCrewData = useCallback(async () => {
    if (!tripId) return;

    setLoading(true);
    setError(null);
    try {
      const response = await queryTripCrew(tripId);
      const data = response.data as any;

      if (data?.trip_crews && Array.isArray(data.trip_crews)) {
        setCrews(data.trip_crews);
      } else if (Array.isArray(data)) {
        setCrews(data);
      } else {
        setCrews([]);
      }
    } catch (err) {
      console.error("Error fetching crew:", err);
      setError(t("diary.crew.fetchError"));
      setCrews([]);
    } finally {
      setLoading(false);
    }
  }, [tripId, t]);

  useEffect(() => {
    fetchCrewData();
  }, [fetchCrewData]);

  // Add crew handler
  const handleAddCrew = () => {
    setEditingCrew(null);
    setShowAddEditModal(true);
  };

  // Edit crew handler
  const handleEditCrew = (crew: Model.TripCrews) => {
    setEditingCrew(crew);
    setShowAddEditModal(true);
  };

  // Delete crew handler
  const handleDeleteCrew = (crew: Model.TripCrews) => {
    Alert.alert(
      t("diary.crew.deleteConfirmTitle"),
      t("diary.crew.deleteConfirmMessage", { name: crew.Person?.name || "" }),
      [
        { text: t("common.cancel"), style: "cancel" },
        {
          text: t("common.delete"),
          style: "destructive",
          onPress: async () => {
            try {
              // Call delete API
              await deleteTripCrew(tripId, crew.PersonalID || "");
              // Reload list
              await fetchCrewData();
              Alert.alert(t("common.success"), t("diary.crew.deleteSuccess"));
            } catch (error) {
              console.error("Error deleting crew:", error);
              Alert.alert(t("common.error"), t("diary.crew.form.saveError"));
            }
          },
        },
      ]
    );
  };

  // Save crew handler - API được gọi trong AddEditCrewModal, sau đó refresh danh sách
  const handleSaveCrew = async () => {
    await fetchCrewData();
  };

  const themedStyles = {
    container: { backgroundColor: colors.background },
    header: {
      backgroundColor: colors.card,
      borderBottomColor: colors.separator,
    },
    title: { color: colors.text },
    subtitle: { color: colors.textSecondary },
  };

  return (
    <SafeAreaView
      style={[styles.container, themedStyles.container]}
      edges={["top"]}
    >
      {/* Header */}
      <View style={[styles.header, themedStyles.header]}>
        <TouchableOpacity
          onPress={() => router.back()}
          style={styles.backButton}
        >
          <Ionicons name="arrow-back" size={24} color={colors.text} />
        </TouchableOpacity>
        <View style={styles.headerTitles}>
          <Text style={[styles.title, themedStyles.title]}>
            {t("diary.crew.title")}
          </Text>
          {tripName && (
            <Text
              style={[styles.subtitle, themedStyles.subtitle]}
              numberOfLines={1}
            >
              {tripName}
            </Text>
          )}
        </View>
        {tripStatus === "0" && (
          <TouchableOpacity onPress={handleAddCrew} style={styles.addButton}>
            <Ionicons name="add" size={24} color={colors.primary} />
          </TouchableOpacity>
        )}
      </View>

      {/* Content */}
      <ScrollView
        style={styles.content}
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={false}
      >
        {loading ? (
          <View style={styles.loadingContainer}>
            <ActivityIndicator size="large" color={colors.primary} />
            <Text style={[styles.loadingText, { color: colors.textSecondary }]}>
              {t("diary.crew.loading")}
            </Text>
          </View>
        ) : error ? (
          <View style={styles.errorContainer}>
            <Ionicons
              name="alert-circle-outline"
              size={48}
              color={colors.error || "#FF3B30"}
            />
            <Text
              style={[styles.errorText, { color: colors.error || "#FF3B30" }]}
            >
              {error}
            </Text>
            <TouchableOpacity
              style={[styles.retryButton, { backgroundColor: colors.primary }]}
              onPress={fetchCrewData}
            >
              <Text style={styles.retryButtonText}>{t("common.retry")}</Text>
            </TouchableOpacity>
          </View>
        ) : (
          <CrewList
            crews={crews}
            onEdit={handleEditCrew}
            onDelete={handleDeleteCrew}
          />
        )}
      </ScrollView>

      {/* Footer - Crew count */}
      <View
        style={[
          styles.footer,
          { backgroundColor: colors.card, borderTopColor: colors.separator },
        ]}
      >
        <View style={styles.countContainer}>
          <Ionicons name="people-outline" size={20} color={colors.primary} />
          <Text style={[styles.countText, { color: colors.text }]}>
            {t("diary.crew.totalMembers", { count: crews.length })}
          </Text>
        </View>
      </View>

      {/* Add/Edit Crew Modal */}
      <AddEditCrewModal
        visible={showAddEditModal}
        onClose={() => {
          setShowAddEditModal(false);
          setEditingCrew(null);
        }}
        onSave={handleSaveCrew}
        mode={editingCrew ? "edit" : "add"}
        tripId={tripId}
        existingCrewIds={crews.map((c) => c.PersonalID || "")}
        initialData={
          editingCrew
            ? {
                personalId: editingCrew.PersonalID,
                name: editingCrew.Person?.name || "",
                phone: editingCrew.Person?.phone || "",
                email: editingCrew.Person?.email || "",
                address: editingCrew.Person?.address || "",
                role: editingCrew.role || "crew",
                // Note lấy từ trip (ghi chú chuyến đi), fallback về note từ Person
                note: editingCrew.note || "",
              }
            : undefined
        }
        tripStatus={tripStatus ? Number(tripStatus) : undefined}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderBottomWidth: 1,
  },
  backButton: {
    padding: 4,
  },
  addButton: {
    padding: 4,
  },
  headerTitles: {
    flex: 1,
    alignItems: "center",
  },
  title: {
    fontSize: 18,
    fontWeight: "700",
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  subtitle: {
    fontSize: 13,
    marginTop: 2,
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  content: {
    flex: 1,
  },
  scrollContent: {
    padding: 16,
    paddingBottom: 20,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    gap: 12,
  },
  loadingText: {
    fontSize: 14,
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  errorContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    gap: 12,
    paddingHorizontal: 20,
  },
  errorText: {
    fontSize: 14,
    textAlign: "center",
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  retryButton: {
    marginTop: 8,
    paddingHorizontal: 24,
    paddingVertical: 10,
    borderRadius: 8,
  },
  retryButtonText: {
    color: "#FFFFFF",
    fontSize: 14,
    fontWeight: "600",
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  footer: {
    borderTopWidth: 1,
    paddingHorizontal: 20,
    paddingTop: 16,
    paddingBottom: 30,
  },
  countContainer: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    gap: 8,
  },
  countText: {
    fontSize: 14,
    fontWeight: "600",
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
});