app.js

import {
  oracleFeedData,
  communityVoteFeed,
  getContractState,
  setActiveMembers,
  setFundBalance,
} from "./smartContract.js";
import { runDisasterAgent } from "./aiAgent.js";

const screens = [
  { id: "screen-dashboard", label: "1. Admin Dashboard" },
  { id: "screen-scanner", label: "2. AI Oracle Scanner" },
  { id: "screen-vote", label: "3. Community Vote" },
  { id: "screen-payout", label: "4. Payout Distribution" },
  { id: "screen-audit", label: "5. Audit Trail" },
];

const BALANCE_API_BASE = "http://localhost:4175";
const MEMBERS_API_BASE = "http://localhost:4175";
const API_TIMEOUT_MS = 4000;

const nav = document.getElementById("nav");
screens.forEach((screen, index) => {
  const btn = document.createElement("button");
  btn.className = `nav-btn ${index === 0 ? "active" : ""}`;
  btn.textContent = screen.label;
  btn.dataset.target = screen.id;
  btn.addEventListener("click", () => openScreen(screen.id));
  nav.appendChild(btn);
});

document.querySelectorAll(".nav-link").forEach((btn) => {
  btn.addEventListener("click", () => openScreen(btn.dataset.target));
});

function openScreen(targetId) {
  if (targetId === "screen-vote" && !getContractState().oracleVerified) {
    oracleGate.textContent = "Oracle Gate: Locked";
    communityGate.textContent = "Community Gate: Waiting Oracle";
    contractGate.textContent = "Contract Gate: Locked";
    return;
  }
  document.querySelectorAll(".screen").forEach((screen) => {
    screen.classList.toggle("active", screen.id === targetId);
  });
  document.querySelectorAll(".nav-btn").forEach((btn) => {
    btn.classList.toggle("active", btn.dataset.target === targetId);
  });
}

const scanStates = [
  { confidence_score: 78, sources_count: 2, severity: "Minor", verdict: "UNVERIFIED" },
  { confidence_score: 87, sources_count: 5, severity: "Severe", verdict: "VERIFIED" },
  { confidence_score: 91, sources_count: 6, severity: "Severe", verdict: "VERIFIED" },
];
let scanIndex = 0;

const scanSteps = [...document.querySelectorAll("#scan-steps li")];
const runScanBtn = document.getElementById("run-scan");
const keywordInput = document.getElementById("keyword");
const confidenceBar = document.getElementById("confidence-bar");
const confidenceText = document.getElementById("confidence-text");
const verdictEl = document.getElementById("verdict");
const severityEl = document.getElementById("severity");
const oracleGate = document.getElementById("oracle-gate");
const communityGate = document.getElementById("community-gate");
const contractGate = document.getElementById("contract-gate");
const voteTargetButtons = [...document.querySelectorAll('button[data-target="screen-vote"]')];

runScanBtn.addEventListener("click", handleScan);
setVoteGateLocked(true);

async function handleScan() {
  setLoading(true);
  scanSteps.forEach((s) => s.classList.remove("active"));
  scanSteps.forEach((step, i) => {
    setTimeout(() => step.classList.add("active"), (i + 1) * 350);
  });

  try {
    const verdict = await runDisasterAgent(keywordInput.value || "flood Malaysia");
    oracleFeedData(verdict.confidence_score, verdict.sources_count, verdict.severity);
    setOracleResult(verdict);
  } catch {
    const fallback = await runOracle(keywordInput.value || "flood malaysia");
    oracleFeedData(fallback.confidence_score, fallback.sources_count, fallback.severity);
    setOracleResult(fallback);
  } finally {
    setLoading(false);
    renderAuditFromContract();
  }
}

async function runOracle(_keyword) {
  scanIndex = (scanIndex + 1) % scanStates.length;
  await delay(1100);
  return scanStates[scanIndex];
}

