import Phaser from 'phaser';
import { soundDirector } from '../audio/SoundDirector';
import { equipmentExpToNext, equipmentSlotLabels, equipmentSlots, getItem, type EquipmentSlot } from '../data/battleItems';
import { getUnitClass } from '../data/battleRules';
import { defaultBattleScenario, secondBattleScenario } from '../data/battles';
import { firstBattleBonds, firstBattleUnits, secondBattleIntroPages, type PortraitKey, type UnitData } from '../data/scenario';
import {
  applyCampBondExp,
  getCampaignState,
  getFirstBattleReport,
  markCampaignStep,
  saveCampaignState,
  type CampaignState,
  type FirstBattleReport
} from '../state/campaignState';
import { palette } from '../ui/palette';

type CampTab = 'status' | 'dialogue' | 'supplies';

type CampDialogue = {
  id: string;
  title: string;
  unitIds: [string, string];
  bondId: string;
  rewardExp: number;
  lines: string[];
};

type CampTabButtonView = {
  tab: CampTab;
  bg: Phaser.GameObjects.Rectangle;
  text: Phaser.GameObjects.Text;
};

type CampSupplyDefinition = {
  label: string;
  title: string;
  description: string;
  healHp: number;
  bondExp: number;
};

type SortieChecklistItem = {
  label: string;
  complete: boolean;
  detail: string;
};

const portraitKeys: Record<PortraitKey, string> = {
  liuBei: 'portrait-liu-bei',
  guanYu: 'portrait-guan-yu',
  zhangFei: 'portrait-zhang-fei'
};

const portraitByUnitId: Record<string, PortraitKey> = {
  'liu-bei': 'liuBei',
  'guan-yu': 'guanYu',
  'zhang-fei': 'zhangFei'
};

const campSupplies: CampSupplyDefinition[] = [
  {
    label: '콩',
    title: '콩',
    description: '선택 장수의 병력을 12 회복합니다.',
    healHp: 12,
    bondExp: 0
  },
  {
    label: '탁주',
    title: '탁주',
    description: '선택 장수의 병력을 8 회복하고 연결된 공명 경험치를 2 올립니다.',
    healHp: 8,
    bondExp: 2
  }
];

const campSupplyByLabel = new Map(campSupplies.map((supply) => [supply.label, supply]));

const campDialogues: CampDialogue[] = [
  {
    id: 'liu-guan-after-first-battle',
    title: '의리를 다지는 밤',
    unitIds: ['liu-bei', 'guan-yu'],
    bondId: 'liu-bei__guan-yu',
    rewardExp: 14,
    lines: [
      '유비: 운장, 오늘 그대가 앞을 막아 주지 않았다면 백성들을 지키지 못했을 것이오.',
      '관우: 형님의 뜻이 분명했기에 칼을 들 수 있었습니다. 다음 싸움에서도 길을 열겠습니다.',
      '유비: 우리의 맹세가 전장에서 더 단단해지는구려.'
    ]
  },
  {
    id: 'liu-zhang-after-first-battle',
    title: '거친 용기를 붙잡다',
    unitIds: ['liu-bei', 'zhang-fei'],
    bondId: 'liu-bei__zhang-fei',
    rewardExp: 14,
    lines: [
      '장비: 형님, 다음엔 제가 먼저 뛰쳐나가 두령 놈을 단번에 꺾겠습니다!',
      '유비: 익덕의 용맹은 든든하나, 백성이 뒤에 있음을 잊지 말아야 하오.',
      '장비: 하하! 형님 말이라면 참아 보겠습니다. 대신 싸울 때는 크게 치겠습니다.'
    ]
  },
  {
    id: 'guan-zhang-after-first-battle',
    title: '칼과 창의 약속',
    unitIds: ['guan-yu', 'zhang-fei'],
    bondId: 'guan-yu__zhang-fei',
    rewardExp: 12,
    lines: [
      '관우: 익덕, 적이 흩어질 때 너무 깊이 들어가면 형님이 걱정하신다.',
      '장비: 운장 형님이 옆을 받쳐 준다면 걱정할 일이 없지 않습니까?',
      '관우: 좋다. 다음 전장에서는 서로의 빈틈을 먼저 살피자.'
    ]
  }
];

export class CampScene extends Phaser.Scene {
  private campaign?: CampaignState;
  private report?: FirstBattleReport;
  private selectedUnitId = 'liu-bei';
  private activeTab: CampTab = 'status';
  private selectedDialogueId = campDialogues[0].id;
  private contentObjects: Phaser.GameObjects.GameObject[] = [];
  private dialogueObjects: Phaser.GameObjects.GameObject[] = [];
  private sortieObjects: Phaser.GameObjects.GameObject[] = [];
  private tabButtons: CampTabButtonView[] = [];
  private visitedTabs = new Set<CampTab>();

  constructor() {
    super('CampScene');
  }

  create() {
    this.contentObjects = [];
    this.dialogueObjects = [];
    this.sortieObjects = [];
    this.tabButtons = [];
    this.visitedTabs = new Set(['status']);
    this.campaign = getCampaignState();
    this.report = this.campaign.firstBattleReport ?? getFirstBattleReport() ?? this.createFallbackReport();
    this.selectedUnitId = this.currentUnits().find((unit) => unit.faction === 'ally')?.id ?? 'liu-bei';
    soundDirector.playMusic('militia-theme');

    const { width, height } = this.scale;
    this.add.image(width / 2, height / 2, 'story-militia').setDisplaySize(width * 1.08, height * 1.08).setAlpha(0.62);
    this.add.rectangle(0, 0, width, height, 0x06090d, 0.54).setOrigin(0);
    this.add.rectangle(0, 0, width, 84, 0x06090d, 0.52).setOrigin(0);

    this.add.text(42, 28, '탁현 의용군 군영', {
      fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
      fontSize: '30px',
      color: '#f2e3bf',
      fontStyle: '700',
      stroke: '#05070a',
      strokeThickness: 4
    });
    this.add.text(42, 64, this.reportSummary(), {
      fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
      fontSize: '14px',
      color: '#d4dce6'
    });

    this.renderStaticButtons();
    this.render();
  }

