import React, { useMemo } from 'react';
import styled from 'styled-components';
import { Surface, ContentWidth, Collapse, IconFile, IconThreeDots, IconEdit } from '../ui';
import { Select, MenuItem, Alert, Link, Button } from '@nemo-ui/core';
import { useUnit } from 'effector-react';
import { $result } from './gen-result-model';
import { result } from '../mock-result';
import MarkdownIt from 'markdown-it';
import DOMPurify from 'dompurify'; 
// import 'github-markdown-css/github-markdown.css';

const Wrapper = styled(ContentWidth)`
    margin: 0 auto;
`;
const Inner = styled(Surface)`
    width: 100%;
    box-shadow: 0px 1px 9px rgba(0, 0, 0, 0.09);
    border-radius: 8px;
    padding: 30px 30px 46px;
    display: flex;
    flex-direction: column;
`;

const Form = styled.div`
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2,auto);
    gap: 16px;
    width: 100%;
    padding: 30px 24px;

    .cols2 {
        grid-column: 1 / span 2;
        grid-row: 1;
    }
    .cols3 {
        grid-column: 1 / span 3;
    }


    & > * {
        width: 100%;
        min-height: 0;
        overflow: hidden;
    }
    .nemo-ui_select-selectedItem {
        display: block;
        & > * {
            overflow: hidden;
        }
            .nemo-ui_menuItem {
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
            }
    }
    .MuiInputBase-root {
        background-color:#fff;
    }
`;

const CircleCount = styled.span`
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 6px;
    width: 20px;
    height: 16px;
    background: rgba(2, 84, 172, 0.1);
    border-radius: 16px;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: #0254AC;
`;

const Table = styled.table`
    width: 100%;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #616A73;
    text-align: end;
    td {
        padding: 8px 12px;
    }
    tr:not(:last-child) td {
        border-bottom: 1px solid #E1E7ED;
    }
`;

const ChangeButton = styled.div`
    margin-top: 40px;
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    &:after, &:before {
        content: '';
        display: block;
        width: auto;
        flex-grow: 1;
        height: 1px; 
        background-color: #D9D9D9;
    }
`;

const ChangeBody = styled.div`
    background: #F5F7FA;
    border-radius: 8px;
    border: 1px solid #E1E7ED;
`;

const md = new MarkdownIt({
  html: false, 
  linkify: true,
  breaks: true,
});

const Markdown: React.FC<{source: string}> = (props) => {
  
  const html = useMemo(() => {
    const raw = md.render(props.source || '');
    return DOMPurify.sanitize(raw); // xss clear
  }, [props.source]);

  return (
    <div 
      className="markdown-body"
      dangerouslySetInnerHTML={{
        __html: html
      }}
    />
  )
}

