superport/lib/screens/common/templates/form_layout_template.dart

import 'package:flutter/material.dart';
import 'package:superport/screens/common/components/shadcn_components.dart';
import 'package:superport/screens/common/theme_shadcn.dart';

/// 폼 화면의 일관된 레이아웃을 제공하는 템플릿 위젯
class FormLayoutTemplate extends StatelessWidget {
  final String title;
  final Widget child;
  final VoidCallback? onSave;
  final VoidCallback? onCancel;
  final String saveButtonText;
  final bool isLoading;
  final bool showBottomButtons;
  final Widget? customActions;

  const FormLayoutTemplate({
    super.key,
    required this.title,
    required this.child,
    this.onSave,
    this.onCancel,
    this.saveButtonText = '저장',
    this.isLoading = false,
    this.showBottomButtons = true,
    this.customActions,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ShadcnTheme.background, // Phase 10: 통일된 배경색
      appBar: AppBar(
        title: Text(
          title,
          style: ShadcnTheme.headingH3.copyWith(
            fontWeight: FontWeight.w600,
            color: ShadcnTheme.foreground,
          ),
        ),
        backgroundColor: ShadcnTheme.card, // Phase 10: 카드 배경색
        elevation: 0,
        leading: IconButton(
          icon: Icon(
            Icons.arrow_back_ios, 
            color: ShadcnTheme.mutedForeground, // Phase 10: 뮤트된 전경색
            size: 20,
          ),
          onPressed: onCancel ?? () => Navigator.of(context).pop(),
        ),
        actions: customActions != null ? [customActions!] : null,
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(1),
          child: Container(
            color: ShadcnTheme.border, // Phase 10: 통일된 테두리 색상
            height: 1,
          ),
        ),
      ),
      body: child,
      bottomNavigationBar: showBottomButtons ? _buildBottomBar(context) : null,
    );
  }

  Widget _buildBottomBar(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: ShadcnTheme.card, // Phase 10: 카드 배경색
        border: Border(
          top: BorderSide(color: ShadcnTheme.border, width: 1), // Phase 10: 통일된 테두리
        ),
        boxShadow: [
          BoxShadow(
            color: ShadcnTheme.foreground.withValues(alpha: 0.05), // Phase 10: 그림자 색상
            offset: Offset(0, -2),
            blurRadius: 4,
          ),
        ],
      ),
      padding: const EdgeInsets.fromLTRB(24, 16, 24, 24),
      child: Row(
        children: [
          Expanded(
            child: ShadcnButton(
              text: '취소',
              onPressed: isLoading ? null : (onCancel ?? () => Navigator.of(context).pop()),
              variant: ShadcnButtonVariant.secondary,
              size: ShadcnButtonSize.large,
            ),
          ),
          SizedBox(width: 12),
          Expanded(
            flex: 2,
            child: ShadcnButton(
              text: saveButtonText,
              onPressed: isLoading ? null : onSave,
              variant: ShadcnButtonVariant.primary,
              size: ShadcnButtonSize.large,
              loading: isLoading,
            ),
          ),
        ],
      ),
    );
  }
}

/// 폼 필드를 감싸는 일관된 카드 레이아웃
class FormSection extends StatelessWidget {
  final String? title;
  final String? subtitle;
  final List<Widget> children;
  final EdgeInsetsGeometry? padding;

  const FormSection({
    super.key,
    this.title,
    this.subtitle,
    required this.children,
    this.padding,
  });

  @override
  Widget build(BuildContext context) {
    return ShadcnCard(
      padding: padding ?? const EdgeInsets.all(24),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          if (title != null) ...[
            Text(
              title!,
              style: ShadcnTheme.bodyLarge.copyWith(
                fontWeight: FontWeight.w600,
                color: ShadcnTheme.foreground,
              ),
            ),
            if (subtitle != null) ...[
              const SizedBox(height: 4),
              Text(
                subtitle!,
                style: ShadcnTheme.bodyMedium.copyWith(
                  color: ShadcnTheme.mutedForeground,
                ),
              ),
            ],
            const SizedBox(height: 20),
            Divider(color: ShadcnTheme.border, height: 1),
            const SizedBox(height: 20),
          ],
          if (children.isNotEmpty)
            ...children.asMap().entries.map((entry) {
              final index = entry.key;
              final child = entry.value;
              if (index < children.length - 1) {
                return Padding(
                  padding: const EdgeInsets.only(bottom: 16),
                  child: child,
                );
              } else {
                return child;
              }
            }),
        ],
      ),
    );
  }
}

/// 일관된 폼 필드 스타일
class FormFieldWrapper extends StatelessWidget {
  final String label;
  final String? hint;
  final bool required;
  final Widget child;

  const FormFieldWrapper({
    super.key,
    required this.label,
    this.hint,
    this.required = false,
    required this.child,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Text(
              label,
              style: ShadcnTheme.labelMedium,
            ),
            if (required)
              Text(
                ' *',
                style: ShadcnTheme.labelMedium.copyWith(color: ShadcnTheme.destructive),
              ),
          ],
        ),
        if (hint != null) ...[
          const SizedBox(height: 4),
          Text(
            hint!,
            style: ShadcnTheme.bodyXs,
          ),
        ],
        const SizedBox(height: 8),
        child,
      ],
    );
  }
}

/// UI 상수 정의
class UIConstants {
  static const double formPadding = 24.0;
  static const double buttonHeight = 48.0;
  static const double borderRadius = 8.0;
  static const double cardSpacing = 16.0;
  
  // 테이블 컬럼 너비
  static const double columnWidthSmall = 100.0;  // 구분, 유형
  static const double columnWidthMedium = 150.0; // 일반 필드
  static const double columnWidthLarge = 200.0;  // 긴 텍스트
  
  // 색상
  static const Color backgroundColor = ShadcnTheme.backgroundSecondary;
  static const Color cardBackground = ShadcnTheme.card;
  static const Color borderColor = ShadcnTheme.border;
  static const Color textPrimary = ShadcnTheme.foreground;
  static const Color textSecondary = ShadcnTheme.foregroundSecondary;
  static const Color textMuted = ShadcnTheme.foregroundMuted;
}