  private createFallbackReport(): FirstBattleReport {
    const allies = firstBattleUnits.filter((unit) => unit.faction === 'ally');
    return {
      battleId: defaultBattleScenario.id,
      battleTitle: defaultBattleScenario.title,
      outcome: 'victory',
      turnNumber: 1,
      rewardGold: 300,
      defeatedEnemies: 0,
      totalEnemies: firstBattleUnits.filter((unit) => unit.faction === 'enemy').length,
      objectives: [],
      units: allies.map((unit) => JSON.parse(JSON.stringify(unit)) as UnitData),
      bonds: firstBattleBonds.map((bond) => ({ ...bond, battleExp: 0 })),
      itemRewards: [],
      completedCampDialogues: [],
      createdAt: new Date().toISOString()
    };
  }

  private reportSummary() {
    if (!this.report) {
      return '';
    }

    const achieved = this.report.objectives.filter((objective) => objective.achieved).length;
    const gold = this.campaign?.gold ?? this.report.rewardGold;
    return `첫 전투 ${this.report.turnNumber}턴 승리 · 군자금 ${gold} · 목표 ${achieved}/${this.report.objectives.length} · 격파 ${this.report.defeatedEnemies}/${this.report.totalEnemies}`;
  }

  private renderStaticButtons() {
    this.addTabButton('장수', 'status', 742, 38);
    this.addTabButton('대화', 'dialogue', 830, 38);
    this.addTabButton('정비', 'supplies', 918, 38);
    this.addCommandButton('저장', 1002, 38, 76, () => {
      soundDirector.playSelect();
      this.campaign = saveCampaignState(getCampaignState());
      this.showCampNotice(`슬롯 ${this.campaign.activeSaveSlot}에 군영 진행을 저장했습니다.`);
      this.render();
    });
    this.addCommandButton('다음 이야기', 1120, 38, 142, () => {
      soundDirector.playSelect();
      this.showSortiePrep();
    });
  }

  private addTabButton(label: string, tab: CampTab, x: number, y: number) {
    const bg = this.add.rectangle(x, y, 76, 34, 0x182431, 0.94);
    bg.setStrokeStyle(1, palette.blue, 0.62);
    bg.setInteractive({ useHandCursor: true });
    bg.on('pointerdown', () => {
      soundDirector.playSelect();
      this.activeTab = tab;
      this.render();
    });

    const text = this.add.text(x, y, label, {
      fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
      fontSize: '16px',
      color: '#f2e3bf',
      fontStyle: '700'
    });
    text.setOrigin(0.5);
    text.setInteractive({ useHandCursor: true });
    text.on('pointerdown', () => {
      soundDirector.playSelect();
      this.activeTab = tab;
      this.render();
    });
    this.tabButtons.push({ tab, bg, text });
    this.updateTabButtons();
  }

  private updateTabButtons() {
    this.tabButtons.forEach(({ tab, bg, text }) => {
      const active = this.activeTab === tab;
      bg.setFillStyle(active ? 0x25384a : 0x182431, active ? 0.98 : 0.94);
      bg.setStrokeStyle(1, active ? palette.gold : palette.blue, active ? 0.86 : 0.62);
      text.setColor(active ? '#fff2b8' : '#f2e3bf');
    });
  }

  private addCommandButton(label: string, x: number, y: number, width: number, action: () => void) {
    const bg = this.add.rectangle(x, y, width, 36, 0x1a2630, 0.96);
    bg.setStrokeStyle(1, palette.gold, 0.8);
    bg.setInteractive({ useHandCursor: true });
    bg.on('pointerover', () => bg.setFillStyle(0x283947, 0.98));
    bg.on('pointerout', () => bg.setFillStyle(0x1a2630, 0.96));
    bg.on('pointerdown', action);

    const text = this.add.text(x, y, label, {
      fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
      fontSize: '16px',
      color: '#f2e3bf',
      fontStyle: '700'
    });
    text.setOrigin(0.5);
    text.setInteractive({ useHandCursor: true });
    text.on('pointerdown', action);
  }

  private render() {
    this.clearContent();
    this.visitedTabs.add(this.activeTab);
    this.updateTabButtons();
    this.renderUnitColumn();
    this.renderReportPanel();

    if (this.activeTab === 'dialogue') {
      this.renderDialoguePanel();
      return;
    }

    if (this.activeTab === 'supplies') {
      this.renderSuppliesPanel();
      return;
    }

    this.renderStatusPanel();
  }

  private showSortiePrep() {
    this.hideSortiePrep();
    this.campaign = getCampaignState();
    this.report = this.campaign.firstBattleReport ?? this.report;

    const depth = 40;
    const width = 900;
    const height = 560;
    const x = Math.floor((this.scale.width - width) / 2);
    const y = Math.floor((this.scale.height - height) / 2);

    const shade = this.trackSortie(this.add.rectangle(0, 0, this.scale.width, this.scale.height, 0x020406, 0.68));
    shade.setOrigin(0);
    shade.setDepth(depth);
    shade.setInteractive();

    const panel = this.trackSortie(this.add.rectangle(x, y, width, height, 0x101820, 0.98));
    panel.setOrigin(0);
    panel.setDepth(depth + 1);
    panel.setStrokeStyle(3, palette.gold, 0.92);

    const title = this.trackSortie(this.add.text(x + 34, y + 28, '출진 준비', this.textStyle(30, '#f2e3bf', true)));
    title.setDepth(depth + 2);
    const subtitle = this.trackSortie(
      this.add.text(x + 34, y + 70, '다음 전장으로 향하기 전 부대 상태와 준비 항목을 확인합니다.', this.textStyle(15, '#d4dce6'))
    );
    subtitle.setDepth(depth + 2);

    this.renderSortieBriefing(x + 34, y + 112, 396, 152, depth + 2);
    this.renderSortieChecklist(x + 462, y + 112, 404, 170, depth + 2);
    this.renderSortieUnitSummary(x + 34, y + 292, 832, 148, depth + 2);
    this.renderSortieRewardHint(x + 34, y + 462, 548, 52, depth + 2);

    this.addSortieButton('군영으로', x + width - 298, y + height - 44, 124, () => {
      soundDirector.playSelect();
      this.hideSortiePrep();
    }, depth + 3);
    this.addSortieButton('출진', x + width - 152, y + height - 44, 124, () => {
      soundDirector.playSelect();
      this.startVictoryStory();
    }, depth + 3);
  }

