import React from 'react';
import { useApp } from '../../context/AppContext';
import { Newspaper, Calendar, Building2, Package, ArrowRight } from 'lucide-react';

export const DailyBulletin = () => {
  const { tenders, setActiveTenderDetail } = useApp();

  const todayStr = '10.08.2026';
  const todayTenders = tenders.filter(t => t.tarih === todayStr || t.eklenmeZamani.includes('az') || t.eklenmeZamani.includes('önce'));

  return (
    <div className="space-y-4 my-4 animate-fade-in">
      
      {/* Header */}
      <div className="bg-white rounded-xl border border-slate-200 p-5 shadow-xs flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-blue-600 text-white flex items-center justify-center shadow-md">
            <Newspaper className="w-6 h-6" />
          </div>
          <div>
            <h1 className="text-xl font-black text-slate-900">Günlük İhale Bülteni</h1>
            <p className="text-xs text-slate-500">{todayStr} Tarihinde Yayınlanan Resmi Doğrudan Temin ve Kamu İhaleleri</p>
          </div>
        </div>
        <span className="bg-blue-50 text-blue-800 font-extrabold text-xs px-3 py-1.5 rounded-full border border-blue-200">
          {todayTenders.length} Bugünlük İhale Kaydı
        </span>
      </div>

      {/* Bulletin Group List */}
      <div className="space-y-4">
        {todayTenders.map(t => (
          <div key={t.id} className="bg-white rounded-xl border border-slate-200 p-5 shadow-xs hover:shadow-md transition-all space-y-3">
            <div className="flex items-start justify-between border-b border-slate-100 pb-3">
              <div>
                <span className="text-[10px] font-extrabold bg-blue-100 text-blue-800 px-2 py-0.5 rounded">
                  #{t.ikn}
                </span>
                <h3 
                  onClick={() => setActiveTenderDetail(t)}
                  className="font-bold text-base text-slate-900 hover:text-blue-600 cursor-pointer mt-1"
                >
                  {t.baslik}
                </h3>
              </div>
              <span className="text-xs font-bold text-slate-500 bg-slate-100 px-2.5 py-1 rounded-md">
                ⏰ {t.saat}
              </span>
            </div>

            <div className="flex items-center gap-4 text-xs text-slate-600">
              <span className="flex items-center gap-1 font-semibold">
                <Building2 className="w-4 h-4 text-slate-400" /> {t.kurum}
              </span>
              <span className="font-bold text-blue-700">📍 {t.sehir}</span>
            </div>

            <div className="bg-slate-50 p-3 rounded-lg border border-slate-200 text-xs space-y-1">
              <span className="font-bold text-slate-700 block mb-1">Bülten Kalem Özeti:</span>
              {t.items?.map((item, i) => (
                <div key={i} className="flex justify-between font-semibold text-slate-700">
                  <span>📦 {item.ad}</span>
                  <span className="font-mono text-slate-900">{item.miktar} {item.birim}</span>
                </div>
              ))}
            </div>

            <button
              onClick={() => setActiveTenderDetail(t)}
              className="text-xs font-bold text-blue-600 hover:text-blue-800 flex items-center gap-1 hover:underline"
            >
              <span>İhale Detayını Göster</span>
              <ArrowRight className="w-4 h-4" />
            </button>
          </div>
        ))}
      </div>

    </div>
  );
};