Taksitle mi, Peşin mi? Hangisi Daha Avantajlı

import React, { useState, useMemo } from 'react';
import { TrendingUp, TrendingDown, DollarSign, Calendar } from 'lucide-react';

export default function TaksitFaizHesaplama() {

    const [pesinFiyat, setPesinFiyat] = useState(275000);
    const [taksitliFiyat, setTaksitliFiyat] = useState(325000);
    const [taksitSayisi, setTaksitSayisi] = useState(12);
    const [gunlukFaiz, setGunlukFaiz] = useState(0.000669663);
    const [ilkTaksitGun, setIlkTaksitGun] = useState(40);
    const hesapla = useMemo(() => {

        const aylikTaksit = taksitliFiyat / taksitSayisi;
        let mevcutPara = pesinFiyat;
        let toplamOdenen = 0;
        let detaylar = [];

        // Her taksit için hesaplama
        for (let i = 0; i < taksitSayisi; i++) {
            // Taksit ödeme günü (ilk taksit + 30 gün * taksit sayısı)
            const taksitGunu = ilkTaksitGun + (i * 30);
            // Bir önceki durumdan bu taksit gününe kadar faiz işlet
            const oncekiGun = i === 0 ? 0 : (ilkTaksitGun + ((i - 1) * 30));
            const gunFarki = taksitGunu - oncekiGun;
            // Bileşik faiz hesabı
            mevcutPara = mevcutPara * Math.pow(1 + gunlukFaiz, gunFarki);
            // Taksiti öde
            mevcutPara -= aylikTaksit;
            toplamOdenen += aylikTaksit;

            detaylar.push({

                taksit: i + 1,
                gun: taksitGunu,
                oncekiBakiye: mevcutPara + aylikTaksit,
                taksitTutari: aylikTaksit,
                kalanBakiye: mevcutPara
            });

        }

        const sonBakiye = mevcutPara;
        const toplamFaizKazanci = sonBakiye + toplamOdenen - pesinFiyat;
        const netKarZarar = toplamFaizKazanci - (taksitliFiyat - pesinFiyat);
        const taksitMaliyeti = taksitliFiyat - pesinFiyat;

        return {

            aylikTaksit,
            toplamOdenen,
            sonBakiye,
            toplamFaizKazanci,
            taksitMaliyeti,
            netKarZarar,
            detaylar,
            mantikli: netKarZarar > 0

        };

    }, [pesinFiyat, taksitliFiyat, taksitSayisi, gunlukFaiz, ilkTaksitGun]);

    const formatPara = (sayi) => {

        return new Intl.NumberFormat('tr-TR', {

            style: 'currency',
            currency: 'TRY',
            minimumFractionDigits: 2

        }).format(sayi);

    };

    return (

        <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-6">
            <div className="max-w-6xl mx-auto">
                <div className="bg-white rounded-2xl shadow-2xl p-8 mb-6">
                    <div className="flex items-center gap-3 mb-6">
                        <DollarSign className="w-8 h-8 text-indigo-600" />
                        <h1 className="text-3xl font-bold text-gray-800">Taksit vs Faiz Hesaplama</h1>
                    </div>

                    <div className="grid md:grid-cols-2 gap-6 mb-8">
                        <div>
                            <label className="block text-sm font-semibold text-gray-700 mb-2">
                                Peşin Fiyat (TL)
                            </label>
                            <input
                                type="number"
                                value={pesinFiyat}
                                onChange={(e) => setPesinFiyat(Number(e.target.value))}
                                className="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:outline-none />
                        </div>

                        <div>
                            <label className="block text-sm font-semibold text-gray-700 mb-2">
                                Taksitli Fiyat (TL)
                            </label>

                            <input
                                type="number"
                                value={taksitliFiyat}
                                onChange={(e) => setTaksitliFiyat(Number(e.target.value))}
                                className="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:outline-none" />
                        </div>

                        <div>
                            <label className="block text-sm font-semibold text-gray-700 mb-2">
                                Taksit Sayısı
                            </label>

                            <input type="number" value={taksitSayisi} onChange={(e) => setTaksitSayisi(Number(e.target.value))}
                                 className="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:outline-none" />
                        </div>

                        <div>
                            <label className="block text-sm font-semibold text-gray-700 mb-2">
                                Günlük Faiz Oranı (ondalık)
                            </label>

                            <input type="number" step="0.000001" value={gunlukFaiz} onChange={(e) => setGunlukFaiz(Number(e.target.value))}

                                className="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:outline-none" />

                            <p className="text-xs text-gray-500 mt-1">
                                Günlük %{(gunlukFaiz * 100).toFixed(4)} - Yıllık yaklaşık %{(Math.pow(1 + gunlukFaiz, 365) - 1) * 100).toFixed(2)}
                            </p>
                        </div>

                        <div>
                            <label className="block text-sm font-semibold text-gray-700 mb-2">
                                İlk Taksit Kaç Gün Sonra?
                            </label>

                            <input
                                type="number"
                                value={ilkTaksitGun}
                                onChange={(e) => setIlkTaksitGun(Number(e.target.value))}
                                className="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:outline-none" />
                        </div>
                    </div>

                    <div className="grid md:grid-cols-3 gap-4 mb-8">
                        <div className="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-6 text-white">
                            <div className="flex items-center justify-between mb-2">
                                <span className="text-sm font-medium opacity-90">Aylık Taksit</span>
                                <Calendar className="w-5 h-5" />
                            </div>

                            <p className="text-2xl font-bold">{formatPara(hesapla.aylikTaksit)}</p>
                        </div>

                        <div className="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl p-6 text-white">
                            <div className="flex items-center justify-between mb-2">
                                <span className="text-sm font-medium opacity-90">Taksit Maliyeti</span>
                                <TrendingDown className="w-5 h-5" />
                            </div>
                            <p className="text-2xl font-bold">{formatPara(hesapla.taksitMaliyeti)}</p>
                        </div>

                        <div className="bg-gradient-to-br from-green-500 to-green-600 rounded-xl p-6 text-white">
                            <div className="flex items-center justify-between mb-2">
                                <span className="text-sm font-medium opacity-90">Faiz Kazancı</span>
                                <TrendingUp className="w-5 h-5" />
                            </div>
                            <p className="text-2xl font-bold">{formatPara(hesapla.toplamFaizKazanci)}</p>
                        </div>
                    </div>

                    <div className={`rounded-xl p-8 mb-6 ${hesapla.mantikli ? 'bg-gradient-to-r from-green-50 to-emerald-50 border-2 border-green-300' : 'bg-gradient-to-r from-red-50 to-rose-50 border-2 border-red-300'}`}>
                        <div className="flex items-center gap-4 mb-4">
                            {hesapla.mantikli ? (<TrendingUp className="w-12 h-12 text-green-600" />) : (<TrendingDown className="w-12 h-12 text-red-600" />)}
                            <div>
                                <h2 className="text-2xl font-bold text-gray-800">
                                    Net Kar/Zarar: {formatPara(Math.abs(hesapla.netKarZarar))}
                                </h2>

                                <p className="text-lg text-gray-600">
                                    {hesapla.mantikli ? '✓ Taksitle almak MANTIKLI!' : '✗ Peşin almak daha mantıklı'}
                                </p>
                            </div>
                        </div>

                        <div className="bg-white rounded-lg p-4 space-y-2">
                            <div className="flex justify-between">
                                <span className="font-semibold">Son Bakiye:</span>
                                <span className="font-bold text-indigo-600">{formatPara(hesapla.sonBakiye)}</span>
                            </div>
                            <div className="flex justify-between">
                                <span className="font-semibold">Toplam Ödenen:</span>
                                <span>{formatPara(hesapla.toplamOdenen)}</span>
                            </div>

                            <div className="flex justify-between border-t pt-2">
                                <span className="font-semibold">Toplam:</span>
                                <span className="font-bold">{formatPara(hesapla.sonBakiye + hesapla.toplamOdenen)}</span>
                            </div>
                        </div>
                    </div>

                    <div className="bg-gray-50 rounded-xl p-6">
                        <h3 className="text-xl font-bold text-gray-800 mb-4">Taksit Detayları</h3>
                        <div className="overflow-x-auto">
                            <table className="w-full text-sm">
                                <thead>
                                    <tr className="border-b-2 border-gray-300">
                                        <th className="text-left py-3 px-2">Taksit</th>
                                        <th className="text-right py-3 px-2">Gün</th>
                                        <th className="text-right py-3 px-2">Önceki Bakiye</th>
                                        <th className="text-right py-3 px-2">Ödeme</th>
                                        <th className="text-right py-3 px-2">Kalan Bakiye</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {hesapla.detaylar.map((detay) => (
                                        <tr key={detay.taksit} className="border-b border-gray-200 hover:bg-gray-100">
                                            <td className="py-2 px-2 font-semibold">{detay.taksit}</td>
                                            <td className="text-right py-2 px-2">{detay.gun}</td>
                                            <td className="text-right py-2 px-2">{formatPara(detay.oncekiBakiye)}</td>
                                            <td className="text-right py-2 px-2 text-red-600 font-semibold">-{formatPara(detay.taksitTutari)}</td>
                                            <td className="text-right py-2 px-2 font-semibold text-green-600">{formatPara(detay.kalanBakiye)}</td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );}