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

class TeacherLocationScreen extends StatefulWidget {
  final String teacherId;

  const TeacherLocationScreen({super.key, required this.teacherId});

  @override
  State<TeacherLocationScreen> createState() => _TeacherLocationScreenState();
}

class _TeacherLocationScreenState extends State<TeacherLocationScreen> {
  late final TeacherLocationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TeacherLocationController(teacherId: widget.teacherId);
    _controller.init();
  }

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

  Future<void> _selectLocation(String location) async {
    final (success, message) = await _controller.updateLocation(location);
    if (!mounted) return;
    AppNotice.show(
      context,
      message,
      icon: success ? Icons.check_circle_rounded : Icons.error_outline_rounded,
    );
  }

  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]),
          ),
        ],
      ],
    );
  }

  /// 넓은 화면(웹 데스크톱)에서 내용이 양옆으로 늘어지지 않게 가운데 최대 560 폭으로 맞춘다.
  double _sidePad(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    return ((width - 560) / 2).clamp(16.0, double.infinity);
  }

  @override
  Widget build(BuildContext context) {
    return ListenableBuilder(
      listenable: _controller,
      builder: (context, _) {
        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.fetchReceivedCalls,
                  child: ListView(
                    padding: EdgeInsets.fromLTRB(
                      _sidePad(context),
                      0,
                      _sidePad(context),
                      16,
                    ),
                    children: [
                      const Center(child: TitlePill('내 위치 알리기')),
                      const SizedBox(height: 16),
                      Container(
                        width: double.infinity,
                        padding: const EdgeInsets.symmetric(vertical: 18),
                        decoration: BoxDecoration(
                          color: AppPalette.ink,
                          borderRadius: BorderRadius.circular(24),
                        ),
                        child: Column(
                          children: [
                            const Text(
                              '현재 위치',
                              style: TextStyle(
                                color: Colors.white70,
                                fontSize: 12,
                              ),
                            ),
                            const SizedBox(height: 6),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Icon(
                                  kLocationIcons[_controller.currentLocation] ??
                                      Icons.location_on_rounded,
                                  color: Colors.white,
                                  size: 20,
                                ),
                                const SizedBox(width: 8),
                                Text(
                                  _controller.currentLocation,
                                  style: const TextStyle(
                                    fontWeight: FontWeight.bold,
                                    fontSize: 20,
                                    color: Colors.white,
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                      const SizedBox(height: 20),
                      _sectionHeader('위치 선택'),
                      const SizedBox(height: 10),
                      GridView.builder(
                        shrinkWrap: true,
                        physics: const NeverScrollableScrollPhysics(),
                        gridDelegate:
                            const SliverGridDelegateWithMaxCrossAxisExtent(
                              maxCrossAxisExtent: 160,
                              mainAxisSpacing: 12,
                              crossAxisSpacing: 12,
                              mainAxisExtent: 90,
                            ),
                        itemCount: kLocationOptions.length,
                        itemBuilder: (context, index) {
                          final loc = kLocationOptions[index];
                          final isSelected = _controller.currentLocation == loc;
                          return GestureDetector(
                            onTap: _controller.isSaving
                                ? null
                                : () => _selectLocation(loc),
                            child: Container(
                              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: Center(
                                child: Column(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    Container(
                                      padding: const EdgeInsets.all(6),
                                      decoration: BoxDecoration(
                                        color: isSelected
                                            ? Colors.white.withValues(
                                                alpha: 0.15,
                                              )
                                            : AppPalette.linen,
                                        shape: BoxShape.circle,
                                      ),
                                      child: Icon(
                                        kLocationIcons[loc] ??
                                            Icons.location_on_rounded,
                                        size: 16,
                                        color: isSelected
                                            ? Colors.white
                                            : AppPalette.ink,
                                      ),
                                    ),
                                    const SizedBox(height: 6),
                                    Text(
                                      loc,
                                      style: TextStyle(
                                        fontSize: 12,
                                        fontWeight: FontWeight.bold,
                                        color: isSelected
                                            ? Colors.white
                                            : AppPalette.ink,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          );
                        },
                      ),
                      const SizedBox(height: 24),
                      _sectionHeader(
                        '나를 찾은 학생 기록',
                        count: _controller.receivedCalls.length,
                      ),
                      const SizedBox(height: 10),
                      _buildReceivedCalls(),
                    ],
                  ),
                ),
        );
      },
    );
  }

  Widget _buildReceivedCalls() {
    if (_controller.receivedCalls.isEmpty) {
      return const Padding(
        padding: EdgeInsets.symmetric(vertical: 12),
        child: Text('아직 호출 기록이 없어요.', style: TextStyle(color: Colors.grey)),
      );
    }
    return Column(
      children: [
        for (final c in _controller.receivedCalls)
          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: [
                Container(
                  padding: const EdgeInsets.all(6),
                  decoration: BoxDecoration(
                    color: AppPalette.ink.withValues(alpha: 0.06),
                    shape: BoxShape.circle,
                  ),
                  child: const Icon(
                    Icons.notifications_active_rounded,
                    size: 16,
                    color: AppPalette.ink,
                  ),
                ),
                const SizedBox(width: 10),
                Expanded(
                  child: Text('${c['studentName']} 학생 · ${c['purpose']}'),
                ),
                Text(
                  '${c['createdAt'] ?? ''}',
                  style: TextStyle(color: Colors.grey[500], fontSize: 11),
                ),
              ],
            ),
          ),
      ],
    );
  }
}