import 'package:flutter/material.dart';

/// 供水管理 Tab
class WaterSupplyTab extends StatelessWidget {
  const WaterSupplyTab({super.key});

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final colorScheme = theme.colorScheme;

    return RefreshIndicator(
      onRefresh: () async {
        // TODO: 刷新数据
        await Future.delayed(const Duration(seconds: 1));
      },
      child: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          // ---------- 概览卡片 ----------
          _OverviewCard(
            title: '今日供水量',
            value: '12,580 m³',
            subtitle: '较昨日 ↑ 3.2%',
            icon: Icons.water_drop,
            color: colorScheme.primary,
          ),
          const SizedBox(height: 16),

          // ---------- 快捷操作 ----------
          Text('快捷操作', style: theme.textTheme.titleMedium),
          const SizedBox(height: 12),
          Wrap(
            spacing: 12,
            runSpacing: 12,
            children: [
              _ActionChip(
                icon: Icons.sensors,
                label: '实时监测',
                onTap: () => Navigator.pushNamed(context, '/water/monitor'),
              ),
              _ActionChip(
                icon: Icons.warning_amber,
                label: '报警推送',
                onTap: () => Navigator.pushNamed(context, '/water/alert'),
              ),
              _ActionChip(
                icon: Icons.assignment_ind,
                label: '今日值班',
                onTap: () => Navigator.pushNamed(context, '/water/dispatch'),
              ),
              _ActionChip(
                icon: Icons.science,
                label: '水质查看',
                onTap: () => Navigator.pushNamed(context, '/water/quality'),
              ),
            ],
          ),
          const SizedBox(height: 24),

          // ---------- 实时数据 ----------
          Text('实时监测', style: theme.textTheme.titleMedium),
          const SizedBox(height: 12),
          _MonitorTile(
            name: '1号泵站',
            status: '运行中',
            pressure: '0.35 MPa',
            flow: '120 m³/h',
            isOnline: true,
          ),
          _MonitorTile(
            name: '2号泵站',
            status: '运行中',
            pressure: '0.32 MPa',
            flow: '98 m³/h',
            isOnline: true,
          ),
          _MonitorTile(
            name: '3号泵站',
            status: '维护中',
            pressure: '—',
            flow: '—',
            isOnline: false,
          ),
          _MonitorTile(
            name: '清水池',
            status: '正常',
            pressure: '—',
            flow: '水位 4.2m',
            isOnline: true,
          ),
        ],
      ),
    );
  }
}

class _OverviewCard extends StatelessWidget {
  final String title;
  final String value;
  final String subtitle;
  final IconData icon;
  final Color color;

  const _OverviewCard({
    required this.title,
    required this.value,
    required this.subtitle,
    required this.icon,
    required this.color,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 0,
      color: color.withAlpha(25),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Row(
          children: [
            Container(
              width: 56,
              height: 56,
              decoration: BoxDecoration(
                color: color.withAlpha(50),
                shape: BoxShape.circle,
              ),
              child: Icon(icon, color: color, size: 28),
            ),
            const SizedBox(width: 16),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(title, style: const TextStyle(fontSize: 14, color: Colors.grey)),
                  const SizedBox(height: 4),
                  Text(value, style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: color)),
                  const SizedBox(height: 4),
                  Text(subtitle, style: const TextStyle(fontSize: 12, color: Colors.grey)),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _ActionChip extends StatelessWidget {
  final IconData icon;
  final String label;
  final VoidCallback onTap;

  const _ActionChip({required this.icon, required this.label, required this.onTap});

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      borderRadius: BorderRadius.circular(12),
      child: Container(
        width: 80,
        padding: const EdgeInsets.symmetric(vertical: 12),
        decoration: BoxDecoration(
          color: Colors.grey.shade100,
          borderRadius: BorderRadius.circular(12),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(icon, color: Colors.blue.shade700),
            const SizedBox(height: 6),
            Text(label, style: const TextStyle(fontSize: 12)),
          ],
        ),
      ),
    );
  }
}

class _MonitorTile extends StatelessWidget {
  final String name;
  final String status;
  final String pressure;
  final String flow;
  final bool isOnline;

  const _MonitorTile({
    required this.name,
    required this.status,
    required this.pressure,
    required this.flow,
    required this.isOnline,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.only(bottom: 8),
      child: ListTile(
        leading: CircleAvatar(
          backgroundColor: isOnline ? Colors.green.shade100 : Colors.grey.shade200,
          child: Icon(
            Icons.sensors,
            color: isOnline ? Colors.green : Colors.grey,
          ),
        ),
        title: Text(name),
        subtitle: Text('压力: $pressure | 流量: $flow'),
        trailing: Container(
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
          decoration: BoxDecoration(
            color: isOnline ? Colors.green.shade100 : Colors.orange.shade100,
            borderRadius: BorderRadius.circular(8),
          ),
          child: Text(
            status,
            style: TextStyle(
              fontSize: 12,
              color: isOnline ? Colors.green.shade800 : Colors.orange.shade800,
            ),
          ),
        ),
      ),
    );
  }
}