import {
  ProList,
} from '@ant-design/pro-components';
import {BarsOutlined} from '@ant-design/icons';

import {Card, Collapse} from 'antd';
import {useEffect, useState} from 'react';
import {Select, Checkbox, Typography, Button, Form} from 'antd';

import EC2 from 'react-aws-icons/dist/aws/logo/EC2';
import VPC from 'react-aws-icons/dist/aws/logo/VPC';
import NATGateway from 'react-aws-icons/dist/aws/compute/NATGateway';
import LoadBalancer from 'react-aws-icons/dist/aws/compute/LoadBalancer';
import EBS from 'react-aws-icons/dist/aws/storage/EBS';
import Cluster from 'react-aws-icons/dist/aws/compute/Cluster';
import {useSearchParams} from 'umi';
import React from 'react';
import {fetchResourceFile} from "@/pages/util";


const gridStyle: React.CSSProperties = {
  width: '25%',
  textAlign: 'left',
};
const resourceIcons = {
  'ec2': EC2,
  'vpc': VPC,
  'nat': NATGateway,
  'nlb': LoadBalancer,
  'clb': LoadBalancer,
  'ebs': EBS,
  'eks': Cluster,
};


export default () => {
  const [resources, setResources] = useState([])
  const [loading, setLoading] = useState(false)

  function fetchResources() {
    setLoading(true)

    fetchResourceFile('/projects/cloud-resources-insight/tenant_resource_units_analysis.json',function (data) {
      setResources(data);
      setLoading(false);
    });
  }

  useEffect(() => {
    fetchResources()
  }, [])

  const [searchParams, setSearchParams] = useSearchParams();
  const emptyFilter = {
    tenantId: null, projectId: null, region: null, clusterId: null, feature: null, env: null,
    product: null,
  };
  let initFilter = {};
  Object.entries(emptyFilter).forEach(([k, v]) => {
    initFilter[k] = searchParams.get(k)
  })
  const [filter, setFilter] = useState(initFilter);
  const [form] = Form.useForm();

  const resetFilter = () => {
    form.resetFields();
    setFilter(emptyFilter);
    setSearchParams({}, {replace: true});
  };

  const handleFilterChange = (changedValues) => {
    const newFilter = {...filter, ...changedValues};
    setFilter(newFilter);
    // Filter out empty or default values
    const filteredParams = Object.fromEntries(
      Object.entries(newFilter).filter(([key, value]) => value !== null && value.length !== 0)
    );

    setSearchParams(filteredParams, {replace: true});
  };

  const filteredResources = resources.filter((item) => {
    const matchTenantId = filter.tenantId === null || item.dbaas_info.tenant_id.includes(filter.tenantId);
    const matchProjectId = filter.projectId === null || item.dbaas_info.project_id.includes(filter.projectId);
    const matchRegion = filter.region === null || item.region === filter.region;
    const matchClusterId = filter.clusterId === null || Object.keys(item.clusters).includes(filter.clusterId);
    const matchFeature = filter.feature === null || filter.feature.length === 0 || filter.feature.some(feat => item.features.includes(feat));
    const matchEnv = filter.env === null || item.env.includes(filter.env);
    return matchTenantId && matchProjectId && matchRegion && matchClusterId && matchFeature && matchEnv;
  });

  const filterOption = (input: string, option?: { label: string; value: string }) =>
    (option?.label ?? '').toLowerCase().includes(input.toLowerCase());

  return (
    <div
      style={{
        margin: -24,
        padding: 24,
      }}
    >
      <Form form={form} layout={'inline'}
            onValuesChange={handleFilterChange}
            initialValues={initFilter}
            style={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              flexWrap: 'wrap',
            }}
      >
        <Form.Item name="tenantId" label="Tenant ID:">
          <Select
            showSearch
            style={{width: 180}}
            optionFilterProp="children"
            filterOption={filterOption}
            options={[
              {value: null, label: 'All'},
              ...[...new Set(filteredResources.map(item => item.dbaas_info.tenant_id))].map(tenantId => (
                {value: tenantId, label: tenantId}
              ))
            ]}
          />
        </Form.Item>

        <Form.Item name="projectId" label="Project ID:">
          <Select
            showSearch
            style={{width: 180}}
            optionFilterProp="children"
            filterOption={filterOption}
            onChange={value => handleFilterChange({projectId: value})}
            options={[
              {value: null, label: 'All'},
              ...[...new Set(filteredResources.map(item => item.dbaas_info.project_id))].map(projectId => (
                {value: projectId, label: projectId}
              ))
            ]}
          />
        </Form.Item>

        <Form.Item name="region" label="Region:">
          <Select
            showSearch
            style={{width: 180}}
            optionFilterProp="children"
            filterOption={filterOption}
            onChange={value => handleFilterChange({region: value})}
            options={[
              {value: null, label: 'All'},
              ...[...new Set(filteredResources.map(item => item.region))].map(region => (
                {value: region, label: region}
              ))
            ]}
          />
        </Form.Item>

        <Form.Item name="clusterId" label="Cluster ID:">
          <Select
            showSearch
            style={{width: 180, marginLeft: 8}}
            optionFilterProp="children"
            filterOption={filterOption}
            onChange={value => handleFilterChange({clusterId: value})}
            options={[
              {value: null, label: 'All'},
              ...[...new Set(filteredResources.flatMap(item => Object.keys(item.clusters)))].map(clusterId => (
                {value: clusterId, label: clusterId}
              ))
            ]}
          />
        </Form.Item>

        <Form.Item name="env" label="env:">
          <Select
            showSearch
            style={{width: 120, marginLeft: 8}}
            optionFilterProp="children"
            filterOption={filterOption}
            onChange={value => handleFilterChange({env: value})}
            options={[
              {value: null, label: 'All'},
              ...[...new Set(filteredResources.map(item => item.env))].map(env => (
                {value: env, label: env}
              ))
            ]}
          />
        </Form.Item>

        <Form.Item name="product" label="Product:">
          <Select
            showSearch
            style={{width: 120, marginLeft: 8}}
            optionFilterProp="children"
            filterOption={filterOption}
            onChange={value => handleFilterChange({product: value})}
            options={[
              {value: null, label: 'All'},
              ...[
                ...new Set(
                  filteredResources
                    .flatMap(item => item.dataplane_resources)
                    .map(item => item.kind)
                ),
                ...new Set(
                  filteredResources
                    .flat(item => item.clusters)
                    .flat(([_, cluster]) => cluster.resources)
                    .flatMap(resources => resources)
                    .map(item => item.kind)
                )
              ].map(kind => ({value: kind, label: kind})),
            ]}
          />
        </Form.Item>

        <Form.Item name="feature" label="Feature:">
          <Select
            mode="multiple"
            showSearch
            style={{width: 300, marginLeft: 8}}
            optionFilterProp="children"
            filterOption={filterOption}
            onChange={value => handleFilterChange({feature: value})}
            options={[
              ...[...new Set(filteredResources.flatMap(item => item.features))].map(feature => (
                {value: feature, label: feature}
              ))
            ]}
          />
        </Form.Item>

        <Form.Item>
          <Button type="primary" onClick={resetFilter} style={{marginLeft: 8}}>Reset filter</Button>
        </Form.Item>
        <Form.Item>
          <Button
            onClick={fetchResources}
          >Reload data</Button>
        </Form.Item>
      </Form>

      <ProList<any>
        loading={loading}
        toolBarRender={() => {
          return [
            <div style={{marginBottom: 16}}>
              <div>Total records: {filteredResources.length}</div>
            </div>
          ];
        }}
        itemCardProps={{}}
        pagination={{
          defaultPageSize: 16,
          showSizeChanger: false,
        }}
        grid={{gutter: 24, column: 1}}
        metas={{
          title: {},
          subTitle: {},
          type: {},
          avatar: {},
          content: {},
          actions: {},
        }}
        headerTitle={
          <>
            Tenants Resources Overview < a
            href="https://internal-docs.shared.aws.tidbcloud.com/projects/cloud-resources-insight/tenant_resource_units_analysis.json"
            target="_blank" rel="noopener noreferrer"> (View Report in JSON)</a>
          </>
        }
        dataSource={
          filteredResources.map((item) => ({
            title: item.vpc_name,
            actions: [],
            avatar: <BarsOutlined/>,
            content: (
              <div
                style={{
                  flex: 1,
                }}
              >
                <Collapse defaultActiveKey={['Tenant Resource Units Info']}>
                  <Collapse.Panel header="Tenant Resource Units Info" key="Tenant Resource Units Info">
                    <Card>
                      {[
                        `env: ${item.env}`,
                        `provider: ${item.provider}`,
                        `tenant_id: ${item.dbaas_info.tenant_id} `,
                        `tenant_name: ${item.dbaas_info.tenant_name}`,
                        `tenant_kind: ${item.dbaas_info.tenant_kind}`,
                        `project_id: ${item.dbaas_info.project_id}`,
                        `project_name: ${item.dbaas_info.project_name}`,
                        `status: ${item.status}`,
                        `region: ${item.region}`,
                        `account_id: ${item.account_id}`,
                        `vpc_id: ${item.vpc_id}`,
                        `vpc_name: ${item.vpc_name}`,
                        `cidr_block: ${item.cidr_block}`,
                        `infra_resources: ${JSON.stringify(item.infra_resources, null, 2)}`
                      ].map((info, index) => (
                        <Card.Grid key={index}>{info}</Card.Grid>
                      ))}
                      {item.features && item.features.length > 0 && (
                        <Card.Grid>
                          <Typography>
                            Features:
                            <ul>
                              {item.features.map(feature => (
                                <Checkbox checked disabled>{feature}</Checkbox>
                              ))}
                            </ul>
                          </Typography>
                        </Card.Grid>
                      )}
                    </Card>
                  </Collapse.Panel>
                  <Collapse.Panel header="Dataplane Resources" key="Dataplane Resources">
                    <Card>
                      {
                        item.dataplane_resources
                          .filter(item => {
                            return filter.product === null || item.kind.includes(filter.product)
                          })
                          .map((item) => (
                            <Card.Grid style={gridStyle}>
                              {Object.entries(item).map(([key, value]) => {
                                const IconComponent = resourceIcons[value];
                                return (
                                  <div>
                                    {IconComponent && <IconComponent size={24}/>}
                                    {key}: {value}
                                  </div>
                                )
                              })}
                            </Card.Grid>
                          ))
                      }
                    </Card>
                  </Collapse.Panel>
                  {
                    Object.entries(item.clusters).filter(([clusterId,]) => {
                      return (filter.clusterId === null || filter.clusterId === clusterId) &&
                        (filter.projectId === null || item.dbaas_info.project_id.includes(filter.projectId))
                    }).map(([key, value]) => (
                      <Collapse.Panel header={`Cluster Resources - ${key}`} key={`Cluster Resources - ${key}`}>
                        <Card>
                          <Card.Grid style={gridStyle}>
                            {Object.entries(value).map(([key, value]) => {
                              if (key === 'resources') {
                                return null;
                              }
                              if (typeof value === 'object' && value !== null) {
                                return Object.entries(value).map(([subKey, subValue]) => (
                                  <div>
                                    {subKey}: {subValue}
                                  </div>
                                ));
                              }
                              return (
                                <div>
                                  {key}: {value}
                                </div>
                              );
                            })}
                          </Card.Grid>
                          {
                            value.resources
                              .filter(item => {
                                return filter.product === null || item.kind.includes(filter.product)
                              })
                              .map((item) => (
                                <Card.Grid style={gridStyle}>
                                  {Object.entries(item).map(([key, value]) => {
                                      const IconComponent = resourceIcons[value];
                                      return (
                                        <div>
                                          {IconComponent && <IconComponent size={24}/>}
                                          {key}: {value}
                                        </div>
                                      )
                                    }
                                  )}
                                </Card.Grid>
                              ))
                          }
                        </Card>
                      </Collapse.Panel>
                    ))
                  }
                </Collapse>
              </div>
            ),
          }))
        }
      />
    </div>
  );
};