'use client'

import { useState, useCallback } from 'react'
import {
  Calculator, DollarSign, Calendar, Percent, Home,
  ArrowLeft, TrendingDown, PiggyBank, Building2,
} from 'lucide-react'
import Link from 'next/link'
import { formatPrice } from '@/lib/utils'

function calculateMortgage(principal: number, annualRate: number, years: number) {
  const monthlyRate = annualRate / 100 / 12
  const numPayments = years * 12
  if (monthlyRate === 0) return { monthly: principal / numPayments, total: principal, interest: 0 }
  const factor = Math.pow(1 + monthlyRate, numPayments)
  const monthly = principal * (monthlyRate * factor) / (factor - 1)
  const total = monthly * numPayments
  return { monthly, total, interest: total - principal }
}

export default function MortgageCalculatorPage() {
  const [price, setPrice] = useState(850000)
  const [downPercent, setDownPercent] = useState(20)
  const [years, setYears] = useState(25)
  const [rate, setRate] = useState(4.5)

  const downAmount = price * (downPercent / 100)
  const principal = price - downAmount
  const result = calculateMortgage(principal, rate, years)

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50" dir="rtl">
      <div className="container mx-auto px-4 py-8">
        <Link href="/" className="inline-flex items-center gap-2 text-gray-500 hover:text-gray-700 text-sm mb-4">
          <ArrowLeft className="w-4 h-4 rotate-180" /> العودة للرئيسية
        </Link>

        <div className="text-center mb-10">
          <div className="inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-2xl mb-4">
            <Calculator className="w-8 h-8 text-blue-600" />
          </div>
          <h1 className="text-3xl font-bold mb-2">حاسبة التمويل العقاري</h1>
          <p className="text-gray-500">احسب قسطك الشهري بسهولة</p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-5xl mx-auto">
          {/* Inputs */}
          <div className="bg-white rounded-3xl shadow-xl border p-8 space-y-6">
            <h2 className="text-xl font-bold flex items-center gap-2"><DollarSign className="w-5 h-5 text-blue-600" /> تفاصيل القرض</h2>

            <div>
              <label className="flex justify-between text-sm font-medium mb-2">
                <span>سعر العقار</span>
                <span className="text-blue-600 font-bold">{formatPrice(price)}</span>
              </label>
              <input type="range" min={100000} max={5000000} step={50000} value={price}
                onChange={e => setPrice(Number(e.target.value))}
                className="w-full h-2 bg-blue-100 rounded-full appearance-none cursor-pointer accent-blue-600" />
              <div className="flex justify-between text-xs text-gray-400 mt-1">
                <span>{formatPrice(100000)}</span>
                <span>{formatPrice(5000000)}</span>
              </div>
            </div>

            <div>
              <label className="flex justify-between text-sm font-medium mb-2">
                <span>الدفعة الأولى</span>
                <span className="text-blue-600 font-bold">{downPercent}% ({formatPrice(downAmount)})</span>
              </label>
              <input type="range" min={5} max={50} step={1} value={downPercent}
                onChange={e => setDownPercent(Number(e.target.value))}
                className="w-full h-2 bg-blue-100 rounded-full appearance-none cursor-pointer accent-blue-600" />
              <div className="flex justify-between text-xs text-gray-400 mt-1"><span>5%</span><span>50%</span></div>
            </div>

            <div>
              <label className="flex justify-between text-sm font-medium mb-2">
                <span>مدة القرض</span>
                <span className="text-blue-600 font-bold">{years} سنة</span>
              </label>
              <input type="range" min={5} max={35} step={1} value={years}
                onChange={e => setYears(Number(e.target.value))}
                className="w-full h-2 bg-blue-100 rounded-full appearance-none cursor-pointer accent-blue-600" />
              <div className="flex justify-between text-xs text-gray-400 mt-1"><span>5 سنوات</span><span>35 سنة</span></div>
            </div>

            <div>
              <label className="flex justify-between text-sm font-medium mb-2">
                <span>سعر الفائدة السنوي</span>
                <span className="text-blue-600 font-bold">{rate}%</span>
              </label>
              <input type="range" min={1} max={12} step={0.1} value={rate}
                onChange={e => setRate(Number(e.target.value))}
                className="w-full h-2 bg-blue-100 rounded-full appearance-none cursor-pointer accent-blue-600" />
              <div className="flex justify-between text-xs text-gray-400 mt-1"><span>1%</span><span>12%</span></div>
            </div>
          </div>

          {/* Results */}
          <div className="space-y-4">
            <div className="bg-gradient-to-br from-blue-600 to-indigo-700 rounded-3xl shadow-xl p-8 text-white">
              <p className="text-blue-200 text-sm mb-1">القسط الشهري</p>
              <p className="text-4xl font-bold mb-6">{formatPrice(Math.round(result.monthly))}<span className="text-lg font-normal text-blue-200 mr-2">/شهر</span></p>

              <div className="grid grid-cols-2 gap-4 pt-4 border-t border-white/20">
                <div>
                  <p className="text-blue-200 text-xs">مبلغ القرض</p>
                  <p className="text-lg font-bold">{formatPrice(principal)}</p>
                </div>
                <div>
                  <p className="text-blue-200 text-xs">الدفعة الأولى</p>
                  <p className="text-lg font-bold">{formatPrice(downAmount)}</p>
                </div>
                <div>
                  <p className="text-blue-200 text-xs">إجمالي الفوائد</p>
                  <p className="text-lg font-bold">{formatPrice(Math.round(result.interest))}</p>
                </div>
                <div>
                  <p className="text-blue-200 text-xs">المبلغ الإجمالي</p>
                  <p className="text-lg font-bold">{formatPrice(Math.round(result.total))}</p>
                </div>
              </div>
            </div>

            <div className="bg-white rounded-2xl shadow-md border p-6 space-y-4">
              <h3 className="font-bold flex items-center gap-2"><TrendingDown className="w-5 h-5 text-blue-600" /> ملخص القرض</h3>
              <div className="space-y-3 text-sm">
                <div className="flex justify-between py-2 border-b">
                  <span className="text-gray-500">سعر العقار</span>
                  <span className="font-medium">{formatPrice(price)}</span>
                </div>
                <div className="flex justify-between py-2 border-b">
                  <span className="text-gray-500">نسبة الدفعة الأولى</span>
                  <span className="font-medium">{downPercent}%</span>
                </div>
                <div className="flex justify-between py-2 border-b">
                  <span className="text-gray-500">مدة السداد</span>
                  <span className="font-medium">{years} سنة ({years * 12} شهر)</span>
                </div>
                <div className="flex justify-between py-2 border-b">
                  <span className="text-gray-500">نسبة الفائدة</span>
                  <span className="font-medium">{rate}%</span>
                </div>
                <div className="flex justify-between py-2">
                  <span className="text-gray-500">القسط الشهري</span>
                  <span className="font-bold text-blue-600 text-lg">{formatPrice(Math.round(result.monthly))}</span>
                </div>
              </div>
            </div>

            <div className="bg-amber-50 rounded-2xl border border-amber-200 p-4 text-sm text-amber-800 flex items-start gap-3">
              <PiggyBank className="w-5 h-5 shrink-0 mt-0.5" />
              <p>هذه الأرقام تقديرية وقد تختلف بناءً على شروط البنك وسياسة التمويل. يُرجى التواصل مع البنك للحصول على عرض دقيق.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}