import { ScrollArea } from '@mantine/core';
import { FC, useState } from 'react';
import { useNavigate, useParams } from 'react-router';
import plan1 from '../../assets/plan-1.png';
import plan2 from '../../assets/plan-2.png';
import plan3 from '../../assets/plan-3.png';
import plan4 from '../../assets/plan-4.png';
import { Button, Group, Stack } from '../../components';
import Breadcrumb from '../../components/Breadcrumb';
import { Confirm } from '../../components/Confirm';
import { IconButton } from '../../components/IconButton';
import { jobs } from '../../demoData/job';
import { Comment, Job, Remark } from '../../types/job';
import { twx } from '../../utils';
import { BasicInfo } from './BasicInfo';
import { CommentHistory } from './CommentHistory';
import { Plan } from './Plan';
import { RemarkHistory } from './RemarkHistory';

const plans = [plan1, plan2, plan3, plan4];

export const InternalAuditScene: FC = () => {
  const navigate = useNavigate();

  const projectId = useParams().id!;
  const [currentPage, setCurrentPage] = useState(1);
  const [work] = useState<Job>(jobs[1]);
  const [mode, setMode] = useState<'sitePlan' | 'basicInfo'>('sitePlan');
  const [isAddingCar, setIsAddingCar] = useState(false);
  const [comments, setComments] = useState<Comment[]>([]);
  const [remarks, setRemarks] = useState<Remark[]>([]);
  const [confirmOpen, setConfirmOpen] = useState(false);

  return (
    <Stack className="h-full w-full gap-2 overflow-hidden">
      <Breadcrumb
        crumbs={[
          {
            label: 'Project Record',
            onClick: () => navigate('/project-record'),
          },
          {
            label: projectId,
            onClick: () => {
              navigate(`/project-record/${projectId}`);
            },
          },
          { label: `${work.jobId} - Internal Audit` },
        ]}
      />
      <Confirm
        open={confirmOpen}
        title="Are you sure to reject?"
        message="This action will reject the work"
        onConfirm={() => {
          setConfirmOpen(false);
        }}
        onCancel={() => {
          setConfirmOpen(false);
        }}
      />
      <Group className="gap-2">
        <Group className="w-full flex-wrap items-center justify-between gap-x-10 bg-white p-4">
          <p className="text-2xl font-medium">
            Internal Auditing: {work.jobId}
          </p>
          <Group className="gap-2">
            <Button className="w-40 bg-white text-gray-9">Save and Exit</Button>
            <Button
              className="w-40 bg-red-5 text-white"
              onClick={() => {
                setConfirmOpen(true);
              }}
            >
              Rejected
            </Button>
            <Button
              className="w-40 bg-blue-5 text-white"
              onClick={() => {
                navigate('/');
              }}
            >
              Approved
            </Button>
          </Group>
        </Group>
      </Group>
      <Group className="relative h-full flex-1 gap-2 overflow-hidden">
        <Stack className="h-full w-full">
          <Group className="gap-2">
            <button
              className={twx(
                'bg-neutral-2  text-black p-2',
                mode === 'sitePlan' && 'text-blue-5 bg-white',
              )}
              onClick={() => setMode('sitePlan')}
            >
              Site Plan
            </button>
            <button
              className={twx(
                'bg-neutral-2 text-black p-2',
                mode === 'basicInfo' && 'text-blue-5 bg-white',
              )}
              onClick={() => setMode('basicInfo')}
            >
              Basic Information
            </button>
          </Group>
          {/* Site Plan */}
          {mode === 'sitePlan' && (
            <Group className="h-full w-full gap-2 bg-white">
              <ScrollArea className="h-full w-50 flex flex-shrink-0 flex-col overflow-hidden bg-white p-4">
                <Stack className="h-full w-full gap-2">
                  {plans.map((plan, index) => (
                    <Preview
                      src={plan}
                      title={`${index + 1}`}
                      isActive={currentPage === index + 1}
                      onClick={() => setCurrentPage(index + 1)}
                    />
                  ))}
                </Stack>
              </ScrollArea>
              <Stack className="h-full w-full gap-2 p-4">
                <Group className="h-10 flex-nowrap gap-2">
                  <p className="text-sm text-black">{`Page ${currentPage} of ${3}`}</p>
                  {/* <IconButton
                    className="bg-white text-gray-9 h-10 w-10 ml-auto"
                    icon="i-ant-design-edit-filled"
                    iconClass="text-6"
                    onClick={() => {

                    }}
                  /> */}
                  <IconButton
                    className={twx(
                      'bg-white text-gray-9 h-10 w-10 ml-auto',
                      isAddingCar && 'bg-blue-2',
                    )}
                    icon="i-ant-design-comment-outlined"
                    iconClass="text-6"
                    onClick={() => setIsAddingCar((o) => !o)}
                  />
                </Group>
                <div className="flex flex-1 justify-center overflow-hidden">
                  <Plan
                    isAddingComment={isAddingCar}
                    comments={comments}
                    onAddComment={(comment) => {
                      setComments([...comments, comment]);
                      setIsAddingCar(false);
                    }}
                    onEditComment={(comment) => {
                      setComments(
                        comments.map((c) =>
                          c.id === comment.id ? comment : c,
                        ),
                      );
                    }}
                    currentPage={currentPage}
                    plan={plans[currentPage - 1]}
                  />
                </div>
              </Stack>
            </Group>
          )}
          {/* Basic Information */}
          {mode === 'basicInfo' && <BasicInfo work={work} />}
        </Stack>
        <Stack className="relative h-full w-[392px] gap-2">
          <RemarkHistory
            remarks={remarks}
            onAddRemark={(remark) => {
              setRemarks([...remarks, remark]);
            }}
            onDeleteRemark={(id) => {
              setRemarks(remarks.filter((r) => r.id !== id));
            }}
            onEditRemark={(remark) => {
              setRemarks(remarks.map((r) => (r.id === remark.id ? remark : r)));
            }}
          />
          <CommentHistory
            comments={comments}
            onDeleteComment={(comment) => {
              setComments(comments.filter((c) => c.id !== comment.id));
            }}
          />
        </Stack>
      </Group>
    </Stack>
  );
};

const Preview: FC<{
  src: string;
  title: string;
  isActive?: boolean;
  onClick?: () => void;
}> = ({ src, title, isActive, onClick }) => {
  return (
    <Stack
      className={twx(
        'w-full h-full cursor-pointer border-2',
        isActive && 'border-2 border-blue-5',
      )}
      onClick={onClick}
    >
      <img src={src} className="border-red-500 w-full border" />
      <p className="text-center text-sm">{title}</p>
    </Stack>
  );
};
