'use client';
import { useMemo, useState } from 'react';

/** Emsal değer yardımcısı: kullanıcı bölgedeki benzer ilanların m² fiyatlarını girer,
 *  parsel alanına göre tahmini değer aralığı hesaplanır. Dış veri yok; sayfada kalır, kaydedilmez. */
export function EmsalTool({ areaM2 }: { areaM2: number | null }) {
  const [open, setOpen] = useState(false);
  const [rows, setRows] = useState<string[]>(['', '', '']);
  const prices = rows.map((r) => Number(r.replace(/[^\d]/g, ''))).filter((n) => n > 0);
  const stat = useMemo(() => {
    if (!prices.length) return null;
    const avg = prices.reduce((a, b) => a + b, 0) / prices.length;
    const min = Math.min(...prices), max = Math.max(...prices);
    return { avg, min, max };
  }, [prices]);
  const tl = (n: number) => Math.round(n).toLocaleString('tr-TR');
  return (
    <div className="border-t border-ink/15">
      <button type="button" onClick={() => setOpen(!open)} className="flex w-full items-center justify-between px-4 py-3 text-left">
        <span><span className="tag">Emsal değer</span><span className="ml-2 text-[13px] text-ink-soft">Bölgedeki m² fiyatlarından tahmini değer</span></span>
        <span className="text-[18px] text-ink-soft">{open ? '–' : '+'}</span>
      </button>
      {open && (
        <div className="space-y-3 px-4 pb-4">
          <p className="text-[12.5px] text-ink-soft">Çevredeki benzer {areaM2 ? 'arsaların/konutların' : 'ilanların'} <b>m² fiyatını</b> (TL) girin. Sahibinden, Hepsiemlak gibi yerlerden bakabilirsiniz.</p>
          <div className="grid gap-2">
            {rows.map((r, i) => (
              <div key={i} className="flex items-center gap-2">
                <input inputMode="numeric" value={r} onChange={(e) => setRows(rows.map((x, j) => (j === i ? e.target.value.replace(/[^\d]/g, '') : x)))}
                  placeholder={`Emsal ${i + 1} · m² fiyatı`} className="field num flex-1" />
                {rows.length > 1 && <button type="button" onClick={() => setRows(rows.filter((_, j) => j !== i))} aria-label="Sil" className="btn-line btn-sm">×</button>}
              </div>
            ))}
            {rows.length < 8 && <button type="button" onClick={() => setRows([...rows, ''])} className="btn-line btn-sm w-full">+ Emsal ekle</button>}
          </div>
          {stat && (
            <div className="bg-paper-2 p-3 text-[13.5px]">
              <div>Ortalama m² fiyatı: <b className="num">{tl(stat.avg)} TL</b> <span className="text-ink-soft">({tl(stat.min)}–{tl(stat.max)})</span></div>
              {areaM2 ? (
                <div className="mt-1.5">Bu parsel ({Math.round(areaM2).toLocaleString('tr-TR')} m²) için tahmini değer:
                  <div className="num text-[18px] font-extrabold">{tl(stat.min * areaM2)} – {tl(stat.max * areaM2)} TL</div>
                  <div className="text-[12px] text-ink-soft">Ortalamaya göre ≈ {tl(stat.avg * areaM2)} TL</div>
                </div>
              ) : <div className="mt-1.5 text-ink-soft">Parsel alanı bilinmediği için toplam değer hesaplanamadı.</div>}
            </div>
          )}
          <p className="text-[11.5px] text-ink-soft">Bu yalnızca girdiğiniz emsallere dayalı kaba bir tahmindir; resmi değerleme yerine geçmez.</p>
        </div>
      )}
    </div>
  );
}