import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:flutter/foundation.dart' show kIsWeb;

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: LayoutBuilder(
        builder: (context, constraints) {
          // Version desktop (web)
          if (kIsWeb) {
            final w = constraints.maxWidth;
            final h = constraints.maxHeight;

            return FutureBuilder(
              future: _getImageDimensions(),
              builder: (context, snapshot) {
                if (!snapshot.hasData) {
                  return const Center(child: CircularProgressIndicator());
                }

                final imageDimensions = snapshot.data!;
                final imageHeight = h;
                final imageWidth = imageHeight * (imageDimensions.width / imageDimensions.height);
                final remainingWidth = w - imageWidth;
                final leftMargin = remainingWidth / 4;

                return Stack(
                  children: [
                    // Fond en papier
                    Positioned.fill(
                      child: Image.asset(
                        'assets/images/paper2.png',
                        fit: BoxFit.cover,
                        repeat: ImageRepeat.repeat,
                      ),
                    ),
                    // Image principale
                    Positioned(
                      left: leftMargin,
                      top: 0,
                      height: imageHeight,
                      width: imageWidth,
                      child: Image.asset(
                        'assets/images/river_logo_desktop.png',
                        fit: BoxFit.contain,
                      ),
                    ),
                    // Contenu
                    const Center(
                      child: Text('Formulaire de connexion à implémenter'),
                    ),
                  ],
                );
              },
            );
          }
          
          // Version mobile (à implémenter)
          return const Center(
            child: Text('Version mobile à implémenter'),
          );
        },
      ),
    );
  }

  Future<ImageDimensions> _getImageDimensions() async {
    final image = Image.asset('assets/images/river_logo_desktop.png');
    final completer = Completer<ImageDimensions>();
    image.image.resolve(const ImageConfiguration()).addListener(
      ImageStreamListener((info, _) {
        completer.complete(ImageDimensions(
          width: info.image.width.toDouble(),
          height: info.image.height.toDouble(),
        ));
      }),
    );
    return completer.future;
  }
}

class ImageDimensions {
  final double width;
  final double height;

  ImageDimensions({required this.width, required this.height});
}

// ───────────────────────────────────────────────────────────────
// Champ texte avec fond image
// ───────────────────────────────────────────────────────────────
class _ImageTextField extends StatelessWidget {
  final String bg;
  final double width;
  final double height;
  final String hint;
  final bool obscure;
  const _ImageTextField({
    required this.bg,
    required this.width,
    required this.height,
    required this.hint,
    this.obscure = false,
  });

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: width,
      height: height,
      child: Stack(
        children: [
          Positioned.fill(child: Image.asset(bg, fit: BoxFit.fill)),
          TextField(
            obscureText: obscure,
            style: GoogleFonts.merienda(fontSize: width * 0.045),
            decoration: InputDecoration(
              border: InputBorder.none,
              hintText: hint,
              hintStyle: GoogleFonts.merienda(
                fontSize: width * 0.045,
                color: Colors.black54,
              ),
              contentPadding: EdgeInsets.symmetric(
                horizontal: width * 0.07,  // 7 % latéral
                vertical: height * 0.22,   // 22 % vertical
              ),
            ),
          ),
        ],
      ),
    );
  }
}