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 buildFlispStatsCard(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 BuildContext context,
  required FlispTab currentTab,
  required ValueChanged<FlispTab> onTabChanged,
}) {
  return Container(
    padding: EdgeInsets.all(8),
    child: buildToggleSwitch(
      context: context,
      currentTab: currentTab,
      tabValues: FlispTab.values,
      labels: FlispTab.values.map((e) => e.label).toList(),
      onTabChanged: onTabChanged,
    ),
  );
}

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) {
      return _buildFlispItem(
        context: context,
        flisp: flisps[index],
        onEdit: onEdit,
        onDelete: onDelete,
      );
    },
  );
}

Widget _buildFlispContent(BuildContext context, Flisp flisp) {
  return RichText(
    text: TextSpan(
      text: flisp.content,
      style: TextStyle(
        fontFamily: 'CustomFont',
        color: Theme.of(context).colorScheme.onSurface,
        fontSize: 16,
      ),
    ),
  );
}

Widget _buildDeleteImage(VoidCallback? onDelete) {
  return Positioned(
    top: -8,
    right: 0,
    child: GestureDetector(
      onTap: onDelete,
      child: Container(
        width: 24,
        height: 24,
        decoration: BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
          boxShadow: [
            BoxShadow(
              color: Colors.black.withAlpha(10),
              blurRadius: 4,
              offset: Offset(0, 2),
            ),
          ],
        ),
        child: Icon(Icons.close, color: Colors.white, size: 16),
      ),
    ),
  );
}

Widget buildFlispImage({
  required Flisp flisp,
  bool showDelete = false,
  VoidCallback? onDelete,
}) {
  return Container(
    height: 200,
    margin: const EdgeInsets.only(bottom: 8),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(8),
      image: DecorationImage(
        image: NetworkImage(flisp.imageUrl),
        fit: BoxFit.contain,
      ),
    ),
    child: Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        color: Colors.black.withAlpha(10),
      ),
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          Align(
            alignment: Alignment.topRight,
            child: const Padding(
              padding: EdgeInsets.all(6.0),
              child: Icon(Icons.image, color: Colors.white, size: 20),
            ),
          ),
          if (showDelete) _buildDeleteImage(onDelete),
        ],
      ),
    ),
  );
}

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.updateTime),
    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 buildDismissible(
    context: context,
    id: flisp.id,
    onDelete: () => onDelete(flisp),
    child: BuildCard(
      child: InkWell(
        onTap: () => onEdit(flisp),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildFlispContent(context, flisp),
            const SizedBox(height: 8),
            if (hasImage) buildFlispImage(flisp: flisp, showDelete: false),
            const SizedBox(height: 4),
            if (hasVideo) _buildFlispVideo(flisp),
            const SizedBox(height: 4),
            _buildFlispSuffix(flisp),
          ],
        ),
      ),
    ),
  );
}

// 空状态
Widget buildEmptyState(BuildContext context) {
  final colors = Theme.of(context).colorScheme;

  return Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(Icons.flash_on, size: 80, color: colors.primary),
        const SizedBox(height: 16),
        Text(
          '📝 还没有该类别闪灵\n点击➕号添加第一个灵感吧～',
          textAlign: TextAlign.center,
          style: TextStyle(color: colors.onSurface, fontSize: 16),
        ),
      ],
    ),
  );
}