import { useDeadlineClock } from '../hooks/useDeadlineClock';
import React, { useMemo } from 'react';
import { CalendarClock } from 'lucide-react';
import { useApp } from '../context/AppContext';
import { deadlineInfo } from '../services/tenderCalendar';

/**
 * Sağ panel: takipteki / panodaki ihalelerden 14 gün içinde yapılacaklar.
 * Sunucuya gitmez — liste zaten bellekte. ≤3 gün kırmızı, ≤7 turuncu.
 */
export const YaklasanSonTarihler = ({ gun = 14 }) => {
  const now = useDeadlineClock();
  const { tenders, setActiveTenderDetail } = useApp();
  const liste = useMemo(() => {
    return tenders
      .filter(t => t.takipte || t.gorev)
      .map(t => ({t,info:deadlineInfo(t,now)}))
      .filter(({info}) => info.days !== null && info.days >= 0 && info.days <= gun && info.expired !== true)
      .sort((a,b) => a.info.days - b.info.days || (a.info.deadline?.getTime() || Infinity) - (b.info.deadline?.getTime() || Infinity))
      .map(({t,info}) => ({t,kalan:info.days,label:info.label}))
      .slice(0, 8);
  }, [tenders, gun, now]);

  const renk = (g) => (g <= 3 ? 'bg-red-600 text-white' : g <= 7 ? 'bg-amber-500 text-white' : 'bg-slate-200 text-slate-800');

  return (
    <div className="bg-white rounded-xl border border-slate-200 shadow-xs overflow-hidden">
      <div className="bg-slate-50 border-b border-slate-100 px-4 py-3">
        <span className="flex items-center gap-2 font-bold text-xs uppercase tracking-wider text-slate-800">
          <CalendarClock className="w-4 h-4 text-amber-500" /> Yaklaşan İhale Tarihleri
        </span>
      </div>
      <div className="p-2 space-y-1">
        {liste.length === 0 ? (
          <p className="px-2 py-3 text-xs text-slate-500">{gun} gün içinde yapılacak takipli ihale yok. Yıldızla takibe alın; burada geri sayım başlar.</p>
        ) : liste.map(({ t, kalan, label }) => (
          <button key={t.id} type="button" onClick={() => setActiveTenderDetail?.(t)}
            className="w-full flex items-center justify-between gap-2 rounded-lg p-2 text-xs hover:bg-slate-50 text-left">
            <span className="min-w-0 truncate font-medium text-slate-800" title={t.baslik}>{t.baslik}</span>
            <span className={`shrink-0 rounded-md px-1.5 py-0.5 text-[10px] font-extrabold ${renk(kalan)}`}>{label}</span>
          </button>
        ))}
      </div>
    </div>
  );
};