// contact_page.dart — 联系我们（desktop/tablet 一级页）
//
// 对照 ui_kits/desktop/dapp.jsx DContactView：渠道卡列表 + 服务时间。
// 演示渠道占位见 design/CLAUDE.md §8。
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import '../l10n/app_text.dart';
import '../pangolin_theme.dart';
import '../state/app_providers.dart';
import '../widgets/pangolin_icons.dart';

class ContactPage extends ConsumerWidget {
  const ContactPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final c = context.pangolin;
    final t = ref.watch(appTextProvider);

    final channels = <({IconData icon, String name, String sub, bool accent})>[
      (icon: PangolinIcons.send, name: 'Telegram', sub: '@PangolinVPN_bot', accent: true),
      (icon: PangolinIcons.messageCircle, name: 'LINE', sub: '@pangolinvpn', accent: false),
      (icon: PangolinIcons.mail, name: t.contactEmail, sub: 'support@pangolin.vpn', accent: false),
      (icon: PangolinIcons.shoppingBag, name: t.contactStore, sub: 'shop.pangolin.vpn', accent: false),
    ];

    return SingleChildScrollView(
      padding: const EdgeInsets.fromLTRB(32, 16, 32, 24),
      child: ConstrainedBox(
        constraints: const BoxConstraints(maxWidth: 560),
        child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
          Text(t.contactIntro, style: PangolinText.sm.copyWith(color: c.fg2)),
          const SizedBox(height: 16),
          for (final ch in channels) ...[
            _ChannelCard(channel: ch),
            const SizedBox(height: 10),
          ],
          const SizedBox(height: 6),
          _HoursCard(t: t),
        ]),
      ),
    );
  }
}

class _ChannelCard extends StatelessWidget {
  const _ChannelCard({required this.channel});
  final ({IconData icon, String name, String sub, bool accent}) channel;

  @override
  Widget build(BuildContext context) {
    final c = context.pangolin;
    return Container(
      padding: const EdgeInsets.all(14),
      decoration: BoxDecoration(
        color: c.surface,
        border: Border.all(color: c.border),
        borderRadius: BorderRadius.circular(PangolinRadius.lg),
        boxShadow: PangolinShadow.sm,
      ),
      child: Row(children: [
        Container(
          width: 38,
          height: 38,
          decoration: BoxDecoration(
            color: channel.accent ? c.accentSubtle : c.bgSubtle,
            borderRadius: BorderRadius.circular(PangolinRadius.md),
          ),
          child: Icon(channel.icon, size: 18, color: channel.accent ? c.accent : c.fg2),
        ),
        const SizedBox(width: 12),
        Expanded(
          child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
            Text(channel.name, style: PangolinText.body.copyWith(color: c.fg1, fontWeight: FontWeight.w600)),
            Text(channel.sub, style: PangolinText.caption.copyWith(color: c.fg3)),
          ]),
        ),
        Icon(PangolinIcons.chevronRight, size: 18, color: c.fg3),
      ]),
    );
  }
}

class _HoursCard extends StatelessWidget {
  const _HoursCard({required this.t});
  final AppText t;

  @override
  Widget build(BuildContext context) {
    final c = context.pangolin;
    return Container(
      padding: const EdgeInsets.all(14),
      decoration: BoxDecoration(
        color: c.bgSubtle,
        borderRadius: BorderRadius.circular(PangolinRadius.lg),
      ),
      child: Row(children: [
        Icon(PangolinIcons.clock, size: 16, color: c.accent),
        const SizedBox(width: 10),
        Expanded(
          child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
            Text(t.contactHoursTitle, style: PangolinText.sm.copyWith(color: c.fg2, fontWeight: FontWeight.w600)),
            Text(t.contactHours, style: PangolinText.caption.copyWith(color: c.fg3)),
          ]),
        ),
      ]),
    );
  }
}