// src/components/common/ProjectCardComponent/ProjectCardComponent.jsx
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import {
  Button,
  TextField,
  FormControl,
  FormLabel,
  Box,
  Stack,
  Chip,
} from '@mui/material';
import { ProjectsApi } from '../../api/projects';
import { toast } from 'react-toastify';
import {
  CheckBoxCheckSvg,
  CheckBoxUncheckSvg,
  DateIcon,
  Edit,
  ExportSvg,
  UserIcon,
  BuildingIcon,
  LocationIcon,
} from '../../components/common/icons/icons';
import { IconWithContent } from '../../components/common/IconWithContent';
import { ExportButton } from '../../components/common/Buttons/ButtonsActions';
import { ModalCreateProject } from './ModalCreateProject';

const ProjectCard = styled.div`
  width: 26.8rem;
  height: 15rem;
  display: flex;
  padding: 1.25rem;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  box-sizing: border-box;
  border: 0.06rem solid var(--Stroke, rgba(0, 0, 0, 0.1));
  border-radius: 1rem;
  box-shadow:
    0rem 2rem 4rem -2rem rgba(0, 0, 0, 0.02),
    0rem 4rem 6rem -1rem rgba(0, 0, 0, 0.02);
  background: var(--White, rgba(255, 255, 255, 1));
  overflow: hidden;
  cursor: pointer;
  position: relative;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  }
`;

const CardHeader = styled.div`
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

const ProjectId = styled.div`
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1rem;
  letter-spacing: 0rem;
  text-align: left;
  color: rgba(0, 0, 0, 0.6);
`;

const CardBody = styled.div`
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.8125rem;
  justify-content: flex-end;
  height: 100%;
`;

const ProjectTitle = styled.div`
  font-size: 1rem;
  font-weight: 500;
  color: var(--Text-Primary, #333);
  line-height: 1.63;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
`;

const StatusChip = styled(Chip)`
  font-size: 0.7rem;
  height: 1.5rem;
  background-color: ${({ status }) => {
    switch (status) {
      case 'active': return '#4caf50';
      case 'completed': return '#2196f3';
      case 'paused': return '#ff9800';
      case 'archived': return '#9e9e9e';
      default: return '#9e9e9e';
    }
  }};
  color: white;
`;

const LevelChip = styled(Chip)`
  font-size: 0.6rem;
  height: 1.25rem;
  background-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.7);
`;

const ProjectInfoGrid = styled.div`
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
`;

const InfoChip = styled(Chip)`
  font-size: 0.6rem;
  height: 1.25rem;
  background-color: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.7);