  private renderSortieBriefing(x: number, y: number, width: number, height: number, depth: number) {
    const bg = this.trackSortie(this.add.rectangle(x, y, width, height, 0x0d141c, 0.92));
    bg.setOrigin(0);
    bg.setDepth(depth);
    bg.setStrokeStyle(1, palette.blue, 0.48);

    const briefing = this.nextSortieBriefing();
    this.trackSortie(this.add.text(x + 18, y + 14, briefing.eyebrow, this.textStyle(18, '#f2e3bf', true))).setDepth(depth + 1);
    this.trackSortie(this.add.text(x + 18, y + 48, briefing.title, this.textStyle(23, '#d8b15f', true))).setDepth(depth + 1);
    this.trackSortie(
      this.add.text(x + 18, y + 84, briefing.description, {
        ...this.textStyle(14, '#d4dce6'),
        wordWrap: { width: width - 36, useAdvancedWrap: true },
        lineSpacing: 4
      })
    ).setDepth(depth + 1);
  }

  private renderSortieChecklist(x: number, y: number, width: number, height: number, depth: number) {
    const bg = this.trackSortie(this.add.rectangle(x, y, width, height, 0x0d141c, 0.92));
    bg.setOrigin(0);
    bg.setDepth(depth);
    bg.setStrokeStyle(1, palette.gold, 0.5);
    this.trackSortie(this.add.text(x + 18, y + 14, '준비 체크', this.textStyle(18, '#f2e3bf', true))).setDepth(depth + 1);

    this.sortieChecklist().forEach((item, index) => {
      const rowY = y + 42 + index * 27;
      const color = item.complete ? '#a8ffd0' : '#ffdf7b';
      const status = item.complete ? '완료' : '주의';
      this.trackSortie(this.add.text(x + 18, rowY, status, this.textStyle(13, color, true))).setDepth(depth + 1);
      this.trackSortie(this.add.text(x + 70, rowY, item.label, this.textStyle(14, '#d4dce6', true))).setDepth(depth + 1);
      const detail = this.trackSortie(this.add.text(x + 190, rowY, item.detail, this.textStyle(12, item.complete ? '#9fb0bf' : '#d8b15f')));
      detail.setDepth(depth + 1);
    });
  }

  private renderSortieUnitSummary(x: number, y: number, width: number, height: number, depth: number) {
    const bg = this.trackSortie(this.add.rectangle(x, y, width, height, 0x0d141c, 0.92));
    bg.setOrigin(0);
    bg.setDepth(depth);
    bg.setStrokeStyle(1, palette.blue, 0.48);
    this.trackSortie(this.add.text(x + 18, y + 14, '출진 부대', this.textStyle(18, '#f2e3bf', true))).setDepth(depth + 1);

    this.currentUnits()
      .filter((unit) => unit.faction === 'ally')
      .forEach((unit, index) => {
        const rowY = y + 52 + index * 30;
        this.trackSortie(this.add.text(x + 18, rowY, `${unit.name}  Lv ${unit.level}`, this.textStyle(14, '#f2e3bf', true))).setDepth(depth + 1);
        this.trackSortie(this.add.text(x + 132, rowY, unit.className, this.textStyle(13, '#9fb0bf', true))).setDepth(depth + 1);
        this.trackSortie(this.add.text(x + 236, rowY, `병력 ${unit.hp}/${unit.maxHp}`, this.textStyle(13, '#d4dce6', true))).setDepth(depth + 1);
        this.drawSortieBar(x + 338, rowY + 6, 128, 7, unit.hp / unit.maxHp, palette.green, depth + 1);

        const equipment = equipmentSlots
          .map((slot) => {
            const state = unit.equipment[slot];
            return `${equipmentSlotLabels[slot]} Lv${state.level}`;
          })
          .join('  ');
        this.trackSortie(this.add.text(x + 496, rowY, equipment, this.textStyle(12, '#d4dce6'))).setDepth(depth + 1);
      });
  }

  private renderSortieRewardHint(x: number, y: number, width: number, height: number, depth: number) {
    const bg = this.trackSortie(this.add.rectangle(x, y, width, height, 0x151f2a, 0.9));
    bg.setOrigin(0);
    bg.setDepth(depth);
    bg.setStrokeStyle(1, palette.gold, 0.4);
    const completedDialogues = this.completedCampDialogues().length;
    const inventory = this.inventoryLabels().join(', ');
    const reward = this.campaign?.latestBattleId === secondBattleScenario.id ? '예상 보상: 다음 장 개방' : '예상 보상: 군자금, 소모품, 의용군 명성';
    this.trackSortie(this.add.text(x + 16, y + 10, reward, this.textStyle(13, '#f2e3bf', true))).setDepth(depth + 1);
    this.trackSortie(this.add.text(x + 16, y + 30, `현재 준비: 대화 ${completedDialogues}/${campDialogues.length} · 보유 ${inventory || '없음'}`, this.textStyle(12, '#d4dce6'))).setDepth(depth + 1);
  }

  private nextSortieBriefing() {
    if (this.campaign?.latestBattleId === secondBattleScenario.id) {
      return {
        eyebrow: '다음 이야기',
        title: '넓어지는 전장',
        description: '황건 잔당 추격을 마친 의용군은 탁현을 넘어 더 큰 난세의 흐름을 마주합니다. 다음 장으로 향하기 전 전투 결과를 정리합니다.'
      };
    }

    return {
      eyebrow: '다음 전장',
      title: secondBattleScenario.title,
      description: '탁현을 물러난 황건 잔당이 인근 마을을 위협하고 있습니다. 의용군은 첫 승리의 기세를 몰아 추격에 나섭니다.'
    };
  }

