"use client";

interface WeekEntry {
  week: number;
  stage: string;
  expected_height_cm: number;
  notes: string;
}

export default function GrowthChart({ timeline }: { timeline: WeekEntry[] }) {
  if (!timeline || timeline.length === 0) {
    return (
      <div className="flex h-48 items-center justify-center rounded-xl border border-dashed border-stone-200 bg-stone-50">
        <p className="text-sm text-stone-400">No timeline data available.</p>
      </div>
    );
  }

  const maxHeight = Math.max(...timeline.map((w) => w.expected_height_cm), 1);

  // Group by stage for colour coding
  const stages = Array.from(new Set(timeline.map((w) => w.stage)));
  const stageColors = [
    "bg-emerald-400",
    "bg-teal-400",
    "bg-cyan-400",
    "bg-blue-400",
    "bg-violet-400",
  ];
  const stageColorMap = Object.fromEntries(
    stages.map((s, i) => [s, stageColors[i % stageColors.length]])
  );

  return (
    <div>
      {/* Bar chart */}
      <div className="flex h-48 items-end gap-1 px-1">
        {timeline.map((w) => {
          const pct = (w.expected_height_cm / maxHeight) * 100;
          const color = stageColorMap[w.stage] ?? "bg-emerald-400";
          return (
            <div
              key={w.week}
              className="group relative flex flex-1 flex-col items-center justify-end"
            >
              {/* Tooltip */}
              <div className="pointer-events-none absolute bottom-full mb-2 left-1/2 -translate-x-1/2 z-10 hidden min-w-max rounded-lg border border-stone-200 bg-white px-3 py-2 shadow-lg group-hover:block">
                <p className="text-xs font-semibold text-stone-900">Week {w.week}</p>
                <p className="text-xs text-stone-500 capitalize">{w.stage}</p>
                <p className="text-xs text-stone-700">{w.expected_height_cm} cm</p>
                {w.notes && <p className="mt-1 max-w-[160px] text-xs text-stone-400 leading-tight">{w.notes}</p>}
              </div>
              {/* Bar */}
              <div
                className={`w-full rounded-t-sm ${color} opacity-80 transition-all group-hover:opacity-100`}
                style={{ height: `${pct}%`, minHeight: "4px" }}
              />
            </div>
          );
        })}
      </div>

      {/* X-axis labels — show every 2nd week to avoid crowding */}
      <div className="mt-1 flex gap-1 px-1">
        {timeline.map((w) => (
          <div key={w.week} className="flex-1 text-center">
            {w.week % 2 === 1 && (
              <span className="text-[10px] text-stone-400">W{w.week}</span>
            )}
          </div>
        ))}
      </div>

      {/* Stage legend */}
      <div className="mt-4 flex flex-wrap gap-3">
        {stages.map((s) => (
          <div key={s} className="flex items-center gap-1.5">
            <div className={`h-2.5 w-2.5 rounded-full ${stageColorMap[s]}`} />
            <span className="text-xs capitalize text-stone-500">{s}</span>
          </div>
        ))}
      </div>

      {/* Height scale note */}
      <p className="mt-2 text-xs text-stone-400">
        Y-axis: plant height (cm) · max {maxHeight} cm
      </p>
    </div>
  );
}