'use client'

import React, { useEffect, useState } from 'react'
import {
  Button,
  Card,
  HelperText,
  Label,
  Modal,
  ModalBody,
  ModalHeader,
  Select,
  Textarea,
  TextInput,
} from 'flowbite-react'
import Image from 'next/image'
import * as yup from 'yup'
import { toast } from 'react-toastify'
import { useForm } from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers/yup'

import buttonTheme from '@/lib/themes/button'
import modalTheme from '@/lib/themes/modal'
import { Bank } from '@/lib/types/bank'
import { getBanks } from '@/lib/services/bank-services'
import formTheme from '@/lib/themes/form'
import { handleApiError } from '@/lib/utils/error-handler'
import { requestPayoutDetailsChange } from '@/lib/services/profile-setting-services'

const PAYOUT_METHOD_LABELS: Record<PayoutMethod, string> = {
  bank_transfer: 'Bank Account',
  wise: 'Wise Account',
  paypal: 'PayPal Account',
}

const payoutDetailsFormSchema = yup.object({
  payout_method: yup
    .mixed<PayoutMethod>()
    .oneOf(['bank_transfer', 'wise', 'paypal'])
    .required('Payout method is required'),
  bank_id: yup
    .number()
    .nullable()
    .when('payout_method', {
      is: 'bank_transfer',
      then: (schema) => schema.required('Bank is required'),
      otherwise: (schema) => schema.optional(),
    }),
  account_name: yup.string().required('Account name is required'),
  account_number: yup.string().when('payout_method', {
    is: 'bank_transfer',
    then: (schema) => schema.required('Account number is required'),
    otherwise: (schema) => schema.optional(),
  }),
  email: yup.string().when('payout_method', {
    is: (value: PayoutMethod) => value === 'wise' || value === 'paypal',
    then: (schema) =>
      schema.email('Invalid email address').required('Email is required'),
    otherwise: (schema) => schema.optional(),
  }),
  reason: yup.string().required('Reason for change is required'),
})

export type PayoutDetailsFormData = yup.InferType<
  typeof payoutDetailsFormSchema
>

interface PayoutDetailsProps {
  payoutMethod: PayoutMethod
  bankAccount?: BankAccount | null
  wiseAccount?: WiseAccount | null
  paypalAccount?: PaypalAccount | null
}

