import 'package:flutter/material.dart';
import '../services/supabase_service.dart';

class DebugBannerWidget extends StatefulWidget {
  final String? lastError;
  final int routeCount;
  final bool isConnected;
  final String connectionStatus;

  const DebugBannerWidget({
    super.key,
    this.lastError,
    this.routeCount = 0,
    this.isConnected = false,
    this.connectionStatus = 'Not checked',
  });

  @override
  State<DebugBannerWidget> createState() => _DebugBannerWidgetState();
}

class _DebugBannerWidgetState extends State<DebugBannerWidget> {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Positioned(
      top: 16,
      left: 16,
      child: GestureDetector(
        onTap: () {
          setState(() {
            _isExpanded = !_isExpanded;
          });
        },
        child: Container(
          constraints: BoxConstraints(
            maxWidth: MediaQuery.of(context).size.width * 0.8,
          ),
          decoration: BoxDecoration(
            color: Colors.black87,
            borderRadius: BorderRadius.circular(8),
            border: Border.all(color: const Color(0xFFFEE715), width: 2),
          ),
          child: _isExpanded ? _buildExpandedView() : _buildCollapsedView(),
        ),
      ),
    );
  }

  Widget _buildCollapsedView() {
    return Container(
      padding: const EdgeInsets.all(8),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(
            Icons.bug_report,
            color: widget.isConnected ? Colors.green : Colors.red,
            size: 16,
          ),
          const SizedBox(width: 4),
          Text(
            'DEBUG',
            style: TextStyle(
              color: widget.isConnected ? Colors.green : Colors.red,
              fontSize: 12,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(width: 4),
          const Icon(
            Icons.keyboard_arrow_down,
            color: Color(0xFFFEE715),
            size: 16,
          ),
        ],
      ),
    );
  }

  Widget _buildExpandedView() {
    final truncatedUrl = SupabaseService.getTruncatedUrl();
    final maskedKey = SupabaseService.getMaskedAnonKey();

    return Container(
      padding: const EdgeInsets.all(12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          // Header
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(
                Icons.bug_report,
                color: widget.isConnected ? Colors.green : Colors.red,
                size: 16,
              ),
              const SizedBox(width: 4),
              const Text(
                'DEBUG INFO',
                style: TextStyle(
                  color: Color(0xFFFEE715),
                  fontSize: 12,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const Spacer(),
              const Icon(
                Icons.keyboard_arrow_up,
                color: Color(0xFFFEE715),
                size: 16,
              ),
            ],
          ),
          const Divider(color: Color(0xFFFEE715), height: 16, thickness: 1),

          // Connection Status
          _buildDebugRow(
            'Status',
            widget.isConnected ? 'Connected ✓' : 'Connection Failed',
            isError: !widget.isConnected,
          ),

          // Supabase URL (first/last 8 chars)
          _buildDebugRow(
            'SUPABASE_URL',
            truncatedUrl,
          ),

          // Supabase Anon Key (first/last 6 chars, masked)
          _buildDebugRow(
            'SUPABASE_ANON_KEY',
            maskedKey,
          ),

          // Route Count
          _buildDebugRow(
            'Routes Count',
            widget.isConnected ? '${widget.routeCount} routes' : 'N/A',
          ),

          // Last Error
          if (widget.lastError != null) ...[
            const SizedBox(height: 8),
            _buildDebugRow(
              'Last Error',
              widget.lastError!,
              isError: true,
            ),
          ],
        ],
      ),
    );
  }

  Widget _buildDebugRow(String label, String value, {bool isError = false}) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 2),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '$label:',
            style: const TextStyle(
              color: Color(0xFFFEE715),
              fontSize: 10,
              fontWeight: FontWeight.w600,
            ),
          ),
          const SizedBox(height: 2),
          Text(
            value,
            style: TextStyle(
              color: isError ? Colors.red : Colors.white,
              fontSize: 9,
              fontFamily: 'monospace',
            ),
            maxLines: isError ? 3 : 2,
            overflow: TextOverflow.ellipsis,
          ),
        ],
      ),
    );
  }
}