/*
 This file is part of GNU Taler
 (C) 2022 Taler Systems S.A.

 GNU Taler is free software; you can redistribute it and/or modify it under the
 terms of the GNU General Public License as published by the Free Software
 Foundation; either version 3, or (at your option) any later version.

 GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
 WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 A PARTICULAR PURPOSE.  See the GNU General Public License for more details.

 You should have received a copy of the GNU General Public License along with
 GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */

import {
  AbsoluteTime,
  Amounts,
  HttpStatusCode,
  Logger,
  TalerCorebankApi,
  TalerError,
  TalerErrorCode,
  TranslatedString,
  assertUnreachable,
  parsePaytoUri
} from "@gnu-taler/taler-util";
import {
  Loading,
  LocalNotificationBanner,
  ShowInputErrorLabel,
  useLocalNotification,
  useTranslationContext
} from "@gnu-taler/web-util/browser";
import { format } from "date-fns";
import { Fragment, VNode, h } from "preact";
import { useState } from "preact/hooks";
import { ErrorLoadingWithDebug } from "../components/ErrorLoadingWithDebug.js";
import { useBankCoreApiContext } from "../context/config.js";
import { useWithdrawalDetails } from "../hooks/access.js";
import { useBackendState } from "../hooks/backend.js";
import { ChallengeInProgess, useBankState } from "../hooks/bank-state.js";
import { useConversionInfo } from "../hooks/circuit.js";
import { undefinedIfEmpty } from "../utils.js";
import { RenderAmount } from "./PaytoWireTransferForm.js";
import { OperationNotFound } from "./WithdrawalQRCode.js";

const logger = new Logger("SolveChallenge");

