import { IconSymbol } from "@/components/ui/icon-symbol";
import React, { useRef, useState } from "react";
import {
  Animated,
  FlatList,
  ListRenderItem,
  Platform,
  Text,
  TouchableOpacity,
  UIManager,
  View,
} from "react-native";
import styles from "./style/TripCostTable.styles";

// ---------------------------
// 🧩 Interface
// ---------------------------
interface CostItem {
  id: string;
  loai: string;
  soLuong: number;
  donVi: string;
  chiPhi: number;
  tongChiPhi: number;
}

// ---------------------------
// 📊 Dữ liệu mẫu
// ---------------------------
const data: CostItem[] = [
  {
    id: "1",
    loai: "Nhiên liệu",
    soLuong: 1000,
    donVi: "liters",
    chiPhi: 20000,
    tongChiPhi: 20000000,
  },
  {
    id: "2",
    loai: "Lương thực",
    soLuong: 500,
    donVi: "kg",
    chiPhi: 30000,
    tongChiPhi: 15000000,
  },
  {
    id: "3",
    loai: "Lương thuyền viên",
    soLuong: 10,
    donVi: "people",
    chiPhi: 5000000,
    tongChiPhi: 50000000,
  },
  {
    id: "4",
    loai: "Muối đá",
    soLuong: 100,
    donVi: "kg",
    chiPhi: 20000,
    tongChiPhi: 2000000,
  },
];

// ---------------------------
// 💰 Component chính
// ---------------------------

const TripCostTable: React.FC = () => {
  // Enable LayoutAnimation for Android
  if (
    Platform.OS === "android" &&
    UIManager.setLayoutAnimationEnabledExperimental
  ) {
    UIManager.setLayoutAnimationEnabledExperimental(true);
  }

  const [collapsed, setCollapsed] = useState(true);
  const animatedHeight = useRef(new Animated.Value(0)).current;
  const tongCong = data.reduce((sum, item) => sum + item.tongChiPhi, 0);

  const renderItem: ListRenderItem<CostItem> = ({ item }) => (
    <View style={styles.row}>
      <Text style={[styles.cell, styles.left]}>{item.loai}</Text>
      <Text style={[styles.cell, styles.highlight]}>
        {item.tongChiPhi.toLocaleString()}
      </Text>
    </View>
  );

  const contentHeight = 220; // Chiều cao cố định cho bảng, có thể điều chỉnh
  const handleToggle = () => {
    if (collapsed) {
      Animated.timing(animatedHeight, {
        toValue: contentHeight,
        duration: 350,
        useNativeDriver: false,
      }).start();
    } else {
      Animated.timing(animatedHeight, {
        toValue: 0,
        duration: 350,
        useNativeDriver: false,
      }).start();
    }
    setCollapsed((prev) => !prev);
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity
        activeOpacity={0.7}
        onPress={handleToggle}
        style={{
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          marginBottom: collapsed ? 0 : 12,
        }}
      >
        <Text style={styles.title}>Chi phí chuyến đi</Text>
        {collapsed && (
          <Text
            style={[
              styles.title,
              { color: "#ff6600", fontWeight: "bold", marginLeft: 8 },
            ]}
          >
            {tongCong.toLocaleString()}
          </Text>
        )}
        <IconSymbol
          name={collapsed ? "arrowshape.down.fill" : "arrowshape.up.fill"}
          size={15}
          color="#000000"
        />
      </TouchableOpacity>

      <Animated.View style={{ height: animatedHeight, overflow: "hidden" }}>
        {/* Header */}
        <View style={[styles.row, styles.header]}>
          <Text style={[styles.cell, styles.left, styles.headerText]}>
            Loại
          </Text>
          <Text style={[styles.cell, styles.headerText]}>Tổng chi phí</Text>
        </View>

        {/* Body */}
        <FlatList
          data={data}
          renderItem={renderItem}
          keyExtractor={(item) => item.id}
        />

        {/* Footer */}
        <View style={[styles.row]}>
          <Text style={[styles.cell, styles.left, styles.footerText]}>
            Tổng cộng
          </Text>
          <Text style={[styles.cell, styles.total]}>
            {tongCong.toLocaleString()}
          </Text>
        </View>
      </Animated.View>
    </View>
  );
};

export default TripCostTable;
