import { useState } from 'react' import { Card, CardContent, CardHeader, CardTitle } from "/components/ui/card" import { Input } from "/components/ui/input" import { Label } from "/components/ui/label" import { Button } from "/components/ui/button" import { ArrowRight, Calendar, Clock, DollarSign, Percent, Shield } from "lucide-react" export default function EMICalculator() { const [loanAmount, setLoanAmount] = useState('100000') const [interestRate, setInterestRate] = useState('8.5') const [loanTerm, setLoanTerm] = useState('12') const [downPayment, setDownPayment] = useState('0') const [moratoriumPeriod, setMoratoriumPeriod] = useState('0') const [emi, setEmi] = useState(null) const [totalInterest, setTotalInterest] = useState(null) const [totalPayment, setTotalPayment] = useState(null) const formatInputCurrency = (value: string) => { // Remove all non-digit characters const numValue = value.replace(/\D/g, '') // Format with Indian number system (commas) return new Intl.NumberFormat('en-IN').format(Number(numValue)) } const parseCurrencyInput = (value: string) => { return Number(value.replace(/\D/g, '')) } const calculateEMI = () => { // Convert inputs to numbers const principal = parseCurrencyInput(loanAmount) - parseCurrencyInput(downPayment) const rate = parseFloat(interestRate) / 100 / 12 // Monthly interest rate const term = parseFloat(loanTerm) * 12 // Convert years to months const moratorium = parseFloat(moratoriumPeriod) if (principal <= 0 || rate <= 0 || term <= 0) { return } // Calculate EMI const emiValue = principal * rate * Math.pow(1 + rate, term) / (Math.pow(1 + rate, term) - 1) const totalPaymentValue = emiValue * term const totalInterestValue = totalPaymentValue - principal setEmi(emiValue) setTotalInterest(totalInterestValue) setTotalPayment(totalPaymentValue) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() calculateEMI() } const resetForm = () => { setLoanAmount('1,00,000') setInterestRate('8.5') setLoanTerm('12') setDownPayment('0') setMoratoriumPeriod('0') setEmi(null) setTotalInterest(null) setTotalPayment(null) } const formatCurrency = (value: number | null) => { if (value === null) return '-' return new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR', minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(value) } const handleLoanAmountChange = (e: React.ChangeEvent) => { const formattedValue = formatInputCurrency(e.target.value) setLoanAmount(formattedValue) } const handleDownPaymentChange = (e: React.ChangeEvent) => { const formattedValue = formatInputCurrency(e.target.value) setDownPayment(formattedValue) } return (

EMI Calculator (₹)

{/* Loan Amount */}

Loan Amount (₹)

{/* Interest Rate */}

Rate of Interest (% p.a.) setInterestRate(e.target.value)} min="0.1" max="30" step="0.1" required />

{/* Loan Term */}

Term of Loan (years) setLoanTerm(e.target.value)} min="1" max="30" required />

{/* Down Payment */}

Down Payment (₹)

{/* Moratorium Period */}

Moratorium Period (months) setMoratoriumPeriod(e.target.value)} min="0" max="12" required />

{emi !== null && (

EMI Report (₹)

Monthly EMI

{formatCurrency(emi)}

Total Interest

{formatCurrency(totalInterest)}

Total Payment

{formatCurrency(totalPayment)}

Loan Details

Principal Amount

{formatCurrency(parseCurrencyInput(loanAmount) - parseCurrencyInput(downPayment))}

Interest Rate (p.a.)

{interestRate}%

Loan Tenure

{loanTerm} years ({parseFloat(loanTerm) * 12} months)

Moratorium Period

{moratoriumPeriod} months

)}

) }