import {useCallback, useEffect, useMemo, useRef, useState} from 'react';

import {
  buildCustomWorldPlayableCharacters,
  PRESET_CHARACTERS,
} from '../../data/characterPresets';
import {AnimationState, type Character, type CustomWorldProfile, WorldType} from '../../types';
import {getNineSliceStyle, UI_CHROME} from '../../uiAssets';
import {CharacterAnimator} from '../CharacterAnimator';
import {CharacterDetailModal} from '../CharacterDetailModal';
import {CharacterDraftModal} from '../SelectionCustomizationModals';

type CharacterSelectionDraft = {
  name: string;
  backstory: string;
};

type CarouselOrientation = 'horizontal' | 'vertical';

type CharacterSelectionFlowProps = {
  worldType: WorldType;
  customWorldProfile: CustomWorldProfile | null;
  onBack: () => void;
  onConfirm: (character: Character) => void;
};

const CHARACTER_DISPLAY: Record<string, {name: string; title: string; role: string; tags: string[]}> = {
  'sword-princess': {name: '剑姬', title: '皇家之刃', role: '先锋', tags: ['剑术', '压制', '突进']},
  'archer-hero': {name: '弓手英雄', title: '风之射手', role: '远程', tags: ['射程', '齐射', '风筝']},
  'girl-hero': {name: '双刃刺客', title: '暗影之牙', role: '刺客', tags: ['连击', '冲锋', '机动']},
  'punch-hero': {name: '战拳', title: '近战大师', role: '战士', tags: ['爆发', '格斗', '仇恨']},
  'fighter-4': {name: '装甲长矛手', title: '重装先锋', role: '前线', tags: ['守护', '稳定', '突破']},
};

const ATTRIBUTE_LABELS: Record<keyof Character['attributes'], string> = {
  strength: '力量',
  agility: '敏捷',
  intelligence: '智力',
  spirit: '精神',
};

function getGenderLabel(gender: Character['gender']) {
  if (gender === 'female') return '女性';
  if (gender === 'male') return '男性';
  return '未知';
}

function clampIndex(value: number, length: number) {
  if (length <= 0) return 0;
  return Math.max(0, Math.min(length - 1, value));
}

function getCharacterMeta(
  character: Character,
  overrides: Partial<Pick<Character, 'name' | 'title'>> = {},
) {
  const preset = CHARACTER_DISPLAY[character.id];
  return {
    name: overrides.name ?? character.name ?? preset?.name,
    title: overrides.title ?? character.title ?? preset?.title,
    role: preset?.role ?? '角色',
    tags: preset?.tags ?? [],
  };
}

function applyCharacterSelectionDraft(
  character: Character | null,
  draft?: CharacterSelectionDraft | null,
) {
  if (!character || !draft) return character;
  return {
    ...character,
    name: draft.name,
    backstory: draft.backstory,
  } satisfies Character;
}

function getPersonalityTags(personality: string) {
  const tags = personality
    .split(/[,.!?/\\\s]+/u)
    .map(tag => tag.trim())
    .filter(Boolean);

  return tags.length > 0 ? [...new Set(tags)] : [personality.trim()].filter(Boolean);
}

function readCarouselProgress(container: HTMLDivElement, orientation: CarouselOrientation) {
  const firstCard = container.querySelector<HTMLElement>('[data-carousel-card="true"]');
  if (!firstCard) return 0;

  const styles = window.getComputedStyle(container);
  const gap = parseFloat(
    orientation === 'vertical'
      ? styles.rowGap || styles.gap || '0'
      : styles.columnGap || styles.gap || '0',
  );
  const stride = orientation === 'vertical'
    ? firstCard.getBoundingClientRect().height + gap
    : firstCard.getBoundingClientRect().width + gap;

  if (stride <= 0) return 0;
  return orientation === 'vertical' ? container.scrollTop / stride : container.scrollLeft / stride;
}

