'use client';

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { useSearchParams, useRouter } from 'next/navigation';
import { Button, Card, Descriptions, Row, Col, Spin } from 'antd';
import { fetchProject } from '../slice';
import type { AppDispatch } from '@/store/store';
import PageHeader from '@/components/pageHeader';
import { displayDate, hasPermission } from '@/utills/helper';
import { useSession } from 'next-auth/react';
import { PERMISSIONS } from '@/utills/constant';
import MarketingChannel from '../components/MarketingChannels';
import AssignedSellers from '../components/AssignedSellers';
import FormattedAmount from '@/components/amountFormat/AmountFormatter';

const ProjectDetails: React.FC = () => {
  const { projectId, status } = useSelector((state: any) => state?.launches);
  const project = projectId;
  const dispatch: AppDispatch = useDispatch();

  const searchParams = useSearchParams();
  const id = searchParams.get('id');
  const parsedId = id !== null && id !== undefined ? parseInt(id, 10) : null;

  const router = useRouter();

  const { data: session } = useSession();
  const user = session?.user;
  const isEditable = hasPermission(user, PERMISSIONS.PROJECT_CREATE.name);

  useEffect(() => {
    if (parsedId !== null) {
      dispatch(fetchProject({ id: parsedId }));
    }
  }, [searchParams, dispatch]);

  if (status === 'failed') {
    return <div>Some thing want wrong...</div>;
  }

  return (
    <div>
      <PageHeader title="Project Details" />
      {status === 'failed' ? (
        <div>error...</div>
      ) : (
        <>
          <Spin tip="Loading..." spinning={status === 'loading'}>
            <Card
              title="Project Information"
              /* extra={
                isEditable && (
                  <Button
                    className="ml-3"
                    type="primary"
                    onClick={() => {
                      router.push(`/launches/edit-project?id=${project.id}`);
                    }}>
                                        Edit
                  </Button>
                )
              } */>
              <Row gutter={[16, 16]}>
                <Col span={24} md={24} lg={14} xl={16}>
                  <Descriptions
                    column={{ sm: 1, md: 2, lg: 1, xl: 2, xxl: 2 }}
                    colon={true}
                    size="small"
                    className="custom-descriptions"
                    bordered>
                    <Descriptions.Item label="Name:">
                      {project?.name}
                    </Descriptions.Item>
                    <Descriptions.Item label="Location:">
                      {project?.location}
                    </Descriptions.Item>
                    <Descriptions.Item label="City:">
                      {project?.city_name}
                    </Descriptions.Item>
                    <Descriptions.Item label="Builder Name:">
                      {project?.builder_name}
                    </Descriptions.Item>
                    <Descriptions.Item label="Region:">
                      {project?.region_name}
                    </Descriptions.Item>
                    <Descriptions.Item label="Status:" className="capitalize">
                      {project?.status}
                    </Descriptions.Item>
                    <Descriptions.Item label="Created At:">
                      {displayDate(project?.created_at)}
                    </Descriptions.Item>
                    {/* <Descriptions.Item label="Created By Name:">
                      {project?.created_by_name}
                    </Descriptions.Item> */}

                    {project?.localities?.map(
                      (locality: string, index: number) => (
                        <Descriptions.Item
                          label={`Location ${index + 1}:`}
                          key={index}>
                          <div>{locality}</div>
                        </Descriptions.Item>
                      )
                    )}
                  </Descriptions>
                </Col>
                <Col span={24} md={24} lg={10} xl={8}>
                  <table
                    cellSpacing={0}
                    cellPadding={0}
                    className="custom-table small table table-bordered">
                    <thead>
                      <tr>
                        <th>Configuration Name</th>
                        <th>Ticket Size</th>
                      </tr>
                    </thead>
                    <tbody>
                      {project?.configuration?.map(
                        (config: { configuration_name: string; ticket_size: string | number | null | undefined; }, index: number) => (
                          <tr key={index}>
                            <th>{config?.configuration_name}</th>
                            <td>
                              <FormattedAmount
                                amount={config?.ticket_size}
                              />
                            </td>
                          </tr>
                        )
                      )}
                    </tbody>
                  </table>
                </Col>
              </Row>
            </Card>
            <AssignedSellers sellers={project?.assigned_sellers ?? []} />
            <div className="mt-5">
              {
                isEditable &&
                                <MarketingChannel projectID={parsedId} hideCancelButton={true} />
              }

            </div>
          </Spin>
        </>
      )}
    </div>
  );
};

export default ProjectDetails;