import 'package:flisp_app/models/flisp.dart';
import 'package:flisp_app/widgets/common.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:toggle_switch/toggle_switch.dart';

Widget buildStatsCard(List<Flisp> flisps) {
  int totalCount = flisps.length;

  int lifeCount = flisps.where((flisp) => flisp.tag == FlispTag.life).length;
  int workCount = flisps.where((flisp) => flisp.tag == FlispTag.work).length;
  int studyCount = flisps.where((flisp) => flisp.tag == FlispTag.study).length;

  return buildCard(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        _buildStatItem('总计', totalCount, Colors.orange),
        _buildStatItem('生活', lifeCount, FlispTag.life.color),
        _buildStatItem('工作', workCount, FlispTag.work.color),
        _buildStatItem('学习', studyCount, FlispTag.study.color),
      ],
    ),
  );
}

Widget _buildStatItem(String label, int count, Color color) {
  return Column(
    children: [
      Text(
        count.toString(),
        style: TextStyle(
          fontSize: 24,
          fontWeight: FontWeight.bold,
          color: color,
        ),
      ),
      const SizedBox(height: 4),
      Text(label, style: const TextStyle(fontSize: 12, color: Colors.grey)),
    ],
  );
}

Widget buildTabs({
  required FlispTab currentTab,
  required ValueChanged<FlispTab> onTabChanged,
}) {
  return Container(
    padding: EdgeInsets.all(8),
    child: ToggleSwitch(
      minWidth: 90.0,
      minHeight: 40.0,
      initialLabelIndex: FlispTab.values.indexOf(currentTab),
      totalSwitches: FlispTab.values.length,
      labels: FlispTab.values.map((e) => e.label).toList(),
      activeBgColor: [Colors.orange.shade600],
      activeFgColor: Colors.white,
      inactiveBgColor: Colors.grey.shade200,
      inactiveFgColor: Colors.grey.shade700,
      cornerRadius: 12.0,
      customTextStyles: [TextStyle(fontSize: 12, fontWeight: FontWeight.w500)],
      onToggle: (index) {
        if (index != null) {
          onTabChanged(FlispTab.values[index]);
        }
      },
    ),
  );
}

Widget buildFlispList({
  required BuildContext context,
  required List<Flisp> flisps,
  required ValueChanged<Flisp> onEdit,
  required ValueChanged<Flisp> onDelete,
}) {
  return ListView.separated(
    itemCount: flisps.length,
    separatorBuilder: (context, index) => SizedBox(height: 8),
    itemBuilder: (context, index) {
      final flisp = flisps[index];
      return _buildFlispItem(
        context: context,
        flisp: flisp,
        onEdit: onEdit,
        onDelete: onDelete,
      );
    },
  );
}

Widget _buildFlispContent(Flisp flisp) {
  return RichText(
    text: TextSpan(
      text: flisp.content,
      style: const TextStyle(color: Colors.black87, fontSize: 16),
    ),
  );
}

Widget _buildFlispImage(Flisp flisp) {
  return Container(
    height: 150,
    margin: const EdgeInsets.only(bottom: 8),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(8),
      image: DecorationImage(
        image: NetworkImage(flisp.imageUrl),
        fit: BoxFit.cover,
      ),
    ),
    child: Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        color: Colors.black.withOpacity(0.3),
      ),
      alignment: Alignment.topRight,
      child: const Padding(
        padding: EdgeInsets.all(6.0),
        child: Icon(Icons.image, color: Colors.white, size: 20),
      ),
    ),
  );
}

Widget _buildFlispVideo(Flisp flisp) {
  return Container(
    height: 120,
    margin: const EdgeInsets.only(bottom: 8),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(8),
      color: Colors.grey[300],
    ),
    child: Stack(
      alignment: Alignment.center,
      children: [
        // 视频缩略图背景
        Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            color: Colors.blue[100],
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [Colors.blue[200]!, Colors.blue[400]!],
            ),
          ),
        ),
        // 播放按钮
        const CircleAvatar(
          backgroundColor: Colors.white,
          radius: 24,
          child: Icon(Icons.play_arrow, color: Colors.red, size: 36),
        ),
        // 视频标识
        const Positioned(
          top: 8,
          right: 8,
          child: Icon(Icons.videocam, color: Colors.red, size: 20),
        ),
        // 视频时长
        const Positioned(
          bottom: 8,
          right: 8,
          child: Text(
            '02:30',
            style: TextStyle(
              color: Colors.white,
              fontSize: 12,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ],
    ),
  );
}