  private sortieChecklist(): SortieChecklistItem[] {
    const units = this.currentUnits().filter((unit) => unit.faction === 'ally');
    const liuBei = units.find((unit) => unit.id === 'liu-bei');
    const injured = units.filter((unit) => unit.hp < unit.maxHp);
    const supplyCount = campSupplies.reduce((total, supply) => total + this.inventoryAmount(supply.label), 0);
    const completedDialogues = this.completedCampDialogues().length;
    return [
      {
        label: '유비 생존',
        complete: Boolean(liuBei && liuBei.hp > 0),
        detail: liuBei ? `병력 ${liuBei.hp}/${liuBei.maxHp}` : '유비 없음'
      },
      {
        label: '부상 장수 확인',
        complete: injured.length === 0,
        detail: injured.length === 0 ? '전원 완전한 병력' : `${injured.map((unit) => unit.name).join(', ')} 회복 권장`
      },
      {
        label: '소모품 보유',
        complete: supplyCount > 0,
        detail: supplyCount > 0 ? `보유 ${supplyCount}` : '정비 탭에서 보급 확인'
      },
      {
        label: '공명 대화',
        complete: completedDialogues >= campDialogues.length,
        detail: `${completedDialogues}/${campDialogues.length} 완료`
      },
      {
        label: '장비 상태',
        complete: this.visitedTabs.has('status'),
        detail: this.visitedTabs.has('status') ? '장수 탭 확인됨' : '장수 탭 확인 권장'
      }
    ];
  }

  private addSortieButton(label: string, x: number, y: number, width: number, action: () => void, depth: number) {
    const bg = this.trackSortie(this.add.rectangle(x, y, width, 36, 0x1a2630, 0.96));
    bg.setDepth(depth);
    bg.setStrokeStyle(1, label === '출진' ? palette.gold : palette.blue, 0.78);
    bg.setInteractive({ useHandCursor: true });
    bg.on('pointerover', () => bg.setFillStyle(0x283947, 0.98));
    bg.on('pointerout', () => bg.setFillStyle(0x1a2630, 0.96));
    bg.on('pointerdown', action);

    const text = this.trackSortie(this.add.text(x, y, label, this.textStyle(15, '#f2e3bf', true)));
    text.setOrigin(0.5);
    text.setDepth(depth + 1);
    text.setInteractive({ useHandCursor: true });
    text.on('pointerdown', action);
  }

  private startVictoryStory() {
    if (this.campaign?.latestBattleId === secondBattleScenario.id) {
      this.scene.start('StoryScene', { pages: secondBattleScenario.victoryPages, nextScene: 'TitleScene' });
      return;
    }

    markCampaignStep('second-battle');
    this.scene.start('StoryScene', {
      pages: secondBattleIntroPages,
      nextScene: 'BattleScene',
      nextSceneData: { battleId: secondBattleScenario.id }
    });
  }

  private hideSortiePrep() {
    this.sortieObjects.forEach((object) => object.destroy());
    this.sortieObjects = [];
  }

  private trackSortie<T extends Phaser.GameObjects.GameObject>(object: T) {
    this.sortieObjects.push(object);
    return object;
  }

  private drawSortieBar(x: number, y: number, width: number, height: number, ratio: number, color: number, depth: number) {
    const track = this.trackSortie(this.add.rectangle(x, y, width, height, 0x070b10, 0.86));
    track.setOrigin(0);
    track.setDepth(depth);
    const fill = this.trackSortie(this.add.rectangle(x, y, Math.max(2, width * Phaser.Math.Clamp(ratio, 0, 1)), height, color, 0.96));
    fill.setOrigin(0);
    fill.setDepth(depth + 1);
  }

  private renderUnitColumn() {
    const allies = this.currentUnits().filter((unit) => unit.faction === 'ally');
    allies.forEach((unit, index) => {
      const x = 42;
      const y = 120 + index * 150;
      const active = this.selectedUnitId === unit.id;
      const bg = this.track(this.add.rectangle(x, y, 318, 126, active ? 0x25384a : 0x111922, active ? 0.96 : 0.86));
      bg.setOrigin(0);
      bg.setStrokeStyle(2, active ? palette.gold : palette.blue, active ? 0.9 : 0.46);
      bg.setInteractive({ useHandCursor: true });
      bg.on('pointerdown', () => {
        soundDirector.playSelect();
        this.selectedUnitId = unit.id;
        this.render();
      });

      const portraitKey = portraitByUnitId[unit.id];
      if (portraitKey) {
        const portrait = this.track(this.add.image(x + 58, y + 62, portraitKeys[portraitKey]));
        portrait.setDisplaySize(92, 92);
      }

      this.track(this.add.text(x + 116, y + 20, `${unit.name}  Lv ${unit.level}`, this.textStyle(21, '#f2e3bf', true)));
      this.track(this.add.text(x + 116, y + 51, `${unit.className} · HP ${unit.hp}/${unit.maxHp}`, this.textStyle(14, '#d4dce6')));
      this.track(this.add.text(x + 116, y + 78, `경험 ${unit.exp}/100`, this.textStyle(14, '#d8b15f', true)));
      this.drawBar(x + 116, y + 104, 176, 8, unit.exp / 100, palette.gold);
    });
  }

  private renderReportPanel() {
    const report = this.report;
    if (!report) {
      return;
    }

    const x = 42;
    const y = 590;
    const bg = this.track(this.add.rectangle(x, y, 1180, 84, 0x101820, 0.86));
    bg.setOrigin(0);
    bg.setStrokeStyle(1, palette.gold, 0.48);
    this.track(this.add.text(x + 18, y + 14, '전투 보고', this.textStyle(18, '#f2e3bf', true)));
    this.track(
      this.add.text(
        x + 18,
        y + 43,
        `MVP ${report.mvp?.name ?? '-'} · 보상 ${report.rewardGold} · 전리품 ${report.itemRewards.join(', ') || '없음'}`,
        this.textStyle(15, '#d4dce6')
      )
    );
  }

