/**
 * Template List Screen - Lists available templates and starting actions.
 * 
 * Allows users to:
 * - View imported templates
 * - Select a template and action to start a new transaction
 */

import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { Box, Text, useInput } from 'ink';
import { ScrollableList, type ListItemData } from '../components/List.js';
import { useNavigation } from '../hooks/useNavigation.js';
import { useAppContext, useStatus } from '../hooks/useAppContext.js';
import { colors, logoSmall } from '../theme.js';

// XO Imports
import { generateTemplateIdentifier } from '@xo-cash/engine';
import type { XOTemplate } from '@xo-cash/types';

// Import utility functions
import {
  formatTemplateListItem,
  formatActionListItem,
  deduplicateStartingActions,
  getTemplateRoles,
  getRolesForAction,
  type UniqueStartingAction,
} from '../../utils/template-utils.js';

/**
 * Template item with metadata.
 */
interface TemplateItem {
  template: XOTemplate;
  templateIdentifier: string;
  startingActions: UniqueStartingAction[];
}

/**
 * Template list item with TemplateItem value.
 */
type TemplateListItem = ListItemData<TemplateItem>;

/**
 * Action list item with UniqueStartingAction value.
 */
type ActionListItem = ListItemData<UniqueStartingAction>;

/**
 * Template List Screen Component.
 * Displays templates and their starting actions.
 */