function setOracleResult(result) {
  const confidence = Number(result.confidence_score || 0);
  const sources = Number(result.sources_count || 0);
  const verified = confidence > 85 && sources >= 3;
  confidenceBar.style.width = `${result.confidence_score}%`;
  confidenceText.textContent = `${result.confidence_score}%`;
  verdictEl.textContent = verified ? "VERIFIED" : "UNVERIFIED";
  verdictEl.className = `badge ${verified ? "ok" : "warn"}`;
  severityEl.textContent = `Severity: ${result.severity}`;

  oracleGate.textContent = `Oracle Gate: ${verified ? "Unlocked" : "Locked"}`;
  communityGate.textContent = verified ? "Community Gate: In Progress" : "Community Gate: Waiting";
  contractGate.textContent = "Contract Gate: Locked";
  setVoteGateLocked(!verified);
  updateOracleDetails(result, verified);
}

function setLoading(loading) {
  runScanBtn.disabled = loading;
  runScanBtn.textContent = loading ? "Running..." : "Run";
}

function setVoteGateLocked(locked) {
  voteTargetButtons.forEach((btn) => {
    btn.disabled = locked;
    btn.title = locked ? "Run scan with confidence > 85% and sources >= 3 to unlock." : "";
  });
}

function updateOracleDetails(verdict, verified) {
  const newsScoreEl = document.getElementById("oracle-news-score");
  const modelScoreEl = document.getElementById("oracle-model-score");
  const finalScoreEl = document.getElementById("oracle-final-score");
  const sourcesEl = document.getElementById("oracle-sources-count");
  const locationEl = document.getElementById("oracle-location");
  const riskEl = document.getElementById("oracle-risk");
  const summaryEl = document.getElementById("oracle-summary");
  const summaryBelowEl = document.getElementById("oracle-summary-below");
  const reasonEl = document.getElementById("oracle-reason");

  if (!newsScoreEl || !modelScoreEl || !finalScoreEl || !sourcesEl || !locationEl || !riskEl) return;

  const newsConfidence = Number(verdict.news_confidence ?? verdict.combined_result?.news_confidence ?? 0);
  const modelProb = Number(verdict.model_probability ?? verdict.combined_result?.model_probability ?? 0);
  const finalScore = Number(verdict.confidence_score ?? verdict.combined_result?.final_score ?? 0);
  const sources = Number(verdict.sources_count ?? verdict.combined_result?.credible_source_count ?? 0);

  newsScoreEl.textContent = `${newsConfidence.toFixed(1)}% confidence`;
  modelScoreEl.textContent = `${(modelProb * 100).toFixed(1)}% seismic risk probability`;
  finalScoreEl.textContent = `${finalScore.toFixed(1)}% -> ${verified ? "ORACLE VERIFIED ✅" : "ORACLE UNVERIFIED ❌"}`;
  sourcesEl.textContent = String(sources);
  locationEl.textContent = verdict.location || "West Java, Indonesia";
  riskEl.textContent = verdict.manipulation_risk || "Medium";
  if (summaryEl) {
    summaryEl.textContent = verdict.summary || "Risk assessment completed.";
  }
  if (summaryBelowEl) {
    summaryBelowEl.textContent = verdict.summary || "Risk assessment completed.";
  }
  if (reasonEl) {
    reasonEl.textContent = verdict.reason || verdict.agent_reason || "No reason provided.";
  }
}

let activeVoteMembers = [];
const votes = {};
const memberList = document.getElementById("member-list");
const voteYesBar = document.getElementById("vote-yes");
const voteStats = document.getElementById("vote-stats");
const executeBtn = document.getElementById("execute-btn");
const payoutBody = document.getElementById("payout-body");
const totalDistributedValue = document.getElementById("total-distributed-value");
const payoutLinksList = document.getElementById("payout-links-list");
let currentYesPercent = 0;

renderMemberVotingRows();
renderPayoutPreviewRows();

memberList.addEventListener("click", (event) => {
  const target = event.target;
  if (!target.classList.contains("choice")) return;

  const name = target.dataset.name;
  const vote = target.dataset.vote;
  votes[name] = vote;

  const row = target.closest(".member-row");
  const [yesBtn, noBtn] = row.querySelectorAll(".choice");
  yesBtn.classList.remove("active-yes");
  noBtn.classList.remove("active-no");
  if (vote === "yes") yesBtn.classList.add("active-yes");
  if (vote === "no") noBtn.classList.add("active-no");

  updateVoteBarAndContract();
});

