import React from "react";
import { FlatList, ListRenderItem, Text, View } from "react-native";
import styles from "./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 = () => {
  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>
  );

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Chi phí chuyến đi</Text>

      {/* 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, styles.footer]}>
        <Text style={[styles.cell, styles.left, styles.footerText]}>
          Tổng cộng
        </Text>
        <Text style={[styles.cell, styles.total]}>
          {tongCong.toLocaleString()}
        </Text>
      </View>
    </View>
  );
};

export default TripCostTable;