import { useState, useEffect, useRef } from "react";
import type { Config, BridgeStatus, BridgeStats } from "../types";
import { isError } from "../types";

interface Props {
  status: BridgeStatus | null;
  stats: BridgeStats;
  config: Config | null;
  hasSavedSession: boolean;
  loading: boolean;
  logs: string[];
  needsTotp: boolean;
  onStart: (password?: string, email?: string) => Promise<void>;
  onSubmitTotp: (code: string) => Promise<void>;
  onStop: () => Promise<void>;
  onClearLogs: () => void;
}

function formatUptime(secs: number): string {
  if (secs < 60) return `${secs}s`;
  if (secs < 3600) return `${Math.floor(secs / 60)}m ${secs % 60}s`;
  const h = Math.floor(secs / 3600);
  const m = Math.floor((secs % 3600) / 60);
  return `${h}h ${m}m`;
}

export function Dashboard({
  status,
  stats,
  config,
  hasSavedSession,
  loading,
  logs,
  needsTotp,
  onStart,
  onSubmitTotp,
  onStop,
  onClearLogs,
}: Props) {
  const [password, setPassword] = useState("");
  const [email, setEmail] = useState("");
  const [totp, setTotp] = useState("");
  const logEndRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    logEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [logs]);

  if (!status) {
    return (
      <div className="dashboard">
        <p className="muted">Connecting...</p>
      </div>
    );
  }

  const isRunning = status === "Running";
  const isStarting = status === "Starting";
  const errored = isError(status);
  const isStopped = status === "Stopped" || errored;
  const hasAccount = !!config?.email;
  const needsEmail = isStopped && !hasAccount;
  const needsPassword = isStopped && !hasSavedSession;
  const wsConnected = stats.ws_status === "Connected";

  // LED colour reflects real health: green only when running and realtime is
  // actually connected, orange while connecting or reconnecting, grey when off.
  const led = isRunning ? (wsConnected ? "running" : "starting") : isStarting ? "starting" : "stopped";
  const accent = isRunning ? "running" : isStarting ? "starting" : "stopped";

  const title = isRunning
    ? "Bridge running"
    : isStarting
      ? "Connecting…"
      : errored
        ? "Connection failed"
        : "Bridge stopped";

  // Subtitle only carries information the rest of the screen doesn't already
  // show: nothing when everything is healthy. The 2FA prompt takes priority
  // since the login is paused waiting on it.
  const subtitle = needsTotp
    ? "Enter your two-factor code to finish signing in"
    : isRunning
      ? wsConnected
        ? ""
        : "Realtime reconnecting…"
      : isStarting
        ? "Signing in and syncing your mailbox"
        : errored
          ? "See the activity log below"
          : needsEmail
            ? "Sign in with your Tuta account to get started"
            : "Start the bridge to connect your mail client";

  const handleStart = async () => {
    await onStart(
      needsPassword ? password : undefined,
      needsEmail ? email.trim() : undefined,
    );
  };

  const handleVerifyTotp = async () => {
    await onSubmitTotp(totp.trim());
    setTotp("");
  };

  return (
    <div className="dashboard">
      <div className={`status-bar ${accent}`}>
        <span className={`status-led ${led}`} />
        <div className="status-bar-text">
          <strong>{title}</strong>
          {subtitle && <span className="status-bar-sub">{subtitle}</span>}
        </div>
        {(isRunning || isStarting) && (
          <button className="status-action" onClick={onStop} disabled={loading}>
            {loading ? "Stopping…" : "Stop"}
          </button>
        )}
      </div>

      {errored && <p className="error-text">{status.Error}</p>}

      {needsTotp ? (
        <div className="start-section">
          <div className="form-group">
            <label>Two-factor code</label>
            <input
              type="text"
              inputMode="numeric"
              value={totp}
              onChange={(e) => setTotp(e.target.value.replace(/\D/g, ""))}
              placeholder="6-digit code from your authenticator"
              autoFocus
              onKeyDown={(e) =>
                e.key === "Enter" && totp.trim().length >= 6 && handleVerifyTotp()
              }
            />
            <small className="field-hint">
              Your account has 2FA. Enter the current code to finish signing in.
            </small>
          </div>
          <button
            className="primary start-btn"
            onClick={handleVerifyTotp}
            disabled={totp.trim().length < 6}
          >
            Verify &amp; sign in
          </button>
        </div>
      ) : (
        isStopped && (
          <div className="start-section">
            {needsEmail && (
              <div className="form-group">
                <label>Tuta Email</label>
                <input
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="you@tuta.com"
                  autoFocus
                />
              </div>
            )}
            {needsPassword && (
              <div className="form-group">
                <label>Tuta Password</label>
                <input
                  type="password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="Enter your Tuta password"
                  onKeyDown={(e) =>
                    e.key === "Enter" &&
                    password &&
                    (!needsEmail || email.trim()) &&
                    handleStart()
                  }
                />
              </div>
            )}
            <button
              className="primary start-btn"
              onClick={handleStart}
              disabled={
                loading ||
                (needsEmail && !email.trim()) ||
                (needsPassword && !password)
              }
            >
              {loading ? "Connecting…" : "Start Bridge"}
            </button>
          </div>
        )
      )}

      <div className="stats-grid">
        <div className="stat-card">
          <span className="stat-value">{stats.mails_synced.toLocaleString()}</span>
          <span className="stat-label">Emails synced</span>
        </div>
        <div className="stat-card">
          <span className="stat-value">
            {stats.uptime_secs != null ? formatUptime(stats.uptime_secs) : "—"}
          </span>
          <span className="stat-label">Uptime</span>
        </div>
      </div>

      <div className="dash-logs">
        <div className="dash-logs-header">
          <span className="dash-logs-title">Activity</span>
          {logs.length > 0 && (
            <button className="inline-btn" onClick={onClearLogs}>
              Clear
            </button>
          )}
        </div>
        <div className="logs-container">
          {logs.length === 0 ? (
            <span className="logs-empty">Waiting for activity…</span>
          ) : (
            logs.map((line, i) => (
              <div key={i} className="log-line">
                {line}
              </div>
            ))
          )}
          <div ref={logEndRef} />
        </div>
      </div>
    </div>
  );
}