export default function PayoutDetails({
  payoutMethod,
  bankAccount,
  wiseAccount,
  paypalAccount,
}: PayoutDetailsProps) {
  const isBankTransfer = payoutMethod === 'bank_transfer'

  const [payoutDetailModal, setPayoutDetailModal] = useState<ModalState>({
    type: 'edit',
    isOpened: false,
  })
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [banks, setBanks] = useState<Bank[]>([])
  const {
    watch,
    register,
    handleSubmit,
    setError,
    reset,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(payoutDetailsFormSchema),
    defaultValues: {
      payout_method: payoutMethod,
      bank_id: null,
      account_name: '',
      account_number: '',
      email: '',
      reason: '',
    },
  })

  const formValues = watch()
  const selectedPayoutMethod = formValues.payout_method
  const isSelectedBankTransfer = selectedPayoutMethod === 'bank_transfer'

  useEffect(() => {
    const fetchBanks = async () => {
      try {
        const data = await getBanks()
        setBanks(data)
      } catch {
        toast.error('Failed to load bank list. Please try again later.')
      }
    }

    fetchBanks()
  }, [])

  async function handlePayoutDetailsChangeSubmit(data: PayoutDetailsFormData) {
    try {
      setIsSubmitting(true)

      await requestPayoutDetailsChange(data)

      toast.success('Payout details change request submitted successfully.')
      setPayoutDetailModal({ type: 'edit', isOpened: false })
      reset()
    } catch (error) {
      handleApiError(
        error,
        'Failed to submit account change request. Please try again later.',
        (formErrors) => {
          Object.keys(formErrors).forEach((field) => {
            setError(field as keyof PayoutDetailsFormData, {
              type: 'server',
              message: formErrors[field][0],
            })
          })
        },
      )
    } finally {
      setIsSubmitting(false)
    }
  }

  const accountName =
    bankAccount?.account_name ??
    wiseAccount?.account_name ??
    paypalAccount?.account_name

  const accountEmail = wiseAccount?.email ?? paypalAccount?.email

  return (
    <React.Fragment>
      <div className="max-w-sm">
        <Card className="shadow-none space-y-10 border border-gray-200 dark:border-gray-700">
          <h2 className="text-xl font-semibold mb-4">
            {isBankTransfer
              ? bankAccount?.bank_name
              : PAYOUT_METHOD_LABELS[payoutMethod]}
          </h2>

          {isBankTransfer && bankAccount?.bank_logo_url && (
            <div className="w-40 h-20 rounded-md mb-4 flex items-center justify-center">
              <Image
                src={bankAccount.bank_logo_url}
                alt={`${bankAccount.bank_name} logo`}
                width={160}
                height={80}
              />
            </div>
          )}

          <div className="space-y-1">
            <p className="text-gray-600 dark:text-gray-400 text-sm">
              Account Name
            </p>
            <p className="text-gray-900 dark:text-white font-medium">
              {accountName}
            </p>
          </div>

          <div className="space-y-1">
            <p className="text-gray-600 dark:text-gray-400 text-sm">
              {isBankTransfer ? 'Account Number' : 'Email'}
            </p>
            <p className="text-gray-900 dark:text-white font-medium">
              {isBankTransfer ? bankAccount?.account_number : accountEmail}
            </p>
          </div>

          <Button
            color="blue"
            theme={buttonTheme.button}
            onClick={() =>
              setPayoutDetailModal({ type: 'edit', isOpened: true })
            }
          >
            Request Account Change
          </Button>
        </Card>
      </div>

      <Modal
        position="center"
        theme={modalTheme.modal}
        dismissible
        show={payoutDetailModal.isOpened && payoutDetailModal.type === 'edit'}
        onClose={() => setPayoutDetailModal({ type: 'edit', isOpened: false })}
      >
        <ModalHeader>
          <p>Request Payout Details Change</p>
          <p className="text-sm font-normal text-slate-500 mt-2">
            Submit a request to update your payout details. Changes will be
            reviewed before approval.
          </p>
        </ModalHeader>

        <ModalBody>
          <form
            onSubmit={handleSubmit(handlePayoutDetailsChangeSubmit)}
            className="space-y-8"
          >
            {/* Payout Method */}
            <div>
              <div className="mb-2 block">
                <Label theme={formTheme.label} htmlFor="payout_method">
                  Payout Method <span className="text-red-500">*</span>
                </Label>
              </div>
              <Select
                theme={formTheme.select}
                id="payout_method"
                {...register('payout_method')}
              >
                {Object.entries(PAYOUT_METHOD_LABELS).map(([value, label]) => (
                  <option key={value} value={value}>
                    {label}
                  </option>
                ))}
              </Select>
              <HelperText color="failure">
                {errors.payout_method?.message}
              </HelperText>
            </div>

            {isSelectedBankTransfer && (
              <div>
                <div className="mb-2 block">
                  <Label theme={formTheme.label} htmlFor="bank_id">
                    Bank Name <span className="text-red-500">*</span>
                  </Label>
                </div>
                <Select
                  theme={formTheme.select}
                  id="bank_id"
                  disabled={banks.length === 0}
                  {...register('bank_id')}
                >
                  <option value="">-- Select Bank --</option>
                  {banks.map((bank) => (
                    <option key={bank.id} value={bank.id}>
                      {bank.bank_name}
                    </option>
                  ))}
                </Select>
                <HelperText color="failure">
                  {errors.bank_id?.message}
                </HelperText>
              </div>
            )}

            {/* Account Name */}
            <div>
              <div className="mb-2 block">
                <Label theme={formTheme.label} htmlFor="account_name">
                  Account Name <span className="text-red-500">*</span>
                </Label>
              </div>
              <TextInput
                theme={formTheme.textInput}
                id="account_name"
                type="text"
                placeholder="Enter account name"
                {...register('account_name')}
              />
              <HelperText color="failure">
                {errors.account_name?.message}
              </HelperText>
            </div>

            {isSelectedBankTransfer ? (
              <div>
                <div className="mb-2 block">
                  <Label theme={formTheme.label} htmlFor="account_number">
                    Account Number <span className="text-red-500">*</span>
                  </Label>
                </div>
                <TextInput
                  theme={formTheme.textInput}
                  id="account_number"
                  type="text"
                  placeholder="Enter account number"
                  {...register('account_number')}
                />
                <HelperText color="failure">
                  {errors.account_number?.message}
                </HelperText>
              </div>
            ) : (
              <div>
                <div className="mb-2 block">
                  <Label theme={formTheme.label} htmlFor="email">
                    Email <span className="text-red-500">*</span>
                  </Label>
                </div>
                <TextInput
                  theme={formTheme.textInput}
                  id="email"
                  type="email"
                  placeholder="Enter account email"
                  {...register('email')}
                />
                <HelperText color="failure">{errors.email?.message}</HelperText>
              </div>
            )}

            {/* Reason */}
            <div className="w-full">
              <div className="mb-2 block">
                <Label theme={formTheme.label} htmlFor="reason">
                  Reason for Change <span className="text-red-500">*</span>
                </Label>
              </div>
              <Textarea
                id="reason"
                theme={formTheme.textarea}
                rows={4}
                className="resize-none"
                {...register('reason')}
              >
                {formValues.reason}
              </Textarea>
              <HelperText color="failure">{errors.reason?.message}</HelperText>
            </div>

            <div className="ml-auto w-fit flex items-center gap-2 mt-4">
              <Button
                color="alternative"
                disabled={isSubmitting}
                theme={buttonTheme.button}
                onClick={() =>
                  setPayoutDetailModal({ type: 'edit', isOpened: false })
                }
              >
                Cancel
              </Button>
              <Button
                color="blue"
                type="submit"
                theme={buttonTheme.button}
                disabled={isSubmitting}
              >
                Submit Request
              </Button>
            </div>
          </form>
        </ModalBody>
      </Modal>
    </React.Fragment>
  )
}