"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import toast from "react-hot-toast";
import Header from "@/app/components/layout/Header";
import Footer from "@/app/components/layout/Footer";
import StepShell from "@/app/components/astrologer/StepShell";
import { saveBank, friendlyErrorMessage } from "@/app/lib/astrologer";

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

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

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

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

  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;
    }

    if (form.account_number !== form.confirm_account_number) {
      toast.error("Account numbers don't match");
      return;
    }

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

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

    try {
      setLoading(true);

      const response = await saveBank(
        {
          account_holder_name: form.account_holder_name,
          bank_name: form.bank_name,
          branch_name: form.branch_name,
          account_number: form.account_number,
          confirm_account_number: form.confirm_account_number,
          ifsc_code: form.ifsc_code,
          account_type: form.account_type,
          upi_id: form.upi_id,
        },
        token
      );

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

      toast.success("Saved");

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

  return (
    <>
    <Header />
    <StepShell step={8} title="Bank Details" 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="mb-3">
        <label className="form-label fw-semibold">
          Confirm account number *
        </label>
        <input
          className="form-control form-control-lg"
          value={form.confirm_account_number}
          onChange={(e) =>
            update({ confirm_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>
    <Footer />
    </>
  );
}