litoral-central-frontend/src/features/climate/components/DashboardClimateSection.tsx

import { Gauge, Thermometer, Waves } from "lucide-react";
import type { DashboardOverview } from "../../dashboard/types/DashboardOverview";
import { StatusPill } from "../../dashboard/components/StatusPill";

type Props = {
  zones: DashboardOverview["climate"]["zones"];
};

function formatValue(value: number | null, unit: string, decimals = 1) {
  if (value === null) return "--";
  return `${value.toFixed(decimals)} ${unit}`;
}

export function DashboardClimateSection({ zones }: Props) {
  return (
    <section className="space-y-4">
      <div>
        <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-50">
          Clima por Zona
        </h2>
        <p className="text-sm text-slate-500 dark:text-slate-400">
          Temperatura, humidade, CO₂ e estados principais dos equipamentos.
        </p>
      </div>

      <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
        {zones.map((zone) => (
          <div
            key={zone.zoneNumber}
            className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900"
          >
            <div className="mb-4 flex items-center justify-between">
              <h3 className="text-base font-semibold text-slate-900 dark:text-slate-50">
                Zona {zone.zoneNumber}
              </h3>

              <div className="flex gap-2">
                <StatusPill active={zone.fansOn} activeLabel="Vent." inactiveLabel="Vent." />
                <StatusPill active={zone.extractorsOn} activeLabel="Extr." inactiveLabel="Extr." />
              </div>
            </div>

            <div className="grid grid-cols-2 gap-3 md:grid-cols-3">
              <MiniValue icon={Thermometer} label="Temperatura" value={formatValue(zone.temperature, "°C")} />
              <MiniValue icon={Waves} label="Humidade" value={formatValue(zone.humidity, "%", 0)} />
              <MiniValue icon={Gauge} label="CO₂" value={formatValue(zone.co2, "ppm", 0)} />
            </div>

            <div className="mt-5 grid grid-cols-2 gap-3 md:grid-cols-4">
              <OpeningBar label="Zenital E" value={zone.zenitalLeftPercent} />
              <OpeningBar label="Zenital D" value={zone.zenitalRightPercent} />
              <OpeningBar label="Lateral E" value={zone.lateralLeftPercent} />
              <OpeningBar label="Lateral D" value={zone.lateralRightPercent} />
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

type MiniValueProps = {
  icon: React.ElementType;
  label: string;
  value: string;
};

function MiniValue({ icon: Icon, label, value }: MiniValueProps) {
  return (
    <div className="rounded-xl bg-slate-50 p-3 dark:bg-slate-950">
      <div className="mb-2 flex items-center gap-2 text-slate-500 dark:text-slate-400">
        <Icon className="h-4 w-4" />
        <span className="text-xs">{label}</span>
      </div>
      <p className="text-lg font-semibold text-slate-900 dark:text-slate-50">
        {value}
      </p>
    </div>
  );
}

type OpeningBarProps = {
  label: string;
  value: number | null;
};

function OpeningBar({ label, value }: OpeningBarProps) {
  const safeValue = value ?? 0;

  return (
    <div>
      <div className="mb-1 flex justify-between text-xs text-slate-500 dark:text-slate-400">
        <span>{label}</span>
        <span>{value === null ? "--" : `${value.toFixed(0)}%`}</span>
      </div>

      <div className="h-2 rounded-full bg-slate-200 dark:bg-slate-800">
        <div
          className="h-2 rounded-full bg-blue-500"
          style={{ width: `${safeValue}%` }}
        />
      </div>
    </div>
  );
}