import 'dart:async';
import 'dart:math' as math;

import 'package:flutter/material.dart';
import 'package:flutter/physics.dart';
import 'package:flutter/scheduler.dart';

import '../core/core_controller.dart';
import '../core/models.dart';
import '../l10n/app_localizations.dart';
import 'format.dart';
import 'signin_dialog.dart';
import 'widgets.dart';

/// Shared pieces of the three phone designs (Pixel, Portal, Old) ported
/// from FoxyVPN's Android app: the state they all read, the morphing
/// connect core at their center, and the rows they share (server,
/// accounts, speeds, error). The designs' own files only arrange these.
/// Nothing here decides anything about the VPN itself: every action is
/// the core's, through the same controller calls the other homes make.

/// The connection state in the phone designs' terms, derived exactly as
/// the Foxy home derives it: on/off from the mode in use, connected only
/// when the engine runs and this computer's traffic goes through it.
class ZedHomeData {
  ZedHomeData(this.core, this.status, this.l);

  final CoreController core;
  final CoreStatus status;
  final AppLocalizations l;

  bool get canSwitch => status.systemProxySupported;

  bool get on =>
      canSwitch
          ? status.systemProxySet || status.tunMode
          : status.state.phase != Phase.off;

  bool get running => status.state.phase == Phase.running;

  /// Connected: the engine runs and the computer uses the VPN.
  bool get live => running && (status.computerUsesVpn || !canSwitch);

  /// Connecting: starting, or on but held up (waiting for a network or
  /// an account), or the switch itself is being changed.
  bool get busy =>
      !live &&
      (status.state.phase == Phase.starting ||
          status.state.phase == Phase.waiting ||
          core.switchingProxy);

  PhaseLook get look => PhaseLook.of(l, status);

  HomePlace get place => homeLocation(l, status, connected: live);

  int get total => status.totalAccounts;

  int get ready => status.readyAccounts;

  /// The last connection test's total time as the phone's ping; the PC
  /// core measures no live ping, so the test stands in for it.
  int? get pingMs {
    final t = status.lastTest;
    return t != null && t.ok ? t.totalMs : null;
  }

  bool get hasError => status.state.phase == Phase.error;

  String get errorText =>
      look.hint.isNotEmpty ? look.hint : status.state.message;

  /// When the running phase began: the connected session's start.
  DateTime? get since => live ? status.state.since : null;

  List<Account> get accounts => core.accounts?.accounts ?? const [];

  /// The server row's second line: the exit city while connected, else
  /// the invitation to choose. Mozilla's locations name no host to show.
  String get locationDetail {
    final p = status.proxy;
    if (live && p != null && p.cityName.isNotEmpty) return p.cityName;
    return l.zedTapToChooseLocation;
  }

  /// Where a design's connect button goes with no accounts yet: the
  /// accounts page, as the Foxy home does.
  void openAccounts(BuildContext context, VoidCallback? callback) {
    if (callback != null) {
      callback();
    } else {
      showSignInDialog(context, core);
    }
  }

  /// The connect button pressed, with the Foxy home's exact behavior.
  void toggle(BuildContext context, VoidCallback? onOpenAccounts) {
    if (status.totalAccounts == 0) {
      openAccounts(context, onOpenAccounts);
      return;
    }
    runShowingErrors(context, () async {
      if (status.systemProxySupported) {
        await core.setSystemProxy(on ? 'clear' : 'set');
      } else {
        await core.setOn(!on);
      }
      if (!on) unawaited(core.runTest().catchError((_) {}));
    });
  }
}

/// The phone designs' elapsed time: hours when there are any, else
/// minutes, both padded (`1:02:03`, `04:05`).
String formatZedElapsed(Duration d) {
  final s = d.inSeconds < 0 ? 0 : d.inSeconds;
  final h = s ~/ 3600;
  final m = (s % 3600) ~/ 60;
  final ss = s % 60;
  String two(int v) => v.toString().padLeft(2, '0');
  return h > 0 ? '$h:${two(m)}:${two(ss)}' : '${two(m)}:${two(ss)}';
}

/// The elapsed time since [since], ticking each second on its own, as
/// the Portal and Old designs show it under the title. Nothing when
/// there is no session start to count from.
class ZedElapsedText extends StatefulWidget {
  const ZedElapsedText({
    super.key,
    required this.since,
    this.style,
    this.color,
    this.prefix = '',
  });

  final DateTime? since;
  final TextStyle? style;
  final Color? color;
  final String prefix;