function updateVoteBarAndContract() {
  const totalMembers = activeVoteMembers.length;
  if (totalMembers === 0) {
    voteYesBar.style.width = "0%";
    voteStats.textContent = "YES 0% (0/0) - no active members";
    executeBtn.disabled = true;
    executeBtn.textContent = "Execute Payout";
    communityGate.textContent = "Community Gate: Waiting Active Members";
    contractGate.textContent = "Contract Gate: Locked";
    return;
  }

  const yesCount = Object.values(votes).filter((v) => v === "yes").length;
  const yesPercent = Math.round((yesCount / totalMembers) * 100);
  currentYesPercent = yesPercent;

  voteYesBar.style.width = `${yesPercent}%`;
  voteStats.textContent = `YES ${yesPercent}% (${yesCount}/${totalMembers})`;
  const state = getContractState();

  if (!state.oracleVerified) {
    communityGate.textContent = "Community Gate: Waiting Oracle";
    contractGate.textContent = "Contract Gate: Locked";
    executeBtn.disabled = true;
    executeBtn.textContent = "Execute Payout";
    renderAuditFromContract();
    return;
  }

  const approved = yesPercent >= 60;
  communityGate.textContent = `Community Gate: ${approved ? "Approved" : "In Progress"}`;
  contractGate.textContent = approved ? "Contract Gate: Ready" : "Contract Gate: Locked";
  executeBtn.disabled = !approved;
  executeBtn.textContent = approved ? "Execute Payout" : "Execute Payout";

  renderAuditFromContract();
}

executeBtn.addEventListener("click", async () => {
  const state = getContractState();
  if (!state.oracleVerified || currentYesPercent < 60) return;

  let payouts = communityVoteFeed(currentYesPercent);
  if (!Array.isArray(payouts) || payouts.length === 0) {
    payouts = calculatePayoutsFromActiveMembers();
  }
  if (!Array.isArray(payouts) || payouts.length === 0) {
    payoutLinksList.textContent = "No active members available for payout links.";
    return;
  }

  contractGate.textContent = "Contract Gate: Unlocked";
  const startResults = await startInteractivePayouts(payouts);
  renderPayoutTable(payouts, startResults);
  renderPayoutLinks(startResults);
  openScreen("screen-payout");
  executeBtn.textContent = "Execute Payout (Started)";
  executeBtn.disabled = true;
  renderAuditFromContract();
});

async function startInteractivePayouts(payouts) {
  const results = [];
  for (const payout of payouts) {
    const amount = Number(payout.payout || 0);
    const fallbackUrl = buildManualSendUrl(payout.ilpAddress, amount);
    try {
      const response = await fetch(`${MEMBERS_API_BASE}/api/payout/start`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          memberWallet: payout.ilpAddress,
          amountSGD: amount,
        }),
      });
      const data = await response.json();
      if (!response.ok || !data.ok || !data.redirectUrl) {
        throw new Error(data.error || data.detail || "Failed to start payout");
      }

      window.open(data.redirectUrl, "_blank");
      results.push({
        member: payout.name,
        amount,
        status: "approval_required",
        redirectUrl: data.redirectUrl,
        fallbackUrl,
      });
    } catch (error) {
      results.push({
        member: payout.name,
        amount,
        status: "failed",
        error: error instanceof Error ? error.message : "unknown error",
        fallbackUrl,
      });
    }
  }
  return results;
}

function renderPayoutTable(payouts, payoutResults = null) {
  payoutBody.innerHTML = "";
  let total = 0;
  const resultMap = new Map(
    Array.isArray(payoutResults) ? payoutResults.map((result) => [result.member, result]) : []
  );

  payouts.forEach((payout) => {
    const amount = Number(payout.payout || 0);
    total += amount;
    const transfer = resultMap.get(payout.name);
    const statusText = transfer
      ? transfer.status === "approval_required"
        ? `<a href="${transfer.redirectUrl}" target="_blank" rel="noreferrer">Approve In Wallet</a>`
        : transfer.status === "sent"
        ? "Sent"
        : `Failed: ${transfer.error || "Unknown error"}<br/><a href="${transfer.fallbackUrl}" target="_blank" rel="noreferrer">Open Send Page</a>`
      : "Pending";

    const tr = document.createElement("tr");
    tr.innerHTML = `
      <td>${payout.name}</td>
      <td>${payout.household}</td>
      <td>${getContractState().disasterSeverity || "Moderate"}</td>
      <td>${Number(payout.score).toFixed(2)}</td>
      <td>SGD ${amount.toFixed(2)}</td>
      <td>${statusText}</td>
    `;
    payoutBody.appendChild(tr);
  });
  setTotalDistributed(total);
}

