import { useState } from 'react';
import { useParams } from 'react-router-dom';
import { Button, Drawer, Card, Table } from 'antd';
import { useTranslation } from 'react-i18next';
import useProductsStore, { getAgencyAllExtrasAction } from '@/stores/Products/Index';
import { useProductsTypes, formatGroupSize } from '@/hooks/useProductsSets';
import { chunkBy, splitTable_6, splitTable_7, splitTable_8, splitTable_B, splitTable_D, splitTable_J, splitTable_Q, splitTable_R } from '@/hooks/useProductsQuotationFormat';
import { groupBy } from '@/utils/commons';

const AgencyPreview = ({ params, ...props }) => {
  const { t } = useTranslation();
  const { travel_agency_id, use_year, audit_state } = useParams();
  const productsTypes = useProductsTypes();

  const [agencyProducts] = useProductsStore((state) => [state.agencyProducts]);

  const [previewMode, setPreviewMode] = useState(false);
  const [tables, setTables] = useState([]);
  const [extras, setExtras] = useState([]);

  const handlePreview = async () => {
    setPreviewMode(true);

    const agencyExtras = await getAgencyAllExtrasAction(params);
    setExtras(agencyExtras);
    // console.log(agencyExtras)

    // 只显示有产品的类型; 展开产品的价格表, 合并名称列; 转化为价格主表, 携带产品属性信息
    const hasDataTypes = Object.keys(agencyProducts);
    const _show = productsTypes
      .filter((kk) => hasDataTypes.includes(kk.value))
      .map((typeKey) => {
        const typeProducts = agencyProducts[typeKey.value];
        const chunked = chunkBy(use_year, typeProducts);
        // console.log(typeKey.label, chunked);
        // return {...chunked, typeKey};
        const { SSRange, PSRange, SSsizeSetKey, SSsizeSetsMap, chunk } = chunked;
        const bySizeSetKey = groupBy(chunk, 'sizeSetsSS'); // next: city
        // return bySizeSetKey
        const tables = Object.keys(bySizeSetKey).map((sizeSetsStr) => {
          const _thisSSsetProducts = bySizeSetKey[sizeSetsStr];
          return { cols: SSsizeSetsMap[sizeSetsStr], colsKey: sizeSetsStr, data: _thisSSsetProducts };
        });
        return { tables, typeKey };
      });
    // console.log(_show);
    setTables(_show);

    // const chunkR = chunkBy(use_year, agencyProducts['D'], []); // 'city_id',
    // console.log(chunkR);
  };

  const cityRowHighlights = (record) => (record.info.isCityRow ? 'font-bold text-center ' : '')

  const renderTable_6 = () => {
    // console.log('666666');
    if (!('6' in agencyProducts)) {
      return null;
    }
    const tablesQuote = splitTable_6(use_year, agencyProducts['6']);
    const table2Rows = tablesQuote.reduce((acc, {info, SS}) => {
      return acc.concat(SS.map((v, i) => ({...v, info, rowSpan: i===0 ? SS.length : 0})));
    }, []);
    // console.log('table2Rows', table2Rows)
    return (
      <>
        <Table
          bordered
          striped
          sticky={{ offsetHeader: -24 }}
          key={'ti'}
          dataSource={table2Rows}
          size={'small'}
          pagination={false}
          scroll={{ x: 'max-content' }}
          // className='mt-4'
          columns={[
            {
              title: '项目',
              dataIndex: ['info', 'product_title'],
              key: 'product_title',
              width: '12rem',
              onCell: (record) => {
                return { rowSpan: record.rowSpan };
              },
            },
            {
              title: '人等',
              dataIndex: 'dateText',
              key: 'dateText',
              width: '5rem',
              render: (_, r) => <div>{formatGroupSize(r.group_size_min, r.group_size_max, true)}</div>,
            },
            {
              title: '-',
              dataIndex: 'SS',
              key: 'SS',
              width: '9rem',
              align: 'center',
              children: [
                { title: '成人', dataIndex: ['adult_cost'], key: 'adult_cost', width: '9rem', align: 'center', },
                { title: '儿童', dataIndex: ['child_cost'], key: 'child_cost', width: '9rem', align: 'center', },
              ],
            },
          ]}
        />
      </>
    );
  };

  const renderTable_B = () => {
    // console.log('BBBBBBBBBBBB');
    if (!('B' in agencyProducts)) {
      return null;
    }
    const tablesQuote = splitTable_B(use_year, agencyProducts.B);
    return (
      <>
        {tablesQuote.map(({ cols, colsKey, data }, ti) => (
          <Table
            bordered
            striped
            sticky={{ offsetHeader: -24 }}
            key={ti}
            rowClassName={cityRowHighlights}
            columns={[
              {
                title: '项目',
                dataIndex: ['info', 'product_title'],
                key: 'product_title',
                width: '12rem', maxWidth: '12rem', className: 'max-w-48',
                fixed: 'left',
                onCell: (record) => {
                  return { rowSpan: record.rowSpan };
                },
              },
              {
                title: '往返公里数',
                dataIndex: ['info', 'km'],
                key: 'product_title',
                width: '6rem', maxWidth: '6rem', className: 'max-w-4',
                onCell: (record) => {
                  return { rowSpan: record.rowSpan };
                },
              },
              {
                title: '时段',
                dataIndex: 'dateText',
                key: 'dateText',
                width: '5rem',
                fixed: 'left',
                render: (_, { quote_season, use_dates_start, use_dates_end, rowSpan }) =>
                  quote_season === 'SS' ? (rowSpan > 1 ? (
                    <div>
                      平季<div>(除特殊时段外)</div>
                    </div>
                  ) : '') : (
                    <div>
                      特殊时段
                      <div>
                        {use_dates_start.replace(`${use_year}-`, '')}~{use_dates_end.replace(`${use_year}-`, '')}
                      </div>
                    </div>
                  ),
              },
              ...cols.map((col) => ({
                title: formatGroupSize(...col),
                // dataIndex: [formatGroupSize(...col), 'adult_cost'],
                key: col[0],
                children: [
                  { title: '成人', dataIndex: [formatGroupSize(...col), 'adult_cost'], key: 'adult_cost', width: '4rem' },
                  { title: '儿童', dataIndex: [formatGroupSize(...col), 'child_cost'], key: 'child_cost', width: '4rem' },
                ],
              })),
            ]}
            dataSource={data}
            size={'small'}
            pagination={false}
            scroll={{ x: 'max-content' }}
          />
        ))}
      </>
    );
  };

  const renderTable_J = () => {
    // console.clear();
    // console.log('jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj');
    if (!('J' in agencyProducts)) {
      return null;
    }
    const tablesQuote = splitTable_J(use_year, agencyProducts.J);
    return (
      <>
        {tablesQuote.map(({ cols, colsKey, data }, ti) => (
          <Table
            bordered
            striped
            sticky={{ offsetHeader: -24 }}
            key={ti}
            rowClassName={cityRowHighlights}
            columns={[
              {
                title: '项目',
                dataIndex: ['info', 'product_title'],
                key: 'product_title',
                width: '12rem',
                fixed: 'left',
                onCell: (record) => {
                  return { rowSpan: record.rowSpan };
                },
              },
              {
                title: '时段',
                dataIndex: 'dateText',
                key: 'dateText',
                width: '9rem',
                fixed: 'left',
                render: (_, { quote_season, use_dates_start, use_dates_end, rowSpan }) =>
                  quote_season === 'SS' ? (rowSpan > 1 ? (
                    <div>
                      平季<div>(除特殊时段外)</div>
                    </div>
                  ) : '') : (
                    <div>
                      特殊时段
                      <div>
                        {use_dates_start.replace(`${use_year}-`, '')}~{use_dates_end.replace(`${use_year}-`, '')}
                      </div>
                    </div>
                  ),
              },
              // { title: '时段', dataIndex: 'dateText', key: 'dateText', width: '9rem', render: (_, { quote_season, use_dates_start, use_dates_end}) => quote_season === 'SS' ? (<div>平季<div>(除特殊时段外)</div></div>) : (<div>特殊时段<div>{use_dates_start.replace(`${use_year}-`, '')}~{use_dates_end.replace(`${use_year}-`, '')}</div></div>)},
              // `特殊时段\n${use_dates_start.replace(`${use_year}-`, '')}~${use_dates_end.replace(`${use_year}-`, '')}` },
              ...cols.map((col) => ({
                title: formatGroupSize(...col),
                // dataIndex: [formatGroupSize(...col), 'adult_cost'],
                key: col[0],
                children: [
                  { title: '成人', dataIndex: [formatGroupSize(...col), 'adult_cost'], key: 'adult_cost', width: '4rem' },
                  { title: '儿童', dataIndex: [formatGroupSize(...col), 'child_cost'], key: 'child_cost', width: '4rem' },
                ],
              })),
            ]}
            dataSource={data}
            size={'small'}
            pagination={false}
            scroll={{ x: 'max-content' }}
            // className='mt-4'
          />
        ))}
      </>
    );
  };

  const renderTable_D = () => {
    // console.log('DDDDDDDDDDDDDDDDDDDDDDDDDDDDDD');
    if (!('D' in agencyProducts)) {
      return null;
    }
    const tablesQuote = splitTable_D(use_year, agencyProducts.D);
    return (
      <>
        {tablesQuote.map(({ cols, colsKey, data }, ti) => (
          <Table
            bordered
            striped
            sticky={{ offsetHeader: -24 }}
            key={ti}
            rowClassName={cityRowHighlights}
            columns={[
              {
                title: '项目',
                dataIndex: ['info', 'product_title'],
                key: 'product_title',
                width: '12rem',
                fixed: 'left',
                onCell: (record) => {
                  return { rowSpan: record.rowSpan };
                },
              },
              {
                title: '时段',
                dataIndex: 'dateText',
                key: 'dateText',
                width: '9rem',
                fixed: 'left',
                render: (_, { quote_season, use_dates_start, use_dates_end, rowSpan }) =>
                  quote_season === 'SS' ? (rowSpan > 1 ? (
                    <div>
                      平季<div>(除特殊时段外)</div>
                    </div>
                  ) : '') : (
                    <div>
                      特殊时段
                      <div>
                        {use_dates_start.replace(`${use_year}-`, '')}~{use_dates_end.replace(`${use_year}-`, '')}
                      </div>
                    </div>
                  ),
              },
              ...cols.map((col) => ({
                title: formatGroupSize(...col),
                // dataIndex: [formatGroupSize(...col), 'adult_cost'],
                key: col[0],
                children: [
                  { title: '成人', dataIndex: [formatGroupSize(...col), 'adult_cost'], key: 'adult_cost' },
                  { title: '儿童', dataIndex: [formatGroupSize(...col), 'child_cost'], key: 'child_cost' },
                ],
              })),
            ]}
            dataSource={data}
            size={'small'}
            pagination={false}
            scroll={{ x: 'max-content' }}
            // className='mt-4'
          />
        ))}
      </>
    );
  };

  const renderTable_Q = () => {
    // console.log('QQQQQQ');
    if (!('Q' in agencyProducts)) {
      return null;
    }
    const tablesQuote = splitTable_Q(use_year, agencyProducts.Q);
    // console.log('tablesQuote', tablesQuote);
    return (
      <>
        <Table
          bordered
          striped
          sticky={{ offsetHeader: -24 }}
          key={'ti'}
          dataSource={tablesQuote}
          size={'small'}
          pagination={false}
          scroll={{ x: 'max-content' }}
          rowClassName={cityRowHighlights}
          columns={[
            {
              title: '项目',
              dataIndex: ['info', 'product_title'],
              key: 'product_title',
              width: '12rem',
              // onCell: (record) => {
              //   return { rowSpan: record.rowSpan };
              // },
            },
            {
              title: '平季(除特殊时段外)',
              dataIndex: 'SS',
              key: 'SS',
              width: '9rem',
              children: [
                {
                  title: '成人',
                  dataIndex: [0, 'adult_cost'],
                  key: 'adult_cost',
                  width: '9rem',
                  render: (_, { SS }) => (
                    <div className='divide-x-0 divide-y divide-solid divide-stone-200'>
                      {(SS || []).length === 1 ? (
                        <div className='flex justify-between divide-x divide-y-0 divide-solid divide-stone-200'>
                          <span className='flex-1 text-center'>{SS[0].adult_cost}</span>
                        </div>
                      ) : (
                        (SS || []).map((ele, qi) => (
                          <div key={qi} className=''>
                            <div className='flex justify-between text-center divide-x divide-y-0 divide-solid divide-stone-200'>
                              <span className='flex-0 w-32 text-start'>
                                {formatGroupSize(ele.group_size_min, ele.group_size_max, true)}, {ele.unit_name}
                              </span>
                              <span className='flex-1'>{ele.adult_cost}</span>
                            </div>
                          </div>
                        ))
                      )}
                    </div>
                  ),
                },
                {
                  title: '儿童',
                  dataIndex: [0, 'child_cost'],
                  key: 'child_cost',
                  width: '9rem',
                  render: (_, { SS }) => (
                    <div className='divide-x-0 divide-y divide-solid divide-stone-200'>
                      {(SS || []).length === 1 ? (
                        <div className='flex justify-between divide-x divide-y-0 divide-solid divide-stone-200'>
                          <span className='flex-1 text-center'>{SS[0].child_cost}</span>
                        </div>
                      ) : (
                        (SS || []).map((ele, qi) => (
                          <div key={qi} className=''>
                            <div className='flex justify-between text-center divide-x divide-y-0 divide-solid divide-stone-200'>
                              <span className='flex-0 w-32 text-start'>
                                {formatGroupSize(ele.group_size_min, ele.group_size_max, true)}, {ele.unit_name}
                              </span>
                              <span className='flex-1'>{ele.child_cost}</span>
                            </div>
                          </div>
                        ))
                      )}
                    </div>
                  ),
                },
              ],
            },
            {
              title: '旺季',
              dataIndex: 'PS',
              key: 'PS',
              width: '9rem',
              children: [
                {
                  title: '成人',
                  dataIndex: [0, 'adult_cost'],
                  key: 'adult_cost',
                  width: '9rem',
                  render: (_, { PS }) => (
                    <div className='divide-x-0 divide-y divide-solid divide-stone-200'>
                      {(PS || []).map((ele, pi) => (
                        <div key={pi} className='b'>
                          {ele.adult_cost}
                          <div>
                            {
                              ele.rows.map((d, di) => (
                                <div key={di}>
                                  ({d.use_dates_start.replace(`${use_year}-`, '')}~{d.use_dates_end.replace(`${use_year}-`, '')})
                                </div>
                              ))
                            }
                          </div>
                        </div>
                      ))}
                    </div>
                  ),
                },
                {
                  title: '儿童',
                  dataIndex: [0, 'child_cost'],
                  key: 'child_cost',
                  width: '9rem',
                  render: (_, { PS }) => (
                    <div className='divide-x-0 divide-y divide-solid divide-stone-200'>
                      {(PS || []).map((ele, pi) => (
                        <div key={pi} className='b'>
                          {ele.child_cost}
                          <div>
                            {ele.rows.map((d, di) => (
                              <div key={di}>
                                ({d.use_dates_start.replace(`${use_year}-`, '')}~{d.use_dates_end.replace(`${use_year}-`, '')})
                              </div>
                            ))}
                          </div>
                        </div>
                      ))}
                    </div>
                  ),
                },
              ],
            },
          ]}
        />
      </>
    );
  };

  const renderTable_7 = () => {
    // console.log('7777777777777');
    if (!('7' in agencyProducts)) {
      return null;
    }
    const tablesQuote = splitTable_7(use_year, agencyProducts['7']);
    // console.log('tableQuote', tablesQuote)
    return (
      <>
        <Table
          bordered
          striped
          sticky={{ offsetHeader: -24 }}
          key={'ti'}
          dataSource={tablesQuote}
          size={'small'}
          pagination={false}
          scroll={{ x: 'max-content' }}
          // className=''
          rowClassName={cityRowHighlights}
          columns={[
            {
              title: '项目',
              dataIndex: ['info', 'product_title'],
              key: 'product_title',
              width: '12rem',
              // onCell: (record) => {
              //   return { rowSpan: record.rowSpan };
              // },
            },
            {
              title: (
                <>
                  平季(除特殊时段外)
                  <div className='flex justify-between divide-x divide-y-0 divide-solid divide-stone-200'>
                    <span className='flex-0 text-center w-32'>-</span>
                    <span className='flex-1 text-center'>成人</span>
                    <span className='flex-1 text-center'>儿童</span>
                  </div>
                </>
              ),
              dataIndex: 'SS',
              key: 'SS',
              width: '9rem',
              render: (_, { SS }) => (
                <div className='divide-x-0 divide-y divide-solid divide-stone-200'>
                  {(SS || []).length === 1 ? (
                    <div className='flex justify-between divide-x divide-y-0 divide-solid divide-stone-200'>
                      <span className='flex-0 w-32 text-start'>{SS[0].unit_id === '0' ? '' : `${formatGroupSize(SS[0].group_size_min, SS[0].group_size_max, true)}, ${SS[0].unit_name}`}</span>
                      <span className='flex-1 text-center'>{SS[0].adult_cost}</span>
                      <span className='flex-1 text-center'>{SS[0].child_cost}</span>
                    </div>
                  ) : (
                    (SS || []).map((ele, qi) =>
                    <div key={qi} className=''>
                      <div className='flex justify-between text-center divide-x divide-y-0 divide-solid divide-stone-200'>
                        <span className='flex-0 w-32 text-start'>{formatGroupSize(ele.group_size_min, ele.group_size_max, true)}, {ele.unit_name}</span>
                        <span className='flex-1'>{ele.adult_cost}</span>
                        <span className='flex-1'>{ele.child_cost}</span>
                      </div>
                    </div>)
                  )}
                </div>
              ),
            },
            {
              title: (
                <>
                  旺季
                  <div className='flex justify-between divide-x divide-y-0 divide-solid divide-stone-200'>
                    <span className='flex-1'>成人</span>
                    <span className='flex-1'>儿童</span>
                  </div>
                </>
              ),
              dataIndex: 'PS',
              key: 'PS',
              width: '9rem',
              align: 'center',
              render: (_, { PS }) => (
                <div>
                  {(PS || []).map((ele, pi) => (
                    <div key={pi}>
                      <div className='flex justify-between divide-x divide-y-0 divide-solid divide-stone-200'>
                        <span className='flex-1'>{ele.adult_cost}</span>
                        <span className='flex-1'>{ele.child_cost}</span>
                      </div>
                          <div>
                            {ele.rows.map((d, di) => (
                              <div key={di}>
                                ({d.use_dates_start.replace(`${use_year}-`, '')}~{d.use_dates_end.replace(`${use_year}-`, '')})
                              </div>
                            ))}
                          </div>
                      {/* <div>( {ele.rows.map((d) => `${d.use_dates_start.replace(`${use_year}-`, '')}~${d.use_dates_end.replace(`${use_year}-`, '')}`).join('; ')} )</div> */}
                    </div>
                  ))}
                </div>
              ),
            },
            { title: '特殊项目', width: '9rem', key: 'extras', render: (_, r) => {
              const _extras = extras[r.info.id] || [];
              return (<div>{_extras.map(e => <div key={e.info.id}>{e.info.product_title}【{e.info.product_type_name}】</div>)}</div>);
            }},
          ]}
        />
      </>
    );
  };

  const renderTable_R = () => {
    // console.log('RRRRRRRRRRRRR');
    if (!('R' in agencyProducts)) {
      return null;
    }
    const tablesQuote = splitTable_R(use_year, agencyProducts.R);
    return (
      <>
        {tablesQuote.map(({ cols, colsKey, data }, ti) => (
          <Table
            bordered
            striped
            sticky={{ offsetHeader: -24 }}
            key={ti}
            rowClassName={cityRowHighlights}
            columns={[
              {
                title: '项目',
                dataIndex: ['info', 'product_title'],
                key: 'product_title',
                width: '12rem',
                fixed: 'left',
                onCell: (record) => {
                  return { rowSpan: record.rowSpan };
                },
              },
              {
                title: '时段',
                dataIndex: 'dateText',
                key: 'dateText',
                width: '5rem',
                fixed: 'left',
                render: (_, { quote_season, use_dates_start, use_dates_end, rowSpan }) =>
                  quote_season === 'SS' ? (rowSpan > 1 ? (
                    <div>
                      平季<div>(除特殊时段外)</div>
                    </div>
                  ) : '') : (
                    <div>
                      特殊时段
                      <div>
                        {use_dates_start.replace(`${use_year}-`, '')}~{use_dates_end.replace(`${use_year}-`, '')}
                      </div>
                    </div>
                  ),
              },
              ...cols.map((col) => ({
                title: formatGroupSize(...col),
                // dataIndex: [formatGroupSize(...col), 'adult_cost'],
                key: col[0],
                children: [
                  { title: '成人', dataIndex: [formatGroupSize(...col), 'adult_cost'], key: 'adult_cost', width: '4rem' },
                  { title: '儿童', dataIndex: [formatGroupSize(...col), 'child_cost'], key: 'child_cost', width: '4rem' },
                ],
              })),
              { title: '司陪餐补（元/团/餐）', dataIndex: 'extra', key: 'extra', width: '4rem',
                onCell: (record, index) => {
                  return { rowSpan: index === 0 ? data.length : 0 };
                },
                render: _ => (<>不分人等</>)
              },
            ]}
            dataSource={data}
            size={'small'}
            pagination={false}
            scroll={{ x: 'max-content' }}
          />
        ))}
      </>
    );
  };

  const renderTable_8 = () => {
    // console.log('888888');
    if (!('8' in agencyProducts)) {
      return null;
    }
    const tablesQuote = splitTable_8(use_year, agencyProducts['8']);
    return (
      <>
        {tablesQuote.map(({ cols, colsKey, data }, ti) => (
          <Table
            bordered
            striped
            sticky={{ offsetHeader: -24 }}
            key={ti}
            rowClassName={cityRowHighlights}
            columns={[
              {
                title: '项目',
                dataIndex: ['info', 'product_title'],
                key: 'product_title',
                width: '12rem', maxWidth: '12rem', className: 'max-w-48',
                fixed: 'left',
                onCell: (record) => {
                  return { rowSpan: record.rowSpan };
                },
              },
              {
                title: '时段',
                dataIndex: 'dateText',
                key: 'dateText',
                width: '5rem',
                fixed: 'left',
                render: (_, { quote_season, use_dates_start, use_dates_end, rowSpan }) =>
                  quote_season === 'SS' ? (rowSpan > 1 ? (
                    <div>
                      平季<div>(除特殊时段外)</div>
                    </div>
                  ) : '') : (
                    <div>
                      特殊时段
                      <div>
                        {use_dates_start.replace(`${use_year}-`, '')}~{use_dates_end.replace(`${use_year}-`, '')}
                      </div>
                    </div>
                  ),
              },
              ...cols.map((col) => ({
                title: formatGroupSize(...col),
                // dataIndex: [formatGroupSize(...col), 'adult_cost'],
                key: col[0],
                children: [
                  { title: '成人', dataIndex: [formatGroupSize(...col), 'adult_cost'], key: 'adult_cost', width: '4rem' },
                  { title: '儿童', dataIndex: [formatGroupSize(...col), 'child_cost'], key: 'child_cost', width: '4rem' },
                ],
              })),
            ]}
            dataSource={data}
            size={'small'}
            pagination={false}
            scroll={{ x: 'max-content' }}
          />
        ))}
      </>
    );
  }

  const typeTableMap = {
    '6': { render: renderTable_6 },
    'B': { render: renderTable_B },
    'J': { render: renderTable_J },
    'Q': { render: renderTable_Q },
    '7': { render: renderTable_7 },
    'R': { render: renderTable_R },
    '8': { render: renderTable_8 },
    'D': { render: renderTable_D },
  };

  const renderTableByType = (allTables) => {
    return allTables.map(({ typeKey, tables }) => {
      return (
        <Card title={typeKey.label} key={typeKey.value} className='[&_.ant-card-head]:bg-neutral-200'  >
        <div className='flex flex-col gap-4'>
          {typeTableMap[typeKey.value].render()}
        </div>
        </Card>
      );
    });
  };

  return (
    <>
      <Button size='small' onClick={handlePreview}>
        {t('Preview')}
      </Button>
      <Drawer title={`${t('Preview')}`} width={'70%'} open={previewMode} onClose={() => setPreviewMode(false)} >
        <div className='flex flex-col gap-2'>
          {renderTableByType(tables)}
        </div>
      </Drawer>
    </>
  );
};
export default AgencyPreview;