import { createMemo, createSignal, For, onMount, Show } from "solid-js";
import { zxcvbn, zxcvbnOptions } from "@zxcvbn-ts/core";
import * as zxcvbnCommon from "@zxcvbn-ts/language-common";
import * as zxcvbnEn from "@zxcvbn-ts/language-en";
import type { AdvancedHealthReport, VaultEntry } from "../../shared/types";
import { getDisplayDomain } from "../../shared/domain";
import { sendMessage } from "../App";
import { VaultView } from "./Vault";

// Replaces the unmaintained `zxcvbn` package (LV-8; see Lock.tsx) — this file
// was missed by that migration. Health.tsx is already its own route-level
// lazy chunk, so a static import here carries the same load-timing as the
// dynamic imports used elsewhere; it just needs the dictionaries configured
// once before first use.
zxcvbnOptions.setOptions({
  translations: zxcvbnEn.translations,
  graphs: zxcvbnCommon.adjacencyGraphs,
  dictionary: { ...zxcvbnCommon.dictionary, ...zxcvbnEn.dictionary },
});

function sha256(plain: string): Promise<string> {
  const encoder = new TextEncoder();
  const data = encoder.encode(plain);
  return crypto.subtle.digest("SHA-256", data).then((buf) => {
    return Array.from(new Uint8Array(buf))
      .map((b) => b.toString(16).padStart(2, "0"))
      .join("");
  });
}

interface ReusedGroup {
  hash: string;
  entries: VaultEntry[];
}

interface HealthProps {
  entries: VaultEntry[];
  isPro?: boolean;
  onFixEntry: (entry: VaultEntry) => void;
  onBack: () => void;
  onRefresh: () => void;
  /** Set by App while an entry edit is in progress so the view stays mounted
   *  but invisible — avoids re-running computeReused() on every back-nav. */
  hidden?: boolean;
}

function formatExposure(count: number): string {
  if (count >= 1000) return `${(count / 1000).toFixed(count % 1000 === 0 ? 0 : 1)}k exposures`;
  return `${count.toLocaleString()} ${count === 1 ? "exposure" : "exposures"}`;
}

function formatRelativeTime(ms: number): string {
  const seconds = Math.floor(ms / 1000);
  if (seconds < 60) return "just now";
  const minutes = Math.floor(seconds / 60);
  if (minutes < 60) return `${minutes} minute${minutes !== 1 ? "s" : ""} ago`;
  const hours = Math.floor(minutes / 60);
  if (hours < 24) return `${hours} hour${hours !== 1 ? "s" : ""} ago`;
  const days = Math.floor(hours / 24);
  if (days < 30) return `${days} day${days !== 1 ? "s" : ""} ago`;
  const months = Math.floor(days / 30);
  if (months < 12) return `${months} month${months !== 1 ? "s" : ""} ago`;
  const years = Math.floor(months / 12);
  return `${years} year${years !== 1 ? "s" : ""} ago`;
}

function scoreLabel(score: number): string {
  const labels = ["very weak", "weak", "fair", "good", "strong"];
  return labels[score] ?? "unknown";
}