  private renderStatusPanel() {
    const unit = this.selectedUnit();
    if (!unit) {
      return;
    }

    const x = 394;
    const y = 120;
    const bg = this.track(this.add.rectangle(x, y, 828, 444, 0x101820, 0.9));
    bg.setOrigin(0);
    bg.setStrokeStyle(1, palette.blue, 0.56);

    const unitClass = getUnitClass(unit.classKey);
    const portraitKey = portraitByUnitId[unit.id];
    const portraitFrame = this.track(this.add.rectangle(x + 84, y + 90, 122, 122, 0x0b1219, 0.92));
    portraitFrame.setStrokeStyle(2, palette.gold, 0.62);
    if (portraitKey) {
      const portrait = this.track(this.add.image(x + 84, y + 90, portraitKeys[portraitKey]));
      portrait.setDisplaySize(112, 112);
    }

    this.track(this.add.text(x + 166, y + 22, `${unit.name}  Lv ${unit.level}`, this.textStyle(27, '#f2e3bf', true)));
    this.track(this.add.text(x + 166, y + 60, `${unit.className} · ${unitClass.family} · ${unitClass.role}`, this.textStyle(15, '#d8b15f', true)));
    this.track(
      this.add.text(x + 166, y + 91, unitClass.description, {
        ...this.textStyle(14, '#d4dce6'),
        wordWrap: { width: 324, useAdvancedWrap: true },
        lineSpacing: 2
      })
    );
    this.renderDetailGauge('병력', `${unit.hp}/${unit.maxHp}`, unit.hp / unit.maxHp, x + 166, y + 142, 300, palette.green);
    this.renderDetailGauge('경험', `${unit.exp}/100`, unit.exp / 100, x + 166, y + 168, 300, palette.gold);

    const statX = x + 524;
    const stats = [
      ['공격', unit.attack],
      ['이동', unit.move],
      ['무력', unit.stats.might],
      ['지력', unit.stats.intelligence],
      ['통솔', unit.stats.leadership],
      ['민첩', unit.stats.agility],
      ['운', unit.stats.luck]
    ] as const;
    stats.forEach(([label, value], index) => {
      this.renderStatCard(label, `${value}`, statX + (index % 2) * 128, y + 22 + Math.floor(index / 2) * 42, 116);
    });

    this.track(this.add.text(x + 24, y + 210, '장비', this.textStyle(20, '#f2e3bf', true)));
    equipmentSlots.forEach((slot, index) => {
      this.renderEquipmentCard(unit, slot, x + 24 + index * 260, y + 244, 244, 102);
    });

    this.renderSelectedUnitBondPanel(unit, x + 24, y + 362, 780);
  }

  private renderDialoguePanel() {
    const x = 394;
    const y = 120;
    const bg = this.track(this.add.rectangle(x, y, 828, 444, 0x101820, 0.9));
    bg.setOrigin(0);
    bg.setStrokeStyle(1, palette.gold, 0.58);
    this.track(this.add.text(x + 24, y + 22, '장수 대화', this.textStyle(24, '#f2e3bf', true)));
    this.track(this.add.text(x + 24, y + 56, '대화를 보면 해당 장수들의 공명 경험치가 오릅니다.', this.textStyle(14, '#d4dce6')));

    campDialogues.forEach((dialogue, index) => {
      const completed = this.completedCampDialogues().includes(dialogue.id);
      const rowY = y + 96 + index * 64;
      const selected = this.selectedDialogueId === dialogue.id;
      const row = this.track(this.add.rectangle(x + 24, rowY, 320, 48, selected ? 0x25384a : 0x151f2a, selected ? 0.96 : 0.86));
      row.setOrigin(0);
      row.setStrokeStyle(1, completed ? palette.green : selected ? palette.gold : palette.blue, selected ? 0.72 : 0.46);
      row.setInteractive({ useHandCursor: true });
      row.on('pointerdown', () => {
        soundDirector.playSelect();
        this.selectedDialogueId = dialogue.id;
        this.render();
      });
      this.track(this.add.text(x + 38, rowY + 8, dialogue.title, this.textStyle(15, completed ? '#a8ffd0' : '#f2e3bf', true)));
      this.track(this.add.text(x + 38, rowY + 29, `${this.unitName(dialogue.unitIds[0])} · ${this.unitName(dialogue.unitIds[1])}  공명 +${dialogue.rewardExp}`, this.textStyle(12, '#9fb0bf')));
    });

    this.renderSelectedDialogue(x + 372, y + 96, 416, 300);
    this.renderBondList(x + 24, y + 308, 320);
  }

  private renderSelectedDialogue(x: number, y: number, width: number, height: number) {
    const dialogue = campDialogues.find((candidate) => candidate.id === this.selectedDialogueId) ?? campDialogues[0];
    const completed = this.completedCampDialogues().includes(dialogue.id);
    const bg = this.track(this.add.rectangle(x, y, width, height, 0x0d141c, 0.92));
    bg.setOrigin(0);
    bg.setStrokeStyle(1, completed ? palette.green : palette.gold, 0.5);
    this.track(this.add.text(x + 18, y + 16, dialogue.title, this.textStyle(20, '#f2e3bf', true)));
    this.track(
      this.add.text(x + 18, y + 52, dialogue.lines.join('\n\n'), {
        ...this.textStyle(15, '#d4dce6'),
        wordWrap: { width: width - 36, useAdvancedWrap: true },
        lineSpacing: 5
      })
    );

    const buttonLabel = completed ? '대화 완료' : `대화 보기  공명 +${dialogue.rewardExp}`;
    const button = this.track(this.add.rectangle(x + width / 2, y + height - 34, 220, 34, completed ? 0x17231d : 0x1a2630, 0.96));
    button.setStrokeStyle(1, completed ? palette.green : palette.gold, 0.76);
    if (!completed) {
      button.setInteractive({ useHandCursor: true });
      button.on('pointerdown', () => this.completeDialogue(dialogue));
    }
    const text = this.track(this.add.text(x + width / 2, y + height - 34, buttonLabel, this.textStyle(15, completed ? '#a8ffd0' : '#f2e3bf', true)));
    text.setOrigin(0.5);
    if (!completed) {
      text.setInteractive({ useHandCursor: true });
      text.on('pointerdown', () => this.completeDialogue(dialogue));
    }
  }

  private renderBondList(x: number, y: number, width: number) {
    this.track(this.add.text(x, y, '공명', this.textStyle(18, '#f2e3bf', true)));
    this.currentBonds().forEach((bond, index) => {
      const rowY = y + 32 + index * 36;
      const first = this.unitName(bond.unitIds[0]);
      const second = this.unitName(bond.unitIds[1]);
      this.track(this.add.text(x, rowY, `${first}·${second} Lv ${bond.level}`, this.textStyle(13, '#d4dce6')));
      this.drawBar(x + 136, rowY + 6, width - 136, 7, bond.exp / 100, bond.battleExp > 0 ? palette.gold : palette.blue);
    });
  }