function scrollCarouselToIndex(container: HTMLDivElement | null, index: number, orientation: CarouselOrientation) {
  if (!container) return;
  const firstCard = container.querySelector<HTMLElement>('[data-carousel-card="true"]');
  if (!firstCard) return;

  const styles = window.getComputedStyle(container);
  const gap = parseFloat(
    orientation === 'vertical'
      ? styles.rowGap || styles.gap || '0'
      : styles.columnGap || styles.gap || '0',
  );
  const stride = orientation === 'vertical'
    ? firstCard.getBoundingClientRect().height + gap
    : firstCard.getBoundingClientRect().width + gap;

  const behavior: ScrollBehavior = 'smooth';
  if (orientation === 'vertical') {
    container.scrollTo({top: stride * index, behavior});
  } else {
    container.scrollTo({left: stride * index, behavior});
  }
}

function getCharacterCardStyle(index: number, progress: number) {
  const delta = index - progress;
  const distance = Math.min(Math.abs(delta), 2.4);

  if (distance < 0.08) {
    return {
      opacity: 1,
      zIndex: 30,
      transform: 'none',
      filter: 'none',
      willChange: 'auto' as const,
    };
  }

  const scale = 1 - distance * 0.12;
  const opacity = 1 - distance * 0.28;
  const rotate = delta * 8;
  const translateY = distance * 12;
  const translateX = delta * -12;

  return {
    opacity,
    zIndex: 30 - Math.round(distance * 10),
    transform: `translate3d(${translateX}px, ${translateY}px, 0) scale(${scale}) rotate(${rotate}deg)`,
    filter: distance < 0.08 ? 'none' : `saturate(${1 - distance * 0.08})`,
  };
}