export function TemplateListScreen(): React.ReactElement {
  const { navigate } = useNavigation();
  const { appService, showError } = useAppContext();
  const { setStatus } = useStatus();

  // State
  const [templates, setTemplates] = useState<TemplateItem[]>([]);
  const [selectedTemplateIndex, setSelectedTemplateIndex] = useState(0);
  const [selectedActionIndex, setSelectedActionIndex] = useState(0);
  const [focusedPanel, setFocusedPanel] = useState<'templates' | 'actions'>('templates');
  const [isLoading, setIsLoading] = useState(true);

  /**
   * Loads templates from the engine.
   */
  const loadTemplates = useCallback(async () => {
    if (!appService) {
      showError('AppService not initialized');
      return;
    }

    try {
      setIsLoading(true);
      setStatus('Loading templates...');

      const templateList = await appService.engine.listImportedTemplates();

      const loadedTemplates = await Promise.all(
        templateList.map(async (template) => {
          const templateIdentifier = generateTemplateIdentifier(template);
          const rawStartingActions = await appService.engine.listStartingActions(templateIdentifier);

          // Use utility function to deduplicate actions
          const startingActions = deduplicateStartingActions(template, rawStartingActions);

          return {
            template,
            templateIdentifier,
            startingActions,
          };
        })
      );

      setTemplates(loadedTemplates);
      setSelectedTemplateIndex(0);
      setSelectedActionIndex(0);
      setStatus('Ready');
      setIsLoading(false);
    } catch (error) {
      showError(`Failed to load templates: ${error instanceof Error ? error.message : String(error)}`);
      setIsLoading(false);
    }
  }, [appService, setStatus, showError]);

  // Load templates on mount
  useEffect(() => {
    loadTemplates();
  }, [loadTemplates]);

  // Get current template and its actions
  const currentTemplate = templates[selectedTemplateIndex];
  const currentActions = currentTemplate?.startingActions ?? [];

  /**
   * Build template list items for ScrollableList.
   */
  const templateListItems = useMemo((): TemplateListItem[] => {
    return templates.map((item, index) => {
      const formatted = formatTemplateListItem(item.template, index);
      return {
        key: item.templateIdentifier,
        label: formatted.label,
        description: formatted.description,
        value: item,
        hidden: !formatted.isValid,
      };
    });
  }, [templates]);

  /**
   * Build action list items for ScrollableList.
   */
  const actionListItems = useMemo((): ActionListItem[] => {
    return currentActions.map((action, index) => {
      const formatted = formatActionListItem(
        action.actionIdentifier,
        currentTemplate?.template?.actions?.[action.actionIdentifier],
        action.roleCount,
        index
      );
      return {
        key: action.actionIdentifier,
        label: formatted.label,
        description: formatted.description,
        value: action,
        hidden: !formatted.isValid,
      };
    });
  }, [currentActions, currentTemplate]);

  /**
   * Handle template selection change.
   */
  const handleTemplateSelect = useCallback((index: number) => {
    setSelectedTemplateIndex(index);
    setSelectedActionIndex(0); // Reset action selection when template changes
  }, []);

  /**
   * Handles action selection.
   * Navigates to the Action Wizard where the user will choose their role.
   */
  const handleActionActivate = useCallback((item: ActionListItem, index: number) => {
    if (!currentTemplate || !item.value) return;

    const action = item.value;

    // Navigate to the Action Wizard — role selection happens there
    navigate('wizard', {
      templateIdentifier: currentTemplate.templateIdentifier,
      actionIdentifier: action.actionIdentifier,
      template: currentTemplate.template,
    });
  }, [currentTemplate, navigate]);

  // Handle keyboard navigation
  useInput((input, key) => {
    // Tab to switch panels
    if (key.tab) {
      setFocusedPanel(prev => prev === 'templates' ? 'actions' : 'templates');
      return;
    }
  });

  /**
   * Render custom template list item.
   */
  const renderTemplateItem = useCallback((
    item: TemplateListItem,
    isSelected: boolean,
    isFocused: boolean
  ): React.ReactNode => {
    return (
      <Text
        color={isFocused ? colors.focus : colors.text}
        bold={isSelected}
      >
        {isFocused ? '▸ ' : '  '}
        {item.label}
      </Text>
    );
  }, []);

  /**
   * Render custom action list item.
   */
  const renderActionItem = useCallback((
    item: ActionListItem,
    isSelected: boolean,
    isFocused: boolean
  ): React.ReactNode => {
    return (
      <Text
        color={isFocused ? colors.focus : colors.text}
        bold={isSelected}
      >
        {isFocused ? '▸ ' : '  '}
        {item.label}
      </Text>
    );
  }, []);

  return (
    <Box flexDirection="column" flexGrow={1}>
      {/* Header */}
      <Box borderStyle="single" borderColor={colors.secondary} paddingX={1}>
        <Text color={colors.primary} bold>{logoSmall} - Select Template & Action</Text>
      </Box>

      {/* Main content - two columns */}
      <Box flexDirection="row" marginTop={1} flexGrow={1}>
        {/* Left column: Template list */}
        <Box flexDirection="column" width="40%" paddingRight={1}>
          <Box
            borderStyle="single"
            borderColor={focusedPanel === 'templates' ? colors.focus : colors.primary}
            flexDirection="column"
            paddingX={1}
            flexGrow={1}
          >
            <Text color={colors.primary} bold> Templates </Text>
            {isLoading ? (
              <Box marginTop={1}>
                <Text color={colors.textMuted}>Loading...</Text>
              </Box>
            ) : (
              <ScrollableList
                items={templateListItems}
                selectedIndex={selectedTemplateIndex}
                onSelect={handleTemplateSelect}
                focus={focusedPanel === 'templates'}
                emptyMessage="No templates imported"
                renderItem={renderTemplateItem}
              />
            )}
          </Box>
        </Box>

        {/* Right column: Actions list */}
        <Box flexDirection="column" width="60%" paddingLeft={1}>
          <Box
            borderStyle="single"
            borderColor={focusedPanel === 'actions' ? colors.focus : colors.border}
            flexDirection="column"
            paddingX={1}
            flexGrow={1}
          >
            <Text color={colors.primary} bold> Starting Actions </Text>
            {isLoading ? (
              <Box marginTop={1}>
                <Text color={colors.textMuted}>Loading...</Text>
              </Box>
            ) : !currentTemplate ? (
              <Box marginTop={1}>
                <Text color={colors.textMuted}>Select a template...</Text>
              </Box>
            ) : (
              <ScrollableList
                items={actionListItems}
                selectedIndex={selectedActionIndex}
                onSelect={setSelectedActionIndex}
                onActivate={handleActionActivate}
                focus={focusedPanel === 'actions'}
                emptyMessage="No starting actions available"
                renderItem={renderActionItem}
              />
            )}
          </Box>
        </Box>
      </Box>

      {/* Description box */}
      <Box marginTop={1}>
        <Box
          borderStyle="single"
          borderColor={colors.border}
          flexDirection="column"
          paddingX={1}
          paddingY={1}
          width="100%"
        >
          <Text color={colors.primary} bold> Description </Text>
          
          {/* Show template description when templates panel is focused */}
          {focusedPanel === 'templates' && currentTemplate ? (
            <Box marginTop={1} flexDirection="column">
              <Text color={colors.text} bold>
                {currentTemplate.template.name || 'Unnamed Template'}
              </Text>
              <Text color={colors.textMuted}>
                {currentTemplate.template.description || 'No description available'}
              </Text>
              {currentTemplate.template.version !== undefined && (
                <Text color={colors.text}>
                  Version: {currentTemplate.template.version}
                </Text>
              )}
              {currentTemplate.template.roles && (
                <Box marginTop={1} flexDirection="column">
                  <Text color={colors.text}>Roles:</Text>
                  {getTemplateRoles(currentTemplate.template).map((role) => (
                    <Text key={role.roleId} color={colors.textMuted}>
                      {'  '}- {role.name}: {role.description || 'No description'}
                    </Text>
                  ))}
                </Box>
              )}
            </Box>
          ) : focusedPanel === 'templates' && !currentTemplate ? (
            <Text color={colors.textMuted}>Select a template to see details</Text>
          ) : null}
          
          {/* Show action description when actions panel is focused */}
          {focusedPanel === 'actions' && currentTemplate && currentActions.length > 0 ? (
            <Box marginTop={1} flexDirection="column">
              {(() => {
                const action = currentActions[selectedActionIndex];
                if (!action) return null;

                // Get roles that can start this action using utility function
                const availableRoles = getRolesForAction(currentTemplate.template, action.actionIdentifier);

                return (
                  <>
                    <Text color={colors.text} bold>
                      {action.name}
                    </Text>
                    <Text color={colors.textMuted}>
                      {action.description || 'No description available'}
                    </Text>

                    {/* List available roles for this action */}
                    {availableRoles.length > 0 && (
                      <Box marginTop={1} flexDirection="column">
                        <Text color={colors.text}>Available Roles:</Text>
                        {availableRoles.map((role) => (
                          <Text key={role.roleId} color={colors.textMuted}>
                            {'  '}- {role.name}
                            {role.description ? `: ${role.description}` : ''}
                          </Text>
                        ))}
                      </Box>
                    )}
                  </>
                );
              })()}
            </Box>
          ) : focusedPanel === 'actions' && !currentTemplate ? (
            <Text color={colors.textMuted}>Select a template first</Text>
          ) : focusedPanel === 'actions' && currentActions.length === 0 ? (
            <Text color={colors.textMuted}>No starting actions available</Text>
          ) : null}
        </Box>
      </Box>

      {/* Help text */}
      <Box marginTop={1}>
        <Text color={colors.textMuted} dimColor>
          Tab: Switch list • Enter: Select action • ↑↓: Navigate • Esc: Back
        </Text>
      </Box>
    </Box>
  );
}