import { AmountString, Amounts, PaytoString, TalerCorebankApi, TranslatedString, buildPayto, parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util";
import { CopyButton, ShowInputErrorLabel, useTranslationContext } from "@gnu-taler/web-util/browser";
import { ComponentChildren, Fragment, VNode, h } from "preact";
import { useState } from "preact/hooks";
import { useBankCoreApiContext } from "../../context/config.js";
import { ErrorMessageMappingFor, PartialButDefined, WithIntermediate, undefinedIfEmpty, validateIBAN } from "../../utils.js";
import { InputAmount, doAutoFocus } from "../PaytoWireTransferForm.js";
import { assertUnreachable } from "../WithdrawalOperationPage.js";
import { getRandomPassword } from "../rnd.js";
import { useBackendState } from "../../hooks/backend.js";

const IBAN_REGEX = /^[A-Z][A-Z0-9]*$/;
const EMAIL_REGEX =
  /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const REGEX_JUST_NUMBERS_REGEX = /^\+[0-9 ]*$/;

export type AccountFormData = {
  debit_threshold?: string,
  isExchange?: boolean,
  isPublic?: boolean,
  name?: string,
  username?: string,
  payto_uri?: string,
  cashout_payto_uri?: string,
  email?: string,
  phone?: string,
}

type ChangeByPurposeType = {
  "create": (a: TalerCorebankApi.RegisterAccountRequest | undefined) => void,
  "update": (a: TalerCorebankApi.AccountReconfiguration | undefined) => void,
  "show": undefined
}
/**
 * FIXME:
 * is_public is missing on PATCH
 * account email/password should require 2FA
 * 
 * 
 * @param param0
 * @returns
 */
export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({
  template,
  username,
  purpose,
  onChange,
  focus,
  children,
}: {
  focus?: boolean,
  children: ComponentChildren,
  username?: string,
  template: TalerCorebankApi.AccountData | undefined;
  onChange: ChangeByPurposeType[PurposeType];
  purpose: PurposeType;
}): VNode {
  const { config } = useBankCoreApiContext()
  const { i18n } = useTranslationContext();
  const { state: credentials } = useBackendState();
  const [form, setForm] = useState<AccountFormData>({});

  const [errors, setErrors] = useState<
    ErrorMessageMappingFor<typeof defaultValue> | undefined
  >(undefined);


  const defaultValue: AccountFormData = {
    debit_threshold: Amounts.stringifyValue(template?.debit_threshold ??config.default_debit_threshold),
    isExchange: template?.is_taler_exchange,
    isPublic: template?.is_public,
    name: template?.name ?? "",
    cashout_payto_uri: stringifyIbanPayto(template?.cashout_payto_uri) ?? "" as PaytoString,
    payto_uri: stringifyIbanPayto(template?.payto_uri) ?? "" as PaytoString,
    email: template?.contact_data?.email ?? "",
    phone: template?.contact_data?.phone ?? "",
    username: username ?? "",
  }

  const showingCurrentUserInfo = credentials.status !== "loggedIn" ? false : username === credentials.username
  const userIsAdmin = credentials.status !== "loggedIn" ? false : credentials.isUserAdministrator

  const editableUsername = (purpose === "create")
  const editableName = (purpose === "create" || purpose === "update" && (config.allow_edit_name || userIsAdmin))
  const editableCashout = showingCurrentUserInfo && (purpose === "create" || purpose === "update" && (config.allow_edit_cashout_payto_uri || userIsAdmin))
  const editableThreshold = userIsAdmin && (purpose === "create" || purpose === "update")
  const editableAccount = purpose === "create" && userIsAdmin

  function updateForm(newForm: typeof defaultValue): void {
    const cashoutParsed = !newForm.cashout_payto_uri
      ? undefined
      : buildPayto("iban", newForm.cashout_payto_uri, undefined);;

    const internalParsed = !newForm.payto_uri
      ? undefined
      : buildPayto("iban", newForm.payto_uri, undefined);;

    const trimmedAmountStr = newForm.debit_threshold?.trim();
    const parsedAmount = Amounts.parse(`${config.currency}:${trimmedAmountStr}`);

    const errors = undefinedIfEmpty<ErrorMessageMappingFor<typeof defaultValue>>({
      cashout_payto_uri: (!newForm.cashout_payto_uri
        ? undefined :
        !editableCashout ? undefined :
          !cashoutParsed
            ? i18n.str`does not follow the pattern` :
            !cashoutParsed.isKnown || cashoutParsed.targetType !== "iban"
              ? i18n.str`only "IBAN" target are supported` :
              !IBAN_REGEX.test(cashoutParsed.iban)
                ? i18n.str`IBAN should have just uppercased letters and numbers` :
                validateIBAN(cashoutParsed.iban, i18n)),
      payto_uri: (!newForm.payto_uri
        ? undefined :
        !editableAccount ? undefined :
          !internalParsed
            ? i18n.str`does not follow the pattern` :
            !internalParsed.isKnown || internalParsed.targetType !== "iban"
              ? i18n.str`only "IBAN" target are supported` :
              !IBAN_REGEX.test(internalParsed.iban)
                ? i18n.str`IBAN should have just uppercased letters and numbers` :
                validateIBAN(internalParsed.iban, i18n)),
      email: !newForm.email
        ? undefined :
        !EMAIL_REGEX.test(newForm.email)
          ? i18n.str`it should be an email` :
          undefined,
      phone: !newForm.phone
        ? undefined :
        !newForm.phone.startsWith("+") // FIXME: better phone number check
          ? i18n.str`should start with +` :
          !REGEX_JUST_NUMBERS_REGEX.test(newForm.phone)
            ? i18n.str`phone number can't have other than numbers`
            :
            undefined,
      debit_threshold: !editableThreshold ? undefined :
        !trimmedAmountStr ? undefined :
          !parsedAmount ? i18n.str`not valid` :
            undefined,
      name: !editableName ? undefined : //disabled
        !newForm.name ? i18n.str`required` : undefined,
      username: !editableUsername ? undefined : !newForm.username ? i18n.str`required` : undefined,
    });
    setErrors(errors);

    setForm(newForm);
    if (!onChange) return;

    if (errors) {
      onChange(undefined)
    } else {
      const cashout = !newForm.cashout_payto_uri ? undefined : buildPayto("iban", newForm.cashout_payto_uri, undefined)
      const cashoutURI = !cashout ? undefined : stringifyPaytoUri(cashout)

      const internal = !newForm.payto_uri ? undefined : buildPayto("iban", newForm.payto_uri, undefined);
      const internalURI = !internal ? undefined : stringifyPaytoUri(internal)

      const threshold = !parsedAmount ? undefined : Amounts.stringify(parsedAmount)

      switch (purpose) {
        case "create": {
          //typescript doesn't correctly narrow a generic type
          const callback = onChange as ChangeByPurposeType["create"]
          const result: TalerCorebankApi.RegisterAccountRequest = {
            name: newForm.name!,
            password: getRandomPassword(),
            username: newForm.username!,
            contact_data: undefinedIfEmpty({
              email: newForm.email,
              phone: newForm.phone,
            }),
            debit_threshold: threshold ?? config.default_debit_threshold,
            cashout_payto_uri: cashoutURI,
            payto_uri: internalURI,
            is_public: !!newForm.isPublic,
            is_taler_exchange: !!newForm.isExchange,
          }
          callback(result)
          return;
        }
        case "update": {
          //typescript doesn't correctly narrow a generic type
          const callback = onChange as ChangeByPurposeType["update"]

          const result: TalerCorebankApi.AccountReconfiguration = {
            cashout_payto_uri: cashoutURI,
            contact_data: undefinedIfEmpty({
              email: newForm.email ?? template?.contact_data?.email,
              phone: newForm.phone ?? template?.contact_data?.phone,
            }),
            debit_threshold: threshold,
            is_public: !!newForm.isPublic,
            name: newForm.name,
          }
          callback(result)
          return;
        }
        case "show": {
          return;
        }
        default: {
          assertUnreachable(purpose)
        }
      }
    }
  }
  return (
    <form
      class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2"
      autoCapitalize="none"
      autoCorrect="off"
      onSubmit={e => {
        e.preventDefault()
      }}
    >
      <div class="px-4 py-6 sm:p-8">
        <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">

          <div class="sm:col-span-5">
            <label
              class="block text-sm font-medium leading-6 text-gray-900"
              for="username"
            >
              {i18n.str`Username`}
              {editableUsername && <b style={{ color: "red" }}> *</b>}
            </label>
            <div class="mt-2">
              <input
                ref={focus && purpose === "create" ? doAutoFocus : undefined}
                type="text"
                class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                name="username"
                id="username"
                data-error={!!errors?.username && form.username !== undefined}
                disabled={!editableUsername}
                value={form.username ?? defaultValue.username}
                onChange={(e) => {
                  form.username = e.currentTarget.value;
                  updateForm(structuredClone(form));
                }}
                // placeholder=""
                autocomplete="off"
              />
              <ShowInputErrorLabel
                message={errors?.username}
                isDirty={form.username !== undefined}
              />
            </div>
            <p class="mt-2 text-sm text-gray-500" >
              <i18n.Translate>account identification in the bank</i18n.Translate>
            </p>
          </div>

          <div class="sm:col-span-5">
            <label
              class="block text-sm font-medium leading-6 text-gray-900"
              for="name"
            >
              {i18n.str`Name`}
              {editableName && <b style={{ color: "red" }}> *</b>}
            </label>
            <div class="mt-2">
              <input
                type="text"
                class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                name="name"
                data-error={!!errors?.name && form.name !== undefined}
                id="name"
                disabled={!editableName}
                value={form.name ?? defaultValue.name}
                onChange={(e) => {
                  form.name = e.currentTarget.value;
                  updateForm(structuredClone(form));
                }}
                // placeholder=""
                autocomplete="off"
              />
              <ShowInputErrorLabel
                message={errors?.name}
                isDirty={form.name !== undefined}
              />
            </div>
            <p class="mt-2 text-sm text-gray-500" >
              <i18n.Translate>name of the person owner the account</i18n.Translate>
            </p>
          </div>


          <PaytoField
            type="iban"
            name="internal-account"
            label={i18n.str`Internal IBAN`}
            help={purpose === "create" ?
              i18n.str`if empty a random account number will be assigned` :
              i18n.str`account identification for bank transfer`}
            value={(form.payto_uri ?? defaultValue.payto_uri) as PaytoString}
            disabled={!editableAccount}
            error={errors?.payto_uri}
            onChange={(e) => {
              form.payto_uri = e as PaytoString
              updateForm(structuredClone(form))
            }} />

          <div class="sm:col-span-5">
            <label
              class="block text-sm font-medium leading-6 text-gray-900"
              for="email"
            >
              {i18n.str`Email`}
            </label>
            <div class="mt-2">
              <input
                type="email"
                class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                name="email"
                id="email"
                data-error={!!errors?.email && form.email !== undefined}
                disabled={purpose === "show"}
                value={form.email ?? defaultValue.email}
                onChange={(e) => {
                  form.email = e.currentTarget.value;
                  updateForm(structuredClone(form));
                }}
                autocomplete="off"
              />
              <ShowInputErrorLabel
                message={errors?.email}
                isDirty={form.email !== undefined}
              />
            </div>
          </div>

          <div class="sm:col-span-5">
            <label
              class="block text-sm font-medium leading-6 text-gray-900"
              for="phone"
            >
              {i18n.str`Phone`}
            </label>
            <div class="mt-2">
              <input
                type="text"
                class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                name="phone"
                id="phone"
                disabled={purpose === "show"}
                value={form.phone ?? defaultValue.phone}
                data-error={!!errors?.phone && form.phone !== undefined}
                onChange={(e) => {
                  form.phone = e.currentTarget.value;
                  updateForm(structuredClone(form));
                }}
                autocomplete="off"
              />
              <ShowInputErrorLabel
                message={errors?.phone}
                isDirty={form.phone !== undefined}
              />
            </div>
          </div>

          {showingCurrentUserInfo &&
            <PaytoField
              type="iban"
              name="cashout-account"
              label={i18n.str`Cashout IBAN`}
              help={i18n.str`account number where the money is going to be sent when doing cashouts`}
              value={(form.cashout_payto_uri ?? defaultValue.cashout_payto_uri) as PaytoString}
              disabled={!editableCashout}
              error={errors?.cashout_payto_uri}
              onChange={(e) => {
                form.cashout_payto_uri = e as PaytoString
                updateForm(structuredClone(form))
              }} />
          }

          <div class="sm:col-span-5">
            <label for="debit" class="block text-sm font-medium leading-6 text-gray-900">{i18n.str`Max debt`}</label>
            <InputAmount
              name="debit"
              left
              currency={config.currency}
              value={form.debit_threshold ?? defaultValue.debit_threshold}
              onChange={!editableThreshold ? undefined : (e) => {
                form.debit_threshold = e as AmountString
                updateForm(structuredClone(form))
              }}
            />
            <ShowInputErrorLabel
              message={errors?.debit_threshold ? String(errors?.debit_threshold) : undefined}
              isDirty={form.debit_threshold !== undefined}
            />
            <p class="mt-2 text-sm text-gray-500" >how much is user able to transfer </p>
          </div>

          {purpose !== "create" || !userIsAdmin ? undefined :
            <div class="sm:col-span-5">
              <div class="flex items-center justify-between">
                <span class="flex flex-grow flex-col">
                  <span class="text-sm text-black font-medium leading-6 " id="availability-label">
                    <i18n.Translate>Is an exchange</i18n.Translate>
                  </span>
                </span>
                <button type="button" data-enabled={form.isExchange ?? defaultValue.isExchange ? "true" : "false"} class="bg-indigo-600 data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" role="switch" aria-checked="false" aria-labelledby="availability-label" aria-describedby="availability-description"

                  onClick={() => {
                    form.isExchange = !form.isExchange
                    updateForm(structuredClone(form))
                  }}>
                  <span aria-hidden="true" data-enabled={form.isExchange ?? defaultValue.isExchange ? "true" : "false"} class="translate-x-5 data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
                </button>
              </div>
            </div>}

          <div class="sm:col-span-5">
            <div class="flex items-center justify-between">
              <span class="flex flex-grow flex-col">
                <span class="text-sm text-black font-medium leading-6 " id="availability-label">
                  <i18n.Translate>Is public</i18n.Translate>
                </span>
              </span>
              <button type="button" data-enabled={form.isPublic ?? defaultValue.isPublic  ? "true" : "false"} class="bg-indigo-600 data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" role="switch" aria-checked="false" aria-labelledby="availability-label" aria-describedby="availability-description"

                onClick={() => {
                  form.isPublic = !form.isPublic
                  updateForm(structuredClone(form))
                }}>
                <span aria-hidden="true" data-enabled={form.isPublic ?? defaultValue.isPublic  ? "true" : "false"} class="translate-x-5 data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
              </button>
            </div>
            <p class="mt-2 text-sm text-gray-500" >
              <i18n.Translate>public accounts have their balance publicly accesible</i18n.Translate>
            </p>
          </div>

        </div>
      </div>
      <pre>
        {JSON.stringify(errors, undefined, 2)}
      </pre>
      {children}
    </form>
  );
}

function stringifyIbanPayto(s: PaytoString | undefined): string | undefined {
  if (s === undefined) return undefined
  const p = parsePaytoUri(s)
  if (p === undefined) return undefined
  if (!p.isKnown) return undefined
  if (p.targetType !== "iban") return undefined
  return p.iban
}

{/* <div class="sm:col-span-5">
            <label
              class="block text-sm font-medium leading-6 text-gray-900"
              for="cashout"
            >
              {}
            </label>
            <div class="mt-2">
              <input
                type="text"
                ref={focus && purpose === "update" ? doAutoFocus : undefined}
                data-error={!!errors?.cashout_payto_uri && form.cashout_payto_uri !== undefined}
                class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                name="cashout"
                id="cashout"
                disabled={purpose === "show"}
                value={form.cashout_payto_uri ?? defaultValue.cashout_payto_uri}
                onChange={(e) => {
                  form.cashout_payto_uri = e.currentTarget.value as PaytoString;
                  if (!form.cashout_payto_uri) {
                    form.cashout_payto_uri = undefined
                  }
                  updateForm(structuredClone(form));
                }}
                autocomplete="off"
              />
              <ShowInputErrorLabel
                message={errors?.cashout_payto_uri}
                isDirty={form.cashout_payto_uri !== undefined}
              />
            </div>
            <p class="mt-2 text-sm text-gray-500" >
              <i18n.Translate></i18n.Translate>
            </p>
          </div> */}

function PaytoField({ name, label, help, type, value, disabled, onChange, error }: { error: TranslatedString | undefined, name: string, label: TranslatedString, help: TranslatedString, onChange: (s: string) => void, type: "iban" | "x-taler-bank" | "bitcoin", disabled?: boolean, value: string | undefined }): VNode {
  if (type === "iban") {
    return <div class="sm:col-span-5">
      <label
        class="block text-sm font-medium leading-6 text-gray-900"
        for={name}
      >
        {label}
      </label>
      <div class="mt-2">
        <div class="flex justify-between">
          <input
            type="text"
            class="mr-4 w-full block-inline  disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
            name={name}
            id={name}
            disabled={disabled}
            value={value ?? ""}
            onChange={(e) => {
              onChange(e.currentTarget.value)
            }}
          />
          <CopyButton
            class="p-2 rounded-full  text-black shadow-sm  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 "
            getContent={() => value ?? ""}
          />
        </div>
        <ShowInputErrorLabel
          message={error}
          isDirty={value !== undefined}
        />
      </div>
      <p class="mt-2 text-sm text-gray-500" >
        {help}
      </p>
    </div>
  }
  if (type === "x-taler-bank") {
    return <div class="sm:col-span-5">
      <label
        class="block text-sm font-medium leading-6 text-gray-900"
        for={name}
      >
        {label}
      </label>
      <div class="mt-2">
        <div class="flex justify-between">
          <input
            type="text"
            class="mr-4 w-full block-inline  disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
            name={name}
            id={name}
            disabled={disabled}
            value={value ?? ""}
          />
          <CopyButton
            class="p-2 rounded-full  text-black shadow-sm  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 "
            getContent={() => value ?? ""}
          />
        </div>
        <ShowInputErrorLabel
          message={error}
          isDirty={value !== undefined}
        />
      </div>
      <p class="mt-2 text-sm text-gray-500" >
        {/* <i18n.Translate>internal account id</i18n.Translate> */}
        {help}
      </p>
    </div>
  }
  if (type === "bitcoin") {
    return <div class="sm:col-span-5">
      <label
        class="block text-sm font-medium leading-6 text-gray-900"
        for={name}
      >
        {label}
      </label>
      <div class="mt-2">
        <div class="flex justify-between">
          <input
            type="text"
            class="mr-4 w-full block-inline  disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
            name={name}
            id={name}
            disabled={disabled}
            value={value ?? ""}
          />
          <CopyButton
            class="p-2 rounded-full  text-black shadow-sm  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 "
            getContent={() => value ?? ""}
          />
          <ShowInputErrorLabel
            message={error}
            isDirty={value !== undefined}
          />
        </div>
      </div>
      <p class="mt-2 text-sm text-gray-500" >
        {/* <i18n.Translate>bitcoin address</i18n.Translate> */}
        {help}
      </p>
    </div>
  }
  assertUnreachable(type)
}