import React, { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';

import { Button } from '../Button/Button';
import { ColorField } from '../Fields/ColorField/ColorField';
import { CounterField } from '../Fields/CounterField/CounterField';
import { SingleSelectField } from '../Fields/SingleSelectField/SingleSelectField';
import { SwitchField } from '../Fields/SwitchField/SwitchField';
import { Popover } from '../Popover/Popover';
import { Strong } from '../Typography/Strong/Strong';

import { NestedNavigation } from './NestedNavigation';

const meta: Meta<typeof NestedNavigation> = {
  title: 'UI kit/NestedNavigation',
  component: NestedNavigation,
  subcomponents: {
    'NestedNavigation.Content': NestedNavigation.Content,
    'NestedNavigation.Item': NestedNavigation.Item,
    'NestedNavigation.List': NestedNavigation.List,
  },
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof NestedNavigation>;

const STYLE_SECTIONS = [
  { key: 'colors', title: 'Barvy', Group: ColorsGroup },
  { key: 'fonts', title: 'Fonty a písma', Group: FontsGroup },
  { key: 'buttons', title: 'Tlačítka', Group: ButtonsGroup },
  { key: 'forms', title: 'Formuláře', Group: FormsGroup },
  { key: 'corners', title: 'Zaoblení rohů', Group: CornersGroup },
  { key: 'spacing', title: 'Mezery a rozestupy', Group: SpacingGroup },
  { key: 'animations', title: 'Animace stránek', Group: AnimationsGroup },
] as const;

const FONTS_ADVANCED_TITLE = 'Pokročilé nastavení';

interface FontOption {
  id: string;
  label: string;
}

const FONT_OPTIONS: FontOption[] = [
  { id: 'inter', label: 'Inter' },
  { id: 'roboto', label: 'Roboto' },
];
const WEIGHT_OPTIONS: FontOption[] = [
  { id: 'regular', label: 'Pravidelné' },
  { id: 'medium', label: 'Střední' },
  { id: 'semibold', label: 'Polotučné' },
];
const SIZE_OPTIONS: FontOption[] = [
  { id: 'sm', label: 'Malá' },
  { id: 'md', label: 'Střední' },
  { id: 'lg', label: 'Velká' },
];

function FontSettingsGroup({ title, ...rest }: { title: string }) {
  const [font, setFont] = useState<string | null>('inter');
  const [weight, setWeight] = useState<string | null>('medium');
  const [size, setSize] = useState<string | null>('md');

  return (
    <>
      <Strong {...rest}>{title}</Strong>
      <SingleSelectField
        label='Font'
        options={FONT_OPTIONS}
        getOptionValue={option => option.id}
        getOptionLabel={option => option.label}
        value={font}
        onChange={setFont}
        justify
      />
      <SingleSelectField
        label='Tloušťka'
        options={WEIGHT_OPTIONS}
        getOptionValue={option => option.id}
        getOptionLabel={option => option.label}
        value={weight}
        onChange={setWeight}
        justify
      />
      <SingleSelectField
        label='Velikost'
        options={SIZE_OPTIONS}
        getOptionValue={option => option.id}
        getOptionLabel={option => option.label}
        value={size}
        onChange={setSize}
        justify
      />
    </>
  );
}

function ColorsGroup() {
  const [headingColor, setHeadingColor] = useState('18181B');
  const [textColor, setTextColor] = useState('3F3F46');
  const [buttonColor, setButtonColor] = useState('6D28D9');

  return (
    <>
      <ColorField label='Nadpisy' value={headingColor} onChange={setHeadingColor} justify />
      <ColorField label='Běžný text' value={textColor} onChange={setTextColor} justify />
      <ColorField label='Pozadí tlačítek' value={buttonColor} onChange={setButtonColor} justify />
    </>
  );
}

interface ButtonStyleOption {
  id: string;
  label: string;
}

const BUTTON_STYLE_OPTIONS: ButtonStyleOption[] = [
  { id: 'solid', label: 'Plné' },
  { id: 'outline', label: 'Obrysové' },
  { id: 'text', label: 'Textové' },
];

function ButtonsGroup() {
  const [style, setStyle] = useState<string | null>('solid');
  const [radius, setRadius] = useState<number | null>(8);
  const [growOnHover, setGrowOnHover] = useState(false);

  return (
    <>
      <SingleSelectField
        label='Styl'
        options={BUTTON_STYLE_OPTIONS}
        getOptionValue={option => option.id}
        getOptionLabel={option => option.label}
        value={style}
        onChange={setStyle}
        justify
      />
      <CounterField
        label='Zaoblení rohů'
        value={radius}
        onChange={value => setRadius(value ?? 0)}
        min={0}
        max={24}
        justify
      />
      <SwitchField label='Zvětšit při najetí myší' checked={growOnHover} onChange={setGrowOnHover} justify />
    </>
  );
}

interface FieldStyleOption {
  id: string;
  label: string;
}

const FIELD_STYLE_OPTIONS: FieldStyleOption[] = [
  { id: 'outlined', label: 'Ohraničené' },
  { id: 'underlined', label: 'Podtržené' },
];

function FormsGroup() {
  const [style, setStyle] = useState<string | null>('outlined');
  const [labelsAbove, setLabelsAbove] = useState(true);

  return (
    <>
      <SingleSelectField
        label='Styl polí'
        options={FIELD_STYLE_OPTIONS}
        getOptionValue={option => option.id}
        getOptionLabel={option => option.label}
        value={style}
        onChange={setStyle}
        justify
      />
      <SwitchField label='Zobrazit popisky nad poli' checked={labelsAbove} onChange={setLabelsAbove} justify />
    </>
  );
}

function CornersGroup() {
  const [radius, setRadius] = useState<number | null>(8);

  return (
    <CounterField
      label='Poloměr rohů'
      value={radius}
      onChange={value => setRadius(value ?? 0)}
      min={0}
      max={32}
      justify
    />
  );
}

function SpacingGroup() {
  const [spacing, setSpacing] = useState<number | null>(16);

  return (
    <CounterField
      label='Základní rozestup'
      value={spacing}
      onChange={value => setSpacing(value ?? 0)}
      min={4}
      max={32}
      step={4}
      justify
    />
  );
}

interface AnimationSpeedOption {
  id: string;
  label: string;
}

const ANIMATION_SPEED_OPTIONS: AnimationSpeedOption[] = [
  { id: 'slow', label: 'Pomalá' },
  { id: 'medium', label: 'Střední' },
  { id: 'fast', label: 'Rychlá' },
];

function AnimationsGroup() {
  const [enabled, setEnabled] = useState(true);
  const [speed, setSpeed] = useState<string | null>('medium');

  return (
    <>
      <SwitchField label='Povolit animace stránek' checked={enabled} onChange={setEnabled} justify />
      <SingleSelectField
        label='Rychlost'
        options={ANIMATION_SPEED_OPTIONS}
        getOptionValue={option => option.id}
        getOptionLabel={option => option.label}
        value={speed}
        onChange={setSpeed}
        justify
      />
    </>
  );
}

function FontsAdvancedGroup() {
  const [letterSpacing, setLetterSpacing] = useState<number | null>(0);
  const [lineHeight, setLineHeight] = useState<number | null>(72);

  return (
    <>
      <CounterField
        label='Prostrkání písma'
        value={letterSpacing}
        onChange={value => setLetterSpacing(value ?? 0)}
        min={-2}
        max={10}
        justify
      />
      <CounterField
        label='Výška řádku'
        value={lineHeight}
        onChange={value => setLineHeight(value ?? 0)}
        min={16}
        max={120}
        step={4}
        justify
      />
    </>
  );
}

function FontsGroup(props: React.ComponentProps<'div'>) {
  return (
    <>
      <FontSettingsGroup title='Nadpisy' {...props} />
      <FontSettingsGroup title='Běžný text' />
    </>
  );
}

function getStyleEditorLevels() {
  return (
    <>
      <NestedNavigation.Level id='root' title='Styl stránek'>
        <NestedNavigation.List>
          {STYLE_SECTIONS.map(section => (
            <NestedNavigation.Item key={section.key} to={section.key} label={section.title} />
          ))}
        </NestedNavigation.List>
      </NestedNavigation.Level>
      {STYLE_SECTIONS.map(({ key, title, Group }) => (
        <NestedNavigation.Level key={key} id={key} title={title}>
          <NestedNavigation.Content>
            <Group />
          </NestedNavigation.Content>
          {key === 'fonts' && (
            <NestedNavigation.List>
              <NestedNavigation.Item to='fonts-advanced' label={FONTS_ADVANCED_TITLE} />
            </NestedNavigation.List>
          )}
        </NestedNavigation.Level>
      ))}
      <NestedNavigation.Level id='fonts-advanced' title={FONTS_ADVANCED_TITLE}>
        <NestedNavigation.Content>
          <FontsAdvancedGroup />
        </NestedNavigation.Content>
      </NestedNavigation.Level>
    </>
  );
}

function StyleEditorDemo() {
  return (
    <Popover>
      <Popover.Trigger>{({ props }) => <Button {...props}>Otevřít styl stránek</Button>}</Popover.Trigger>
      <Popover.Overlay padding={false} placement='bottom start'>
        {({ state }) => (
          <NestedNavigation defaultStack={['root']} onClose={state.close}>
            {getStyleEditorLevels()}
          </NestedNavigation>
        )}
      </Popover.Overlay>
    </Popover>
  );
}

export const Default: Story = {
  name: 'Uncontrolled (default)',
  render: () => <StyleEditorDemo />,
};

function ControlledStackDemo() {
  const [stack, setStack] = useState<string[]>(['root']);

  return (
    <Popover>
      <Popover.Trigger>{({ props }) => <Button {...props}>Otevřít styl stránek</Button>}</Popover.Trigger>
      <Popover.Overlay padding={false} placement='bottom start'>
        {({ state }) => (
          <NestedNavigation stack={stack} onStackChange={setStack} onClose={state.close}>
            {getStyleEditorLevels()}
          </NestedNavigation>
        )}
      </Popover.Overlay>
    </Popover>
  );
}

export const ControlledStack: Story = {
  name: 'Controlled (remembers position across close/reopen)',
  render: () => <ControlledStackDemo />,
};

function StandaloneDemo() {
  const [isVisible, setIsVisible] = useState(true);

  if (!isVisible) {
    return <Button onClick={() => setIsVisible(true)}>Show again</Button>;
  }

  return (
    <NestedNavigation defaultStack={['root']} onClose={() => setIsVisible(false)}>
      {getStyleEditorLevels()}
    </NestedNavigation>
  );
}

export const Standalone: Story = {
  name: 'Used outside a Popover',
  render: () => <StandaloneDemo />,
  decorators: [
    Story => (
      <div style={{ width: 320 }}>
        <Story />
      </div>
    ),
  ],
};

function WrappedRootLevel() {
  return (
    <NestedNavigation.Level id='root' title='Styl stránek'>
      <NestedNavigation.List>
        <NestedNavigation.Item to='colors' label='Barvy' />
      </NestedNavigation.List>
    </NestedNavigation.Level>
  );
}

function WrappedColorsLevel() {
  return (
    <div>
      <NestedNavigation.Level id='colors' title='Barvy'>
        <NestedNavigation.Content>
          <ColorsGroup />
        </NestedNavigation.Content>
      </NestedNavigation.Level>
    </div>
  );
}

function WrappedLevelsDemo() {
  return (
    <NestedNavigation defaultStack={['root']} onClose={() => {}}>
      <WrappedRootLevel />
      <WrappedColorsLevel />
    </NestedNavigation>
  );
}

export const WrappedLevels: Story = {
  name: 'Levels wrapped in user components',
  render: () => <WrappedLevelsDemo />,
  decorators: [
    Story => (
      <div style={{ width: 320 }}>
        <Story />
      </div>
    ),
  ],
};

const DISABLED_ITEM_SECTIONS = [
  { key: 'available', title: 'Dostupná sekce', disabled: false },
  { key: 'locked', title: 'Uzamčená sekce', disabled: true },
] as const;

function DisabledItemDemo() {
  return (
    <NestedNavigation defaultStack={['root']} onClose={() => {}}>
      <NestedNavigation.Level id='root' title='Styl stránek'>
        <NestedNavigation.List>
          {DISABLED_ITEM_SECTIONS.map(section => (
            <NestedNavigation.Item
              key={section.key}
              to={section.key}
              label={section.title}
              disabled={section.disabled}
            />
          ))}
        </NestedNavigation.List>
      </NestedNavigation.Level>
      {DISABLED_ITEM_SECTIONS.map(section => (
        <NestedNavigation.Level key={section.key} id={section.key} title={section.title}>
          <NestedNavigation.Content>Obsah sekce „{section.title}“.</NestedNavigation.Content>
        </NestedNavigation.Level>
      ))}
    </NestedNavigation>
  );
}

export const DisabledItem: Story = {
  name: 'With a disabled item',
  render: () => <DisabledItemDemo />,
  decorators: [
    Story => (
      <div style={{ width: 320 }}>
        <Story />
      </div>
    ),
  ],
};

function PerLevelHeadersDemo() {
  return (
    <Popover>
      <Popover.Trigger>{({ props }) => <Button {...props}>Otevřít styl stránek</Button>}</Popover.Trigger>
      <Popover.Overlay padding={false} placement='bottom start'>
        {({ state }) => (
          <NestedNavigation defaultStack={['root']} onClose={state.close} renderHeader={false}>
            <NestedNavigation.Level id='root' title='Styl stránek'>
              <NestedNavigation.Header />
              <NestedNavigation.List>
                <NestedNavigation.Item to='colors' label='Barvy' />
                <NestedNavigation.Item to='fonts' label='Fonty a písma' />
              </NestedNavigation.List>
            </NestedNavigation.Level>
            <NestedNavigation.Level id='colors' title='Barvy'>
              <NestedNavigation.Header />
              <NestedNavigation.Content>
                <ColorsGroup />
              </NestedNavigation.Content>
            </NestedNavigation.Level>
            <NestedNavigation.Level id='fonts' title='Fonty a písma'>
              {/* A per-level customized header: standard controls plus extra content below. */}
              <NestedNavigation.Header />
              <div style={{ padding: '4px 12px', fontSize: 12, opacity: 0.7 }}>
                Vlastní obsah hlavičky jen pro tuto úroveň
              </div>
              <NestedNavigation.Content>
                <FontsGroup />
              </NestedNavigation.Content>
            </NestedNavigation.Level>
          </NestedNavigation>
        )}
      </Popover.Overlay>
    </Popover>
  );
}

export const PerLevelHeaders: Story = {
  name: 'Header composed per level',
  render: () => <PerLevelHeadersDemo />,
};