export const GenResultView: React.FC = () => {
  // const [result] = useUnit([$result]);

  return (
    <Wrapper>
      <Alert
        variant="secondary"
        color="warning"
      >
        Режим редактирования документации. Для создания нового документа нажмите «Создать новый документ»
      </Alert>
      <Inner>
        <Collapse
          title='Бизнес требования'
        >
          <Form>
            <Select
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              value={10}
              label="Проект"
              onChange={() => { }}
              outLabel={true}
              size="large"
              className="cols2"
              backgroundColor={'#fff'}
            >
              <MenuItem
                value={10}
              >Спецификация межсистемного / внутрисистемного взаимодействия</MenuItem>
              <MenuItem
                value={20}
              >Twenty</MenuItem>
              <MenuItem
                value={30}
              >Thirty</MenuItem>
            </Select>
            <Select
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              value={10}
              label="Бизнес требования"
              onChange={() => { }}
              outLabel={true}
              size="large"
              icon={<IconFile />}
            >
              <MenuItem
                value={10}
              >Загрузка из файла</MenuItem>
              <MenuItem
                value={20}
              >Twenty</MenuItem>
              <MenuItem
                value={30}
              >Thirty</MenuItem>
            </Select>
            <Select
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              value={10}
              label="Название страницы"
              onChange={() => { }}
              outLabel={true}
              size="large"
            >
              <MenuItem
                value={10}
              >Описание алгоритмов: краткие пояснения принципов их работы</MenuItem>
              <MenuItem
                value={20}
              >Twenty</MenuItem>
              <MenuItem
                value={30}
              >Thirty</MenuItem>
            </Select>
            <Select
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              value={10}
              label="Тип документа"
              onChange={() => { }}
              outLabel={true}
              size="large"
            >
              <MenuItem
                value={10}
              >Межсистемное / внутрисистемное взаимодействие</MenuItem>
              <MenuItem
                value={20}
              >Twenty</MenuItem>
              <MenuItem
                value={30}
              >Thirty</MenuItem>
            </Select>
            <Select
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              value={10}
              label="Ссылка на доп страницу"
              onChange={() => { }}
              outLabel={true}
              size="large"
            >
              <MenuItem
                value={10}
              >https://conf.ibs.ru</MenuItem>
              <MenuItem
                value={20}
              >Twenty</MenuItem>
              <MenuItem
                value={30}
              >Thirty</MenuItem>
            </Select>
          </Form>
        </Collapse>
        <Markdown
          source={result.result}
        />
        <br />
        <Collapse
          title={<p>Сгенерированные документы <CircleCount>3</CircleCount></p>}
        >
          <Table>
            <tbody>
              <tr>
                <td><Link>Версия 1</Link></td>
                <td>Первичная генерация</td>
                <td>18-09-2025 18:22:19</td>
                <td><Button
                  variant="outlined"
                  size="extraSmall"
                    >Скачать</Button></td>
                <td><IconThreeDots /></td>
              </tr>
              <tr>
                <td><Link>Версия 1</Link></td>
                <td>Первичная генерация</td>
                <td>18-09-2025 18:22:19</td>
                <td><Button
                  variant="outlined"
                  size="extraSmall"
                    >Скачать</Button></td>
                <td><IconThreeDots /></td>
              </tr>
              <tr>
                <td><Link>Версия 1</Link></td>
                <td>Первичная генерация</td>
                <td>18-09-2025 18:22:19</td>
                <td><Button
                  variant="outlined"
                  size="extraSmall"
                    >Скачать</Button></td>
                <td><IconThreeDots /></td>
              </tr>
            </tbody>
          </Table>
        </Collapse>
        <br />
        <Collapse
          title={<p>Использованные источники <CircleCount>5</CircleCount></p>}
        >
          <Table>
            <tbody>
              <tr>
                <td>
                  <Link>
                    &quot;Соглашение о моделировании бизнес-процессов
                    с использованием ИС Business Studio&quot; v3
                  </Link>
                </td>
              </tr>
              <tr><td><Link>БФТ Единое окно данных сотрудника
                для подготовки к тендерам 03.2024 </Link></td></tr>
              <tr><td><Link>Протоколы статуса с ПЭС</Link></td></tr>
              <tr><td><Link>Встреча для обучения ПСС</Link></td></tr>
              <tr><td><Link>DSUP-2676 Карточка договора в Directum RX-v0.docx</Link></td></tr>
            </tbody>
          </Table>
        </Collapse>

        <ChangeButton>
          <Button
            variant="outlined"
            size="extraSmall"
          >
            <IconEdit />
            &nbsp;
            Изменить параметры генерации
          </Button>
        </ChangeButton>
        <ChangeBody>
          <Form>
            <Select
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              value={10}
              label="Проект"
              onChange={() => { }}
              outLabel={true}
              size="large"
              className="cols2"
              backgroundColor={'#fff'}
            >
              <MenuItem
                value={10}
              >Спецификация межсистемного / внутрисистемного взаимодействия</MenuItem>
              <MenuItem
                value={20}
              >Twenty</MenuItem>
              <MenuItem
                value={30}
              >Thirty</MenuItem>
            </Select>
            <Select
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              value={10}
              label="Бизнес требования"
              onChange={() => { }}
              outLabel={true}
              size="large"
              icon={<IconFile />}
            >
              <MenuItem
                value={10}
              >Загрузка из файла</MenuItem>
              <MenuItem
                value={20}
              >Twenty</MenuItem>
              <MenuItem
                value={30}
              >Thirty</MenuItem>
            </Select>
            <Select
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              value={10}
              label="Название страницы"
              onChange={() => { }}
              outLabel={true}
              size="large"
            >
              <MenuItem
                value={10}
              >Описание алгоритмов: краткие пояснения принципов их работы</MenuItem>
              <MenuItem
                value={20}
              >Twenty</MenuItem>
              <MenuItem
                value={30}
              >Thirty</MenuItem>
            </Select>
            <Select
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              value={10}
              label="Тип документа"
              onChange={() => { }}
              outLabel={true}
              size="large"
            >
              <MenuItem
                value={10}
              >Межсистемное / внутрисистемное взаимодействие</MenuItem>
              <MenuItem
                value={20}
              >Twenty</MenuItem>
              <MenuItem
                value={30}
              >Thirty</MenuItem>
            </Select>
            <Select
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              value={10}
              label="Ссылка на доп страницу"
              onChange={() => { }}
              outLabel={true}
              size="large"
            >
              <MenuItem
                value={10}
              >https://conf.ibs.ru</MenuItem>
              <MenuItem
                value={20}
              >Twenty</MenuItem>
              <MenuItem
                value={30}
              >Thirty</MenuItem>
            </Select>
            <Button
              size="small"
              className="cols3"
            >
              Обновить генерацию
            </Button>
          </Form>
        </ChangeBody>
      </Inner>
    </Wrapper>
  )
}