  private renderSuppliesPanel() {
    const x = 394;
    const y = 120;
    const bg = this.track(this.add.rectangle(x, y, 828, 444, 0x101820, 0.9));
    bg.setOrigin(0);
    bg.setStrokeStyle(1, palette.blue, 0.56);
    this.track(this.add.text(x + 24, y + 22, '정비와 보급', this.textStyle(24, '#f2e3bf', true)));
    this.track(this.add.text(x + 24, y + 58, '소모품은 왼쪽에서 선택한 장수에게 사용됩니다.', this.textStyle(14, '#d4dce6')));

    const unit = this.selectedUnit();
    if (unit) {
      this.renderSupplyTargetCard(unit, x + 24, y + 94, 342, 86);
    }

    campSupplies.forEach((supply, index) => {
      this.renderSupplyUseRow(supply, x + 390, y + 94 + index * 74, 390);
    });

    this.track(this.add.text(x + 24, y + 202, '전리품과 명성', this.textStyle(19, '#f2e3bf', true)));
    const trophies = this.nonConsumableInventoryLabels();
    if (trophies.length === 0) {
      this.track(this.add.text(x + 24, y + 236, '소모품 외 전리품 없음', this.textStyle(13, '#9fb0bf')));
    } else {
      trophies.forEach((reward, index) => {
        this.renderSupplyBox(reward, x + 24 + index * 154, y + 232);
      });
    }

    this.track(this.add.text(x + 24, y + 306, '부대 장비 요약', this.textStyle(19, '#f2e3bf', true)));
    this.currentUnits()
      .filter((unit) => unit.faction === 'ally')
      .forEach((unit, index) => {
        const rowY = y + 342 + index * 30;
        this.track(this.add.text(x + 24, rowY, unit.name, this.textStyle(14, '#f2e3bf', true)));
        equipmentSlots.forEach((slot, slotIndex) => {
          const state = unit.equipment[slot];
          const item = getItem(state.itemId);
          const slotX = x + 104 + slotIndex * 220;
          this.track(this.add.text(slotX, rowY - 2, `${equipmentSlotLabels[slot]} ${item.name} Lv${state.level}`, this.textStyle(11, '#d4dce6')));
          this.drawBar(slotX, rowY + 17, 176, 6, state.exp / equipmentExpToNext(state.level), item.rank === 'treasure' ? palette.gold : palette.blue);
        });
      });
  }

  private renderSupplyBox(label: string, x: number, y: number) {
    const bg = this.track(this.add.rectangle(x, y, 138, 50, 0x151f2a, 0.9));
    bg.setOrigin(0);
    bg.setStrokeStyle(1, palette.gold, 0.52);
    this.track(this.add.text(x + 14, y + 15, label, this.textStyle(16, '#f2e3bf', true)));
  }

  private renderSupplyTargetCard(unit: UnitData, x: number, y: number, width: number, height: number) {
    const bg = this.track(this.add.rectangle(x, y, width, height, 0x0d141c, 0.92));
    bg.setOrigin(0);
    bg.setStrokeStyle(1, palette.gold, 0.48);
    this.track(this.add.text(x + 16, y + 12, '사용 대상', this.textStyle(15, '#f2e3bf', true)));
    this.track(this.add.text(x + 16, y + 38, `${unit.name}  ${unit.className}  Lv ${unit.level}`, this.textStyle(16, '#d4dce6', true)));
    this.track(this.add.text(x + 16, y + 62, `병력 ${unit.hp}/${unit.maxHp}`, this.textStyle(13, '#9fb0bf', true)));
    this.drawBar(x + 118, y + 68, width - 138, 8, unit.hp / unit.maxHp, palette.green);
  }

  private renderSupplyUseRow(supply: CampSupplyDefinition, x: number, y: number, width: number) {
    const unit = this.selectedUnit();
    const amount = this.inventoryAmount(supply.label);
    const enabled = Boolean(unit && this.canUseSupply(supply, unit));
    const bg = this.track(this.add.rectangle(x, y, width, 62, enabled ? 0x151f2a : 0x111820, enabled ? 0.92 : 0.76));
    bg.setOrigin(0);
    bg.setStrokeStyle(1, enabled ? palette.gold : 0x53606c, enabled ? 0.62 : 0.38);

    this.track(this.add.text(x + 14, y + 10, `${supply.title}  x${amount}`, this.textStyle(16, amount > 0 ? '#f2e3bf' : '#7f8994', true)));
    this.track(
      this.add.text(x + 14, y + 34, supply.description, {
        ...this.textStyle(12, enabled ? '#c8d2dd' : '#77818c'),
        wordWrap: { width: width - 128, useAdvancedWrap: true }
      })
    );

    const button = this.track(this.add.rectangle(x + width - 54, y + 31, 82, 30, enabled ? 0x1a2630 : 0x121922, enabled ? 0.96 : 0.72));
    button.setStrokeStyle(1, enabled ? palette.gold : 0x53606c, enabled ? 0.76 : 0.42);
    const buttonText = this.track(this.add.text(x + width - 54, y + 31, enabled ? '사용' : '불가', this.textStyle(13, enabled ? '#f2e3bf' : '#7f8994', true)));
    buttonText.setOrigin(0.5);

    if (enabled) {
      const action = () => this.useSupply(supply);
      button.setInteractive({ useHandCursor: true });
      button.on('pointerover', () => button.setFillStyle(0x283947, 0.98));
      button.on('pointerout', () => button.setFillStyle(0x1a2630, 0.96));
      button.on('pointerdown', action);
      buttonText.setInteractive({ useHandCursor: true });
      buttonText.on('pointerdown', action);
    }
  }

  private canUseSupply(supply: CampSupplyDefinition, unit: UnitData) {
    if (this.inventoryAmount(supply.label) <= 0) {
      return false;
    }
    if (supply.healHp > 0 && unit.hp < unit.maxHp) {
      return true;
    }
    return supply.bondExp > 0 && this.currentBonds().some((bond) => bond.unitIds.includes(unit.id));
  }

