import React, { useState, useEffect } from "react";
import { ShieldCheck } from "lucide-react";
import { formatIDR } from "../utils";

interface MortgageCalculatorProps {
  initialPrice?: number;
  lang: "en" | "id";
}

export default function MortgageCalculator({ initialPrice = 12000000000, lang }: MortgageCalculatorProps) {
  const isEn = lang === "en";

  const [homePrice, setHomePrice] = useState(initialPrice);
  const [downPayment, setDownPayment] = useState(initialPrice * 0.2); // Default to 20%
  const [interestRate, setInterestRate] = useState(5.5); // Default to 5.5%
  const [loanTerm, setLoanTerm] = useState(30); // Default to 30 Years
  const [monthlyPayment, setMonthlyPayment] = useState(0);

  // Sync state if initialPrice prop changes (e.g., when viewing a different property)
  useEffect(() => {
    setHomePrice(initialPrice);
    setDownPayment(initialPrice * 0.2);
  }, [initialPrice]);

  useEffect(() => {
    const loanAmount = homePrice - downPayment;
    const monthlyRate = interestRate / 12 / 100;
    const numberOfPayments = loanTerm * 12;

    if (loanAmount <= 0) {
      setMonthlyPayment(0);
      return;
    }

    if (monthlyRate === 0) {
      setMonthlyPayment(loanAmount / numberOfPayments);
      return;
    }

    const calculatedPayment =
      (loanAmount * (monthlyRate * Math.pow(1 + monthlyRate, numberOfPayments))) /
      (Math.pow(1 + monthlyRate, numberOfPayments) - 1);

    setMonthlyPayment(calculatedPayment);
  }, [homePrice, downPayment, interestRate, loanTerm]);

  // Down payment slider bounds helper
  const handleDownPaymentChange = (value: number) => {
    if (value > homePrice) {
      setDownPayment(homePrice);
    } else {
      setDownPayment(value);
    }
  };

  return (
    <div className="bg-[#FDFCFB] border border-[#EEECE6] rounded-none p-6 md:p-10 space-y-8 text-left" id="mortgage-calculator">
      <div>
        <span className="font-sans text-[10px] font-bold uppercase tracking-[0.25em] text-[#C5A572] block mb-1.5">
          {isEn ? "FINANCIAL CONFIGURATOR" : "KONFIGURATOR KEUANGAN"}
        </span>
        <h3 className="font-serif text-2xl font-light tracking-tight text-[#1A1A1A]">
          {isEn ? "Mortgage Estimation Suite" : "Simulasi Pendanaan KPR (Mortgage)"}
        </h3>
        <p className="font-sans text-xs text-zinc-500 mt-1.5 font-light leading-relaxed">
          {isEn 
            ? "Formulate precise premium carrying calculations mapped directly to your targeted spatial capital layout."
            : "Formulasikan secara presisi estimasi cicilan berkala yang disesuaikan langsung dengan tata letak modal spasial target Anda."}
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
        {/* Sliders Block */}
        <div className="space-y-6">
          {/* Home Price Slider */}
          <div className="space-y-2">
            <div className="flex justify-between items-center text-[10px] uppercase font-bold tracking-[0.16em] text-zinc-400">
              <span className="font-sans">{isEn ? "Property Valuation" : "Valuasi Properti"}</span>
              <span className="font-mono text-[#C5A572] font-semibold">
                {formatIDR(homePrice)}
              </span>
            </div>
            <div className="pt-1">
              <input
                type="range"
                min={1000000000}
                max={40000000000}
                step={100000000}
                value={homePrice}
                onChange={(e) => setHomePrice(Number(e.target.value))}
                className="w-full h-[3px] bg-[#EEECE6] rounded-none appearance-none cursor-pointer accent-[#C5A572]"
              />
            </div>
          </div>

          {/* Down Payment Slider */}
          <div className="space-y-2">
            <div className="flex justify-between items-center text-[10px] uppercase font-bold tracking-[0.16em] text-zinc-400">
              <span className="font-sans">
                {isEn ? "Down Payment" : "Uang Muka (DP)"} ({((downPayment / homePrice) * 100).toFixed(0)}%)
              </span>
              <span className="font-mono text-[#C5A572] font-semibold">
                {formatIDR(downPayment)}
              </span>
            </div>
            <div className="pt-1">
              <input
                type="range"
                min={100000000}
                max={homePrice}
                step={50000000}
                value={downPayment}
                onChange={(e) => handleDownPaymentChange(Number(e.target.value))}
                className="w-full h-[3px] bg-[#EEECE6] rounded-none appearance-none cursor-pointer accent-[#C5A572]"
              />
            </div>
          </div>

          {/* Interest Rate Slider */}
          <div className="space-y-2">
            <div className="flex justify-between items-center text-[10px] uppercase font-bold tracking-[0.16em] text-zinc-400">
              <span className="font-sans">{isEn ? "Annual Interest Rate" : "Suku Bunga Tahunan"}</span>
              <span className="font-mono text-[#1A1A1A] font-semibold">
                {interestRate.toFixed(2)}%
              </span>
            </div>
            <div className="pt-1">
              <input
                type="range"
                min={1}
                max={15}
                step={0.1}
                value={interestRate}
                onChange={(e) => setInterestRate(Number(e.target.value))}
                className="w-full h-[3px] bg-[#EEECE6] rounded-none appearance-none cursor-pointer accent-[#C5A572]"
              />
            </div>
          </div>

          {/* Loan Term Selection Button Group */}
          <div className="space-y-2.5">
            <span className="block font-sans text-[10px] font-bold uppercase tracking-[0.16em] text-zinc-400">
              {isEn ? "Amortization Term" : "Jangka Waktu Cicilan (Tenor)"}
            </span>
            <div className="grid grid-cols-3 gap-2">
              {[15, 20, 30].map((years) => (
                <button
                  key={years}
                  type="button"
                  onClick={() => setLoanTerm(years)}
                  className={`py-2.5 rounded-none border font-sans text-[10px] font-bold uppercase tracking-widest transition-all duration-300 cursor-pointer focus:outline-none ${
                    loanTerm === years
                      ? "bg-[#1A1A1A] text-white border-[#1A1A1A]"
                      : "bg-[#F5F3EF]/60 text-zinc-500 border-[#EEECE6] hover:border-[#1A1A1A] hover:text-[#1A1A1A]"
                  }`}
                >
                  {years} {isEn ? "Years" : "Tahun"}
                </button>
              ))}
            </div>
          </div>
        </div>

        {/* Computations Results Display */}
        <div className="bg-[#F5F3EF]/60 border border-[#EEECE6] p-6 md:p-8 rounded-none flex flex-col justify-between space-y-6">
          <div className="space-y-4">
            <span className="font-sans text-[9px] font-bold uppercase tracking-[0.25em] text-zinc-400 block pb-2 border-b border-[#EEECE6]/70">
              {isEn ? "ESTIMATED CARRYING SUMMARY" : "RINGKASAN ESTIMASI CICILAN"}
            </span>

            <div className="pt-2">
              <span className="font-sans text-[9px] font-bold uppercase tracking-[0.15em] text-zinc-400 block">
                {isEn ? "Monthly Carrying" : "Cicilan Bulanan"}
              </span>
              <h4 className="font-serif text-2xl md:text-3xl font-normal mt-1.5 font-mono tracking-tight leading-none text-[#C5A572]">
                {formatIDR(Math.round(monthlyPayment))}
              </h4>
            </div>

            <div className="grid grid-cols-2 gap-4 pt-5 border-t border-[#EEECE6]/60 text-xs font-sans">
              <div>
                <span className="font-sans text-[9px] uppercase font-bold tracking-widest block text-zinc-400">
                  {isEn ? "Principal Loan" : "Pokok Pinjaman KPR"}
                </span>
                <span className="font-mono text-[#1A1A1A] font-semibold block mt-1">
                  {formatIDR(homePrice - downPayment)}
                </span>
              </div>
              <div>
                <span className="font-sans text-[9px] uppercase font-bold tracking-widest block text-zinc-400">
                  {isEn ? "Total Capital Cost" : "Total Biaya Modal"}
                </span>
                <span className="font-mono text-[#1A1A1A] font-semibold block mt-1">
                  {formatIDR(Math.round(monthlyPayment * loanTerm * 12))}
                </span>
              </div>
            </div>
          </div>

          <div className="flex items-start gap-3 text-[10px] text-zinc-400 border-t border-[#EEECE6]/60 pt-5 leading-relaxed font-light">
            <ShieldCheck className="w-5 h-5 text-[#C5A572] shrink-0 mt-0.5" />
            <p>
              {isEn 
                ? "Estimates do not include active municipal property tax rates, structural insurances, architectural assessments, or localized statutory levies."
                : "Estimasi tidak termasuk pajak bumi & bangunan (PBB), premi asuransi fisik strukur, biaya administrasi, atau iuran wajib daerah setempat."}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}