function renderPayoutLinks(startResults) {
  if (!payoutLinksList) return;
  const rows = Array.isArray(startResults) ? startResults : [];
  if (rows.length === 0) {
    payoutLinksList.textContent = "No payout links available.";
    return;
  }

  payoutLinksList.innerHTML = rows
    .map(
      (entry) =>
        `<p>${entry.member} (SGD ${Number(entry.amount || 0).toFixed(2)}): ${
          entry.status === "approval_required"
            ? `<a href="${entry.redirectUrl}" target="_blank" rel="noreferrer">Approve In Wallet</a>`
            : `<a href="${entry.fallbackUrl}" target="_blank" rel="noreferrer">Open Send Page</a>`
        }</p>`
    )
    .join("");
}

function buildManualSendUrl(walletAddress, amount) {
  const receiver = encodeURIComponent(String(walletAddress || ""));
  const value = encodeURIComponent(String(Number(amount || 0).toFixed(2)));
  return `https://pay.interledger-test.dev/?receiver=${receiver}&amount=${value}`;
}

function calculatePayoutsFromActiveMembers() {
  if (!Array.isArray(activeVoteMembers) || activeVoteMembers.length === 0) return [];
  const severity = getContractState().disasterSeverity || "Moderate";
  const fundBalance = Number(getContractState().fundBalance || 0);
  const householdMultiplier = { "1": 1.0, "2-3": 1.5, "4+": 2.0 };
  const severityMultiplier = { Minor: 1.0, Moderate: 1.5, Severe: 2.0 };

  const rows = activeVoteMembers.map((member) => {
    const h = householdMultiplier[member.household] || 1.0;
    const s = severityMultiplier[severity] || 1.0;
    return { ...member, score: h * s };
  });
  const totalScore = rows.reduce((sum, row) => sum + row.score, 0);

  return rows.map((row) => ({
    name: row.name,
    household: row.household,
    ilpAddress: row.ilpAddress || "",
    score: row.score,
    payout: totalScore > 0 ? (row.score / totalScore) * fundBalance : 0,
  }));
}

function renderPayoutPreviewRows() {
  payoutBody.innerHTML = "";
  let total = 0;
  if (activeVoteMembers.length === 0) {
    const tr = document.createElement("tr");
    tr.innerHTML = `
      <td colspan="6">No active members with successful contributions yet.</td>
    `;
    payoutBody.appendChild(tr);
    setTotalDistributed(0);
    return;
  }

  const state = getContractState();
  const severity = state.disasterSeverity || "Moderate";
  const fundBalance = Number(state.fundBalance || 0);
  const householdMultiplier = { "1": 1.0, "2-3": 1.5, "4+": 2.0 };
  const severityMultiplier = { Minor: 1.0, Moderate: 1.5, Severe: 2.0 };

  const rows = activeVoteMembers.map((member) => {
    const h = householdMultiplier[member.household] || 1.0;
    const s = severityMultiplier[severity] || 1.0;
    return {
      ...member,
      score: h * s,
    };
  });
  const totalScore = rows.reduce((sum, row) => sum + row.score, 0);

  activeVoteMembers.forEach((member) => {
    const row = rows.find((r) => r.name === member.name);
    const score = row ? row.score : 0;
    const payout = totalScore > 0 ? (score / totalScore) * fundBalance : 0;
    total += payout;
    const tr = document.createElement("tr");
    tr.innerHTML = `
      <td>${member.name}</td>
      <td>${member.household}</td>
      <td>${severity}</td>
      <td>${score.toFixed(2)}</td>
      <td>SGD ${payout.toFixed(2)}</td>
      <td>Pending</td>
    `;
    payoutBody.appendChild(tr);
  });
  setTotalDistributed(total);
}

const auditBody = document.getElementById("audit-body");
function renderAuditFromContract() {
  const state = getContractState();
  auditBody.innerHTML = "";
  [...state.auditLog].reverse().forEach((entry) => {
    const tr = document.createElement("tr");
    tr.innerHTML = `
      <td>${entry.timestamp}</td>
      <td>${entry.message}</td>
      <td>SmartContract</td>
      <td>${entry.blockHash}</td>
      <td>success</td>
    `;
    auditBody.appendChild(tr);
  });
}

