import { IconSymbol } from "@/components/ui/icon-symbol";
import React, { useState } from "react";
import {
  Alert,
  Modal,
  ScrollView,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import styles from "../style/NetDetailModal.styles";
import { CatchSectionHeader } from "./components/CatchSectionHeader";
import { FishCardList } from "./components/FishCardList";
import { InfoSection } from "./components/InfoSection";
import { NotesSection } from "./components/NotesSection";

interface NetDetailModalProps {
  visible: boolean;
  onClose: () => void;
  netData: Model.FishingLog | null;
  stt?: number;
}

// ---------------------------
// 🧵 Component Modal
// ---------------------------
const NetDetailModal: React.FC<NetDetailModalProps> = ({
  visible,
  onClose,
  netData,
  stt,
}) => {
  const [isEditing, setIsEditing] = useState(false);
  const [editableCatchList, setEditableCatchList] = useState<
    Model.FishingLogInfo[]
  >([]);
  const [selectedFishIndex, setSelectedFishIndex] = useState<number | null>(
    null
  );
  const [selectedUnitIndex, setSelectedUnitIndex] = useState<number | null>(
    null
  );
  // const [selectedConditionIndex, setSelectedConditionIndex] = useState<
  //   number | null
  // >(null);
  // const [selectedGearIndex, setSelectedGearIndex] = useState<number | null>(
  //   null
  // );
  const [expandedFishIndices, setExpandedFishIndices] = useState<number[]>([]);

  // Khởi tạo dữ liệu khi netData thay đổi
  React.useEffect(() => {
    if (netData?.info) {
      setEditableCatchList(netData.info);
    }
  }, [netData]);

  // Reset state khi modal đóng
  React.useEffect(() => {
    if (!visible) {
      setExpandedFishIndices([]);
      setSelectedFishIndex(null);
      setSelectedUnitIndex(null);
      // setSelectedConditionIndex(null);
      // setSelectedGearIndex(null);
      setIsEditing(false);
    }
  }, [visible]);

  // if (!netData) return null;

  const isCompleted = netData?.status === 2; // ví dụ: status=2 là hoàn thành

  // Danh sách tên cá có sẵn
  const fishNameOptions = [
    "Cá chim trắng",
    "Cá song đỏ",
    "Cá hồng",
    "Cá nục",
    "Cá ngừ đại dương",
    "Cá mú trắng",
    "Cá hồng phớn",
    "Cá hổ Napoleon",
    "Cá nược",
    "Cá đuối quạt",
  ];

  // Danh sách đơn vị
  const unitOptions = ["kg", "con", "tấn"];

  // Danh sách tình trạng
  // const conditionOptions = ["Còn sống", "Chết", "Bị thương"];

  // Danh sách ngư cụ
  // const gearOptions = [
  //   "Lưới kéo",
  //   "Lưới vây",
  //   "Lưới rê",
  //   "Lưới cào",
  //   "Lưới lồng",
  //   "Câu cần",
  //   "Câu dây",
  //   "Chài cá",
  //   "Lồng bẫy",
  //   "Đăng",
  // ];

  const handleEdit = () => {
    setIsEditing(!isEditing);
  };

  const handleSave = () => {
    // Validate từng cá trong danh sách và thu thập tất cả lỗi
    const allErrors: { index: number; errors: string[] }[] = [];

    for (let i = 0; i < editableCatchList.length; i++) {
      const fish = editableCatchList[i];
      const errors: string[] = [];

      if (!fish.fish_name || fish.fish_name.trim() === "") {
        errors.push("- Tên loài cá");
      }
      if (!fish.catch_number || fish.catch_number <= 0) {
        errors.push("- Số lượng bắt được");
      }
      if (!fish.catch_unit || fish.catch_unit.trim() === "") {
        errors.push("- Đơn vị");
      }
      if (!fish.fish_size || fish.fish_size <= 0) {
        errors.push("- Kích thước cá");
      }
      // if (!fish.fish_condition || fish.fish_condition.trim() === "") {
      //   errors.push("- Tình trạng cá");
      // }
      // if (!fish.gear_usage || fish.gear_usage.trim() === "") {
      //   errors.push("- Dụng cụ sử dụng");
      // }

      if (errors.length > 0) {
        allErrors.push({ index: i, errors });
      }
    }

    // Nếu có lỗi, hiển thị tất cả
    if (allErrors.length > 0) {
      const errorMessage = allErrors
        .map((item) => {
          return `Cá số ${item.index + 1}:\n${item.errors.join("\n")}`;
        })
        .join("\n\n");

      Alert.alert(
        "Thông tin không đầy đủ",
        errorMessage,
        [
          {
            text: "Tiếp tục chỉnh sửa",
            onPress: () => {
              // Mở rộng tất cả các card bị lỗi
              setExpandedFishIndices((prev) => {
                const errorIndices = allErrors.map((item) => item.index);
                const newIndices = [...prev];
                errorIndices.forEach((idx) => {
                  if (!newIndices.includes(idx)) {
                    newIndices.push(idx);
                  }
                });
                return newIndices;
              });
            },
          },
          {
            text: "Hủy",
            onPress: () => {},
          },
        ],
        { cancelable: false }
      );
      return;
    }

    // Nếu validation pass, lưu dữ liệu
    setIsEditing(false);
    console.log("Saved catch list:", editableCatchList);
  };

  const handleCancel = () => {
    setIsEditing(false);
    setEditableCatchList(netData?.info || []);
  };

  const handleToggleExpanded = (index: number) => {
    setExpandedFishIndices((prev) =>
      prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
    );
  };

  const updateCatchItem = (
    index: number,
    field: keyof Model.FishingLogInfo,
    value: string | number
  ) => {
    setEditableCatchList((prev) =>
      prev.map((item, i) => {
        if (i === index) {
          const updatedItem = { ...item };
          if (
            field === "catch_number" ||
            field === "fish_size" ||
            field === "fish_rarity"
          ) {
            updatedItem[field] = Number(value) || 0;
          } else {
            updatedItem[field] = value as never;
          }
          return updatedItem;
        }
        return item;
      })
    );
  };

  const handleAddNewFish = () => {
    const newFish: Model.FishingLogInfo = {
      fish_species_id: 0,
      fish_name: "",
      catch_number: 0,
      catch_unit: "kg",
      fish_size: 0,
      fish_rarity: 0,
      fish_condition: "",
      gear_usage: "",
    };
    setEditableCatchList((prev) => [...prev, newFish]);
    // Tự động expand card mới
    setExpandedFishIndices((prev) => [...prev, editableCatchList.length]);
  };

  const handleDeleteFish = (index: number) => {
    Alert.alert(
      "Xác nhận xóa",
      `Bạn có chắc muốn xóa loài cá này?`,
      [
        {
          text: "Hủy",
          style: "cancel",
        },
        {
          text: "Xóa",
          style: "destructive",
          onPress: () => {
            setEditableCatchList((prev) => prev.filter((_, i) => i !== index));
            // Cập nhật lại expandedFishIndices sau khi xóa
            setExpandedFishIndices((prev) =>
              prev
                .filter((i) => i !== index)
                .map((i) => (i > index ? i - 1 : i))
            );
          },
        },
      ],
      { cancelable: true }
    );
  };

  // Chỉ tính tổng số lượng cá có đơn vị là 'kg'
  const totalCatch = editableCatchList.reduce(
    (sum, item) =>
      item.catch_unit === "kg" ? sum + (item.catch_number ?? 0) : sum,
    0
  );

  return (
    <Modal
      visible={visible}
      animationType="slide"
      presentationStyle="pageSheet"
      onRequestClose={onClose}
    >
      <View style={styles.container}>
        {/* Header */}
        <View style={styles.header}>
          <Text style={styles.title}>Chi tiết mẻ lưới</Text>
          <View style={styles.headerButtons}>
            {isEditing ? (
              <>
                <TouchableOpacity
                  onPress={handleCancel}
                  style={styles.cancelButton}
                >
                  <Text style={styles.cancelButtonText}>Hủy</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  onPress={handleSave}
                  style={styles.saveButton}
                >
                  <Text style={styles.saveButtonText}>Lưu</Text>
                </TouchableOpacity>
              </>
            ) : (
              <TouchableOpacity onPress={handleEdit} style={styles.editButton}>
                <View style={styles.editIconButton}>
                  <IconSymbol
                    name="pencil"
                    size={28}
                    color="#fff"
                    weight="heavy"
                  />
                </View>
              </TouchableOpacity>
            )}
            <TouchableOpacity onPress={onClose} style={styles.closeButton}>
              <View style={styles.closeIconButton}>
                <IconSymbol name="xmark" size={28} color="#fff" />
              </View>
            </TouchableOpacity>
          </View>
        </View>

        {/* Content */}
        <ScrollView style={styles.content}>
          {/* Thông tin chung */}
          <InfoSection
            netData={netData ?? undefined}
            isCompleted={isCompleted}
            stt={stt}
          />

          {/* Danh sách cá bắt được */}
          <CatchSectionHeader totalCatch={totalCatch} />

          {/* Fish cards */}
          <FishCardList
            catchList={editableCatchList}
            isEditing={isEditing}
            expandedFishIndex={expandedFishIndices}
            selectedFishIndex={selectedFishIndex}
            selectedUnitIndex={selectedUnitIndex}
            // selectedConditionIndex={selectedConditionIndex}
            // selectedGearIndex={selectedGearIndex}
            fishNameOptions={fishNameOptions}
            unitOptions={unitOptions}
            // conditionOptions={conditionOptions}
            // gearOptions={gearOptions}
            onToggleExpanded={handleToggleExpanded}
            onUpdateCatchItem={updateCatchItem}
            setSelectedFishIndex={setSelectedFishIndex}
            setSelectedUnitIndex={setSelectedUnitIndex}
            // setSelectedConditionIndex={setSelectedConditionIndex}
            // setSelectedGearIndex={setSelectedGearIndex}
            onAddNewFish={handleAddNewFish}
            onDeleteFish={handleDeleteFish}
          />

          {/* Ghi chú */}
          <NotesSection ghiChu={netData?.weather_description} />
        </ScrollView>
      </View>
    </Modal>
  );
};

export default NetDetailModal;