  @override
  State<ZedElapsedText> createState() => _ZedElapsedTextState();
}

class _ZedElapsedTextState extends State<ZedElapsedText> {
  Timer? _timer;

  @override
  void initState() {
    super.initState();
    _timer = Timer.periodic(const Duration(seconds: 1), (_) {
      if (mounted) setState(() {});
    });
  }

  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final since = widget.since;
    if (since == null) return const SizedBox.shrink();
    return Text(
      '${widget.prefix}${formatZedElapsed(DateTime.now().difference(since))}',
      style: (widget.style ?? const TextStyle()).copyWith(
        color: widget.color,
        fontFeatures: const [FontFeature.tabularFigures()],
      ),
    );
  }
}

// ─── The connect core ─────────────────────────────────────────────────────

/// A door shape as the phone's core draws it: a rounded polygon read as a
/// radius around the circle, deepest at [depth] over [lobes] waves.
class _DoorShape {
  const _DoorShape(this.lobes, this.depth);

  final int lobes;
  final double depth;

  double radius(double theta) => 1 - depth + depth * math.cos(lobes * theta);
}

/// Idle: the twelve-sided cookie. Connected: the soft burst.
const _cookie12 = _DoorShape(12, 0.055);
const _softBurst = _DoorShape(12, 0.15);

/// The shapes the core cycles through while connecting, one every
/// 0.72 s, in the phone's order.
const _searchShapes = <_DoorShape>[
  _softBurst,
  _DoorShape(9, 0.09),
  _DoorShape(5, 0.16),
  _DoorShape(2, 0.12),
  _DoorShape(16, 0.13),
  _DoorShape(4, 0.15),
  _DoorShape(1, 0.06),
];

const _samples = 180;

List<double> _radiiOf(_DoorShape shape) => List<double>.generate(
  _samples,
  (i) => shape.radius(i / _samples * 2 * math.pi),
);

/// The phone's connect core: a morphing gradient door. Idle it rests as
/// a cookie polygon; connecting, it cycles shapes every 0.72 s under a
/// sweep gradient, turning fast; connected, it settles into the soft
/// burst and turns slowly, showing the session's elapsed time where
/// the power sign was. A burst of bits celebrates a fresh connection.
/// All motion runs only while connecting or connected, as on the phone.
class ZedConnectCore extends StatefulWidget {
  const ZedConnectCore({
    super.key,
    required this.live,
    required this.busy,
    required this.onToggle,
    this.size = 208,
    this.since,
  });

  final bool live;
  final bool busy;
  final VoidCallback onToggle;

  /// The door's box; the Android door is the content width's 0.52,
  /// kept between 116 and 208.
  final double size;

  /// When the session began, for the center's elapsed time.
  final DateTime? since;

  @override
  State<ZedConnectCore> createState() => _ZedConnectCoreState();
}