export function SolveChallengePage({
  onContinue,
}: {
  onContinue: () => void;
}): VNode {
  const { api } = useBankCoreApiContext()
  const { i18n } = useTranslationContext();
  const [bankState, updateBankState] = useBankState();
  const [code, setCode] = useState<string | undefined>(undefined);
  const [notification, notify, handleError] = useLocalNotification()
  const { state } = useBackendState();
  const creds = state.status !== "loggedIn" ? undefined : state

  if (!bankState.currentChallenge) {
    return <div>
      <span>no challenge to solve  </span>
      <button type="button"
        class="inline-flex items-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500"
        onClick={() => {
          onContinue()
        }}
      >
        <i18n.Translate>Continue</i18n.Translate>
      </button>
    </div>
  }

  const ch = bankState.currentChallenge
  const errors = undefinedIfEmpty({
    code: !code ? i18n.str`required` : undefined,
  });

  async function startChallenge() {
    if (!creds) return;
    await handleError(async () => {
      const resp = await api.sendChallenge(creds, ch.id);
      if (resp.type === "ok") {
        const newCh = structuredClone(ch)
        newCh.sent = AbsoluteTime.now()
        newCh.info = resp.body
        updateBankState("currentChallenge", newCh)
      } else {
        switch (resp.case) {
          case HttpStatusCode.NotFound: return notify({
            type: "error",
            title: i18n.str`Cashout not found. It may be also mean that it was already aborted.`,
            description: resp.detail.hint as TranslatedString,
            debug: resp.detail,
          })
          case HttpStatusCode.Unauthorized: return notify({
            type: "error",
            title: i18n.str`Cashout not found. It may be also mean that it was already aborted.`,
            description: resp.detail.hint as TranslatedString,
            debug: resp.detail,
          })
          case TalerErrorCode.BANK_TAN_CHANNEL_SCRIPT_FAILED: return notify({
            type: "error",
            title: i18n.str`Cashout not found. It may be also mean that it was already aborted.`,
            description: resp.detail.hint as TranslatedString,
            debug: resp.detail,
          })
          default: assertUnreachable(resp)
        }
      }
    })
  }

  async function completeChallenge() {
    if (!creds || !code) return;
    await handleError(async () => {
      {
        const resp = await api.confirmChallenge(creds, ch.id, {
          tan: code
        });
        if (resp.type === "fail") {
          setCode("")
          switch (resp.case) {
            case HttpStatusCode.NotFound: return notify({
              type: "error",
              title: i18n.str`Challenge not found.`,
              description: resp.detail.hint as TranslatedString,
              debug: resp.detail,
            })
            case HttpStatusCode.Unauthorized: return notify({
              type: "error",
              title: i18n.str`This user is not authorized to complete this challenge.`,
              description: resp.detail.hint as TranslatedString,
              debug: resp.detail,
            })
            case HttpStatusCode.TooManyRequests: return notify({
              type: "error",
              title: i18n.str`Too many attemps, try another code.`,
              description: resp.detail.hint as TranslatedString,
              debug: resp.detail,
            })
            case TalerErrorCode.BANK_TAN_CHALLENGE_FAILED: return notify({
              type: "error",
              title: i18n.str`The confirmation code is wrong, try again.`,
              description: resp.detail.hint as TranslatedString,
              debug: resp.detail,
            })
            case TalerErrorCode.BANK_TAN_CHALLENGE_EXPIRED: return notify({
              type: "error",
              title: i18n.str`The operation expired.`,
              description: resp.detail.hint as TranslatedString,
              debug: resp.detail,
            })
            default: assertUnreachable(resp)
          }
        }
      }
      {
        const resp = await (async (ch: ChallengeInProgess) => {
          switch (ch.operation) {
            case "delete-account": return await api.deleteAccount(creds, ch.id)
            case "update-account": return await api.updateAccount(creds, ch.request, ch.id)
            case "update-password": return await api.updatePassword(creds, ch.request, ch.id)
            case "create-transaction": return await api.createTransaction(creds, ch.request, ch.id)
            case "confirm-withdrawal": return await api.confirmWithdrawalById(creds, ch.request, ch.id)
            case "create-cashout": return await api.createCashout(creds, ch.request, ch.id)
            default: assertUnreachable(ch)
          }
        })(ch);

        if (resp.type === "fail") {
          if (resp.case !== HttpStatusCode.Accepted) {
            return notify({
              type: "error",
              title: i18n.str`The operation failed.`,
              description: resp.detail.hint as TranslatedString,
              debug: resp.detail,
            })
          }
          // another challenge required
          updateBankState("currentChallenge", {
            operation: ch.operation,
            id: String(resp.body.challenge_id),
            sent: AbsoluteTime.never(),
            request: ch.request as any,
          })
          return notify({
            type: "info",
            title: i18n.str`The operation needs another confirmation to complete.`,
          })
        }
        updateBankState("currentChallenge", undefined)
        return onContinue()
      }
    })
  }

  const subtitle = ((op): TranslatedString => {
    switch (op) {
      case "delete-account": return i18n.str`Account delete`
      case "update-account": return i18n.str`Account update`
      case "update-password": return i18n.str`Password update`
      case "create-transaction": return i18n.str`Wire transfer`
      case "confirm-withdrawal": return i18n.str`Withdrawal`
      case "create-cashout": return i18n.str`Cashout`
    }
  })(ch.operation)

  return (
    <Fragment>
      <LocalNotificationBanner notification={notification} />
      <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
        <div class="px-4 sm:px-0">
          <h2 class="text-base font-semibold leading-7 text-gray-900">
            <span class="text-sm text-black font-semibold leading-6 " id="availability-label">
              <i18n.Translate>Confirm the operation</i18n.Translate>
            </span>
          </h2>
          <span>
            {subtitle}
          </span>
        </div>

        <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
          <ChallengeDetails challenge={bankState.currentChallenge} onStart={startChallenge} />
          {ch.info &&
            <div class="mt-3 text-sm leading-6">
              <form
                class="bg-white shadow-sm ring-1 ring-gray-900/5"
                autoCapitalize="none"
                autoCorrect="off"
                onSubmit={e => {
                  e.preventDefault()
                }}
              >
                <div class="px-4 py-6 sm:p-8">
                  <label for="withdraw-amount">
                    <i18n.Translate>Enter the confirmation code</i18n.Translate>
                  </label>
                  <div class="mt-2">
                    <div class="relative rounded-md shadow-sm">
                      <input
                        type="text"
                        // class="block w-full rounded-md border-0 py-1.5 pl-16 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                        aria-describedby="answer"
                        autoFocus
                        class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                        value={code ?? ""}
                        required

                        name="answer"
                        id="answer"
                        autocomplete="off"
                        onChange={(e): void => {
                          setCode(e.currentTarget.value)
                        }}
                      />
                    </div>
                    <ShowInputErrorLabel message={errors?.code} isDirty={code !== undefined} />
                  </div>
                </div>
                <div class="flex items-center justify-between gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
                  <button type="button"
                    class="inline-flex items-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500"
                    onClick={() => {
                      updateBankState("currentChallenge", undefined)
                      onContinue()
                    }}
                  >
                    <i18n.Translate>Cancel</i18n.Translate>
                  </button>
                  <button type="submit"
                    class="disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                    disabled={!!errors}
                    onClick={(e) => {
                      completeChallenge()
                    }}
                  >
                    <i18n.Translate>Confirm</i18n.Translate>
                  </button>
                </div>
              </form>

              {/* <ShouldBeSameUser username={details.username}> */}
              {/* </ShouldBeSameUser> */}
            </div>
          }
        </div>
      </div>
    </Fragment>

  );
}

