import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../../../../core/theme/design_tokens.dart';

class CalendarEventDetailScreen extends StatelessWidget {
  const CalendarEventDetailScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF8FAFC),
      body: SafeArea(
        child: Column(
          children: [
            _buildHeader(context),
            Expanded(child: _buildDetailOverlay()),
            _buildInputContainer(),
          ],
        ),
      ),
    );
  }

  Widget _buildHeader(BuildContext context) {
    return SizedBox(
      height: 64,
      child: Padding(
        padding: const EdgeInsets.only(left: 16, right: 16, top: 12, bottom: 8),
        child: Row(
          children: [
            GestureDetector(
              onTap: () => Navigator.of(context).pop(),
              child: Container(
                width: 36,
                height: 36,
                decoration: BoxDecoration(
                  color: const Color(0xFFF8FAFF),
                  borderRadius: BorderRadius.circular(18),
                  border: Border.all(color: const Color(0xFFDEE7F6)),
                ),
                child: const Icon(
                  LucideIcons.chevronLeft,
                  size: 16,
                  color: AppColors.slate700,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildDetailOverlay() {
    return Padding(
      padding: const EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 12),
      child: Container(
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(24),
          border: Border.all(color: const Color(0xFFD8E3F5)),
        ),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _buildTitleRow(),
              const SizedBox(height: 14),
              Container(height: 1, color: const Color(0xFFE5E7EB)),
              const SizedBox(height: 14),
              _buildDetailField('日期', '2026年2月9日 周一'),
              const SizedBox(height: 14),
              _buildDetailField('时间范围', '16:00 - 17:30'),
              const SizedBox(height: 14),
              _buildDetailField('提醒时间', '开始前30分钟'),
              const SizedBox(height: 14),
              _buildColorField(),
              const SizedBox(height: 14),
              _buildDetailField('邀请人', 'Qiuzh'),
              const SizedBox(height: 14),
              _buildNotesField(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildTitleRow() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Row(
          children: [
            const Icon(
              LucideIcons.calendarCheck2,
              size: 18,
              color: AppColors.blue600,
            ),
            const SizedBox(width: 10),
            const Text(
              '购票提醒',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.w700,
                color: AppColors.slate900,
              ),
            ),
          ],
        ),
        Row(
          children: [
            Container(
              width: 36,
              height: 36,
              decoration: BoxDecoration(
                color: const Color(0xFFF8FAFF),
                borderRadius: BorderRadius.circular(12),
                border: Border.all(color: const Color(0xFFDCE5F4)),
              ),
              child: const Icon(
                LucideIcons.pencil,
                size: 18,
                color: AppColors.slate600,
              ),
            ),
            const SizedBox(width: 8),
            Container(
              width: 36,
              height: 36,
              decoration: BoxDecoration(
                color: const Color(0xFFFFF1F2),
                borderRadius: BorderRadius.circular(12),
                border: Border.all(color: const Color(0xFFFECACA)),
              ),
              child: const Icon(
                LucideIcons.trash2,
                size: 18,
                color: AppColors.red500,
              ),
            ),
          ],
        ),
      ],
    );
  }

  Widget _buildDetailField(String label, String value) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          label,
          style: const TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w600,
            color: AppColors.slate400,
          ),
        ),
        const SizedBox(height: 4),
        Text(
          value,
          style: const TextStyle(
            fontSize: 15,
            fontWeight: FontWeight.w600,
            color: AppColors.slate900,
          ),
        ),
      ],
    );
  }

  Widget _buildColorField() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          '日程颜色',
          style: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w600,
            color: AppColors.slate400,
          ),
        ),
        const SizedBox(height: 6),
        Row(
          children: [
            _buildColorOption(const Color(0xFF3B82F6), isSelected: true),
            const SizedBox(width: 10),
            _buildColorOption(const Color(0xFF8B5CF6)),
            const SizedBox(width: 10),
            _buildColorOption(const Color(0xFF10B981)),
            const SizedBox(width: 10),
            _buildColorOption(const Color(0xFFF59E0B)),
            const SizedBox(width: 10),
            _buildColorOption(const Color(0xFFEF4444)),
          ],
        ),
      ],
    );
  }

  Widget _buildColorOption(Color color, {bool isSelected = false}) {
    return Container(
      width: 28,
      height: 28,
      decoration: BoxDecoration(
        color: color,
        shape: BoxShape.circle,
        border: isSelected
            ? Border.all(color: AppColors.slate900, width: 2)
            : null,
      ),
      child: isSelected
          ? const Icon(Icons.check, size: 16, color: Colors.white)
          : null,
    );
  }

  Widget _buildNotesField() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          '备注',
          style: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w600,
            color: AppColors.slate400,
          ),
        ),
        const SizedBox(height: 6),
        Container(
          width: double.infinity,
          padding: const EdgeInsets.all(12),
          decoration: BoxDecoration(
            color: const Color(0xFFFDFEFF),
            borderRadius: BorderRadius.circular(12),
            border: Border.all(color: const Color(0xFFDCE5F4)),
          ),
          child: const Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '记得提前准备好身份证',
                style: TextStyle(fontSize: 14, color: AppColors.slate700),
              ),
              SizedBox(height: 8),
              Text(
                '出发前检查车票信息',
                style: TextStyle(fontSize: 14, color: AppColors.slate700),
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildInputContainer() {
    return Container(
      height: 80,
      padding: const EdgeInsets.all(16),
      color: const Color(0xFFF8FAFC),
      child: Row(
        children: [
          Container(
            width: 36,
            height: 36,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(18),
              border: Border.all(color: const Color(0xFFE2E8F0)),
            ),
            child: const Icon(
              LucideIcons.plus,
              size: 20,
              color: AppColors.slate500,
            ),
          ),
          const SizedBox(width: 8),
          Expanded(
            child: Container(
              height: 48,
              padding: const EdgeInsets.symmetric(horizontal: 16),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(24),
              ),
              child: Row(
                children: [
                  const Expanded(
                    child: Text(
                      '输入消息...',
                      style: TextStyle(fontSize: 14, color: AppColors.slate400),
                    ),
                  ),
                  const Icon(
                    LucideIcons.mic,
                    size: 20,
                    color: AppColors.slate500,
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