Widget buildFlispTag(Flisp flisp) {
  return Container(
    padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
    decoration: BoxDecoration(
      color: flisp.tag.color.withAlpha(30),
      borderRadius: BorderRadius.circular(8),
      border: Border.all(color: flisp.tag.color.withAlpha(60)),
    ),
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          width: 14,
          height: 14,
          decoration: BoxDecoration(
            color: flisp.tag.color,
            shape: BoxShape.circle,
          ),
          child: Icon(flisp.tag.icon, size: 8, color: Colors.white),
        ),
        SizedBox(width: 6),
        Text(
          flisp.tag.label,
          style: TextStyle(
            fontSize: 12,
            color: flisp.tag.color,
            fontWeight: FontWeight.w500,
          ),
        ),
      ],
    ),
  );
}

Widget buildFlispTime(Flisp flisp) {
  return Text(
    DateFormat('yyyy-MM-dd HH:mm:ss').format(flisp.createTime),
    style: TextStyle(fontSize: 12, color: Colors.grey),
  );
}

Widget _buildFlispSuffix(Flisp flisp) {
  return Row(
    children: [buildFlispTag(flisp), const Spacer(), buildFlispTime(flisp)],
  );
}

Widget _buildFlispItem({
  required BuildContext context,
  required Flisp flisp,
  required ValueChanged<Flisp> onEdit,
  required ValueChanged<Flisp> onDelete,
}) {
  final hasImage = flisp.imageUrl.isNotEmpty;
  final hasVideo = flisp.videoUrl.isNotEmpty;

  return Dismissible(
    key: ValueKey(flisp.id),
    direction: DismissDirection.endToStart,
    background: _buildDismissBackground(),
    confirmDismiss: (direction) async {
      // 这里实现二次确认
      return await _showDeleteConfirmationDialog(context);
    },
    onDismissed: (direction) {
      onDelete(flisp);
    },
    child: Container(
      decoration: buildBoxDecoration(),
      padding: EdgeInsets.all(16),
      child: InkWell(
        onTap: () => onEdit(flisp),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildFlispContent(flisp),
            const SizedBox(height: 8),
            if (hasImage) _buildFlispImage(flisp),
            const SizedBox(height: 4),
            if (hasVideo) _buildFlispVideo(flisp),
            const SizedBox(height: 4),
            _buildFlispSuffix(flisp),
          ],
        ),
      ),
    ),
  );
}

// 确认对话框
Future<bool?> _showDeleteConfirmationDialog(BuildContext context) async {
  return showDialog<bool>(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: const Text('确认删除'),
        backgroundColor: Colors.white,
        content: const Text('确定要删除这个项目吗？'),
        actions: [
          TextButton(
            onPressed: () => Navigator.of(context).pop(false),
            child: const Text('取消'),
          ),
          TextButton(
            onPressed: () => Navigator.of(context).pop(true),
            child: const Text('删除', style: TextStyle(color: Colors.red)),
          ),
        ],
      );
    },
  );
}

Widget _buildDismissBackground() {
  return Container(
    color: Colors.red,
    alignment: Alignment.centerRight,
    padding: const EdgeInsets.only(right: 20),
    child: const Icon(Icons.delete, color: Colors.white, size: 24),
  );
}

// 空状态
Widget buildEmptyState() {
  return Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(Icons.flash_on, size: 80, color: Colors.orange.shade600),
        Text(
          '📝 还没有闪灵\n点击➕号添加第一个灵感吧～',
          textAlign: TextAlign.center,
          style: TextStyle(color: Colors.orange.shade600),
        ),
      ],
    ),
  );
}