export function CharacterSelectionFlow({
  worldType,
  customWorldProfile,
  onBack,
  onConfirm,
}: CharacterSelectionFlowProps) {
  const selectionCharacters = useMemo(
    () => (customWorldProfile ? buildCustomWorldPlayableCharacters(customWorldProfile) : PRESET_CHARACTERS),
    [customWorldProfile],
  );
  const [selectedCharacterId, setSelectedCharacterId] = useState(selectionCharacters[0]?.id ?? '');
  const [detailCharacter, setDetailCharacter] = useState<Character | null>(null);
  const characterCarouselRef = useRef<HTMLDivElement | null>(null);
  const [characterCarouselProgress, setCharacterCarouselProgress] = useState(0);
  const [showCharacterDraftModal, setShowCharacterDraftModal] = useState(false);
  const [characterDraftName, setCharacterDraftName] = useState('');
  const [characterDraftBackstory, setCharacterDraftBackstory] = useState('');
  const [characterDraftError, setCharacterDraftError] = useState<string | null>(null);
  const [characterSelectionDrafts, setCharacterSelectionDrafts] = useState<Record<string, CharacterSelectionDraft>>({});

  const selectedCharacter = useMemo(
    () => selectionCharacters.find(character => character.id === selectedCharacterId) ?? selectionCharacters[0] ?? null,
    [selectedCharacterId, selectionCharacters],
  );
  const selectedCharacterDraft = selectedCharacter ? characterSelectionDrafts[selectedCharacter.id] ?? null : null;
  const selectedCharacterPreview = useMemo(
    () => applyCharacterSelectionDraft(selectedCharacter, selectedCharacterDraft),
    [selectedCharacter, selectedCharacterDraft],
  );
  const selectedCharacterMeta = selectedCharacter
    ? getCharacterMeta(selectedCharacter, {name: selectedCharacterDraft?.name})
    : null;
  const selectedCharacterPersonalityTags = useMemo(
    () => (selectedCharacterPreview ? getPersonalityTags(selectedCharacterPreview.personality) : []),
    [selectedCharacterPreview],
  );
  const focusedCharacterIndex = clampIndex(Math.round(characterCarouselProgress), selectionCharacters.length);

  const syncCharacterCarousel = useCallback(() => {
    if (!characterCarouselRef.current) return;
    setCharacterCarouselProgress(readCarouselProgress(characterCarouselRef.current, 'horizontal'));
  }, []);

  useEffect(() => {
    syncCharacterCarousel();
    window.addEventListener('resize', syncCharacterCarousel);
    return () => window.removeEventListener('resize', syncCharacterCarousel);
  }, [syncCharacterCarousel]);

  useEffect(() => {
    const focusedCharacter = selectionCharacters[focusedCharacterIndex];
    if (focusedCharacter && focusedCharacter.id !== selectedCharacterId) {
      setSelectedCharacterId(focusedCharacter.id);
    }
  }, [focusedCharacterIndex, selectedCharacterId, selectionCharacters]);

  useEffect(() => {
    if (selectionCharacters.length === 0) return;
    if (!selectionCharacters.some(character => character.id === selectedCharacterId)) {
      const firstCharacter = selectionCharacters[0];
      if (firstCharacter) {
        setSelectedCharacterId(firstCharacter.id);
      }
    }
  }, [selectedCharacterId, selectionCharacters]);

  const openCharacterDraftEditor = () => {
    if (!selectedCharacterPreview) return;
    setCharacterDraftName(selectedCharacterPreview.name);
    setCharacterDraftBackstory(selectedCharacterPreview.backstory);
    setCharacterDraftError(null);
    setShowCharacterDraftModal(true);
  };

  const saveCharacterDraft = () => {
    if (!selectedCharacter) return;

    const nextName = characterDraftName.trim();
    const nextBackstory = characterDraftBackstory.trim();
    if (!nextName) {
      setCharacterDraftError('请输入角色名称。');
      return;
    }
    if (!nextBackstory) {
      setCharacterDraftError('请输入角色背景故事。');
      return;
    }

    setCharacterSelectionDrafts(current => ({
      ...current,
      [selectedCharacter.id]: {
        name: nextName,
        backstory: nextBackstory,
      },
    }));
    setCharacterDraftError(null);
    setShowCharacterDraftModal(false);
  };

  if (!selectedCharacter || !selectedCharacterMeta) {
    return null;
  }

  return (
    <>
      <div className="flex h-full min-h-0 flex-col">
        <div className="mb-3 flex justify-start">
          <button
            type="button"
            onClick={onBack}
            className="rounded-full border border-white/10 bg-black/18 px-3 py-1.5 text-[11px] text-zinc-300 transition-colors hover:text-white"
          >
            返回
          </button>
        </div>
        <div className="mb-4 text-center">
          <div className="text-2xl font-black text-white sm:text-[2rem]">选择你的角色</div>
          <div className="mt-1 text-[11px] tracking-[0.14em] text-zinc-500">左右滑动浏览角色</div>
        </div>

        <div
          ref={characterCarouselRef}
          onScroll={syncCharacterCarousel}
          className="character-carousel scrollbar-hide flex-[1_1_auto]"
        >
          {selectionCharacters.map((character, index) => {
            const characterDraft = characterSelectionDrafts[character.id];
            const meta = getCharacterMeta(character, {name: characterDraft?.name});
            const selected = character.id === selectedCharacter.id;

            return (
              <button
                key={character.id}
                type="button"
                onClick={() => {
                  setSelectedCharacterId(character.id);
                  scrollCarouselToIndex(characterCarouselRef.current, index, 'horizontal');
                }}
                data-carousel-card="true"
                className={`character-carousel__card ${selected ? 'character-carousel__card--active' : ''}`}
                style={getCharacterCardStyle(index, characterCarouselProgress)}
              >
                <span className={`character-carousel__surface ${selected ? 'character-carousel__surface--active' : ''}`}>
                  <span className="character-carousel__cover">
                    {selected ? (
                      <CharacterAnimator
                        state={AnimationState.RUN}
                        character={character}
                        className="character-carousel__portrait character-carousel__portrait--animated"
                      />
                    ) : (
                      <img src={character.portrait} alt={meta.name} className="character-carousel__portrait" style={{imageRendering: 'pixelated'}} />
                    )}
                  </span>
                  {selected ? (
                    <>
                      <span className="character-carousel__selected-name">{meta.name}</span>
                      <span className="character-carousel__meta character-carousel__meta--selected">
                        <span className="character-carousel__title character-carousel__title--selected">{meta.title}</span>
                      </span>
                    </>
                  ) : (
                    <span className="character-carousel__meta">
                      <span className="character-carousel__name">{meta.name}</span>
                      <span className="character-carousel__title">{meta.title}</span>
                    </span>
                  )}
                </span>
              </button>
            );
          })}
        </div>

        <div className="mt-3 grid gap-2 md:grid-cols-[0.85fr_1.15fr]">
          <div className="pixel-nine-slice pixel-panel" style={getNineSliceStyle(UI_CHROME.statsPanel, {paddingX: 12, paddingY: 10})}>
            <div className="mb-2 flex items-center justify-between gap-3">
              <div className="text-xs font-bold text-white">角色属性</div>
              <div className="flex items-center gap-2 text-[10px] text-zinc-500">
                <span>{selectedCharacterMeta.title}</span>
                <span className="rounded-full border border-white/10 bg-black/20 px-2 py-0.5 text-[9px] text-zinc-200">
                  性别: {getGenderLabel(selectedCharacter.gender)}
                </span>
              </div>
            </div>
            <div className="grid grid-cols-4 gap-1 text-[11px] text-zinc-300 sm:gap-1.5 sm:text-[13px]">
              {Object.entries(selectedCharacter.attributes).map(([key, value]) => (
                <div key={key} className="rounded-lg border border-white/6 bg-black/20 px-2 py-1.5 text-center sm:px-2.5">
                  {ATTRIBUTE_LABELS[key as keyof Character['attributes']]}: {value}
                </div>
              ))}
            </div>
          </div>

          <div
            className="pixel-nine-slice pixel-panel character-backstory-panel flex flex-col"
            style={getNineSliceStyle(UI_CHROME.panel, {paddingX: 12, paddingY: 10})}
          >
            <div className="mb-2 flex items-start justify-between gap-3">
              <div className="character-backstory-title text-xs font-bold text-white">背景故事</div>
              <button
                type="button"
                onClick={openCharacterDraftEditor}
                className="rounded-full border border-sky-300/20 bg-sky-500/10 px-3 py-1 text-[10px] text-sky-100 transition-colors hover:text-white"
              >
                自定义
              </button>
            </div>
            <div className="flex flex-1 flex-col text-[13px] leading-6 text-zinc-300">
              <div>{selectedCharacterPreview?.backstory ?? selectedCharacter.backstory}</div>
              <div className="mt-auto flex items-end justify-between gap-3 pt-3">
                <div className="min-w-0 flex flex-wrap gap-1.5">
                  {selectedCharacterPersonalityTags.map(tag => (
                    <span key={tag} className="rounded-full border border-white/10 bg-black/20 px-2 py-0.5 text-[10px] text-zinc-300">
                      {tag}
                    </span>
                  ))}
                </div>
                <button
                  type="button"
                  onClick={() => setDetailCharacter(selectedCharacterPreview)}
                  aria-label={`查看${selectedCharacterPreview?.name ?? selectedCharacter.name}的详情`}
                  className="shrink-0 text-[11px] font-medium text-sky-200 transition-colors hover:text-white"
                >
                  详情
                </button>
              </div>
            </div>
          </div>
        </div>

        <div className="mt-3">
          <button
            type="button"
            onClick={() => onConfirm(selectedCharacterPreview ?? selectedCharacter)}
            className="pixel-nine-slice pixel-pressable mx-auto block w-full max-w-[16rem] text-left"
            style={getNineSliceStyle(UI_CHROME.choiceButton, {paddingX: 14, paddingY: 9})}
          >
            <div className="flex items-center justify-between gap-4">
              <span className="text-sm font-semibold text-white">进入营地</span>
              <span className="text-white/60">开始</span>
            </div>
          </button>
        </div>
      </div>

      <CharacterDetailModal
        character={detailCharacter}
        worldType={worldType}
        customWorldProfile={customWorldProfile}
        subtitle="角色详情"
        onClose={() => setDetailCharacter(null)}
      />
      <CharacterDraftModal
        isOpen={showCharacterDraftModal}
        characterLabel={selectedCharacterMeta ? `${selectedCharacterMeta.name} / ${selectedCharacterMeta.title}` : '当前角色'}
        draftName={characterDraftName}
        draftBackstory={characterDraftBackstory}
        onNameChange={value => {
          setCharacterDraftName(value);
          if (characterDraftError) setCharacterDraftError(null);
        }}
        onBackstoryChange={value => {
          setCharacterDraftBackstory(value);
          if (characterDraftError) setCharacterDraftError(null);
        }}
        onClose={() => setShowCharacterDraftModal(false)}
        onConfirm={saveCharacterDraft}
        error={characterDraftError}
      />
    </>
  );
}