  private useSupply(supply: CampSupplyDefinition) {
    const campaign = this.campaign ?? getCampaignState();
    const target = campaign.roster.find((unit) => unit.id === this.selectedUnitId);
    if (!target) {
      this.showCampNotice('사용할 장수를 선택하세요.');
      return;
    }

    if ((campaign.inventory[supply.label] ?? 0) <= 0) {
      this.showCampNotice(`${supply.title}이 없습니다.`);
      return;
    }

    const previousHp = target.hp;
    target.hp = Math.min(target.maxHp, target.hp + supply.healHp);
    const hpGain = target.hp - previousHp;
    const bondGain = this.applySupplyBondExp(campaign, target.id, supply.bondExp);

    if (hpGain <= 0 && bondGain <= 0) {
      this.showCampNotice(`${target.name}에게 지금은 사용할 필요가 없습니다.`);
      return;
    }

    campaign.inventory[supply.label] -= 1;
    if (campaign.inventory[supply.label] <= 0) {
      delete campaign.inventory[supply.label];
    }
    this.syncReportUnitHp(campaign, target.id, target.hp);

    this.campaign = saveCampaignState(campaign);
    this.report = this.campaign.firstBattleReport ?? this.report;
    soundDirector.playEffect('exp-gain', { volume: 0.24, stopAfterMs: 620 });

    const hpText = hpGain > 0 ? `병력 +${hpGain}` : '';
    const bondText = bondGain > 0 ? `공명 +${supply.bondExp}` : '';
    this.showCampNotice(`${target.name} ${supply.title} 사용 · ${[hpText, bondText].filter(Boolean).join(' / ')}`);
    this.render();
  }

  private applySupplyBondExp(campaign: CampaignState, unitId: string, amount: number) {
    if (amount <= 0) {
      return 0;
    }

    let affected = 0;
    campaign.bonds
      .filter((bond) => bond.unitIds.includes(unitId))
      .forEach((bond) => {
        this.advanceCampBond(bond, amount);
        affected += 1;
        const reportBond = campaign.firstBattleReport?.bonds.find((candidate) => candidate.id === bond.id);
        if (reportBond) {
          reportBond.level = bond.level;
          reportBond.exp = bond.exp;
          reportBond.battleExp = bond.battleExp;
        }
      });

    return affected * amount;
  }

  private advanceCampBond(bond: CampaignState['bonds'][number], amount: number) {
    bond.battleExp += amount;
    bond.exp += amount;
    while (bond.exp >= 100) {
      bond.exp -= 100;
      bond.level = Math.min(100, bond.level + 1);
    }
  }

  private syncReportUnitHp(campaign: CampaignState, unitId: string, hp: number) {
    const reportUnit = campaign.firstBattleReport?.units.find((unit) => unit.id === unitId);
    if (reportUnit) {
      reportUnit.hp = hp;
    }
  }

  private renderDetailGauge(label: string, value: string, ratio: number, x: number, y: number, width: number, color: number) {
    this.track(this.add.text(x, y - 2, label, this.textStyle(13, '#9fb0bf', true)));
    this.drawBar(x + 54, y + 6, width - 134, 8, ratio, color);
    const valueText = this.track(this.add.text(x + width, y - 3, value, this.textStyle(13, '#f2e3bf', true)));
    valueText.setOrigin(1, 0);
  }

  private renderStatCard(label: string, value: string, x: number, y: number, width: number) {
    const bg = this.track(this.add.rectangle(x, y, width, 34, 0x151f2a, 0.82));
    bg.setOrigin(0);
    bg.setStrokeStyle(1, 0x53606c, 0.38);
    this.track(this.add.text(x + 10, y + 8, label, this.textStyle(12, '#9fb0bf', true)));
    const valueText = this.track(this.add.text(x + width - 10, y + 5, value, this.textStyle(17, '#f2e3bf', true)));
    valueText.setOrigin(1, 0);
  }

  private renderEquipmentCard(unit: UnitData, slot: EquipmentSlot, x: number, y: number, width: number, height: number) {
    const state = unit.equipment[slot];
    const item = getItem(state.itemId);
    const next = equipmentExpToNext(state.level);
    const isTreasure = item.rank === 'treasure';
    const bg = this.track(this.add.rectangle(x, y, width, height, isTreasure ? 0x1f2430 : 0x151f2a, 0.92));
    bg.setOrigin(0);
    bg.setStrokeStyle(1, isTreasure ? palette.gold : palette.blue, isTreasure ? 0.68 : 0.42);

    const iconFrame = this.track(this.add.rectangle(x + 28, y + 29, 42, 42, 0x0a1017, 0.92));
    iconFrame.setStrokeStyle(1, isTreasure ? palette.gold : 0x53606c, isTreasure ? 0.72 : 0.48);
    const icon = this.track(this.add.image(x + 28, y + 29, `item-${item.id}`));
    icon.setDisplaySize(30, 30);

    this.track(this.add.text(x + 58, y + 12, `${equipmentSlotLabels[slot]} · ${item.name}`, this.textStyle(14, isTreasure ? '#f4dfad' : '#d4dce6', true)));
    this.track(this.add.text(x + 58, y + 34, `${isTreasure ? '보물' : '일반'}  Lv ${state.level}`, this.textStyle(12, isTreasure ? '#d8b15f' : '#9fb0bf', true)));
    const valueText = this.track(this.add.text(x + width - 12, y + 34, `${state.exp}/${next}`, this.textStyle(12, '#f0e4c8', true)));
    valueText.setOrigin(1, 0);
    this.drawBar(x + 58, y + 57, width - 74, 7, state.exp / next, isTreasure ? palette.gold : palette.blue);

    this.track(
      this.add.text(x + 14, y + 72, `${this.itemBonusText(item)} · ${item.effects[0] ?? item.description}`, {
        ...this.textStyle(11, '#c8d2dd'),
        wordWrap: { width: width - 28, useAdvancedWrap: true }
      })
    );
  }

  private renderSelectedUnitBondPanel(unit: UnitData, x: number, y: number, width: number) {
    const bonds = this.currentBonds().filter((bond) => bond.unitIds.includes(unit.id));
    const bg = this.track(this.add.rectangle(x, y, width, 62, 0x0d141c, 0.9));
    bg.setOrigin(0);
    bg.setStrokeStyle(1, palette.gold, 0.42);
    this.track(this.add.text(x + 14, y + 9, '공명 관계', this.textStyle(16, '#f2e3bf', true)));

    if (bonds.length === 0) {
      this.track(this.add.text(x + 120, y + 22, '아직 연결된 공명 관계가 없습니다.', this.textStyle(13, '#9fb0bf')));
      return;
    }

    bonds.forEach((bond, index) => {
      const cardX = x + 116 + index * 322;
      const partnerId = bond.unitIds.find((unitId) => unitId !== unit.id) ?? bond.unitIds[0];
      const partnerName = this.unitName(partnerId);
      this.track(this.add.text(cardX, y + 10, `${partnerName} · ${bond.title}`, this.textStyle(13, '#d4dce6', true)));
      this.track(this.add.text(cardX, y + 32, `Lv ${bond.level}  ${bond.exp}/100  전투 +${bond.battleExp}`, this.textStyle(12, bond.battleExp > 0 ? '#d8b15f' : '#9fb0bf', true)));
      this.drawBar(cardX + 176, y + 38, 120, 7, bond.exp / 100, bond.battleExp > 0 ? palette.gold : palette.blue);
    });
  }

