import 'package:flutter/material.dart';
import 'package:iconsax/iconsax.dart';
import 'package:animate_do/animate_do.dart';
import '../api/api.dart';
import '../components/agent_chat_window.dart';

/// The Architech page - Dual agent chat interface
///
/// Features:
/// - Two independent chat windows stacked vertically
/// - Simultaneous conversations with different agents
/// - Independent agent selection per chat window
/// - Real-time AI responses with token tracking
class ArchitechPage extends StatefulWidget {
  const ArchitechPage({super.key});

  @override
  State<ArchitechPage> createState() => _ArchitechPageState();
}

class _ArchitechPageState extends State<ArchitechPage> {
  final CqrsApiClient _apiClient = CqrsApiClient(
    config: ApiClientConfig.development,
  );

  List<AgentDto>? _agents;
  bool _isLoadingAgents = true;
  String? _errorMessage;

  @override
  void initState() {
    super.initState();
    _loadAgents();
  }

  @override
  void dispose() {
    _apiClient.dispose();
    super.dispose();
  }

  Future<void> _loadAgents() async {
    setState(() {
      _isLoadingAgents = true;
      _errorMessage = null;
    });

    final Result<List<AgentDto>> result = await _apiClient.listAgents();

    result.when(
      success: (List<AgentDto> agents) {
        if (mounted) {
          setState(() {
            _agents = agents;
            _isLoadingAgents = false;
          });
        }
      },
      error: (ApiErrorInfo error) {
        if (mounted) {
          setState(() {
            _errorMessage = error.message;
            _isLoadingAgents = false;
          });
        }
      },
    );
  }


  @override
  Widget build(BuildContext context) {
    final ColorScheme colorScheme = Theme.of(context).colorScheme;

    return Container(
      padding: const EdgeInsets.all(24),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Header
          _buildHeader(colorScheme),
          const SizedBox(height: 24),

          // Main Content
          Expanded(
            child: _buildMainContent(colorScheme),
          ),
        ],
      ),
    );
  }

  Widget _buildHeader(ColorScheme colorScheme) {
    return FadeInDown(
      duration: const Duration(milliseconds: 400),
      child: Row(
        children: [
          Icon(
            Iconsax.hierarchy_square,
            color: colorScheme.primary,
            size: 28,
          ),
          const SizedBox(width: 12),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'The Architech',
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                    color: colorScheme.onSurface,
                  ),
                ),
                Text(
                  'Dual agent conversation workspace',
                  style: TextStyle(
                    fontSize: 14,
                    color: colorScheme.onSurfaceVariant,
                  ),
                ),
              ],
            ),
          ),
          IconButton(
            icon: Icon(Iconsax.refresh, color: colorScheme.primary),
            onPressed: _loadAgents,
            tooltip: 'Refresh agents',
          ),
        ],
      ),
    );
  }

  Widget _buildMainContent(ColorScheme colorScheme) {
    if (_isLoadingAgents) {
      return _buildLoadingState(colorScheme);
    }

    if (_errorMessage != null) {
      return _buildErrorState(colorScheme);
    }

    if (_agents == null || _agents!.isEmpty) {
      return _buildEmptyAgentsState(colorScheme);
    }

    // Simple stacked layout - two chat windows vertically
    return _buildChatLayout(colorScheme);
  }

  Widget _buildChatLayout(ColorScheme colorScheme) {
    return Column(
      children: [
        // Chat Window 1 (top half)
        Expanded(
          child: FadeInUp(
            duration: const Duration(milliseconds: 400),
            child: AgentChatWindow(
              title: 'Agent Chat 1',
              availableAgents: _agents!,
            ),
          ),
        ),
        const SizedBox(height: 16),

        // Chat Window 2 (bottom half)
        Expanded(
          child: FadeInUp(
            duration: const Duration(milliseconds: 500),
            child: AgentChatWindow(
              title: 'Agent Chat 2',
              availableAgents: _agents!,
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildLoadingState(ColorScheme colorScheme) {
    return Center(
      child: FadeIn(
        duration: const Duration(milliseconds: 400),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircularProgressIndicator(
              valueColor: AlwaysStoppedAnimation<Color>(colorScheme.primary),
            ),
            const SizedBox(height: 16),
            Text(
              'Loading agents and conversations...',
              style: TextStyle(
                color: colorScheme.onSurfaceVariant,
                fontSize: 14,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildErrorState(ColorScheme colorScheme) {
    return Center(
      child: FadeIn(
        duration: const Duration(milliseconds: 400),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              Iconsax.danger,
              size: 64,
              color: colorScheme.error,
            ),
            const SizedBox(height: 16),
            Text(
              'Error Loading Data',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
                color: colorScheme.onSurface,
              ),
            ),
            const SizedBox(height: 8),
            Text(
              _errorMessage ?? 'Unknown error',
              style: TextStyle(
                fontSize: 14,
                color: colorScheme.onSurfaceVariant,
              ),
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 24),
            ElevatedButton.icon(
              onPressed: _loadAgents,
              icon: const Icon(Iconsax.refresh),
              label: const Text('Retry'),
              style: ElevatedButton.styleFrom(
                backgroundColor: colorScheme.primary,
                foregroundColor: Colors.white,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildEmptyAgentsState(ColorScheme colorScheme) {
    return Center(
      child: FadeIn(
        duration: const Duration(milliseconds: 600),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              Iconsax.cpu,
              size: 80,
              color: colorScheme.onSurfaceVariant.withValues(alpha: 0.5),
            ),
            const SizedBox(height: 24),
            Text(
              'No Agents Available',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
                color: colorScheme.onSurface,
              ),
            ),
            const SizedBox(height: 12),
            Text(
              'Create agents in the AI Agents page to start using The Architech',
              style: TextStyle(
                fontSize: 14,
                color: colorScheme.onSurfaceVariant,
              ),
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 32),
            Container(
              padding: const EdgeInsets.symmetric(
                horizontal: 24,
                vertical: 12,
              ),
              decoration: BoxDecoration(
                color: colorScheme.primary.withValues(alpha: 0.1),
                borderRadius: BorderRadius.circular(12),
                border: Border.all(
                  color: colorScheme.primary.withValues(alpha: 0.3),
                  width: 1,
                ),
              ),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Icon(
                    Iconsax.info_circle,
                    color: colorScheme.primary,
                    size: 20,
                  ),
                  const SizedBox(width: 12),
                  Text(
                    'Go to AI Agents to create your first agent',
                    style: TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.w600,
                      color: colorScheme.primary,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}