import React, { useState, useEffect } from "react";
import {
  View,
  Text,
  Modal,
  TouchableOpacity,
  StyleSheet,
  Platform,
  TextInput,
  ScrollView,
  ActivityIndicator,
  Animated,
  Dimensions,
  Alert,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useI18n } from "@/hooks/use-i18n";
import { useThemeContext } from "@/hooks/use-theme-context";

interface CrewFormData {
  personalId: string;
  name: string;
  phone: string;
  email: string;
  address: string;
  role: string;
  note: string;
}

interface AddEditCrewModalProps {
  visible: boolean;
  onClose: () => void;
  onSave: (data: CrewFormData) => Promise<void>;
  mode: "add" | "edit";
  initialData?: Partial<CrewFormData>;
}

const ROLES = ["captain", "crew", "engineer", "cook"];

export default function AddEditCrewModal({
  visible,
  onClose,
  onSave,
  mode,
  initialData,
}: AddEditCrewModalProps) {
  const { t } = useI18n();
  const { colors } = useThemeContext();

  // Animation values
  const fadeAnim = useState(new Animated.Value(0))[0];
  const slideAnim = useState(new Animated.Value(Dimensions.get("window").height))[0];

  // Form state
  const [formData, setFormData] = useState<CrewFormData>({
    personalId: "",
    name: "",
    phone: "",
    email: "",
    address: "",
    role: "crew",
    note: "",
  });
  const [isSubmitting, setIsSubmitting] = useState(false);

  // Pre-fill form when editing
  useEffect(() => {
    if (visible && initialData) {
      setFormData({
        personalId: initialData.personalId || "",
        name: initialData.name || "",
        phone: initialData.phone || "",
        email: initialData.email || "",
        address: initialData.address || "",
        role: initialData.role || "crew",
        note: initialData.note || "",
      });
    } else if (visible && mode === "add") {
      // Reset form for add mode
      setFormData({
        personalId: "",
        name: "",
        phone: "",
        email: "",
        address: "",
        role: "crew",
        note: "",
      });
    }
  }, [visible, initialData, mode]);

  // Handle animation
  useEffect(() => {
    if (visible) {
      Animated.parallel([
        Animated.timing(fadeAnim, {
          toValue: 1,
          duration: 300,
          useNativeDriver: true,
        }),
        Animated.timing(slideAnim, {
          toValue: 0,
          duration: 300,
          useNativeDriver: true,
        }),
      ]).start();
    }
  }, [visible, fadeAnim, slideAnim]);

  const handleClose = () => {
    Animated.parallel([
      Animated.timing(fadeAnim, {
        toValue: 0,
        duration: 250,
        useNativeDriver: true,
      }),
      Animated.timing(slideAnim, {
        toValue: Dimensions.get("window").height,
        duration: 250,
        useNativeDriver: true,
      }),
    ]).start(() => {
      onClose();
    });
  };

  const handleSave = async () => {
    // Validate required fields
    if (!formData.personalId.trim()) {
      Alert.alert(t("common.error"), t("diary.crew.form.personalIdRequired"));
      return;
    }
    if (!formData.name.trim()) {
      Alert.alert(t("common.error"), t("diary.crew.form.nameRequired"));
      return;
    }

    setIsSubmitting(true);
    try {
      await onSave(formData);
      handleClose();
    } catch (error) {
      Alert.alert(t("common.error"), t("diary.crew.form.saveError"));
    } finally {
      setIsSubmitting(false);
    }
  };

  const updateField = (field: keyof CrewFormData, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
  };

  const themedStyles = {
    modalContainer: { backgroundColor: colors.card },
    header: { borderBottomColor: colors.separator },
    title: { color: colors.text },
    label: { color: colors.text },
    input: {
      backgroundColor: colors.backgroundSecondary,
      color: colors.text,
      borderColor: colors.separator,
    },
    placeholder: { color: colors.textSecondary },
    roleButton: {
      backgroundColor: colors.backgroundSecondary,
      borderColor: colors.separator,
    },
    roleButtonActive: {
      backgroundColor: colors.primary + "20",
      borderColor: colors.primary,
    },
    roleText: { color: colors.textSecondary },
    roleTextActive: { color: colors.primary },
  };

  return (
    <Modal
      visible={visible}
      animationType="none"
      transparent
      onRequestClose={handleClose}
    >
      <Animated.View style={[styles.overlay, { opacity: fadeAnim }]}>
        <Animated.View
          style={[
            styles.modalContainer,
            themedStyles.modalContainer,
            { transform: [{ translateY: slideAnim }] },
          ]}
        >
          {/* Header */}
          <View style={[styles.header, themedStyles.header]}>
            <TouchableOpacity onPress={handleClose} style={styles.closeButton}>
              <Ionicons name="close" size={24} color={colors.text} />
            </TouchableOpacity>
            <Text style={[styles.title, themedStyles.title]}>
              {mode === "add" ? t("diary.crew.form.addTitle") : t("diary.crew.form.editTitle")}
            </Text>
            <View style={styles.headerPlaceholder} />
          </View>

          {/* Content */}
          <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
            {/* Personal ID */}
            <View style={styles.formGroup}>
              <Text style={[styles.label, themedStyles.label]}>
                {t("diary.crew.personalId")} *
              </Text>
              <TextInput
                style={[styles.input, themedStyles.input]}
                value={formData.personalId}
                onChangeText={(v) => updateField("personalId", v)}
                placeholder={t("diary.crew.form.personalIdPlaceholder")}
                placeholderTextColor={themedStyles.placeholder.color}
                editable={mode === "add"}
              />
            </View>

            {/* Name */}
            <View style={styles.formGroup}>
              <Text style={[styles.label, themedStyles.label]}>
                {t("diary.crew.form.name")} *
              </Text>
              <TextInput
                style={[styles.input, themedStyles.input]}
                value={formData.name}
                onChangeText={(v) => updateField("name", v)}
                placeholder={t("diary.crew.form.namePlaceholder")}
                placeholderTextColor={themedStyles.placeholder.color}
              />
            </View>

            {/* Phone */}
            <View style={styles.formGroup}>
              <Text style={[styles.label, themedStyles.label]}>
                {t("diary.crew.phone")}
              </Text>
              <TextInput
                style={[styles.input, themedStyles.input]}
                value={formData.phone}
                onChangeText={(v) => updateField("phone", v)}
                placeholder={t("diary.crew.form.phonePlaceholder")}
                placeholderTextColor={themedStyles.placeholder.color}
                keyboardType="phone-pad"
              />
            </View>

            {/* Role */}
            <View style={styles.formGroup}>
              <Text style={[styles.label, themedStyles.label]}>
                {t("diary.crew.form.role")}
              </Text>
              <View style={styles.roleContainer}>
                {ROLES.map((role) => (
                  <TouchableOpacity
                    key={role}
                    style={[
                      styles.roleButton,
                      themedStyles.roleButton,
                      formData.role === role && themedStyles.roleButtonActive,
                    ]}
                    onPress={() => updateField("role", role)}
                  >
                    <Text
                      style={[
                        styles.roleButtonText,
                        themedStyles.roleText,
                        formData.role === role && themedStyles.roleTextActive,
                      ]}
                    >
                      {t(`diary.crew.roles.${role}`)}
                    </Text>
                  </TouchableOpacity>
                ))}
              </View>
            </View>

            {/* Address */}
            <View style={styles.formGroup}>
              <Text style={[styles.label, themedStyles.label]}>
                {t("diary.crew.form.address")}
              </Text>
              <TextInput
                style={[styles.input, themedStyles.input]}
                value={formData.address}
                onChangeText={(v) => updateField("address", v)}
                placeholder={t("diary.crew.form.addressPlaceholder")}
                placeholderTextColor={themedStyles.placeholder.color}
              />
            </View>

            {/* Note */}
            <View style={styles.formGroup}>
              <Text style={[styles.label, themedStyles.label]}>
                {t("diary.crew.note")}
              </Text>
              <TextInput
                style={[styles.input, styles.textArea, themedStyles.input]}
                value={formData.note}
                onChangeText={(v) => updateField("note", v)}
                placeholder={t("diary.crew.form.notePlaceholder")}
                placeholderTextColor={themedStyles.placeholder.color}
                multiline
                numberOfLines={3}
              />
            </View>
          </ScrollView>

          {/* Footer */}
          <View style={[styles.footer, { borderTopColor: colors.separator }]}>
            <TouchableOpacity
              style={[styles.cancelButton, { backgroundColor: colors.backgroundSecondary }]}
              onPress={handleClose}
            >
              <Text style={[styles.cancelButtonText, { color: colors.textSecondary }]}>
                {t("common.cancel")}
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={[
                styles.saveButton,
                { backgroundColor: colors.primary },
                isSubmitting && styles.buttonDisabled,
              ]}
              onPress={handleSave}
              disabled={isSubmitting}
            >
              {isSubmitting ? (
                <ActivityIndicator size="small" color="#FFFFFF" />
              ) : (
                <Text style={styles.saveButtonText}>{t("common.save")}</Text>
              )}
            </TouchableOpacity>
          </View>
        </Animated.View>
      </Animated.View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: "rgba(0, 0, 0, 0.5)",
    justifyContent: "flex-end",
  },
  modalContainer: {
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    maxHeight: "90%",
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 20,
    paddingVertical: 16,
    borderBottomWidth: 1,
  },
  closeButton: {
    padding: 4,
  },
  title: {
    fontSize: 18,
    fontWeight: "700",
    fontFamily: Platform.select({ ios: "System", android: "Roboto", default: "System" }),
  },
  headerPlaceholder: {
    width: 32,
  },
  content: {
    padding: 20,
  },
  formGroup: {
    marginBottom: 16,
  },
  label: {
    fontSize: 14,
    fontWeight: "600",
    marginBottom: 8,
    fontFamily: Platform.select({ ios: "System", android: "Roboto", default: "System" }),
  },
  input: {
    height: 44,
    borderRadius: 10,
    borderWidth: 1,
    paddingHorizontal: 14,
    fontSize: 15,
    fontFamily: Platform.select({ ios: "System", android: "Roboto", default: "System" }),
  },
  textArea: {
    height: 80,
    paddingTop: 12,
    textAlignVertical: "top",
  },
  roleContainer: {
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 8,
  },
  roleButton: {
    paddingHorizontal: 14,
    paddingVertical: 8,
    borderRadius: 20,
    borderWidth: 1,
  },
  roleButtonText: {
    fontSize: 13,
    fontWeight: "500",
    fontFamily: Platform.select({ ios: "System", android: "Roboto", default: "System" }),
  },
  footer: {
    flexDirection: "row",
    gap: 12,
    padding: 20,
    borderTopWidth: 1,
  },
  cancelButton: {
    flex: 1,
    paddingVertical: 14,
    borderRadius: 12,
    alignItems: "center",
  },
  cancelButtonText: {
    fontSize: 16,
    fontWeight: "600",
    fontFamily: Platform.select({ ios: "System", android: "Roboto", default: "System" }),
  },
  saveButton: {
    flex: 1,
    paddingVertical: 14,
    borderRadius: 12,
    alignItems: "center",
  },
  saveButtonText: {
    fontSize: 16,
    fontWeight: "600",
    color: "#FFFFFF",
    fontFamily: Platform.select({ ios: "System", android: "Roboto", default: "System" }),
  },
  buttonDisabled: {
    opacity: 0.7,
  },
});