class _ZedConnectCoreState extends State<ZedConnectCore>
    with TickerProviderStateMixin {
  late final Ticker _ticker;
  late final AnimationController _morph;
  late final AnimationController _burst;
  double _seconds = 0;
  Duration _lastTick = Duration.zero;
  bool _pressed = false;
  bool _wasBusy = false;
  DateTime? _liveSince;

  List<double> _fromRadii = _radiiOf(_cookie12);
  List<double> _toRadii = _radiiOf(_cookie12);
  _DoorShape _targetShape = _cookie12;

  @override
  void initState() {
    super.initState();
    _ticker = createTicker(_onTick);
    _morph = AnimationController.unbounded(vsync: this)
      ..addListener(() => setState(() {}))
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          _fromRadii = _toRadii;
        }
      });
    _burst = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 950),
    )..value = 1;
    _wasBusy = widget.busy;
    if (widget.live) _liveSince = DateTime.now();
    _syncClock();
  }

  @override
  void didUpdateWidget(ZedConnectCore old) {
    super.didUpdateWidget(old);
    if (widget.live && !old.live) {
      _liveSince = DateTime.now();
      if (_wasBusy) _burst.forward(from: 0);
    }
    if (widget.busy) _wasBusy = true;
    if (!widget.live && !widget.busy) _wasBusy = false;
    _syncClock();
    _syncShape();
  }

  @override
  void dispose() {
    _ticker.dispose();
    _morph.dispose();
    _burst.dispose();
    super.dispose();
  }

  /// The clock runs only while connecting or connected.
  void _syncClock() {
    final active = widget.live || widget.busy;
    if (active && !_ticker.isActive) {
      _lastTick = Duration.zero;
      _ticker.start();
    } else if (!active && _ticker.isActive) {
      _ticker.stop();
    }
  }

  void _onTick(Duration elapsed) {
    final delta = (elapsed - _lastTick).inMicroseconds / 1e6;
    _lastTick = elapsed;
    setState(() => _seconds += delta);
    if (widget.busy) _syncShape();
  }

  _DoorShape get _desiredShape {
    if (widget.live) return _softBurst;
    if (widget.busy) {
      final step = (_seconds / 0.72).floor() % _searchShapes.length;
      return _searchShapes[step];
    }
    return _cookie12;
  }

  void _syncShape() {
    final shape = _desiredShape;
    if (identical(shape, _targetShape)) return;
    _fromRadii = _currentRadii();
    _targetShape = shape;
    _toRadii = _radiiOf(shape);
    _morph
      ..stop()
      ..value = 0
      ..animateWith(
        SpringSimulation(
          const SpringDescription(mass: 1, stiffness: 260, damping: 19.4),
          0,
          1,
          0,
        ),
      );
  }

  List<double> _currentRadii() {
    final t = _morph.value.clamp(-0.1, 1.1);
    return List<double>.generate(
      _samples,
      (i) => _fromRadii[i] + (_toRadii[i] - _fromRadii[i]) * t,
    );
  }

  @override
  Widget build(BuildContext context) {
    final scheme = Theme.of(context).colorScheme;
    final live = widget.live;
    final busy = widget.busy;
    final rotation = busy
        ? _seconds * 150 * math.pi / 180
        : live
        ? _seconds * 9 * math.pi / 180
        : 0.0;
    final end = live || busy ? scheme.tertiary : scheme.primary;
    final since = widget.since ?? _liveSince;
    final size = widget.size;
    return GestureDetector(
      onTap: widget.onToggle,
      onTapDown: (_) => setState(() => _pressed = true),
      onTapUp: (_) => setState(() => _pressed = false),
      onTapCancel: () => setState(() => _pressed = false),
      child: AnimatedScale(
        scale: _pressed ? 0.9 : 1,
        duration: const Duration(milliseconds: 140),
        child: SizedBox.square(
          dimension: size,
          child: Stack(
            clipBehavior: Clip.none,
            alignment: Alignment.center,
            children: [
              CustomPaint(
                size: Size.square(size),
                painter: _DoorPainter(
                  radii: _currentRadii(),
                  rotation: rotation,
                  sweep: busy,
                  start: scheme.primary,
                  end: end,
                ),
              ),
              AnimatedSwitcher(
                duration: const Duration(milliseconds: 260),
                reverseDuration: const Duration(milliseconds: 200),
                child: live
                    ? Text(
                        since == null
                            ? ''
                            : formatZedElapsed(
                                DateTime.now().difference(since),
                              ),
                        key: const ValueKey('elapsed'),
                        maxLines: 1,
                        softWrap: false,
                        style: TextStyle(
                          fontSize: size * 0.14,
                          fontWeight: FontWeight.w700,
                          color: scheme.onPrimary,
                          fontFeatures: const [FontFeature.tabularFigures()],
                        ),
                      )
                    : Icon(
                        Icons.power_settings_new_rounded,
                        key: const ValueKey('power'),
                        size: size * 0.32,
                        color: scheme.onPrimary,
                      ),
              ),
              Positioned.fill(
                child: AnimatedBuilder(
                  animation: _burst,
                  builder: (context, _) => CustomPaint(
                    painter: _BurstPainter(
                      progress: _burst.value,
                      colors: [
                        scheme.primary,
                        scheme.tertiary,
                        scheme.secondary,
                        scheme.tertiaryContainer,
                        scheme.secondaryContainer,
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _DoorPainter extends CustomPainter {
  _DoorPainter({
    required this.radii,
    required this.rotation,
    required this.sweep,
    required this.start,
    required this.end,
  });

  final List<double> radii;
  final double rotation;
  final bool sweep;
  final Color start;
  final Color end;

  @override
  void paint(Canvas canvas, Size size) {
    final r = size.shortestSide / 2;
    final path = Path();
    for (var i = 0; i <= radii.length; i++) {
      final theta = i / radii.length * 2 * math.pi;
      final rad = radii[i % radii.length] * r;
      final p = Offset(math.cos(theta) * rad, math.sin(theta) * rad);
      if (i == 0) {
        path.moveTo(p.dx, p.dy);
      } else {
        path.lineTo(p.dx, p.dy);
      }
    }
    path.close();
    final rect = Rect.fromCircle(center: Offset.zero, radius: r);
    final shader = sweep
        ? SweepGradient(colors: [start, end, start]).createShader(rect)
        : LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [start, end],
          ).createShader(Rect.fromLTWH(-r, -r, 2 * r, 2 * r));
    canvas.save();
    canvas.translate(size.width / 2, size.height / 2);
    canvas.rotate(rotation);
    canvas.drawPath(path, Paint()..shader = shader..isAntiAlias = true);
    canvas.restore();
  }

  @override
  bool shouldRepaint(_DoorPainter old) =>
      old.rotation != rotation ||
      old.sweep != sweep ||
      old.start != start ||
      old.end != end ||
      !identical(old.radii, radii);
}

/// The celebration on a fresh connection: sixteen bits — circles and
/// rounded squares in the theme's colors — flying out and fading over
/// 950 ms. Draws nothing at rest.
class _BurstPainter extends CustomPainter {
  _BurstPainter({required this.progress, required this.colors});

  final double progress;
  final List<Color> colors;

  @override
  void paint(Canvas canvas, Size size) {
    final p = progress;
    if (p >= 1) return;
    final center = size.center(Offset.zero);
    final min = size.shortestSide;
    final bit = min * 5 / 208;
    final reach = min * 0.9;
    for (var i = 0; i < 16; i++) {
      final a = i * (2 * math.pi / 16) + 0.35;
      final d = min * 0.42 + reach * p;
      final pos = center + Offset(math.cos(a) * d, math.sin(a) * d);
      final color = colors[i % colors.length].withValues(
        alpha: (1 - p).clamp(0, 1),
      );
      final s = bit * (1 - p * 0.35);
      final paint = Paint()..color = color;
      if (i.isEven) {
        canvas.drawCircle(pos, s, paint);
      } else {
        canvas.drawRRect(
          RRect.fromRectAndRadius(
            Rect.fromCenter(center: pos, width: s * 2, height: s * 2),
            Radius.circular(s * 0.6),
          ),
          paint,
        );
      }
    }
  }

  @override
  bool shouldRepaint(_BurstPainter old) => old.progress != progress;
}

// ─── Shared rows and cards ────────────────────────────────────────────────

/// The designs' page frame: the shell's page margin, the content a
/// centered column at most 560 wide — how ZedSecure's own desktop app
/// lays these same designs out in its wide window.
class ZedHomeScaffold extends StatelessWidget {
  const ZedHomeScaffold({super.key, required this.children});

  final List<Widget> children;

  @override
  Widget build(BuildContext context) {
    final top = MediaQuery.paddingOf(context).top;
    return ListView(
      padding: pagePadding(context) + EdgeInsets.only(top: top),
      children: [
        Align(
          alignment: Alignment.topCenter,
          child: ConstrainedBox(
            constraints: const BoxConstraints(maxWidth: 560),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: children,
            ),
          ),
        ),
      ],
    );
  }
}

/// The designs' error card: the message centered on the error colors.
class ZedErrorCard extends StatelessWidget {
  const ZedErrorCard({super.key, required this.text});

  final String text;

  @override
  Widget build(BuildContext context) {
    final scheme = Theme.of(context).colorScheme;
    return Container(
      decoration: BoxDecoration(
        color: scheme.errorContainer,
        borderRadius: BorderRadius.circular(24),
      ),
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14),
      child: Text(
        text,
        textAlign: TextAlign.center,
        style: Theme.of(
          context,
        ).textTheme.bodyMedium?.copyWith(color: scheme.onErrorContainer),
      ),
    );
  }
}

/// The server row: a primary badge with the flag, the location's name
/// and its detail; a tap opens the servers page.
class ZedServerRow extends StatelessWidget {
  const ZedServerRow({
    super.key,
    required this.data,
    required this.onTap,
  });

  final ZedHomeData data;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final scheme = theme.colorScheme;
    final place = data.place;
    return Material(
      color: scheme.surfaceContainerHigh,
      borderRadius: BorderRadius.circular(24),
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(24),
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
          child: Row(
            children: [
              Container(
                width: 44,
                height: 44,
                decoration: BoxDecoration(
                  color: scheme.primary,
                  borderRadius: BorderRadius.circular(16),
                ),
                alignment: Alignment.center,
                child: place.flag.length == 2
                    ? CountryFlag(code: place.flag, width: 30)
                    : Icon(Icons.public_rounded, color: scheme.onPrimary),
              ),
              const SizedBox(width: 14),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      place.name,
                      style: theme.textTheme.titleMedium?.copyWith(
                        fontWeight: FontWeight.w700,
                      ),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                    Text(
                      data.locationDetail,
                      style: theme.textTheme.bodySmall?.copyWith(
                        color: scheme.onSurfaceVariant,
                      ),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                ),
              ),
              Icon(Icons.chevron_right_rounded, color: scheme.onSurfaceVariant),
            ],
          ),
        ),
      ),
    );
  }
}

/// The accounts row: a tertiary badge, the word and the summary, one dot
/// per account in its state color; a tap opens the accounts page.
class ZedAccountsRow extends StatelessWidget {
  const ZedAccountsRow({
    super.key,
    required this.data,
    required this.onTap,
  });

  final ZedHomeData data;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    final l = AppLocalizations.of(context);
    final theme = Theme.of(context);
    final scheme = theme.colorScheme;
    final accounts = data.accounts;
    final enabled = accounts.where((a) => a.enabled).length;
    return Material(
      color: scheme.surfaceContainerHigh,
      borderRadius: BorderRadius.circular(24),
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(24),
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
          child: Row(
            children: [
              Container(
                width: 44,
                height: 44,
                decoration: BoxDecoration(
                  color: scheme.tertiaryContainer,
                  borderRadius: BorderRadius.circular(16),
                ),
                alignment: Alignment.center,
                child: Icon(
                  Icons.account_circle_rounded,
                  color: scheme.onTertiaryContainer,
                ),
              ),
              const SizedBox(width: 14),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      l.navAccounts,
                      style: theme.textTheme.titleMedium?.copyWith(
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                    Text(
                      accounts.isEmpty
                          ? l.zedAddFirstAccount
                          : l.zedAccountsSummary(
                              enabled,
                              data.live ? data.ready : 0,
                            ),
                      style: theme.textTheme.bodySmall?.copyWith(
                        color: scheme.onSurfaceVariant,
                      ),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                ),
              ),
              Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  for (final a in accounts.take(8))
                    Container(
                      width: 10,
                      height: 10,
                      margin: const EdgeInsetsDirectional.only(start: 4),
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: !a.enabled
                            ? scheme.outlineVariant
                            : data.live && a.status == AccountStatus.ready
                            ? StatusColors.good
                            : scheme.outline,
                      ),
                    ),
                ],
              ),
              const SizedBox(width: 8),
              Icon(Icons.chevron_right_rounded, color: scheme.onSurfaceVariant),
            ],
          ),
        ),
      ),
    );
  }
}

