// 📍 선생님 호출 화면(학생용) (UI 전용). "실시간 출석 현황" 화면과 같은 패밀리룩
// (제목 알약 + 필 모양 통계/필터 + 그림자 있는 둥근 타일)을 따른다.
// 서버 통신/상태는 lib/function/teacher_call_controller.dart가 담당한다.
import 'package:flutter/material.dart';
import '../data/teacher_call_schedule.dart';
import '../function/teacher_call_controller.dart';
import '../theme/app_palette.dart';
import 'app_notice.dart';
import 'title_pill.dart';

class TeacherCallScreen extends StatefulWidget {
  final String studentId;
  final String studentName;

  const TeacherCallScreen({
    super.key,
    required this.studentId,
    required this.studentName,
  });

  @override
  State<TeacherCallScreen> createState() => _TeacherCallScreenState();
}

class _TeacherCallScreenState extends State<TeacherCallScreen> {
  late final TeacherCallController _controller;
  String? _selectedTeacherId;
  String? _selectedTeacherName;
  String _selectedPurpose = kCallPurposes.first;
  final _customPurposeController = TextEditingController();
  bool _useCustomPurpose = false;

  @override
  void initState() {
    super.initState();
    _controller = TeacherCallController(
      studentId: widget.studentId,
      studentName: widget.studentName,
    );
    _controller.init();
  }

  @override
  void dispose() {
    _controller.dispose();
    _customPurposeController.dispose();
    super.dispose();
  }

