import {
  decryptDataWithStoredPassword,
  encryptDataWithStoredPassword,
  getEncryptionPassword,
  MakeNewDate,
} from "../helpers.ts";
import { Income } from "../services/financhalServices.ts";
import { useEffect, useState } from "preact/hooks";
import { PopAddIncomeDialog } from "./dialogs/PopAddIncomeDialog.tsx";

interface Props {
  incomes: Income[];
  userId?: string;
  openModal?: boolean;
}

export default function IncomeList(
  { incomes, userId, openModal = false }: Props,
) {
  // Theme classes are defined in styles.css and respond to theme mode + media.
  const [_popAddIncome, popupAddIncomeDialog] = PopAddIncomeDialog({
    userId,
    defaultOpen: openModal,
  });
  const [processedIncomes, setProcessedIncomes] = useState<Income[]>(incomes);
  const [_isProcessing, setIsProcessing] = useState(false);
  const [isOpeningModal, setIsOpeningModal] = useState(openModal);

  // Process incomes on component mount and when incomes or userId change
  useEffect(() => {
    setTimeout(() => {
      const lockRoute = localStorage.getItem("lock-route");
      const url = new URL(globalThis.location.href);
      const currentRoute = url.pathname + url.search;

      if (lockRoute && lockRoute === currentRoute) {
        localStorage.removeItem("lock-route");
      }
    }, 100);

    if (!userId) {
      setProcessedIncomes(incomes);
      return;
    }

    const processIncomes = async () => {
      setIsProcessing(true);
      const encryptionPassword = getEncryptionPassword(userId);

      if (!encryptionPassword) {
        // No encryption key available, use incomes as-is
        setProcessedIncomes(incomes);
        setIsProcessing(false);
        return;
      }

      const updatedIncomes: Income[] = [];

      for (const income of incomes) {
        const processedIncome = { ...income };

        if (income.encrypted_data) {
          // Try to decrypt existing encrypted data
          try {
            const decryptedData = await decryptDataWithStoredPassword(
              userId,
              income.encrypted_data,
            );
            if (decryptedData) {
              const parsed = JSON.parse(decryptedData);
              if (parsed.amount !== undefined) {
                processedIncome.amount = parsed.amount;
              }
              if (parsed.source !== undefined) {
                processedIncome.source = parsed.source;
              }
            }
          } catch (error) {
            console.error("Failed to decrypt income data:", error);
          }
        } else if (income.amount !== null || income.source !== null) {
          // No encrypted data but has plaintext data - encrypt it and clear plaintext
          try {
            const dataToEncrypt = {
              amount: income.amount,
              source: income.source,
            };

            const encryptedData = await encryptDataWithStoredPassword(
              userId,
              JSON.stringify(dataToEncrypt),
            );

            if (encryptedData) {
              // Update the income in the database
              const response = await fetch("/api/update/income", {
                method: "POST",
                headers: {
                  "Content-Type": "application/json",
                },
                body: JSON.stringify({
                  income_id: income.id,
                  encrypted_data: encryptedData,
                  source: null, // Clear plaintext source
                  amount: null, // Clear plaintext amount
                }),
              });

              if (response.ok) {
                // Update local state
                processedIncome.encrypted_data = encryptedData;
                processedIncome.source = income.source; // Keep for display
                processedIncome.amount = income.amount; // Keep for display
              }
            }
          } catch (error) {
            console.error("Failed to encrypt income data:", error);
          }
        }

        updatedIncomes.push(processedIncome);
      }

      setProcessedIncomes(updatedIncomes);
      setIsProcessing(false);
    };

    processIncomes();
  }, []);

  async function handleExportIncomes() {
    const exportData = processedIncomes.map((inc) => ({
      id: inc.id,
      source: inc.source ?? "",
      amount: inc.amount ?? 0,
      frequency: inc.frequency ?? "",
      received_date: inc.received_date
        ? new Date(inc.received_date).toISOString().split("T")[0]
        : null,
    }));
    const json = JSON.stringify(exportData, null, 2);
    const blob = new Blob([json], { type: "application/json" });
    const suggestedName = `incomes-${
      new Date().toISOString().split("T")[0]
    }.json`;

    const showSave = (globalThis as { showSaveFilePicker?: unknown })
      .showSaveFilePicker;
    if (typeof showSave === "function") {
      try {
        const handle = await (showSave as (opts: {
          suggestedName: string;
          types: { description: string; accept: Record<string, string[]> }[];
        }) => Promise<FileSystemFileHandle>)({
          suggestedName,
          types: [{
            description: "JSON file",
            accept: { "application/json": [".json"] },
          }],
        });
        const writable = await handle.createWritable();
        await writable.write(blob);
        await writable.close();
      } catch (err) {
        if ((err as Error).name !== "AbortError") {
          console.error("Export failed:", err);
          fallbackDownload(blob, suggestedName);
        }
      }
    } else {
      fallbackDownload(blob, suggestedName);
    }
  }

  function fallbackDownload(blob: Blob, filename: string) {
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = filename;
    a.click();
    URL.revokeObjectURL(url);
  }

  async function handleImportIncomes() {
    let file: File;
    const showOpen = (globalThis as { showOpenFilePicker?: unknown })
      .showOpenFilePicker;
    if (typeof showOpen === "function") {
      try {
        const [handle] = await (showOpen as (opts: {
          types: { description: string; accept: Record<string, string[]> }[];
          multiple: boolean;
        }) => Promise<FileSystemFileHandle[]>)({
          types: [{
            description: "JSON file",
            accept: { "application/json": [".json"] },
          }],
          multiple: false,
        });
        file = await handle.getFile();
      } catch (err) {
        if ((err as Error).name !== "AbortError") {
          console.error("Import file picker failed:", err);
        }
        return;
      }
    } else {
      const chosen = await new Promise<File | null>((resolve) => {
        const input = document.createElement("input");
        input.type = "file";
        input.accept = "application/json,.json";
        input.onchange = () => resolve(input.files?.[0] ?? null);
        input.click();
      });
      if (!chosen) return;
      file = chosen;
    }

    try {
      const text = await file.text();
      const data = JSON.parse(text) as unknown;
      const list = Array.isArray(data)
        ? data
        : (data as { incomes?: unknown[] })?.incomes;
      if (!Array.isArray(list)) {
        alert("Invalid file: expected a JSON array or { incomes: [] }");
        return;
      }
      const res = await fetch("/api/import/incomes", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(list),
      });
      if (!res.ok) {
        const err = await res.json().catch(() => ({}));
        alert(err?.error ?? "Import failed");
        return;
      }
      const result = await res.json() as { added: number; skipped: number };
      if (result.added > 0 || result.skipped > 0) {
        globalThis.location.reload();
      }
    } catch (e) {
      console.error("Import failed:", e);
      alert("Invalid JSON or import failed.");
    }
  }

  return (
    <>
      {popupAddIncomeDialog}
      <div class="flex flex-col mt-14 gap-6">
        <div class="list-header">
          <h2 class="theme-text list-title">
            Your Incomes
          </h2>
          <div class="list-header-center">
            <button
              type="button"
              class="list-action-button list-action-button--small"
              onClick={handleExportIncomes}
            >
              Export JSON
            </button>
            <button
              type="button"
              class="list-action-button list-action-button--small"
              onClick={handleImportIncomes}
            >
              Import JSON
            </button>
          </div>
          <button
            type="button"
            class="list-action-button"
            onClick={() => {
              if (isOpeningModal) return;

              localStorage.setItem(
                "lock-route",
                "/calendar/every-income?modal=on",
              );
              setIsOpeningModal(true);
              globalThis.location.href = "/calendar/every-income?modal=on";
            }}
            disabled={isOpeningModal}
          >
            + Add Income
          </button>
        </div>
        <ul class="space-y-2">
          {processedIncomes.map((inc) => (
            <li
              key={inc.id}
              class="border rounded p-4 shadow relative theme-container"
            >
              <form
                method="POST"
                action="/api/delete/income"
                className="absolute top-1/2 right-0 transform -translate-y-1/2 inline-form"
                onSubmit={(e) => {
                  // Set sender input to current page
                  const form = e.currentTarget;
                  form.sender.value = location.pathname;

                  if (
                    !confirm(
                      `Are you sure you want to delete "${
                        inc.source || "this income"
                      }"?`,
                    )
                  ) {
                    e.preventDefault();
                    return false;
                  }
                }}
              >
                <input type="hidden" name="income_id" value={inc.id} />
                <input
                  type="hidden"
                  name="sender"
                  value={typeof location !== "undefined"
                    ? location.pathname
                    : ""}
                />
                <button
                  type="submit"
                  aria-label="Delete income"
                  className="theme-icon-button button-reset hover:text-red-500 transition-colors"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-6 w-6"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                    />
                  </svg>
                </button>
              </form>
              <div class="font-semibold text-lg theme-text">
                {inc.source || ""}
              </div>
              <div class="text-sm theme-calendar-list-frequency">
                Amount: ${inc.amount}
              </div>
              <div class="text-sm theme-calendar-list-frequency">
                Frequency: {inc.frequency}
              </div>
              <div class="text-sm theme-calendar-list-frequency">
                Received: {inc.received_date
                  ? MakeNewDate(inc.received_date).toISOString().split(
                    "T",
                  )[0]
                  : ""}
              </div>
            </li>
          ))}
        </ul>
      </div>
      <div aria-hidden="true" class="h-28"></div>
      <div class="fixed bottom-4 inset-x-0 flex justify-center z-40 pointer-events-none">
        <a
          href={`/calendar/financial-calendar/${new Date().getFullYear()}/${
            (new Date().getMonth() + 1).toString().padStart(2, "0")
          }?`}
          class="w-11/12 max-w-md pointer-events-auto calendar-action-link calendar-action-link--back"
        >
          Back to Financial Calendar
        </a>
      </div>
    </>
  );
}