function ChallengeDetails({ challenge, onStart }: { challenge: ChallengeInProgess, onStart: () => void }): VNode {
  const { i18n } = useTranslationContext();
  const { config } = useBankCoreApiContext();

  return <div class="px-4 mt-4 ">
    <div class="w-full">
      <div class="flex justify-center">

        {challenge.info ?
          <button type="submit"
            class="disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
            onClick={(e) => {
              onStart()
            }}
          >
            <i18n.Translate>Send again</i18n.Translate>
          </button>
          :
          <button type="submit"
            class="disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
            onClick={(e) => {
              onStart()
            }}
          >
            <i18n.Translate>Send code</i18n.Translate>
          </button>
        }
      </div>
      <div class="mt-6 border-t border-gray-100">
        <h2 class="text-base font-semibold leading-7 text-gray-900">
          <span class="text-sm text-black font-semibold leading-6 " id="availability-label">
            <i18n.Translate>Operation details</i18n.Translate>
          </span>
        </h2>
        <dl class="divide-y divide-gray-100">
          {((): VNode => {
            switch (challenge.operation) {
              case "delete-account": return <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                <dt class="text-sm font-medium leading-6 text-gray-900">Account</dt>
                <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{challenge.request}</dd>
              </div>
              case "create-transaction": {
                const payto = parsePaytoUri(challenge.request.payto_uri)!
                return <Fragment>
                  {challenge.request.amount &&
                    <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                      <dt class="text-sm font-medium leading-6 text-gray-900">Amount</dt>
                      <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                        <RenderAmount value={Amounts.parseOrThrow(challenge.request.amount)} spec={config.currency_specification} />
                      </dd>
                    </div>
                  }
                  {payto.isKnown && payto.targetType === "iban" &&
                    <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                      <dt class="text-sm font-medium leading-6 text-gray-900">To account</dt>
                      <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                        {payto.iban}
                      </dd>
                    </div>
                  }
                </Fragment>
              }
              case "confirm-withdrawal": return <ShowWithdrawalDetails id={challenge.request} />
              case "create-cashout": {
                return <ShowCashoutDetails request={challenge.request} />
              }
              case "update-account": {
                return <Fragment>
                  {challenge.request.cashout_payto_uri !== undefined &&
                    <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                      <dt class="text-sm font-medium leading-6 text-gray-900">Cashout account</dt>
                      <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                        {challenge.request.cashout_payto_uri}
                      </dd>
                    </div>
                  }
                  {challenge.request.contact_data?.email !== undefined &&
                    <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                      <dt class="text-sm font-medium leading-6 text-gray-900">Email</dt>
                      <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                        {challenge.request.contact_data?.email}
                      </dd>
                    </div>
                  }
                  {challenge.request.contact_data?.phone !== undefined &&
                    <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                      <dt class="text-sm font-medium leading-6 text-gray-900">Phone</dt>
                      <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                        {challenge.request.contact_data?.phone}
                      </dd>
                    </div>
                  }
                  {challenge.request.debit_threshold !== undefined &&
                    <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                      <dt class="text-sm font-medium leading-6 text-gray-900">Debit threshold</dt>
                      <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                        <RenderAmount value={Amounts.parseOrThrow(challenge.request.debit_threshold)} spec={config.currency_specification} />
                      </dd>
                    </div>
                  }
                  {challenge.request.is_public !== undefined &&
                    <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                      <dt class="text-sm font-medium leading-6 text-gray-900">Is public</dt>
                      <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                        {challenge.request.is_public ? "enable" : "disable"}
                      </dd>
                    </div>
                  }
                  {challenge.request.name !== undefined &&
                    <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                      <dt class="text-sm font-medium leading-6 text-gray-900">Name</dt>
                      <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                        {challenge.request.name}
                      </dd>
                    </div>
                  }
                  {challenge.request.tan_channel !== undefined &&
                    <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                      <dt class="text-sm font-medium leading-6 text-gray-900">Authentication channel</dt>
                      <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                        {challenge.request.tan_channel}
                      </dd>
                    </div>
                  }
                </Fragment>
              }
              case "update-password": {
                return <Fragment>
                  <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                    <dt class="text-sm font-medium leading-6 text-gray-900">New password</dt>
                    <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                      {challenge.request.new_password}
                    </dd>
                  </div>
                </Fragment>
              }
              default: assertUnreachable(challenge)
            }
          })()}

          {challenge.info &&
            <h2 class="text-base font-semibold leading-7 text-gray-900">
              <span class="text-sm text-black font-semibold leading-6 " id="availability-label">
                <i18n.Translate>Challenge details</i18n.Translate>
              </span>
            </h2>
          }
          {challenge.sent.t_ms !== "never" &&
            <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
              <dt class="text-sm font-medium leading-6 text-gray-900">Sent at</dt>
              <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                {format(challenge.sent.t_ms, "dd/MM/yyyy HH:mm:ss")}
              </dd>
            </div>
          }
          {challenge.info &&
            <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
              <dt class="text-sm font-medium leading-6 text-gray-900">
                {((ch: TalerCorebankApi.TanChannel): VNode => {
                  switch (ch) {
                    case TalerCorebankApi.TanChannel.SMS: return <i18n.Translate>To phone</i18n.Translate>
                    case TalerCorebankApi.TanChannel.EMAIL: return <i18n.Translate>To email</i18n.Translate>
                    default: assertUnreachable(ch)
                  }
                })(challenge.info.tan_channel)}
              </dt>
              <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                {challenge.info.tan_info}
              </dd>
            </div>
          }

        </dl>
      </div>
    </div>
  </div>
}

