"use client";

import React from 'react';
import {Anchor, Group, SegmentedControl, Stack, Text, Title} from "@mantine/core";
import {Header} from "@/components/header";
import {Code} from "@/components/code";
import Link from "next/link";

type PageProps = {
    params: {
        task_id: string
    }
}

const problems = [
    "A. Сумма двух чисел",
    "B. Разность двух чисел",
    "C. Театральная площадь"
]

const problem = {
    legend: `<p>Эта задача немного необычна — в ней вам предстоит реализовать
интерактивное взаимодействие с тестирующей системой. Это означает, что
вы можете делать запросы и получать ответы в online-режиме. Обратите
внимание, что ввод/вывод в этой задаче — стандартный (то есть с экрана
на экран). После вывода очередного запроса обязательно используйте
функции очистки потока, чтобы часть вашего вывода не осталась в
каком-нибудь буфере. Например, на С++ надо использовать функцию
<code>fflush(stdout)</code>, на Java вызов
<code>System.out.flush()</code>, на Pascal <code>flush(output)</code> и
<code>stdout.flush()</code> для языка Python.</p>
<p>В этой задаче вам предстоит в интерактивном режиме угадать число
<span class="math inline"><em>x</em></span>, которое загадала
тестирующая система. Про загаданное число <span
class="math inline"><em>x</em></span> известно, что оно целое и лежит в
границах от <span class="math inline">1</span> до <span
class="math inline"><em>n</em></span> включительно (значение <span
class="math inline"><em>n</em></span> известно заранее).</p>
<p>Вы можете делать запросы к тестирующей системе, каждый запрос — это
вывод одного целого числа от <span class="math inline">1</span> до <span
class="math inline"><em>n</em></span>. Есть два варианта ответа
тестирующей системы на запрос:</p>
<ul>
<li><p>строка &lt;&lt;<code>&lt;</code>&gt;&gt; (без кавычек), если
загаданное число меньше числа из запроса;</p></li>
<li><p>строка &lt;&lt;<code>&gt;=</code>&gt;&gt; (без кавычек), если
загаданное число больше либо равно числу из запроса.</p></li>
</ul>
<p>В случае, если ваша программа наверняка угадала нужное число <span
class="math inline"><em>x</em></span>, выведите строку вида
&lt;&lt;<code>! x</code>&gt;&gt;, где <span
class="math inline"><em>x</em></span> — это ответ, и завершите работу
своей программы.</p>
<p>Вашей программе разрешается сделать не более <span
class="math inline">25</span> запросов.</p>`,
    input: `<p>Для чтения ответов на запросы программа должна использовать
стандартный ввод.</p>
<p>В первой строке входных данных будет содержаться целое положительное
число <span class="math inline"><em>n</em></span> (<span
class="math inline">1 ≤ <em>n</em> ≤ 10<sup>6</sup></span>) —
максимально возможное число, которое может быть загадано.</p>
<p>В следующих строках на вход вашей программе будут подаваться строки
вида &lt;&lt;<code>&lt;</code>&gt;&gt; и
&lt;&lt;<code>&gt;=</code>&gt;&gt;. <span
class="math inline"><em>i</em></span>-я из этих строк является ответом
системы на ваш <span class="math inline"><em>i</em></span>-й запрос.
После того, как ваша программа угадала число, выведите
&lt;&lt;<code>! x</code>&gt;&gt; (без кавычек), где <span
class="math inline"><em>x</em></span> — это ответ, и завершите работу
своей программы.</p>
<p>Тестирующая система даст вашей программе прочитать ответ на запрос из
входных данных только после того, как ваша программа вывела
соответствующий запрос системе и выполнила операцию
<code>flush</code>.</p>`,
    name: `<p>Отгадай число</p>`,
    output: `<p>Для осуществления запросов программа должна использовать стандартный
вывод.</p>
<p>Ваша программа должна выводить запросы — целые числа <span
class="math inline"><em>x</em><sub><em>i</em></sub></span> (<span
class="math inline">1 ≤ <em>x</em><sub><em>i</em></sub> ≤ <em>n</em></span>)
по одному в строке (не забывайте выводить &lt;&lt;<em>перевод
строки</em>&gt;&gt; после каждого значения <span
class="math inline"><em>x</em><sub><em>i</em></sub></span>). После
вывода каждой строки программа должна выполнить операцию
<code>flush</code>.</p>
<p>Каждое из значений <span
class="math inline"><em>x</em><sub><em>i</em></sub></span> обозначает
очередной запрос к системе. Ответ на запрос программа сможет прочесть из
стандартного ввода. В случае, если ваша программа угадала число <span
class="math inline"><em>x</em></span>, выведите строку вида
&lt;&lt;<code>! x</code>&gt;&gt; (без кавычек), где <span
class="math inline"><em>x</em></span> — ответ, и завершите работу
программы.</p>`
}

const Page = ({params}: PageProps) => {
    return (
        <>
            <header>
                <Header/>
            </header>
            <Group align="start" justify="center">
                <nav style={{padding: "var(--mantine-spacing-xs) var(--mantine-spacing-md)", width: "fit-content"}}>
                    <Stack w={200}>
                        <Anchor component={Link} href="/contests/1" c="var(--mantine-color-bright)">
                            <Title c="black" order={4} ta="center">
                                Простой контест с длинным названием из восьми слов
                            </Title>
                        </Anchor>
                        <SegmentedControl
                            orientation="vertical"
                            withItemsBorders={false}
                            data={problems}
                            fullWidth
                            defaultValue={problems[0]}/>
                    </Stack>
                </nav>
                <main style={{flex: 5, maxWidth: "1080px"}}>
                    <div dangerouslySetInnerHTML={{__html: problem.legend + problem.legend + problem.legend}}>

                    </div>
                </main>
                <aside style={{padding: "var(--mantine-spacing-xs) var(--mantine-spacing-md)", width: "fit-content"}}>
                    <Stack>
                        <Code/>
                        <Text fw={500}>Последние посылки&nbsp;
                            <Anchor
                                component={Link}
                                href="/"
                                fs="italic"
                                c="var(--mantine-color-bright)" fw={500}>
                                (посмотреть все)
                            </Anchor>:
                        </Text>
                    </Stack>
                </aside>
            </Group>
        </>
    );
};

export default Page;
