// Festivals side panel
const FestivalsPanel = ({ festivals, run_date }) => {
  const run_date_obj = new Date(run_date);
  const fmtName = (col) => col.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());

  return (
    <div className="bg-white border border-slate-200 rounded-lg overflow-hidden h-full flex flex-col">
      <div className="px-4 py-3 border-b border-slate-100 flex items-center justify-between">
        <h3 className="text-sm font-semibold text-slate-900">Festivals in Range</h3>
        <span className="text-xs text-slate-400 tabular-nums">{festivals.length}</span>
      </div>
      <div className="flex-1 overflow-auto">
        {festivals.length === 0 ? (
          <div className="px-4 py-10 text-center">
            <div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-slate-50 text-slate-300 mb-2">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                <rect x="3" y="4" width="14" height="13" rx="1.5" stroke="currentColor" strokeWidth="1.5" />
                <path d="M3 8h14M7 2v3M13 2v3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
              </svg>
            </div>
            <p className="text-sm text-slate-400">No festivals in next 30 days</p>
          </div>
        ) : (
          <ul className="divide-y divide-slate-100">
            {festivals.map((f, i) => {
              const date = new Date(f.date);
              const days = Math.round((date - run_date_obj) / 86400000);
              const isPast = days < 0;
              const is_run_date = days === 0;
              return (
                <li key={i} className="px-4 py-3 hover:bg-slate-50/70 transition">
                  <div className="flex items-start gap-3">
                    <div className={`flex-shrink-0 w-11 h-11 rounded-md flex flex-col items-center justify-center text-center ${isPast ? 'bg-slate-50 text-slate-400' : is_run_date ? 'bg-red-600 text-white' : 'bg-red-50 text-red-700'}`}>
                      <span className="text-[9px] font-medium uppercase leading-tight">{date.toLocaleDateString('en-US', { month: 'short' })}</span>
                      <span className="text-base font-semibold leading-none tabular-nums">{date.getDate()}</span>
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className={`text-sm font-medium truncate ${isPast ? 'text-slate-500' : 'text-slate-900'}`}>
                        {fmtName(f.name)}
                      </div>
                      <div className="text-xs text-slate-500 mt-0.5">
                        {date.toLocaleDateString('en-US', { weekday: 'long' })}
                        <span className="mx-1.5 text-slate-300">·</span>
                        {is_run_date ? <span className="text-red-600 font-medium">Today</span>
                          : isPast ? <span>{Math.abs(days)}d ago</span>
                          : <span className="text-red-700 font-medium">in {days}d</span>}
                      </div>
                    </div>
                  </div>
                </li>
              );
            })}
          </ul>
        )}
      </div>
    </div>
  );
};

window.FestivalsPanel = FestivalsPanel;