"use client";

import { useMemo, useState } from "react";

type DbrForm = {
  monthlyIncome: number;
  otherIncome: number;
  mortgagePayment: number;
  monthlyRent: number;
  personalLoan: number;
  monthlyCreditCardAmount: number;
  carLoans: number;
  studentLoan: number;
  otherPayment: number;
};

const initialValues: DbrForm = {
  monthlyIncome: 40000,
  otherIncome: 3000,
  mortgagePayment: 1500,
  monthlyRent: 2000,
  personalLoan: 800,
  monthlyCreditCardAmount: 2000,
  carLoans: 1000,
  studentLoan: 0,
  otherPayment: 0,
};

const formatAed = (value: number) =>
  new Intl.NumberFormat("en-AE", {
    style: "currency",
    currency: "AED",
    maximumFractionDigits: 0,
  }).format(Number.isFinite(value) ? value : 0);

export default function DbrCheckPage() {
  const [form, setForm] = useState<DbrForm>(initialValues);
  const [showResult, setShowResult] = useState(false);

  const totalIncome = useMemo(() => form.monthlyIncome + form.otherIncome, [form.monthlyIncome, form.otherIncome]);
  const totalDebt = useMemo(
    () =>
      form.mortgagePayment +
      form.monthlyRent +
      form.personalLoan +
      form.monthlyCreditCardAmount +
      form.carLoans +
      form.studentLoan +
      form.otherPayment,
    [form],
  );
  const dbr = totalIncome > 0 ? (totalDebt / totalIncome) * 100 : 0;
  const dbrStatus = getDbrStatus(dbr);

  const handleChange = (key: keyof DbrForm, value: string) => {
    const parsedValue = Number(value);
    setForm((prev) => ({
      ...prev,
      [key]: Number.isFinite(parsedValue) && parsedValue >= 0 ? parsedValue : 0,
    }));
  };

  return (
    <section className="mx-auto w-full max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
      <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm md:p-6">
        {showResult && (
          <div className="mb-6 rounded-2xl bg-gradient-to-r from-blue-600 to-blue-500 p-5 text-white shadow-lg md:p-6">
            <div className="flex flex-wrap items-start justify-between gap-3">
              <div>
                <p className="text-xs uppercase tracking-wide text-blue-100">DBR Breakdown</p>
                <h3 className="text-4 font-bold text-white">Your DBR Result</h3>
                <p className="text-sm text-blue-100/95">Personalized debt burden ratio for your profile</p>
              </div>
              <div className="rounded-full bg-white/15 px-3 py-1.5 text-xs font-semibold text-white">{dbrStatus.rangeLabel}</div>
            </div>

            <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
              <ResultCard label="Total Income" value={formatAed(totalIncome)} />
              <ResultCard label="Total Debt" value={formatAed(totalDebt)} />
              <ResultCard label="DBR" value={`${dbr.toFixed(2)}%`} />
              <ResultCard label="Status" value={dbrStatus.status} valueClassName={dbrStatus.colorClass} />
            </div>

            <p className={`mt-4 text-base font-semibold ${dbrStatus.colorClass}`}>{dbrStatus.message}</p>
            <p className="mt-1 text-sm text-blue-100">{dbrStatus.subMessage}</p>
            <p className="mt-2 text-xs text-blue-100">
              Ranges: 0-30% Excellent, 30-40% Good, 40-50% Borderline, above 50% Not allowed.
            </p>
          </div>
        )}

        <form
          onSubmit={(event) => {
            event.preventDefault();
            setShowResult(true);
          }}
          className="space-y-6"
        >
          <div>
            <h2 className="mb-3 text-xl font-semibold text-sky-700">Income Details</h2>
            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
              <InputCard
                label="Monthly Income"
                value={form.monthlyIncome}
                onChange={(value) => handleChange("monthlyIncome", value)}
                required
              />
              <InputCard
                label="Other Income (if any)"
                value={form.otherIncome}
                onChange={(value) => handleChange("otherIncome", value)}
              />
            </div>
          </div>

          <div>
            <h2 className="mb-3 text-xl font-semibold text-sky-700">Monthly Debt Payment Details</h2>
            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
              <InputCard
                label="Mortgage Payment (if any)"
                value={form.mortgagePayment}
                onChange={(value) => handleChange("mortgagePayment", value)}
              />
              <InputCard
                label="Monthly Rent (if any)"
                value={form.monthlyRent}
                onChange={(value) => handleChange("monthlyRent", value)}
              />
              <InputCard
                label="Personal Loan (if any)"
                value={form.personalLoan}
                onChange={(value) => handleChange("personalLoan", value)}
              />
              <InputCard
                label="Monthly Credit Card Amount (if any)"
                value={form.monthlyCreditCardAmount}
                onChange={(value) => handleChange("monthlyCreditCardAmount", value)}
              />
              <InputCard label="Car Loans (if any)" value={form.carLoans} onChange={(value) => handleChange("carLoans", value)} />
              <InputCard
                label="Student Loan (if any)"
                value={form.studentLoan}
                onChange={(value) => handleChange("studentLoan", value)}
              />
              <InputCard
                label="Other Payment (if any)"
                value={form.otherPayment}
                onChange={(value) => handleChange("otherPayment", value)}
              />
            </div>
          </div>

          <div className="flex justify-center">
            <button
              type="submit"
              className="rounded-lg bg-sky-600 px-12 py-2.5 text-base font-semibold text-white transition hover:bg-sky-700"
            >
              Calculate
            </button>
          </div>
        </form>
      </div>
    </section>
  );
}

function getDbrStatus(dbr: number) {
  if (dbr <= 30) {
    return {
      status: "Excellent",
      message: "Excellent",
      subMessage: "Very high approval chances",
      colorClass: "text-emerald-700",
      rangeLabel: "0% - 30%",
    };
  }

  if (dbr <= 40) {
    return {
      status: "Good",
      message: "Good",
      subMessage: "Most banks approve",
      colorClass: "text-lime-700",
      rangeLabel: "30% - 40%",
    };
  }

  if (dbr <= 50) {
    return {
      status: "Borderline",
      message: "Borderline",
      subMessage: "Limited options, stricter checks",
      colorClass: "text-orange-700",
      rangeLabel: "40% - 50%",
    };
  }

  return {
    status: "Not allowed",
    message: "Not allowed",
    subMessage: "Auto-rejection",
    colorClass: "text-red-700",
    rangeLabel: "Above 50%",
  };
}

function ResultCard({
  label,
  value,
  valueClassName,
}: {
  label: string;
  value: string;
  valueClassName?: string;
}) {
  return (
    <div className="rounded-xl bg-white p-4 text-slate-900 shadow-sm">
      <p className="text-xs uppercase tracking-wide text-slate-500">{label}</p>
      <p className={`mt-1 text-2xl font-bold ${valueClassName ?? "text-slate-900"}`}>{value}</p>
    </div>
  );
}

function InputCard({
  label,
  value,
  onChange,
  required = false,
}: {
  label: string;
  value: number;
  onChange: (value: string) => void;
  required?: boolean;
}) {
  return (
    <label className="block space-y-1.5">
      <span className="text-base font-semibold text-slate-900">{label}</span>
      <input
        type="number"
        min={0}
        step="any"
        value={value}
        onChange={(event) => onChange(event.target.value)}
        placeholder="AED 0"
        required={required}
        className="w-full rounded-lg border border-slate-300 bg-[#fff8f6] px-3 py-2 text-base text-slate-800 outline-none transition focus:border-sky-500 focus:ring-2 focus:ring-sky-100"
      />
    </label>
  );
}