import { IconSymbol } from "@/components/ui/icon-symbol"; // biểu tượng giống dự án bạn
import React, { useRef, useState } from "react";
import {
  Animated,
  Platform,
  Text,
  TouchableOpacity,
  UIManager,
  View,
} from "react-native";
import styles from "./style/FishingToolsTable.styles";

// ---------------------------
// 🧩 Interface
// ---------------------------
interface ToolItem {
  id: string;
  ten: string;
  soLuong: number;
}

// ---------------------------
// 🎣 Dữ liệu mẫu
// ---------------------------
const data: ToolItem[] = [
  { id: "1", ten: "Lưới kéo", soLuong: 1 },
  { id: "2", ten: "Cần câu", soLuong: 1 },
  { id: "3", ten: "Mồi câu", soLuong: 5 },
];

const FishingToolsTable: React.FC = () => {
  // Bật animation trên Android
  if (
    Platform.OS === "android" &&
    UIManager.setLayoutAnimationEnabledExperimental
  ) {
    UIManager.setLayoutAnimationEnabledExperimental(true);
  }

  const [collapsed, setCollapsed] = useState(true);
  const [contentHeight, setContentHeight] = useState<number>(0);
  const animatedHeight = useRef(new Animated.Value(0)).current;
  const tongSoLuong = data.reduce((sum, item) => sum + item.soLuong, 0);

  const handleToggle = () => {
    const toValue = collapsed ? contentHeight : 0;
    Animated.timing(animatedHeight, {
      toValue,
      duration: 300,
      useNativeDriver: false,
    }).start();
    setCollapsed((prev) => !prev);
  };

  return (
    <View style={styles.container}>
      {/* Header / Toggle */}
      <TouchableOpacity
        activeOpacity={0.7}
        onPress={handleToggle}
        style={styles.headerRow}
      >
        <Text style={styles.title}>Danh sách ngư cụ</Text>
        {collapsed && <Text style={styles.totalCollapsed}>{tongSoLuong}</Text>}
        <IconSymbol
          name={collapsed ? "arrowshape.down.fill" : "arrowshape.up.fill"}
          size={16}
          color="#000"
        />
      </TouchableOpacity>

      {/* Nội dung ẩn để đo chiều cao */}
      <View
        style={{ position: "absolute", opacity: 0, zIndex: -1000 }}
        onLayout={(event) => {
          const height = event.nativeEvent.layout.height;
          if (height > 0 && contentHeight === 0) {
            setContentHeight(height);
          }
        }}
      >
        {/* Table Header */}
        <View style={[styles.row, styles.tableHeader]}>
          <Text style={[styles.cell, styles.left, styles.headerText]}>Tên</Text>
          <Text style={[styles.cell, styles.right, styles.headerText]}>
            Số lượng
          </Text>
        </View>

        {/* Body */}
        {data.map((item) => (
          <View key={item.id} style={styles.row}>
            <Text style={[styles.cell, styles.left]}>{item.ten}</Text>
            <Text style={[styles.cell, styles.right]}>{item.soLuong}</Text>
          </View>
        ))}

        {/* Footer */}
        <View style={[styles.row]}>
          <Text style={[styles.cell, styles.left, styles.footerText]}>
            Tổng cộng
          </Text>
          <Text style={[styles.cell, styles.right, styles.footerTotal]}>
            {tongSoLuong}
          </Text>
        </View>
      </View>

      {/* Nội dung mở/đóng */}
      <Animated.View style={{ height: animatedHeight, overflow: "hidden" }}>
        {/* Table Header */}
        <View style={[styles.row, styles.tableHeader]}>
          <Text style={[styles.cell, styles.left, styles.headerText]}>Tên</Text>
          <Text style={[styles.cell, styles.right, styles.headerText]}>
            Số lượng
          </Text>
        </View>

        {/* Body */}
        {data.map((item) => (
          <View key={item.id} style={styles.row}>
            <Text style={[styles.cell, styles.left]}>{item.ten}</Text>
            <Text style={[styles.cell, styles.right]}>{item.soLuong}</Text>
          </View>
        ))}

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

export default FishingToolsTable;