"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import toast from "react-hot-toast";
import StepShell from "@/app/components/astrologer/StepShell";
import {
  updateBankAccount,
  getAstrologerProfile,
  friendlyErrorMessage,
} from "@/app/lib/astrologer";

interface BankForm {
  account_holder_name: string;
  bank_name: string;
  branch_name: string;
  account_number: string;
  ifsc_code: string;
  account_type: string;
  upi_id: string;
}

const EMPTY: BankForm = {
  account_holder_name: "",
  bank_name: "",
  branch_name: "",
  account_number: "",
  ifsc_code: "",
  account_type: "Savings",
  upi_id: "",
};

export default function EditBankPage() {
  const router = useRouter();

  const [form, setForm] = useState<BankForm>(EMPTY);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const token = localStorage.getItem("astrologerToken");

    if (!token) {
      router.replace("/astrologer/signin");
      return;
    }

    getAstrologerProfile(token)
      .then((response) => {
        const p = response.data ?? response;
        // Confirmed live: GET /astrologer/profile returns a
        // `BankAccount[]` array (PascalCase key) — this app only
        // manages one primary account, so use the first entry.
        const account = (p?.BankAccount ?? p?.bank_account ?? [])[0];

        if (!account) return;

        setForm((prev) => ({
          ...prev,
          account_holder_name: account.account_holder_name ?? prev.account_holder_name,
          bank_name: account.bank_name ?? prev.bank_name,
          branch_name: account.branch_name ?? prev.branch_name,
          account_number: account.account_number ?? prev.account_number,
          ifsc_code: account.ifsc_code ?? prev.ifsc_code,
          upi_id: account.upi_id ?? prev.upi_id,
        }));
      })
      .catch(() => {});
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const update = (patch: Partial<BankForm>) =>
    setForm((prev) => ({ ...prev, ...patch }));

  const handleSave = async () => {
    if (
      !form.account_holder_name ||
      !form.bank_name ||
      !form.account_number
    ) {
      toast.error("Please fill all required fields");
      return;
    }

    const token = localStorage.getItem("astrologerToken");

    if (!token) {
      router.replace("/astrologer/signin");
      return;
    }

    try {
      setLoading(true);

      const response = await updateBankAccount(
        {
          account_holder_name: form.account_holder_name,
          bank_name: form.bank_name,
          branch_name: form.branch_name,
          account_number: form.account_number,
          ifsc_code: form.ifsc_code,
          upi_id: form.upi_id,
          is_primary: true,
        },
        token
      );

      if (!response.success) {
        toast.error(friendlyErrorMessage(response.message, "Unable to save. Please try again."));
        return;
      }

      toast.success("Saved");

      router.push("/astrologer/profile");
    } catch (error: any) {
      toast.error(friendlyErrorMessage(error.response?.data?.message, "Something went wrong."));
    } finally {
      setLoading(false);
    }
  };

  return (
    <StepShell step={8} title="Bank Details" mode="edit" loading={loading} onSave={handleSave}>
      <h6 className="mb-3">Payout account</h6>

      <div className="mb-3">
        <label className="form-label fw-semibold">
          Account holder name *
        </label>
        <input
          className="form-control form-control-lg"
          value={form.account_holder_name}
          onChange={(e) => update({ account_holder_name: e.target.value })}
        />
      </div>

      <div className="mb-3">
        <label className="form-label fw-semibold">Bank name *</label>
        <input
          className="form-control form-control-lg"
          value={form.bank_name}
          onChange={(e) => update({ bank_name: e.target.value })}
        />
      </div>

      <div className="mb-3">
        <label className="form-label fw-semibold">Branch</label>
        <input
          className="form-control form-control-lg"
          value={form.branch_name}
          onChange={(e) => update({ branch_name: e.target.value })}
        />
      </div>

      <div className="mb-3">
        <label className="form-label fw-semibold">Account number *</label>
        <input
          className="form-control form-control-lg"
          value={form.account_number}
          onChange={(e) => update({ account_number: e.target.value })}
        />
      </div>

      <div className="row g-3 mb-3">
        <div className="col-6">
          <label className="form-label fw-semibold">IFSC code</label>
          <input
            className="form-control form-control-lg"
            value={form.ifsc_code}
            onChange={(e) => update({ ifsc_code: e.target.value })}
          />
        </div>

        <div className="col-6">
          <label className="form-label fw-semibold">Type</label>
          <select
            className="form-control form-control-lg"
            value={form.account_type}
            onChange={(e) => update({ account_type: e.target.value })}
          >
            <option value="Savings">Savings</option>
            <option value="Current">Current</option>
          </select>
        </div>
      </div>

      <div className="mb-3">
        <label className="form-label fw-semibold">UPI ID</label>
        <input
          className="form-control form-control-lg"
          value={form.upi_id}
          onChange={(e) => update({ upi_id: e.target.value })}
        />
      </div>

      <small className="terms-text-color">
        The account name must match the name on your PAN. Mismatches
        hold your first payout.
      </small>
    </StepShell>
  );
}