'use client';

import {Heading, Text} from '@astryxdesign/core/Text';
import {HEATMAP_DAYS, HEATMAP_HOURS} from '../../services/commerceService';

function getIntensityBg(day: string, hour: string): string {
  if (hour === '18:00') return 'bg-emerald-500 text-black font-bold';
  if (hour === '12:00' || hour === '14:00') return 'bg-emerald-600/80 text-white font-semibold';
  if (day === 'Sat' || day === 'Sun') return 'bg-emerald-700/60 text-white font-medium';
  return 'bg-zinc-800/80 text-zinc-400';
}

export function HeatmapChart() {
  return (
    <div className="rounded-xl border border-border bg-card p-5 space-y-4 shadow-sm overflow-hidden">
      <div className="flex items-center justify-between">
        <div>
          <Heading level={4} className="text-base font-bold text-white">
            Hourly Sales & Footfall Heatmap
          </Heading>
          <Text size="sm" color="secondary">
            Sales volume intensity matrix mapped across days and operating hours
          </Text>
        </div>
        <div className="flex items-center gap-2 text-xs font-semibold text-zinc-300">
          <span>Low</span>
          <div className="flex gap-1">
            <span className="size-3 rounded bg-zinc-800" />
            <span className="size-3 rounded bg-emerald-700/60" />
            <span className="size-3 rounded bg-emerald-600/80" />
            <span className="size-3 rounded bg-emerald-500" />
          </div>
          <span>Peak</span>
        </div>
      </div>

      <div className="overflow-x-auto w-full pt-1">
        <table className="w-full text-center text-xs border-collapse">
          <thead>
            <tr>
              <th className="p-2 text-left text-zinc-400 font-bold">Day / Hour</th>
              {HEATMAP_HOURS.map((h) => (
                <th key={h} className="p-2 font-bold text-zinc-300">
                  {h}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {HEATMAP_DAYS.map((day) => (
              <tr key={day} className="border-t border-zinc-800/40">
                <td className="p-2 text-left font-bold text-white">{day}</td>
                {HEATMAP_HOURS.map((hour) => {
                  const styleClass = getIntensityBg(day, hour);
                  return (
                    <td key={hour} className="p-1">
                      <div
                        className={`h-8 rounded flex items-center justify-center text-[11px] transition-all hover:scale-105 ${styleClass}`}
                      >
                        {hour === '18:00' ? '98%' : hour === '14:00' ? '74%' : '42%'}
                      </div>
                    </td>
                  );
                })}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
