superport/lib/screens/login/widgets/login_view_redesign.dart

import 'package:flutter/material.dart';
import 'package:superport/screens/common/theme_shadcn.dart';
import 'package:superport/screens/common/components/shadcn_components.dart';
import 'package:superport/screens/login/controllers/login_controller.dart';
import 'package:provider/provider.dart';
import 'dart:math' as math;

/// shadcn/ui 스타일로 재설계된 로그인 화면
class LoginViewRedesign extends StatefulWidget {
  final LoginController controller;
  final VoidCallback onLoginSuccess;

  const LoginViewRedesign({
    Key? key,
    required this.controller,
    required this.onLoginSuccess,
  }) : super(key: key);

  @override
  State<LoginViewRedesign> createState() => _LoginViewRedesignState();
}

class _LoginViewRedesignState extends State<LoginViewRedesign>
    with TickerProviderStateMixin {
  late AnimationController _fadeController;
  late Animation<double> _fadeAnimation;
  late AnimationController _slideController;
  late Animation<Offset> _slideAnimation;

  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();
  bool _rememberMe = false;
  bool _isLoading = false;

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

  void _setupAnimations() {
    _fadeController = AnimationController(
      duration: const Duration(milliseconds: 1000),
      vsync: this,
    );
    _fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
      CurvedAnimation(parent: _fadeController, curve: Curves.easeInOut),
    );

    _slideController = AnimationController(
      duration: const Duration(milliseconds: 800),
      vsync: this,
    );
    _slideAnimation = Tween<Offset>(
      begin: const Offset(0, 0.3),
      end: Offset.zero,
    ).animate(
      CurvedAnimation(parent: _slideController, curve: Curves.easeOutCubic),
    );

    _fadeController.forward();
    _slideController.forward();
  }

  @override
  void dispose() {
    _fadeController.dispose();
    _slideController.dispose();
    _usernameController.dispose();
    _passwordController.dispose();
    super.dispose();
  }

  Future<void> _handleLogin() async {
    if (_usernameController.text.isEmpty || _passwordController.text.isEmpty) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text('사용자명과 비밀번호를 입력해주세요.'),
          backgroundColor: ShadcnTheme.destructive,
        ),
      );
      return;
    }

    setState(() {
      _isLoading = true;
    });

    // 실제 로그인 로직 (임시로 2초 대기)
    await Future.delayed(const Duration(seconds: 2));

    setState(() {
      _isLoading = false;
    });

    widget.onLoginSuccess();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ShadcnTheme.background,
      body: SafeArea(
        child: Center(
          child: SingleChildScrollView(
            physics: const BouncingScrollPhysics(),
            child: Padding(
              padding: const EdgeInsets.all(ShadcnTheme.spacing6),
              child: ConstrainedBox(
                constraints: const BoxConstraints(maxWidth: 400),
                child: FadeTransition(
                  opacity: _fadeAnimation,
                  child: SlideTransition(
                    position: _slideAnimation,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        _buildHeader(),
                        const SizedBox(height: ShadcnTheme.spacing12),
                        _buildLoginCard(),
                        const SizedBox(height: ShadcnTheme.spacing8),
                        _buildFooter(),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildHeader() {
    return Column(
      children: [
        // 로고 및 애니메이션
        Container(
          padding: const EdgeInsets.all(ShadcnTheme.spacing4),
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            gradient: LinearGradient(
              colors: [
                ShadcnTheme.gradient1,
                ShadcnTheme.gradient2,
                ShadcnTheme.gradient3,
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
            boxShadow: [
              BoxShadow(
                color: ShadcnTheme.gradient1.withOpacity(0.3),
                blurRadius: 20,
                offset: const Offset(0, 10),
              ),
            ],
          ),
          child: AnimatedBuilder(
            animation: _fadeController,
            builder: (context, child) {
              return Transform.rotate(
                angle: _fadeController.value * 2 * math.pi * 0.1,
                child: Icon(
                  Icons.directions_boat,
                  size: 48,
                  color: ShadcnTheme.primaryForeground,
                ),
              );
            },
          ),
        ),
        const SizedBox(height: ShadcnTheme.spacing6),
        // 앱 이름
        Text(
          'supERPort',
          style: ShadcnTheme.headingH1.copyWith(
            foreground:
                Paint()
                  ..shader = LinearGradient(
                    colors: [ShadcnTheme.gradient1, ShadcnTheme.gradient2],
                  ).createShader(const Rect.fromLTWH(0, 0, 200, 70)),
          ),
        ),
        const SizedBox(height: ShadcnTheme.spacing2),
        Text('스마트 포트 관리 시스템', style: ShadcnTheme.bodyMuted),
      ],
    );
  }

  Widget _buildLoginCard() {
    return ShadcnCard(
      padding: const EdgeInsets.all(ShadcnTheme.spacing8),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 로그인 헤더
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('로그인', style: ShadcnTheme.headingH3),
              const SizedBox(height: ShadcnTheme.spacing1),
              Text('계정 정보를 입력하여 로그인하세요.', style: ShadcnTheme.bodyMuted),
            ],
          ),
          const SizedBox(height: ShadcnTheme.spacing8),

          // 사용자명 입력
          ShadcnInput(
            label: '사용자명',
            placeholder: '사용자명을 입력하세요',
            controller: _usernameController,
            prefixIcon: const Icon(Icons.person_outline),
            keyboardType: TextInputType.text,
          ),
          const SizedBox(height: ShadcnTheme.spacing4),

          // 비밀번호 입력
          ShadcnInput(
            label: '비밀번호',
            placeholder: '비밀번호를 입력하세요',
            controller: _passwordController,
            prefixIcon: const Icon(Icons.lock_outline),
            obscureText: true,
            keyboardType: TextInputType.visiblePassword,
          ),
          const SizedBox(height: ShadcnTheme.spacing4),

          // 아이디 저장 체크박스
          Row(
            children: [
              Checkbox(
                value: _rememberMe,
                onChanged: (value) {
                  setState(() {
                    _rememberMe = value ?? false;
                  });
                },
                activeColor: ShadcnTheme.primary,
              ),
              const SizedBox(width: ShadcnTheme.spacing2),
              Text('아이디 저장', style: ShadcnTheme.bodyMedium),
            ],
          ),
          const SizedBox(height: ShadcnTheme.spacing8),

          // 로그인 버튼
          ShadcnButton(
            text: '로그인',
            onPressed: _handleLogin,
            variant: ShadcnButtonVariant.primary,
            textColor: Colors.white,
            size: ShadcnButtonSize.large,
            fullWidth: true,
            loading: _isLoading,
          ),
          const SizedBox(height: ShadcnTheme.spacing4),

          // 테스트 로그인 버튼
          ShadcnButton(
            text: '테스트 로그인',
            onPressed: () {
              _usernameController.text = 'admin';
              _passwordController.text = 'password';
              _handleLogin();
            },
            variant: ShadcnButtonVariant.secondary,
            size: ShadcnButtonSize.medium,
            fullWidth: true,
          ),
        ],
      ),
    );
  }

  Widget _buildFooter() {
    return Column(
      children: [
        // 기능 소개
        Container(
          padding: const EdgeInsets.all(ShadcnTheme.spacing4),
          decoration: BoxDecoration(
            color: ShadcnTheme.muted,
            borderRadius: BorderRadius.circular(ShadcnTheme.radiusLg),
            border: Border.all(color: ShadcnTheme.border),
          ),
          child: Row(
            children: [
              Container(
                padding: const EdgeInsets.all(ShadcnTheme.spacing2),
                decoration: BoxDecoration(
                  color: ShadcnTheme.info.withOpacity(0.1),
                  borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
                ),
                child: Icon(
                  Icons.info_outline,
                  size: 16,
                  color: ShadcnTheme.info,
                ),
              ),
              const SizedBox(width: ShadcnTheme.spacing3),
              Expanded(
                child: Text(
                  '장비 관리, 회사 관리, 사용자 관리 등\n포트 운영에 필요한 모든 기능을 제공합니다.',
                  style: ShadcnTheme.bodySmall,
                ),
              ),
            ],
          ),
        ),
        const SizedBox(height: ShadcnTheme.spacing6),

        // 저작권 정보
        Text(
          'Copyright 2025 CClabs. All rights reserved.',
          style: ShadcnTheme.bodySmall.copyWith(
            color: ShadcnTheme.foreground.withOpacity(0.7),
            fontWeight: FontWeight.w500,
          ),
        ),
      ],
    );
  }
}