export function HealthView(props: HealthProps) {
  const [checkingBreaches, setCheckingBreaches] = createSignal(false);
  const [reusedGroups, setReusedGroups] = createSignal<ReusedGroup[]>([]);
  const [reusedLoading, setReusedLoading] = createSignal(true);
  const [expandedSections, setExpandedSections] = createSignal<Record<string, boolean>>({
    breached: true,
    reused: true,
    weak: true,
    old: true,
    passkeys: true,
  });
  const [viewingReusedGroup, setViewingReusedGroup] = createSignal<VaultEntry[] | null>(null);
  const [advancedReport, setAdvancedReport] = createSignal<AdvancedHealthReport | null>(null);
  // Start true for Pro users so the loading screen is visible on the very first render —
  // previously initialized to false and flipped in onMount, which left a blank-body flash.
  const [advancedLoading, setAdvancedLoading] = createSignal<boolean>(!!props.isPro);

  onMount(async () => {
    if (!props.isPro) return;
    try {
      const res = await sendMessage({ type: "GET_ADVANCED_HEALTH_REPORT" });
      if ((res as { ok: boolean }).ok) {
        setAdvancedReport((res as { ok: boolean; data?: AdvancedHealthReport }).data ?? null);
      }
    } finally {
      setAdvancedLoading(false);
    }
  });

  const ONE_YEAR_MS = 365 * 24 * 60 * 60 * 1000;

  const breachedEntries = createMemo(() =>
    props.entries
      .filter((e) => (e.breach ?? 0) > 0)
      .sort((a, b) => (b.breach ?? 0) - (a.breach ?? 0))
  );

  const weakEntries = createMemo(() => {
    // Precompute scores once — zxcvbn is expensive, avoid calling it multiple times per entry
    const scored = props.entries
      .filter((e) => e.type !== "note" && e.password)
      .map((entry) => ({ entry, score: zxcvbn(entry.password!).score }))
      .filter(({ score }) => score <= 1);
    scored.sort((a, b) => a.score - b.score);
    return scored;
  });

  const oldEntries = createMemo(() =>
    props.entries
      .filter((e) => e.type === "login" && e.modifiedAt < Date.now() - ONE_YEAR_MS)
      .sort((a, b) => a.modifiedAt - b.modifiedAt)
  );

  const stalePasskeys = createMemo(() =>
    props.entries
      .filter((e) => e.passkey !== undefined)
      .map((entry) => {
        const passkey = entry.passkey!;
        const lastActivity = passkey.lastUsedAt ?? passkey.createdAt ?? entry.createdAt;
        const ageMs = Date.now() - lastActivity;
        const status =
          passkey.signCount === 0 && ageMs >= 30 * 24 * 60 * 60 * 1000
            ? "Unused"
            : ageMs >= ONE_YEAR_MS
              ? "Old"
              : null;
        return { entry, lastActivity, status };
      })
      .filter((item) => item.status !== null)
      .sort((a, b) => a.lastActivity - b.lastActivity)
  );

  const entriesById = createMemo(() => {
    const map = new Map<string, VaultEntry>();
    for (const entry of props.entries) map.set(entry.id, entry);
    return map;
  });

  async function computeReused() {
    const loginEntries = props.entries.filter((e) => e.type !== "note" && e.password);
    if (loginEntries.length === 0) {
      setReusedGroups([]);
      setReusedLoading(false);
      return;
    }
    const hashes = await Promise.all(
      loginEntries.map(async (e) => ({ entry: e, hash: await sha256(e.password!) }))
    );
    const map = new Map<string, VaultEntry[]>();
    for (const { entry, hash } of hashes) {
      const group = map.get(hash) ?? [];
      group.push(entry);
      map.set(hash, group);
    }
    const groups: ReusedGroup[] = [];
    map.forEach((entries, hash) => {
      if (entries.length >= 2) {
        groups.push({ hash, entries });
      }
    });
    groups.sort((a, b) => b.entries.length - a.entries.length);
    setReusedGroups(groups);
    setReusedLoading(false);
  }

  computeReused();

  function toggleSection(key: string) {
    setExpandedSections((prev) => ({ ...prev, [key]: !prev[key] }));
  }

  async function handleCheckAllBreaches() {
    setCheckingBreaches(true);
    const res = await sendMessage({ type: "CHECK_ALL_BREACHES" });
    setCheckingBreaches(false);
    if ((res as { ok: boolean }).ok) {
      props.onRefresh();
    }
  }

  const totalNeedsAttention = createMemo(
    () =>
      breachedEntries().length +
      reusedGroups().length +
      weakEntries().length +   // weakEntries returns { entry, score }[] now
      oldEntries().length +
      stalePasskeys().length
  );

  const isLoading = () => reusedLoading() || (!!props.isPro && advancedLoading());

  return (
    <>
      <div class="peach-overlay-view ov-enter-right" style={{ display: props.hidden ? "none" : "flex" }}>
        <div class="peach-overlay-header">
          <button
            class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"
            onClick={props.onBack}
            aria-label="Back"
          >
            <svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">
              <path d="M6 1L1 6L6 11" />
            </svg>
          </button>
          <span class="peach-overlay-title">Advanced Vault Health</span>
          <div class="peach-overlay-spacer"></div>
        </div>

        <div class="peach-health-body">
          <Show when={isLoading()}>
            <div class="peach-health-loading-screen" aria-busy="true" aria-live="polite">
              <div class="peach-health-loading-glyph" aria-hidden="true">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
                  <circle cx="16" cy="16" r="13" stroke="currentColor" stroke-width="1.2" opacity="0.18" />
                  <path d="M16 3a13 13 0 0 1 13 13" stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
                    <animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="1.2s" repeatCount="indefinite" />
                  </path>
                </svg>
              </div>
              <h2 class="peach-health-loading-title">Checking your vault's health</h2>
              <p class="peach-health-loading-copy">
                Scanning for reused, breached, weak, and aging credentials.
                Just a moment…
              </p>
              <div class="peach-health-loading-track" aria-hidden="true">
                <div class="peach-health-loading-fill"></div>
              </div>
            </div>
          </Show>
          <Show when={!isLoading()}>
          <Show when={props.isPro && advancedReport() && advancedReport()!.remediation.length > 0}>
            <div class="peach-health-pro-queue">
              <div class="peach-health-pro-queue-head">
                <span class="peach-health-pro-queue-title">Remediation queue</span>
                <span class="peach-health-pro-queue-score">
                  Vault score {advancedReport()!.vaultScore}/100
                </span>
              </div>
              <For each={advancedReport()!.remediation.slice(0, 8)}>
                {(item) => {
                  const entry = () => entriesById().get(item.id);
                  return (
                    <div class="peach-health-pro-row">
                      <div class="peach-health-pro-row-info">
                        <span class="peach-health-pro-row-name">{item.title}</span>
                        <span class="peach-health-pro-row-meta">
                          {item.reasons.join(" · ")}
                        </span>
                        <div class="peach-health-pro-bar" aria-hidden="true">
                          <div
                            class="peach-health-pro-bar-fill"
                            style={{ width: `${Math.min(item.score, 100)}%` }}
                          ></div>
                        </div>
                      </div>
                      <Show when={entry()}>
                        {(target) => (
                          <button
                            class="peach-btn peach-btn--ghost peach-btn--sm peach-health-pro-action"
                            onClick={() => props.onFixEntry(target())}
                            aria-label={`Update password for ${item.title}`}
                          >
                            Update
                          </button>
                        )}
                      </Show>
                    </div>
                  );
                }}
              </For>
            </div>
          </Show>

          <div class="peach-health-summary">
            <Show
              when={totalNeedsAttention() > 0}
              fallback={<span class="peach-health-summary-ok">Your vault looks healthy.</span>}
            >
              <span class="peach-health-summary-warn">
                {totalNeedsAttention()} {totalNeedsAttention() === 1 ? "entry needs" : "entries need"} attention
              </span>
            </Show>
          </div>

          <div class="peach-health-check-row">
            <button
              class="peach-btn peach-btn--accent peach-btn--sm peach-health-check-btn"
              onClick={() => void handleCheckAllBreaches()}
              disabled={checkingBreaches()}
            >
              <svg width="10" height="12" viewBox="0 0 10 12" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round" style="margin-right:5px;">
                <path d="M9 6L5 10L1 6" />
                <path d="M5 10V2" />
              </svg>
              {checkingBreaches() ? "checking..." : "Check all breaches now"}
            </button>
          </div>

          <div class="peach-health-sections">
            <HealthSection
              title="Breached"
              count={breachedEntries().length}
              expanded={expandedSections().breached}
              onToggle={() => toggleSection("breached")}
              emptyMessage="No breached entries"
            >
              <For each={breachedEntries()}>
                {(entry) => (
                  <div class="peach-health-row">
                    <div class="peach-health-row-info">
                      <span class="peach-health-row-name">{entry.title}</span>
                      <span class="peach-health-row-meta" style="color:var(--peach-breach);">
                        {formatExposure(entry.breach ?? 0)}
                      </span>
                    </div>
                    <button
                      class="peach-btn peach-btn--ghost peach-btn--sm peach-health-fix-btn"
                      onClick={() => props.onFixEntry(entry)}
                    >
                      Fix
                      <svg width="6" height="10" viewBox="0 0 6 10" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round" style="margin-left:4px;">
                        <path d="M1 5L5 9M5 9L5 5M5 9L1 9" />
                      </svg>
                    </button>
                  </div>
                )}
              </For>
            </HealthSection>

            <HealthSection
              title="Reused"
              count={reusedGroups().length}
              expanded={expandedSections().reused}
              onToggle={() => toggleSection("reused")}
              loading={reusedLoading()}
              emptyMessage="No reused passwords"
            >
              <Show when={!reusedLoading()} fallback={<div class="peach-health-loading">Computing...</div>}>
                <For each={reusedGroups()}>
                  {(group) => (
                    <div class="peach-health-row">
                      <div class="peach-health-row-info">
                        <span class="peach-health-row-name">
                          Used in {group.entries.length} places
                        </span>
                        <span class="peach-health-row-meta">
                          {group.entries.map((e) => e.title).join(", ")}
                        </span>
                      </div>
                      <button
                        class="peach-btn peach-btn--ghost peach-btn--sm peach-health-fix-btn"
                        onClick={() => setViewingReusedGroup(group.entries)}
                      >
                        View
                        <svg width="6" height="10" viewBox="0 0 6 10" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round" style="margin-left:4px;">
                          <path d="M1 5L5 9M5 9L5 5M5 9L1 9" />
                        </svg>
                      </button>
                    </div>
                  )}
                </For>
              </Show>
            </HealthSection>

            <HealthSection
              title="Weak"
              count={weakEntries().length}
              expanded={expandedSections().weak}
              onToggle={() => toggleSection("weak")}
              emptyMessage="No weak passwords"
            >
              <For each={weakEntries()}>
                {({ entry, score }) => (
                    <div class="peach-health-row">
                      <div class="peach-health-row-info">
                        <span class="peach-health-row-name">
                          {entry.url ? getDisplayDomain(entry.url) : entry.title}
                        </span>
                        <span class="peach-health-row-meta">
                          score: {score} ({scoreLabel(score)})
                        </span>
                      </div>
                      <button
                        class="peach-btn peach-btn--ghost peach-btn--sm peach-health-fix-btn"
                        onClick={() => props.onFixEntry(entry)}
                      >
                        Fix
                        <svg width="6" height="10" viewBox="0 0 6 10" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round" style="margin-left:4px;">
                          <path d="M1 5L5 9M5 9L5 5M5 9L1 9" />
                        </svg>
                      </button>
                    </div>
                )}
              </For>
            </HealthSection>

            <HealthSection
              title="Old"
              count={oldEntries().length}
              expanded={expandedSections().old}
              onToggle={() => toggleSection("old")}
              emptyMessage="No old entries"
            >
              <For each={oldEntries()}>
                {(entry) => {
                  const age = Date.now() - entry.modifiedAt;
                  return (
                    <div class="peach-health-row">
                      <div class="peach-health-row-info">
                        <span class="peach-health-row-name">
                          {entry.url ? getDisplayDomain(entry.url) : entry.title}
                        </span>
                        <span class="peach-health-row-meta">
                          last changed {formatRelativeTime(age)}
                        </span>
                      </div>
                      <button
                        class="peach-btn peach-btn--ghost peach-btn--sm peach-health-fix-btn"
                        onClick={() => props.onFixEntry(entry)}
                      >
                        Fix
                        <svg width="6" height="10" viewBox="0 0 6 10" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round" style="margin-left:4px;">
                          <path d="M1 5L5 9M5 9L5 5M5 9L1 9" />
                        </svg>
                      </button>
                    </div>
                  );
                }}
              </For>
            </HealthSection>

            <HealthSection
              title="Passkeys"
              count={stalePasskeys().length}
              expanded={expandedSections().passkeys}
              onToggle={() => toggleSection("passkeys")}
              emptyMessage="No stale passkeys"
            >
              <For each={stalePasskeys()}>
                {(item) => (
                  <div class="peach-health-row">
                    <div class="peach-health-row-info">
                      <span class="peach-health-row-name">{item.entry.title}</span>
                      <span class="peach-health-row-meta">
                        {item.status} • {item.entry.passkey?.rpId} • {formatRelativeTime(Date.now() - item.lastActivity)}
                      </span>
                    </div>
                    <button
                      class="peach-btn peach-btn--ghost peach-btn--sm peach-health-fix-btn"
                      onClick={() => props.onFixEntry(item.entry)}
                    >
                      View
                      <svg width="6" height="10" viewBox="0 0 6 10" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round" style="margin-left:4px;">
                        <path d="M1 5L5 9M5 9L5 5M5 9L1 9" />
                      </svg>
                    </button>
                  </div>
                )}
              </For>
            </HealthSection>
          </div>
          </Show>{/* end !isLoading() */}
        </div>
      </div>

      <Show when={viewingReusedGroup()}>
        <VaultView
          entries={viewingReusedGroup()!}
          selectedEntryId={undefined}
          sortOrder="az"
          onSortOrderChange={() => {}}
          onSelectEntry={(entry) => {
            setViewingReusedGroup(null);
            props.onFixEntry(entry);
          }}
          onAdd={() => {}}
          onClose={() => setViewingReusedGroup(null)}
        />
      </Show>
    </>
  );
}

interface HealthSectionProps {
  title: string;
  count: number;
  expanded: boolean;
  onToggle: () => void;
  loading?: boolean;
  emptyMessage: string;
  children: any;
}

function HealthSection(props: HealthSectionProps) {
  return (
    <div class="peach-health-section">
      <button class="peach-health-section-header" onClick={props.onToggle}>
        <div class="peach-health-section-title-row">
          <span class="peach-health-count-badge">{props.count}</span>
          <span class="peach-health-section-title">{props.title}</span>
        </div>
        <svg
          class="peach-health-chevron"
          classList={{ "is-expanded": props.expanded }}
          width="10" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"
        >
          <path d="M1 1L5 5L9 1" />
        </svg>
      </button>
      <Show when={props.expanded}>
        <div class="peach-health-section-body">
          <Show
            when={!props.loading && props.count > 0}
            fallback={
              <Show when={!props.loading}>
                <div class="peach-health-empty">{props.emptyMessage}</div>
              </Show>
            }
          >
            {props.children}
          </Show>
        </div>
      </Show>
    </div>
  );
}