/// The speeds row: download and upload tiles side by side, live rates
/// while connected and a dash otherwise.
class ZedSpeedRow extends StatelessWidget {
  const ZedSpeedRow({super.key, required this.data});

  final ZedHomeData data;

  @override
  Widget build(BuildContext context) {
    final l = AppLocalizations.of(context);
    final scheme = Theme.of(context).colorScheme;
    final traffic = data.status.traffic;
    Widget tile(IconData icon, String label, String value, Color badge, Color onBadge) =>
        Expanded(
          child: Container(
            decoration: BoxDecoration(
              color: scheme.surfaceContainerHigh,
              borderRadius: BorderRadius.circular(24),
            ),
            padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
            child: Row(
              children: [
                Container(
                  width: 36,
                  height: 36,
                  decoration: BoxDecoration(
                    color: badge,
                    borderRadius: BorderRadius.circular(14),
                  ),
                  alignment: Alignment.center,
                  child: Icon(icon, size: 18, color: onBadge),
                ),
                const SizedBox(width: 10),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        label,
                        style: Theme.of(context).textTheme.labelMedium
                            ?.copyWith(color: scheme.onSurfaceVariant),
                      ),
                      Text(
                        value,
                        style: Theme.of(context).textTheme.titleLarge?.copyWith(
                          fontWeight: FontWeight.w700,
                        ),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
    return Row(
      children: [
        tile(
          Icons.download_rounded,
          l.zedDownload,
          data.live && traffic != null ? formatRate(traffic.downRate) : '—',
          scheme.tertiaryContainer,
          scheme.onTertiaryContainer,
        ),
        const SizedBox(width: 6),
        tile(
          Icons.upload_rounded,
          l.zedUpload,
          data.live && traffic != null ? formatRate(traffic.upRate) : '—',
          scheme.primaryContainer,
          scheme.onPrimaryContainer,
        ),
      ],
    );
  }
}