import { Divider, Grid, H1, H2, H3, Stack, Stat, Table, Text, Tag, Callout, Row, Pill } from 'qoder/canvas';

export default function GameUIPlanningReport() {
  return (
    <Stack gap={20}>
      <H1>Game UI Planning - Completion Report</H1>
      <Text tone="secondary">Unity 2.5D Game - 4 Interface Screens Implementation</Text>

      <Divider />

      <Grid columns={4} gap={12}>
        <Stat value="4" label="Files Modified/Created" />
        <Stat value="4" label="UI Screens" tone="success" />
        <Stat value="3" label="Scenes" />
        <Stat value="0" label="Remaining Code Tasks" tone="success" />
      </Grid>

      <Divider />

      <H2>Scene Flow</H2>
      <Stack gap={8}>
        <Row gap={8}>
          <Pill tone="info">MainMenu</Pill>
          <Text tone="secondary">--Start--&gt;</Text>
          <Pill tone="info">Gameplay</Pill>
        </Row>
        <Stack gap={4}>
          <Text tone="secondary" size="small">From Gameplay:</Text>
          <Row gap={8}>
            <Text size="small">[Player Death] -&gt;</Text>
            <Pill tone="danger">GameOver UI</Pill>
          </Row>
          <Row gap={8}>
            <Text size="small">[Win Trigger] -&gt;</Text>
            <Pill tone="success">Victory UI</Pill>
          </Row>
        </Stack>
        <Row gap={8}>
          <Text tone="secondary">--Confirm--&gt;</Text>
          <Pill tone="info">Scoring</Pill>
          <Text tone="secondary">--Back to Menu--&gt;</Text>
          <Pill tone="info">MainMenu</Pill>
        </Row>
      </Stack>

      <Divider />

      <H2>Implementation Summary</H2>

      <Table
        headers={['Task', 'File', 'Action', 'Status']}
        rows={[
          ['GameManager Extension', 'Assets/UI/GameManager.cs', 'Modified', 'Done'],
          ['Game HUD', 'Assets/UI/GameHUD.cs', 'Created', 'Done'],
          ['Game Result Screen', 'Assets/UI/GameResultScreen.cs', 'Created', 'Done'],
          ['Main Menu Enhancement', 'Assets/UI/MainMenuUIController.cs', 'Modified', 'Done'],
        ]}
        rowTone={['success', 'success', 'success', 'success']}
      />

      <Divider />

      <H2>Key Features</H2>

      <Stack gap={12}>
        <H3>1. GameManager Extension</H3>
        <Stack gap={4}>
          <Text size="small">- Added Victory state to GameState enum</Text>
          <Text size="small">- Added onGameWin static event</Text>
          <Text size="small">- Added Win() static method</Text>
        </Stack>

        <H3>2. Game HUD (GameHUD.cs)</H3>
        <Stack gap={4}>
          <Text size="small">- Health bar (Slider + Text) from HealthSystem</Text>
          <Text size="small">- Spirit lantern count + cooldown from SpiritLanternSystem</Text>
          <Text size="small">- Score display subscribing to ScoreManager events</Text>
          <Text size="small">- Pause button calling TimeController.Pause()</Text>
          <Text size="small">- Proper event unsubscription in OnDestroy</Text>
        </Stack>

        <H3>3. Game Result Screen (GameResultScreen.cs)</H3>
        <Stack gap={4}>
          <Text size="small">- GameResult enum (Win/Lose)</Text>
          <Text size="small">- Dual-panel support (winPanel / losePanel)</Text>
          <Text size="small">- Named method event handlers (no lambda leak)</Text>
          <Text size="small">- Score display, SFX playback, pause, navigation</Text>
        </Stack>

        <H3>4. Main Menu Enhancement</H3>
        <Stack gap={4}>
          <Text size="small">- Added titleText field for game title</Text>
          <Text size="small">- Existing button logic preserved</Text>
        </Stack>
      </Stack>

      <Divider />

      <H2>Visual Layer Hierarchy</H2>
      <Table
        headers={['Layer', 'sortingOrder', 'Description']}
        rows={[
          ['Game World', '-', 'Sprites, enemies, lanterns'],
          ['LightMaskSystem', '9999', 'Darkness overlay'],
          ['EchoOutline', '10000', 'Echo outline effects'],
          ['HUD Canvas', '10001', 'In-game HUD (NEW)'],
          ['Result Screen', '10002', 'Win/Lose screen (NEW)'],
          ['PauseMenu', '-', 'Existing pause menu'],
        ]}
      />

      <Divider />

      <Callout tone="info">
        <Text size="small">
          <strong>Remaining Editor Work:</strong> Build HUD Canvas in Gameplay scene,
          build Result Screen Canvas, wire up UI references in Inspector,
          add game title text to MainMenu scene.
        </Text>
      </Callout>

      <Text tone="secondary" size="small">
        All code-level tasks completed. Remaining work requires Unity Editor UI operations.
      </Text>
    </Stack>
  );
}