  Future<void> _call() async {
    if (_selectedTeacherId == null) {
      AppNotice.show(context, '선생님을 선택해 주세요.');
      return;
    }
    final purpose = _useCustomPurpose
        ? _customPurposeController.text.trim()
        : _selectedPurpose;
    if (purpose.isEmpty) {
      AppNotice.show(context, '방문 목적을 입력해 주세요.');
      return;
    }
    final (success, message) = await _controller.callTeacher(
      teacherId: _selectedTeacherId!,
      purpose: purpose,
    );
    if (!mounted) return;
    AppNotice.show(
      context,
      message,
      icon: success ? Icons.check_circle_rounded : Icons.error_outline_rounded,
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListenableBuilder(
      listenable: _controller,
      builder: (context, _) {
        final teachers = _controller.teachers;
        final inClassCount = teachers
            .where((t) => _controller.isInClassNow(t['name'] ?? ''))
            .length;

        return Scaffold(
          backgroundColor: AppPalette.mist,
          appBar: AppBar(
            backgroundColor: Colors.transparent,
            foregroundColor: AppPalette.ink,
            elevation: 0,
          ),
          body: _controller.isLoading
              ? const Center(child: CircularProgressIndicator())
              : RefreshIndicator(
                  onRefresh: _controller.refresh,
                  child: ListView(
                    padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
                    children: [
                      const Center(child: TitlePill('선생님 호출')),
                      const SizedBox(height: 16),
                      Row(
                        children: [
                          Expanded(child: _statPill('전체 선생님', teachers.length)),
                          const SizedBox(width: 8),
                          Expanded(child: _statPill('지금 수업 중', inClassCount)),
                        ],
                      ),
                      if (_controller.ranking.isNotEmpty) ...[
                        const SizedBox(height: 12),
                        _buildRanking(),
                      ],
                      const SizedBox(height: 20),
                      _sectionHeader('방문 목적'),
                      const SizedBox(height: 10),
                      _buildPurposeChips(),
                      if (_useCustomPurpose) ...[
                        const SizedBox(height: 10),
                        TextField(
                          controller: _customPurposeController,
                          maxLength: 40,
                          decoration: InputDecoration(
                            hintText: '용무를 입력하세요',
                            filled: true,
                            fillColor: AppPalette.paper,
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(16),
                              borderSide: BorderSide(color: AppPalette.sage),
                            ),
                          ),
                        ),
                      ],
                      const SizedBox(height: 20),
                      _sectionHeader('선생님 목록', count: teachers.length),
                      const SizedBox(height: 10),
                      _buildTeacherGrid(),
                      const SizedBox(height: 20),
                      SizedBox(
                        width: double.infinity,
                        child: ElevatedButton(
                          style: ElevatedButton.styleFrom(
                            backgroundColor: _selectedTeacherId == null
                                ? Colors.grey
                                : AppPalette.ink,
                            foregroundColor: AppPalette.paper,
                            padding: const EdgeInsets.symmetric(vertical: 16),
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(28),
                            ),
                          ),
                          onPressed: _controller.isCalling ? null : _call,
                          child: _controller.isCalling
                              ? const SizedBox(
                                  width: 20,
                                  height: 20,
                                  child: CircularProgressIndicator(
                                    strokeWidth: 2,
                                    color: Colors.white,
                                  ),
                                )
                              : Text(
                                  _selectedTeacherName == null
                                      ? '선생님을 선택해 주세요'
                                      : '$_selectedTeacherName 선생님 호출하기',
                                  style: const TextStyle(
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                        ),
                      ),
                      const SizedBox(height: 24),
                      _sectionHeader(
                        '내 호출 기록',
                        count: _controller.myCalls.length,
                      ),
                      const SizedBox(height: 10),
                      _buildMyCalls(),
                    ],
                  ),
                ),
        );
      },
    );
  }

  /// 🪶 "실시간 출석 현황"의 _sidebarStatPill과 같은 필 모양 통계 표시(선택 불가, 숫자 강조용).
  Widget _statPill(String label, int count) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 16),
      decoration: BoxDecoration(
        color: AppPalette.paper,
        borderRadius: BorderRadius.circular(28),
        border: Border.all(color: AppPalette.sage),
      ),
      child: Column(
        children: [
          Text(label, style: TextStyle(fontSize: 12, color: Colors.grey[600])),
          const SizedBox(height: 4),
          Text(
            '$count명',
            style: const TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
              color: AppPalette.ink,
            ),
          ),
        ],
      ),
    );
  }

  /// 🏷️ "학년 그룹" 헤더처럼 작은 강조 바 + 굵은 제목 + (선택) 개수를 붙인 섹션 제목.
  Widget _sectionHeader(String title, {int? count}) {
    return Row(
      children: [
        Container(
          width: 4,
          height: 16,
          decoration: BoxDecoration(
            color: AppPalette.ink,
            borderRadius: BorderRadius.circular(2),
          ),
        ),
        const SizedBox(width: 8),
        Text(
          title,
          style: const TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.bold,
            color: AppPalette.ink,
          ),
        ),
        if (count != null) ...[
          const SizedBox(width: 6),
          Text(
            '$count명',
            style: TextStyle(fontSize: 13, color: Colors.grey[500]),
          ),
        ],
      ],
    );
  }

  static const List<Color> _medalColors = [
    Color(0xFFC9A227), // 금
    Color(0xFF9AA0A6), // 은
    Color(0xFFB07A4B), // 동
  ];

  Widget _buildRanking() {
    return Container(
      padding: const EdgeInsets.all(14),
      decoration: BoxDecoration(
        color: AppPalette.paper,
        borderRadius: BorderRadius.circular(20),
        border: Border.all(color: AppPalette.sage),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withValues(alpha: 0.03),
            blurRadius: 12,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '오늘 인기 선생님',
            style: TextStyle(
              fontWeight: FontWeight.bold,
              color: Colors.grey[600],
            ),
          ),
          const SizedBox(height: 8),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              for (var i = 0; i < _controller.ranking.length; i++)
                Column(
                  children: [
                    Icon(
                      Icons.emoji_events_rounded,
                      color: _medalColors[i],
                      size: 22,
                    ),
                    Text(
                      _controller.ranking[i]['teacherName'] ?? '',
                      style: const TextStyle(fontWeight: FontWeight.bold),
                    ),
                    Text(
                      '${_controller.ranking[i]['count']}회',
                      style: TextStyle(color: Colors.grey[500], fontSize: 12),
                    ),
                  ],
                ),
            ],
          ),
        ],
      ),
    );
  }

  /// 🍬 필 모양 선택 버튼(스탯 필과 같은 톤: 선택=ink 배경, 미선택=paper+sage 테두리).
  Widget _pillChoice(String label, bool selected, VoidCallback onTap) {
    return InkWell(
      onTap: onTap,
      borderRadius: BorderRadius.circular(28),
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
        decoration: BoxDecoration(
          color: selected ? AppPalette.ink : AppPalette.paper,
          borderRadius: BorderRadius.circular(28),
          border: Border.all(
            color: selected ? AppPalette.ink : AppPalette.sage,
          ),
        ),
        child: Text(
          label,
          style: TextStyle(
            fontWeight: FontWeight.bold,
            color: selected ? Colors.white : AppPalette.ink,
          ),
        ),
      ),
    );
  }

  Widget _buildPurposeChips() {
    return Wrap(
      spacing: 8,
      runSpacing: 8,
      children: [
        for (final p in kCallPurposes)
          _pillChoice(
            p,
            !_useCustomPurpose && _selectedPurpose == p,
            () => setState(() {
              _useCustomPurpose = false;
              _selectedPurpose = p;
            }),
          ),
        _pillChoice(
          '직접 입력',
          _useCustomPurpose,
          () => setState(() => _useCustomPurpose = true),
        ),
      ],
    );
  }

  Widget _buildTeacherGrid() {
    final teachers = _controller.teachers;
    return GridView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 160,
        mainAxisSpacing: 12,
        crossAxisSpacing: 12,
        mainAxisExtent: 110,
      ),
      itemCount: teachers.length,
      itemBuilder: (context, index) {
        final t = teachers[index];
        final name = t['name'] ?? '';
        final location = t['location'] ?? '교무실';
        final isSelected = _selectedTeacherId == t['teacherId'];
        final inClass = _controller.isInClassNow(name);
        final statusColor = inClass ? Colors.orange : AppPalette.ink;

        return GestureDetector(
          onTap: () => setState(() {
            _selectedTeacherId = t['teacherId'];
            _selectedTeacherName = name;
          }),
          child: Container(
            padding: const EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: isSelected ? AppPalette.ink : AppPalette.paper,
              borderRadius: BorderRadius.circular(20),
              border: Border.all(
                color: isSelected ? AppPalette.ink : AppPalette.sage,
              ),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withValues(alpha: 0.03),
                  blurRadius: 12,
                  offset: const Offset(0, 4),
                ),
              ],
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Container(
                      padding: const EdgeInsets.all(6),
                      decoration: BoxDecoration(
                        color: isSelected
                            ? Colors.white.withValues(alpha: 0.15)
                            : statusColor.withValues(alpha: 0.1),
                        shape: BoxShape.circle,
                      ),
                      child: Icon(
                        inClass ? Icons.school_rounded : Icons.person_rounded,
                        color: isSelected ? Colors.white : statusColor,
                        size: 16,
                      ),
                    ),
                    const Spacer(),
                    if (inClass)
                      Container(
                        padding: const EdgeInsets.symmetric(
                          horizontal: 6,
                          vertical: 2,
                        ),
                        decoration: BoxDecoration(
                          color: isSelected
                              ? Colors.white.withValues(alpha: 0.15)
                              : Colors.orange[50],
                          borderRadius: BorderRadius.circular(20),
                          border: Border.all(
                            color: isSelected ? Colors.white54 : Colors.orange,
                          ),
                        ),
                        child: Text(
                          '수업중',
                          style: TextStyle(
                            fontSize: 9,
                            color: isSelected ? Colors.white : Colors.orange,
                          ),
                        ),
                      ),
                  ],
                ),
                const Spacer(),
                Text(
                  name,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 15,
                    color: isSelected ? Colors.white : AppPalette.ink,
                  ),
                ),
                const SizedBox(height: 2),
                Row(
                  children: [
                    Icon(
                      kLocationIcons[location] ?? Icons.location_on_rounded,
                      size: 12,
                      color: isSelected ? Colors.white70 : Colors.grey[500],
                    ),
                    const SizedBox(width: 3),
                    Expanded(
                      child: Text(
                        location,
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                          fontSize: 11,
                          color: isSelected ? Colors.white70 : Colors.grey[500],
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        );
      },
    );
  }

  Widget _buildMyCalls() {
    if (_controller.myCalls.isEmpty) {
      return const Padding(
        padding: EdgeInsets.symmetric(vertical: 12),
        child: Text('아직 호출 기록이 없어요.', style: TextStyle(color: Colors.grey)),
      );
    }
    return Column(
      children: [
        for (final c in _controller.myCalls)
          Container(
            margin: const EdgeInsets.only(bottom: 8),
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
            decoration: BoxDecoration(
              color: AppPalette.paper,
              borderRadius: BorderRadius.circular(16),
              border: Border.all(color: AppPalette.sage),
            ),
            child: Row(
              children: [
                Expanded(
                  child: Text('${c['teacherName']} 선생님 · ${c['purpose']}'),
                ),
                Text(
                  '${c['createdAt'] ?? ''}'.split(' ').last,
                  style: TextStyle(color: Colors.grey[500], fontSize: 12),
                ),
              ],
            ),
          ),
      ],
    );
  }
}