import { ProCard } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Flex, Grid } from 'antd';
import HaulTable from './HaulTable';
import TripCostTable from './TripCost';
import TripCrews from './TripCrews';
import TripFishingGearTable from './TripFishingGear';
// Props cho component
interface MainTripBodyProps {
  trip_id?: string;
  tripInfo: API.Trip | null;
  onReload?: (isTrue: boolean) => void;
}

const MainTripBody: React.FC<MainTripBodyProps> = ({
  trip_id,
  tripInfo,
  onReload,
}) => {
  //   console.log('MainTripBody received:');
  //   console.log("trip_id:", trip_id);
  //   console.log('tripInfo:', tripInfo);
  const { useBreakpoint } = Grid;
  const screens = useBreakpoint();
  const { data, getApi } = useModel('getTrip');
  const tripCosts = Array.isArray(tripInfo?.trip_cost)
    ? tripInfo.trip_cost
    : [];
  const fishingGears = Array.isArray(tripInfo?.fishing_gears)
    ? tripInfo.fishing_gears
    : [];

  const fishing_logs_columns = [
    {
      title: <div style={{ textAlign: 'center' }}>Tên</div>,
      dataIndex: 'name',
      valueType: 'select',
      align: 'center',
    },
    {
      title: <div style={{ textAlign: 'center' }}>Số lượng</div>,
      dataIndex: 'number',
      align: 'center',
    },
  ];

  const tranship_columns = [
    {
      title: <div style={{ textAlign: 'center' }}>Tên</div>,
      dataIndex: 'name',
      valueType: 'select',
      align: 'center',
    },
    {
      title: <div style={{ textAlign: 'center' }}>Chức vụ</div>,
      dataIndex: 'role',
      align: 'center',
    },
  ];

  return (
    <Flex gap={10}>
      <ProCard
        ghost
        gutter={{
          xs: 8,
          sm: 8,
          md: 8,
          lg: 8,
          xl: 8,
          xxl: 8,
        }}
        direction="column"
        bodyStyle={{
          padding: 0,
          paddingInline: 0,
          gap: 10,
          backgroundColor: 'transparent',
        }}
      >
        <ProCard
          gutter={16} // tạo khoảng cách thay vì split (không có border)
          direction={screens.lg ? 'row' : 'column'} // responsive: ngang/dọc
          bodyStyle={{ padding: 0, gap: 10 }}
          style={{ color: 'transparent' }}
        >
          <ProCard
            colSpan={{ xs: 24, sm: 24, lg: 12, xl: 12 }}
            layout="center"
            bordered
            headStyle={{
              textAlign: 'center',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              // borderBottom: '1px solid #f0f0f0',
            }}
            title="Chi phí chuyến đi"
            style={{ minHeight: 300 }}
          >
            <TripCostTable tripCosts={tripCosts} />
          </ProCard>
          <ProCard
            colSpan={{ xs: 24, sm: 24, lg: 12, xl: 12 }}
            layout="center"
            bordered
            headStyle={{
              textAlign: 'center',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              borderBottom: '1px solid #f0f0f0',
            }}
            title="Danh sách ngư cụ"
            style={{ minHeight: 300 }}
          >
            <TripFishingGearTable fishingGears={fishingGears} />
          </ProCard>
        </ProCard>
        <ProCard
          style={{ paddingInlineEnd: 0, paddingBottom: 10 }}
          ghost={true}
          colSpan={{ xs: 24, sm: 24 }}
          layout="center"
          bordered
          headStyle={{
            textAlign: 'center',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
          }}
          title="Danh sách thuyền viên"
        >
          <TripCrews crew={tripInfo?.crews} />
        </ProCard>
        <ProCard
          style={{ paddingInlineEnd: 0, paddingBottom: 10 }}
          ghost={true}
          colSpan={{ xs: 24, sm: 24 }}
          layout="center"
          bordered
          headStyle={{
            textAlign: 'center',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
          }}
          title="Danh sách mẻ lưới"
        >
          <HaulTable
            trip={tripInfo!}
            hauls={tripInfo?.fishing_logs || []}
            onReload={(isTrue) => {
              if (isTrue) {
                // onReload?.(true);
                getApi();
              }
            }}
          />
        </ProCard>
      </ProCard>
    </Flex>
  );
};

export default MainTripBody;