  private itemBonusText(item: ReturnType<typeof getItem>) {
    const bonuses = [
      item.attackBonus ? `공격 +${item.attackBonus}` : '',
      item.defenseBonus ? `방어 +${item.defenseBonus}` : '',
      item.strategyBonus ? `책략 +${item.strategyBonus}` : ''
    ].filter(Boolean);
    return bonuses.join(' / ') || '특수 보정 없음';
  }

  private completeDialogue(dialogue: CampDialogue) {
    const updated = applyCampBondExp(dialogue.id, dialogue.bondId, dialogue.rewardExp);
    if (updated) {
      this.report = updated;
      this.campaign = getCampaignState();
    } else if (this.report && !this.report.completedCampDialogues.includes(dialogue.id)) {
      this.report.completedCampDialogues.push(dialogue.id);
      const bond = this.report.bonds.find((candidate) => candidate.id === dialogue.bondId);
      if (bond) {
        bond.battleExp += dialogue.rewardExp;
        bond.exp += dialogue.rewardExp;
      }
    }

    soundDirector.playEffect('exp-gain', { volume: 0.28, stopAfterMs: 700 });
    this.showDialogueReward(dialogue);
    this.render();
  }

  private showDialogueReward(dialogue: CampDialogue) {
    this.showCampNotice(`${dialogue.title} 완료 · 공명 +${dialogue.rewardExp}`);
  }

  private showCampNotice(message: string) {
    this.dialogueObjects.forEach((object) => object.destroy());
    this.dialogueObjects = [];
    const box = this.add.rectangle(this.scale.width / 2, 104, 440, 52, 0x101820, 0.96);
    box.setStrokeStyle(2, palette.gold, 0.84);
    box.setDepth(30);
    const text = this.add.text(this.scale.width / 2, 104, message, this.textStyle(17, '#f2e3bf', true));
    text.setOrigin(0.5);
    text.setDepth(31);
    this.dialogueObjects.push(box, text);
    this.tweens.add({
      targets: this.dialogueObjects,
      alpha: 0,
      delay: 1300,
      duration: 320,
      onComplete: () => {
        this.dialogueObjects.forEach((object) => object.destroy());
        this.dialogueObjects = [];
      }
    });
  }

  private selectedUnit() {
    return this.currentUnits().find((unit) => unit.id === this.selectedUnitId);
  }

  private unitName(unitId: string) {
    return this.currentUnits().find((unit) => unit.id === unitId)?.name ?? unitId;
  }

  private currentUnits() {
    if (this.campaign?.roster.length) {
      return this.campaign.roster;
    }
    return this.report?.units ?? [];
  }

  private currentBonds() {
    if (this.campaign?.bonds.length) {
      return this.campaign.bonds;
    }
    return this.report?.bonds ?? [];
  }

  private completedCampDialogues() {
    if (this.campaign) {
      return this.campaign.completedCampDialogues;
    }
    return this.report?.completedCampDialogues ?? [];
  }

  private inventoryLabels() {
    const inventory = this.campaign?.inventory ?? {};
    const entries = Object.entries(inventory).filter(([, amount]) => amount > 0);
    if (entries.length > 0) {
      return entries.map(([label, amount]) => `${label} ${amount}`);
    }
    return this.report?.itemRewards.length ? this.report.itemRewards : ['콩 1', '탁주 1'];
  }

  private nonConsumableInventoryLabels() {
    const entries = Object.entries(this.campaign?.inventory ?? {}).filter(([label, amount]) => {
      return amount > 0 && !campSupplyByLabel.has(label);
    });
    if (entries.length > 0) {
      return entries.map(([label, amount]) => `${label} ${amount}`);
    }
    return this.inventoryLabels().filter((label) => {
      const normalized = label.replace(/\s+\d+$/, '').trim();
      return !campSupplyByLabel.has(normalized);
    });
  }

  private inventoryAmount(label: string) {
    return this.campaign?.inventory[label] ?? 0;
  }

  private drawBar(x: number, y: number, width: number, height: number, ratio: number, color: number) {
    const track = this.track(this.add.rectangle(x, y, width, height, 0x070b10, 0.86));
    track.setOrigin(0);
    const fill = this.track(this.add.rectangle(x, y, Math.max(2, width * Phaser.Math.Clamp(ratio, 0, 1)), height, color, 0.96));
    fill.setOrigin(0);
  }

  private textStyle(fontSize: number, color: string, bold = false): Phaser.Types.GameObjects.Text.TextStyle {
    return {
      fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
      fontSize: `${fontSize}px`,
      color,
      fontStyle: bold ? '700' : '400'
    };
  }

  private track<T extends Phaser.GameObjects.GameObject>(object: T) {
    this.contentObjects.push(object);
    return object;
  }

  private clearContent() {
    this.contentObjects.forEach((object) => object.destroy());
    this.contentObjects = [];
  }

  getDebugState() {
    return {
      scene: this.scene.key,
      activeTab: this.activeTab,
      sortieVisible: this.sortieObjects.length > 0,
      selectedUnitId: this.selectedUnitId,
      selectedDialogueId: this.selectedDialogueId,
      campaign: this.campaign
        ? {
          step: this.campaign.step,
          gold: this.campaign.gold,
          inventory: this.campaign.inventory,
          roster: this.campaign.roster.map((unit) => ({
            id: unit.id,
            name: unit.name,
            hp: unit.hp,
            maxHp: unit.maxHp
          })),
          completedCampDialogues: this.campaign.completedCampDialogues
        }
        : null,
      report: this.report
        ? {
            rewardGold: this.report.rewardGold,
            objectives: this.report.objectives,
            completedCampDialogues: this.report.completedCampDialogues,
            bonds: this.report.bonds.map((bond) => ({ id: bond.id, level: bond.level, exp: bond.exp, battleExp: bond.battleExp }))
          }
        : null
    };
  }
}