function ShowWithdrawalDetails({ id }: { id: string }): VNode {
  const { i18n } = useTranslationContext();
  const details = useWithdrawalDetails(id)
  const { config } = useBankCoreApiContext();
  if (!details) {
    return <Loading />
  }
  if (details instanceof TalerError) {
    return <ErrorLoadingWithDebug error={details} />
  }
  if (details.type === "fail") {
    switch (details.case) {
      case HttpStatusCode.BadRequest:
      case HttpStatusCode.NotFound: return <OperationNotFound onClose={undefined} />
      default: assertUnreachable(details)
    }
  }

  return <Fragment>
    <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
      <dt class="text-sm font-medium leading-6 text-gray-900">Amount</dt>
      <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
        <RenderAmount value={Amounts.parseOrThrow(details.body.amount)} spec={config.currency_specification} />
      </dd>
    </div>
    {details.body.selected_reserve_pub !== undefined &&
      <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
        <dt class="text-sm font-medium leading-6 text-gray-900">Withdraw id</dt>
        <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0" title={details.body.selected_reserve_pub}>
          {details.body.selected_reserve_pub.substring(0, 16)}...
        </dd>
      </div>
    }
    {details.body.selected_exchange_account !== undefined &&
      <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
        <dt class="text-sm font-medium leading-6 text-gray-900">To account</dt>
        <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
          {details.body.selected_exchange_account}
        </dd>
      </div>
    }
  </Fragment>
}

function ShowCashoutDetails({ request }: { request: TalerCorebankApi.CashoutRequest }): VNode {
  const { i18n } = useTranslationContext();
  const info = useConversionInfo();
  if (!info) {
    return <Loading />
  }

  if (info instanceof TalerError) {
    return <ErrorLoadingWithDebug error={info} />
  }
  return <Fragment>
    {request.subject !== undefined &&
      <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
        <dt class="text-sm font-medium leading-6 text-gray-900">Subject</dt>
        <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
          {request.subject}
        </dd>
      </div>
    }
    <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
      <dt class="text-sm font-medium leading-6 text-gray-900">Debit</dt>
      <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
        <RenderAmount value={Amounts.parseOrThrow(request.amount_credit)} spec={info.body.regional_currency_specification} />
      </dd>
    </div>
    <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
      <dt class="text-sm font-medium leading-6 text-gray-900">Credit</dt>
      <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
        <RenderAmount value={Amounts.parseOrThrow(request.amount_credit)} spec={info.body.fiat_currency_specification} />
      </dd>
    </div>
  </Fragment>
}