// 📋 선생님용 "스마트기기 반출 대장" 화면 (UI 전용). 오늘 신청된 반출 요청을 보여주고 승인/거절한다.
// 서버 통신/상태는 lib/function/device_checkout_ledger_controller.dart가 담당한다.
import 'package:flutter/material.dart';
import '../function/device_checkout_ledger_controller.dart';

class DeviceCheckoutLedgerPage extends StatefulWidget {
  const DeviceCheckoutLedgerPage({super.key});

  @override
  State<DeviceCheckoutLedgerPage> createState() =>
      _DeviceCheckoutLedgerPageState();
}

class _DeviceCheckoutLedgerPageState extends State<DeviceCheckoutLedgerPage> {
  final DeviceCheckoutLedgerController _controller =
      DeviceCheckoutLedgerController();

  @override
  void initState() {
    super.initState();
    _controller.init();
  }

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

  Future<void> _approve(int id) async {
    final (_, message) = await _controller.approve(id);
    if (!mounted) return;
    ScaffoldMessenger.of(
      context,
    ).showSnackBar(SnackBar(content: Text(message)));
  }

  Future<void> _reject(int id) async {
    final (_, message) = await _controller.reject(id);
    if (!mounted) return;
    ScaffoldMessenger.of(
      context,
    ).showSnackBar(SnackBar(content: Text(message)));
  }

  ({Color color, String label}) _statusInfo(String status) {
    switch (status) {
      case 'PENDING':
        return (color: Colors.orange, label: '⏳ 대기중');
      case 'APPROVED':
        return (color: Colors.blue, label: '✅ 승인됨 (픽업 대기)');
      case 'IN_USE':
        return (color: Colors.teal, label: '📱 사용중');
      case 'RETURNED':
        return (color: Colors.grey, label: '↩️ 반납완료');
      case 'REJECTED':
        return (color: Colors.red, label: '🚫 거절됨');
      default:
        return (color: Colors.grey, label: status);
    }
  }

  String _timeRange(String start, String end) {
    // "YYYY-MM-DD HH:MM:SS" -> "HH:MM"
    String hm(String full) => full.length >= 16 ? full.substring(11, 16) : full;
    return '${hm(start)} ~ ${hm(end)}';
  }

  @override
  Widget build(BuildContext context) {
    return ListenableBuilder(
      listenable: _controller,
      builder: (context, _) {
        final requests = _controller.requests;
        final pendingCount = requests
            .where((r) => r['status'] == 'PENDING')
            .length;

        return Scaffold(
          backgroundColor: Colors.grey[100],
          appBar: AppBar(
            title: const Text(
              '📱 스마트기기 반출 대장',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            backgroundColor: Colors.teal,
            foregroundColor: Colors.white,
            elevation: 0,
            actions: [
              IconButton(
                icon: const Icon(Icons.refresh_rounded),
                onPressed: _controller.fetchAll,
                tooltip: '새로고침',
              ),
            ],
          ),
          body: _controller.isLoading
              ? const Center(child: CircularProgressIndicator())
              : Column(
                  children: [
                    if (pendingCount > 0)
                      Container(
                        width: double.infinity,
                        margin: const EdgeInsets.all(16),
                        padding: const EdgeInsets.symmetric(
                          horizontal: 16,
                          vertical: 10,
                        ),
                        decoration: BoxDecoration(
                          color: Colors.orange[100],
                          borderRadius: BorderRadius.circular(12),
                          border: Border.all(color: Colors.orange[400]!),
                        ),
                        child: Text(
                          '⏳ 승인 대기 중인 요청이 $pendingCount건 있습니다.',
                          style: TextStyle(
                            color: Colors.orange[900],
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    Expanded(
                      child: requests.isEmpty
                          ? const Center(
                              child: Text(
                                '오늘 신청된 반출 요청이 없습니다.',
                                style: TextStyle(color: Colors.grey),
                              ),
                            )
                          : ListView.builder(
                              padding: const EdgeInsets.symmetric(
                                horizontal: 16,
                                vertical: 8,
                              ),
                              itemCount: requests.length,
                              itemBuilder: (context, index) {
                                final r = requests[index];
                                final String status = r['status'];
                                final info = _statusInfo(status);
                                final bool isPending = status == 'PENDING';

                                return Card(
                                  elevation: 1,
                                  margin: const EdgeInsets.only(bottom: 10),
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(16),
                                    side: isPending
                                        ? BorderSide(color: Colors.orange[300]!)
                                        : BorderSide.none,
                                  ),
                                  child: Padding(
                                    padding: const EdgeInsets.all(16),
                                    child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Row(
                                          children: [
                                            Expanded(
                                              child: Text(
                                                '${r['studentName']} (${r['studentId']})',
                                                style: const TextStyle(
                                                  fontWeight: FontWeight.bold,
                                                  fontSize: 15,
                                                ),
                                              ),
                                            ),
                                            Container(
                                              padding:
                                                  const EdgeInsets.symmetric(
                                                    horizontal: 10,
                                                    vertical: 4,
                                                  ),
                                              decoration: BoxDecoration(
                                                color: info.color.withValues(
                                                  alpha: 0.12,
                                                ),
                                                borderRadius:
                                                    BorderRadius.circular(20),
                                              ),
                                              child: Text(
                                                info.label,
                                                style: TextStyle(
                                                  color: info.color,
                                                  fontWeight: FontWeight.bold,
                                                  fontSize: 12,
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),
                                        const SizedBox(height: 6),
                                        Text(
                                          '⏰ ${_timeRange(r['requestedStart'], r['requestedEnd'])}',
                                          style: TextStyle(
                                            color: Colors.grey[700],
                                            fontSize: 13,
                                          ),
                                        ),
                                        const SizedBox(height: 2),
                                        Text(
                                          '📝 ${r['purpose']}',
                                          style: TextStyle(
                                            color: Colors.grey[700],
                                            fontSize: 13,
                                          ),
                                        ),
                                        if (isPending) ...[
                                          const SizedBox(height: 12),
                                          Row(
                                            children: [
                                              Expanded(
                                                child: OutlinedButton(
                                                  onPressed:
                                                      _controller.isWorking
                                                      ? null
                                                      : () => _reject(r['id']),
                                                  style:
                                                      OutlinedButton.styleFrom(
                                                        foregroundColor:
                                                            Colors.red,
                                                        side: const BorderSide(
                                                          color: Colors.red,
                                                        ),
                                                      ),
                                                  child: const Text('거절'),
                                                ),
                                              ),
                                              const SizedBox(width: 8),
                                              Expanded(
                                                child: ElevatedButton(
                                                  onPressed:
                                                      _controller.isWorking
                                                      ? null
                                                      : () => _approve(r['id']),
                                                  style:
                                                      ElevatedButton.styleFrom(
                                                        backgroundColor:
                                                            Colors.teal,
                                                        foregroundColor:
                                                            Colors.white,
                                                      ),
                                                  child: const Text('승인'),
                                                ),
                                              ),
                                            ],
                                          ),
                                        ],
                                      ],
                                    ),
                                  ),
                                );
                              },
                            ),
                    ),
                  ],
                ),
        );
      },
    );
  }
}