`;

const getStatusLabel = (status) => {
  const statusMap = {
    active: 'Активный',
    completed: 'Завершен',
    paused: 'Приостановлен',
    archived: 'Архивирован',
  };
  return statusMap[status] || status || 'Не указан';
};

export const ProjectCardComponent = ({
  project,
  projectDataInit,
  exportMode = false,
  isLoadingFile = false,
  onAddForExport,
  onExportClick,
}) => {
  const navigate = useNavigate();
  const {
    id,
    name,
    org_unit_name,
    years,
    status,
    level,
    project_type,
    vsp_format,
    placement_type,
    object_address,
    staff_count,
    total_area,
    report_count,
    parent_id,
  } = project;

  const [isEditModalOpen, setEditModalOpen] = useState(false);
  const [currentName, setCurrentName] = useState(name || '');
  const [isChecked, setIsChecked] = useState(false);
  const [editFormData, setEditFormData] = useState({});
  const [projectData, setProjectData] = useState(projectDataInit);

  useEffect(() => {
    setIsChecked(false);
  }, [exportMode]);



  // Функция для подготовки данных проекта к редактированию
  const prepareProjectDataForEdit = () => {
    return {
      'ССП/РФ': project.org_unit_id || null,
      'Год': years || null,
      'Тип проекта развития': project_type || null,
      'Название проекта': currentName,
      'Формат ВСП': vsp_format || null,
      'Адрес объекта': object_address || '',
      'Целевая численность, чел.': staff_count || 0,
      'Тип размещения': placement_type || null,
      'Площадь размещения, м2': total_area || 0,
    };
  };

  const handleOpenEdit = (event) => {
    event.stopPropagation();
    setEditFormData(prepareProjectDataForEdit());
    setEditModalOpen(true);
  };

  const handleCloseEdit = () => {
    setEditModalOpen(false);
    setEditFormData({});
  };

  const handleCheckboxClick = (event) => {
    event.stopPropagation();
    if (!isLoadingFile) {
      setIsChecked(!isChecked);
      onAddForExport(!isChecked);
    } else {
      toast.warning('Файл формируется!');
    }
  };

  const handleExportProject = (event) => {
    event.stopPropagation();
    onExportClick?.(id, name);
  };

  const handleNavigate = () => {
    if (!exportMode) {
      navigate(`/project/${id}`);
    }
  };

  // Обновленная функция обновления проекта
  const updateProject = async (formData) => {
    try {
      const projectData = {
        name: formData['Название проекта'] || currentName,
        project_type: formData['Тип проекта развития'] || null,
        vsp_format: formData['Формат ВСП'] || null,
        object_address: formData['Адрес объекта'] || '',
        staff_count: Number(formData['Целевая численность, чел.']) || 0,
        placement_type: formData['Тип размещения'] || null,
        total_area: Number(formData['Площадь размещения, м2']) || 0,
        year: formData['Год'] ? Number(formData['Год']) : null,
        branch_id: formData['ССП/РФ'] || null,
      };

      await ProjectsApi.update(id, projectData);

      // Обновляем локальные данные
      setCurrentName(projectData.name);
      setEditModalOpen(false);
      toast.success('Данные проекта успешно обновлены');

      // Можно добавить рефреш данных или перезагрузку страницы
      window.location.reload(); // или используйте callback для обновления списка
    } catch (error) {
      toast.error(
        error?.response?.data?.detail || 'Не удалось обновить данные проекта',
      );
    }
  };

  const handleSaveProject = async (formData) => {
    await updateProject(formData);
  };

  const getInitials = (name) => {
    if (!name) return '?';
    const words = name.split(' ');
    if (words.length >= 2) {
      return `${words[0][0]}${words[1][0]}`.toUpperCase();
    }
    return name.substring(0, 2).toUpperCase();
  };

  return (
    <>
      <ProjectCard onClick={handleNavigate} key={id}>
        <Box sx={{ width: '100%' }}>
          <CardHeader>
            <ProjectId>ID: {id}</ProjectId>
            <Stack direction={'row'} spacing={'.5rem'} sx={{

            }} >
              {!exportMode && (
                <>
                  {status && (
                    <StatusChip
                      status={status}
                      label={getStatusLabel(status)}
                      size="small"
                    />
                  )}
                  {/* {Пока нет редактирование + экспорт} */}
                  {/* <ExportButton onClick={handleExportProject} />
                  <Edit onClick={handleOpenEdit} /> */}
                </>
              )}
            </Stack>
          </CardHeader>

          <ProjectTitle>{currentName}</ProjectTitle>

          <ProjectInfoGrid>
            {project_type && (
              <InfoChip label={`Тип: ${project_type}`} size="small" />
            )}
            {report_count !== undefined && report_count !== null && (
              <InfoChip label={`Отчетов: ${report_count}`} size="small" />
            )}

          </ProjectInfoGrid>
        </Box>

        <Stack
          sx={{
            direction: 'row',
            justifyContent: 'space-between',
            width: '100%',
            alignItems: 'end',
          }}
        >
          <CardBody>
            <IconWithContent icon={<DateIcon />}>
              {years.join(', ') || 'Год не указан'}
            </IconWithContent>
            <IconWithContent icon={<UserIcon />}>
              {org_unit_name || 'Организация не указана'}
            </IconWithContent>
          </CardBody>

          {exportMode && (
            <div>
              {isChecked ? (
                <CheckBoxCheckSvg size="1.625rem" />
              ) : (
                <CheckBoxUncheckSvg size="1.625rem" />
              )}
            </div>
          )}
        </Stack>
      </ProjectCard>

      <ModalCreateProject
        open={isEditModalOpen}
        onClose={handleCloseEdit}
        onCreate={handleSaveProject}
        config={projectData}
        initialData={editFormData}
        isEdit={true}
        projectId={id}
      />
    </>
  );
};