const fundBalanceValue = document.getElementById("fund-balance-value");
const fundBalanceMeta = document.getElementById("fund-balance-meta");
const activeMembersValue = document.getElementById("active-members-value");

async function fetchJsonWithTimeout(url, timeoutMs = API_TIMEOUT_MS) {
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), timeoutMs);
  try {
    return await fetch(url, { signal: controller.signal });
  } finally {
    clearTimeout(timer);
  }
}

async function fetchFundBalance() {
  if (!fundBalanceValue || !fundBalanceMeta) return;
  try {
    const response = await fetchJsonWithTimeout(`${BALANCE_API_BASE}/api/fund/balance`);
    const payload = await response.json();
    if (!response.ok || (!payload.ok && !payload.success)) {
      throw new Error(payload.error || "Failed to fetch fund balance");
    }
    const amount = Number(payload.balanceUsd ?? payload.balance ?? 0);
    const currency = payload.currency || "USD";
    const wallet = payload.wallet || payload.walletAddress || "";
    setFundBalance(amount);
    fundBalanceValue.textContent = `${currency} ${amount.toFixed(2)}`;
    fundBalanceMeta.textContent = `Wallet: ${wallet}`;
  } catch (error) {
    fundBalanceValue.textContent = "Unavailable";
    fundBalanceMeta.textContent = `Balance fetch failed: ${error instanceof Error ? error.message : "Unknown error"}`;
  }
}

async function syncActiveMembersFromApi() {
  try {
    const response = await fetchJsonWithTimeout(`${MEMBERS_API_BASE}/api/users`);
    const payload = await response.json();
    if (!response.ok || !payload.ok || !Array.isArray(payload.data)) {
      throw new Error("Failed to fetch active members");
    }

    const activeUsers = payload.data.filter((user) => user.isActiveMember);
    activeVoteMembers = activeUsers.map((user) => ({
      name: user.name,
      household: householdBucketFromSize(Number(user.household?.size || 1)),
      ilpAddress: user.interledgerAddress || "",
    }));
    setActiveMembers(activeVoteMembers);

    if (activeMembersValue) {
      activeMembersValue.textContent = String(activeVoteMembers.length);
    }
    renderMemberVotingRows();
    renderPayoutPreviewRows();
    renderAuditFromContract();
  } catch {
    if (activeMembersValue) {
      activeMembersValue.textContent = "Unavailable";
    }
  }
}

void fetchFundBalance();
void syncActiveMembersFromApi();
setInterval(() => void fetchFundBalance(), 15000);
setInterval(() => void syncActiveMembersFromApi(), 5000);

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

function setTotalDistributed(amount) {
  if (!totalDistributedValue) return;
  const total = Number(amount || 0);
  totalDistributedValue.textContent = `SGD ${total.toFixed(2)}`;
}

function renderMemberVotingRows() {
  memberList.innerHTML = "";
  Object.keys(votes).forEach((key) => delete votes[key]);

  if (activeVoteMembers.length === 0) {
    const empty = document.createElement("p");
    empty.className = "muted";
    empty.textContent = "No active members with successful transactions yet.";
    memberList.appendChild(empty);
    voteYesBar.style.width = "0%";
    voteStats.textContent = "YES 0% (0/0)";
    executeBtn.disabled = true;
    executeBtn.textContent = "Execute Payout";
    renderPayoutPreviewRows();
    return;
  }

  activeVoteMembers.forEach((member) => {
    const row = document.createElement("div");
    row.className = "member-row";
    row.innerHTML = `
      <span>${member.name}</span>
      <button class="choice" data-name="${member.name}" data-vote="yes">YES</button>
      <button class="choice" data-name="${member.name}" data-vote="no">NO</button>
    `;
    memberList.appendChild(row);
  });

  voteYesBar.style.width = "0%";
  voteStats.textContent = `YES 0% (0/${activeVoteMembers.length})`;
}

function householdBucketFromSize(size) {
  if (size >= 4) return "4+";
  if (size >= 2) return "2-3";
  return "1";
}