import { useMemo } from 'react';
import { useSimulation, computeReservoirWaterStats } from '../simulation/flowSimulator';
import { useBuilder } from '../store/builderStore';
import { computeRoomMetrics } from '../environment/roomMetrics';
import type { WarningLevel } from '../types';
import { useAuth } from '../auth/AuthContext';
import { PaywallModal } from '../payments/PaywallModal';
import { useState } from 'react';

const LEVEL_STYLE: Record<WarningLevel, string> = {
  error: 'border-rose-900/60 bg-rose-950/60 text-rose-300',
  warning: 'border-amber-900/60 bg-amber-950/50 text-amber-300',
  info: 'border-sky-900/60 bg-sky-950/50 text-sky-300',
};

const LEVEL_ICON: Record<WarningLevel, string> = {
  error: '⛔',
  warning: '⚠️',
  info: 'ℹ️',
};

/**
 * StatusPanel — bottom bar showing live simulation results:
 * per-pump delivered flow, system totals, and diagnostics.
 */
export function StatusPanel() {
  const { user } = useAuth();
  const [showPaywall, setShowPaywall] = useState(false);
  const [showCoach, setShowCoach] = useState(false);
  const sim = useSimulation();
  const partCount = useBuilder((s) => Object.keys(s.parts).length);
  const parts = useBuilder((s) => s.parts);
  const setSelected = useBuilder((s) => s.setSelected);
  const simRunning = useBuilder((s) => s.simRunning);
  const toggleSimRunning = useBuilder((s) => s.toggleSimRunning);
  const heatmapMode = useBuilder((s) => s.heatmapMode);
  const toggleHeatmapMode = useBuilder((s) => s.toggleHeatmapMode);
  const roomMetrics = useMemo(() => computeRoomMetrics(parts), [parts]);

  const requirePremiumCoach = () => {
    if (!user || user.purchased_slots === 0) {
      setShowPaywall(true);
    } else {
      setShowCoach(true);
    }
  };

  const reservoirs = useMemo(() => {
    return Object.values(parts).filter((p) => p.type === 'reservoir');
  }, [parts]);

  const reservoirStats = useMemo(() => {
    return reservoirs.map((res) => computeReservoirWaterStats(res, parts));
  }, [reservoirs, parts]);

  const lph = sim.totalGph * 3.785;
  const flowing = sim.pumps.some((p) => p.running);
  const peakVelocity = Math.max(0, ...Object.values(sim.velocities));
  const peakPressure = Math.max(0, ...Object.values(sim.pressures));

  return (
    <>
    <footer className="flex h-36 shrink-0 border-t border-zinc-800 bg-zinc-950/90 backdrop-blur">
      {/* System stats */}
      <div className="flex w-56 shrink-0 flex-col justify-center gap-1 border-r border-zinc-800 px-4">
        <h3 className="text-[10px] font-bold tracking-wider text-zinc-500 uppercase">
          Simulation
        </h3>
        <div className="text-2xl font-bold text-sky-400 tabular-nums">
          {sim.totalGph.toFixed(0)}
          <span className="ml-1 text-xs font-medium text-zinc-500">GPH</span>
        </div>
        <div className="text-[11px] text-zinc-500 tabular-nums">
          ≈ {lph.toFixed(0)} L/h · {partCount} parts · {sim.connectionCount} connections
        </div>
        <div className="text-[10px] text-zinc-600 tabular-nums">
          peak {peakVelocity.toFixed(1)} ft/s · {peakPressure.toFixed(1)} psi
        </div>
        <div className="flex items-center gap-2 mt-1">
          <button
            onClick={toggleSimRunning}
            title={simRunning ? 'Pause simulation (Space)' : 'Resume simulation (Space)'}
            className={`inline-flex w-fit cursor-pointer items-center gap-1.5 rounded-full px-2 py-0.5 text-[10px] font-semibold transition hover:brightness-125 ${
              !simRunning
                ? 'bg-amber-950 text-amber-400 ring-1 ring-amber-800'
                : flowing
                  ? 'bg-emerald-950 text-emerald-400 ring-1 ring-emerald-800'
                  : 'bg-zinc-900 text-zinc-500 ring-1 ring-zinc-800'
            }`}
          >
            <span className="relative flex h-1.5 w-1.5">
              {simRunning && flowing && (
                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60" />
              )}
              <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-current" />
            </span>
            {!simRunning ? '⏸ Paused' : flowing ? 'Water flowing' : 'System idle'}
          </button>

          <label className="inline-flex cursor-pointer items-center gap-1 text-[10px] font-semibold text-zinc-400 hover:text-zinc-200">
            <input
              type="checkbox"
              checked={heatmapMode}
              onChange={toggleHeatmapMode}
              className="accent-sky-500 cursor-pointer h-3 w-3 rounded border-zinc-700 bg-zinc-850"
            />
            <span>Heatmap</span>
          </label>
        </div>
      </div>

      {/* Pumps */}
      <div className="flex w-72 shrink-0 flex-col gap-1.5 overflow-y-auto border-r border-zinc-800 px-4 py-2.5">
        <h3 className="text-[10px] font-bold tracking-wider text-zinc-500 uppercase">Pumps</h3>
        {sim.pumps.length === 0 && (
          <p className="text-xs text-zinc-600">No pumps in the system.</p>
        )}
        {sim.pumps.map((p) => (
          <button
            key={p.pumpId}
            onClick={() => setSelected(p.pumpId)}
            className="rounded-md border border-zinc-800 bg-zinc-900/70 px-2.5 py-1.5 text-left hover:border-zinc-600"
          >
            <div className="flex items-baseline justify-between">
              <span className="text-xs font-semibold text-zinc-200">
                {p.gph > 0 ? `${p.gph.toFixed(0)} GPH` : 'No flow'}
                <span className="ml-1 text-[10px] font-normal text-zinc-500">
                  / {p.ratedGph} rated
                </span>
              </span>
              <span className="font-mono text-[10px] text-zinc-500">
                head {p.headFt.toFixed(1)}/{p.maxHeadFt} ft
              </span>
            </div>
            {/* Efficiency bar */}
            <div className="mt-1 h-1 overflow-hidden rounded-full bg-zinc-800">
              <div
                className={`h-full rounded-full ${p.gph / p.ratedGph > 0.5 ? 'bg-emerald-500' : p.gph > 0 ? 'bg-amber-500' : 'bg-rose-600'}`}
                style={{ width: `${Math.max(2, (p.gph / p.ratedGph) * 100)}%` }}
              />
            </div>
          </button>
        ))}
      </div>

      {/* Diagnostics */}
      <div className="flex w-80 shrink-0 flex-col gap-1 overflow-y-auto border-r border-zinc-800 px-4 py-2.5">
        <h3 className="text-[10px] font-bold tracking-wider text-zinc-500 uppercase">
          Environment
        </h3>
        {roomMetrics.length === 0 ? (
          <p className="text-xs text-zinc-600">Add a grow tent/room to track air exchange.</p>
        ) : (
          roomMetrics.map((room) => (
            <button
              key={room.roomId}
              onClick={() => setSelected(room.roomId)}
              className="rounded-md border border-zinc-800 bg-zinc-900/70 px-2.5 py-1.5 text-left hover:border-zinc-600"
            >
              <div className="flex items-center justify-between gap-2">
                <span className="text-xs font-semibold text-zinc-200">{room.label}</span>
                <span
                  className={`rounded-full px-2 py-0.5 text-[10px] font-semibold ${
                    room.sealed
                      ? 'bg-emerald-950 text-emerald-300 ring-1 ring-emerald-800'
                      : 'bg-sky-950 text-sky-300 ring-1 ring-sky-800'
                  }`}
                >
                  {room.sealed ? 'Sealed' : 'Open air'}
                </span>
              </div>
              <div className="mt-1 text-[11px] text-zinc-400 tabular-nums">
                {room.volumeFt3.toFixed(0)} ft3 · {room.exhaustCfm.toFixed(0)} exhaust · {room.intakeCfm.toFixed(0)} intake CFM
              </div>
              <div className="text-[10px] text-zinc-500 tabular-nums">
                {room.airChangesPerMinute.toFixed(2)} exchanges/min · {room.airChangesPerHour.toFixed(1)} ACH · {room.netFreshAirCfm.toFixed(0)} fresh-air CFM
              </div>
              <div className="mt-1 text-[10px] text-zinc-600 tabular-nums">
                circ {room.circulationCfm.toFixed(0)} CFM · light {room.lightWatts.toFixed(0)} W · CO2 {room.co2TankCount} tank{room.co2TankCount === 1 ? '' : 's'}
              </div>
              <div className="mt-1 flex gap-1.5 text-[9px] font-mono">
                <span className="rounded bg-zinc-900 px-1 py-0.5 text-emerald-400 border border-zinc-800">
                  VPD {room.roomVPD.toFixed(2)} kPa
                </span>
                <span className="rounded bg-zinc-900 px-1 py-0.5 text-amber-400 border border-zinc-800">
                  DLI {room.roomDLI.toFixed(1)}
                </span>
                <span className="rounded bg-zinc-900 px-1 py-0.5 text-sky-400 border border-zinc-800">
                  CO₂ {room.roomCo2} ppm
                </span>
              </div>
            </button>
          ))
        )}
      </div>

      {/* Room Readout */}
      <div className="flex w-56 shrink-0 flex-col justify-center gap-1.5 border-r border-zinc-800 px-4 py-2.5">
        <div className="flex items-center justify-between">
          <h3 className="text-[10px] font-bold tracking-wider text-zinc-500 uppercase">
            Room Readout
          </h3>
          <button 
            onClick={requirePremiumCoach}
            className="text-[9px] font-bold uppercase tracking-wider text-sky-400 hover:text-sky-300 bg-sky-950/50 hover:bg-sky-900/50 px-1.5 py-0.5 rounded border border-sky-900/50 transition-colors"
          >
            drjonesbot 🤖
          </button>
        </div>
        {roomMetrics.length === 0 ? (
          <p className="text-xs text-zinc-600">No room placed</p>
        ) : (() => {
          const m = roomMetrics[0];
          return (
            <div className="flex flex-wrap gap-1 text-[10px] font-mono tabular-nums">
              <span className="rounded bg-zinc-900 px-1.5 py-0.5 border border-zinc-800 text-rose-400">
                🌡️ {m.roomTempF.toFixed(0)}°F
              </span>
              <span className="rounded bg-zinc-900 px-1.5 py-0.5 border border-zinc-800 text-sky-400">
                💧 {m.roomRH.toFixed(0)}%
              </span>
              <span className="rounded bg-zinc-900 px-1.5 py-0.5 border border-zinc-800 text-emerald-400">
                VPD {m.roomVPD.toFixed(2)}
              </span>
              <span className="rounded bg-zinc-900 px-1.5 py-0.5 border border-zinc-800 text-sky-400">
                CO₂ {m.roomCo2}
              </span>
              <span className="rounded bg-zinc-900 px-1.5 py-0.5 border border-zinc-800 text-amber-400">
                ☀️ {m.roomPPFD.toFixed(0)}
              </span>
              <span className="rounded bg-zinc-900 px-1.5 py-0.5 border border-zinc-800 text-zinc-300">
                ACH {m.airChangesPerHour.toFixed(1)}
              </span>
            </div>
          );
        })()}
      </div>

      {/* Aeration & Water */}
      <div className="flex w-72 shrink-0 flex-col gap-1.5 overflow-y-auto border-r border-zinc-800 px-4 py-2.5">
        <h3 className="text-[10px] font-bold tracking-wider text-zinc-500 uppercase">
          Aeration & Water
        </h3>
        {reservoirStats.length === 0 && (
          <p className="text-xs text-zinc-600">No reservoirs in the system.</p>
        )}
        {reservoirStats.map((stats) => (
          <button
            key={stats.id}
            onClick={() => setSelected(stats.id)}
            className="rounded-md border border-zinc-800 bg-zinc-900/70 px-2.5 py-1.5 text-left hover:border-zinc-600"
          >
            {(() => {
              const runtime = sim.reservoirRuntime[stats.id];
              return runtime ? (
              <div className="mb-1 flex items-center justify-between text-[9px] font-mono">
                <span className={`${runtime.empty ? 'text-rose-400' : 'text-sky-400'}`}>
                  {runtime.gallonsCurrent.toFixed(1)} / {runtime.gallonsCapacity.toFixed(1)} gal
                </span>
                <span className="text-zinc-500">
                  {runtime.minutesRemaining === null
                    ? 'steady'
                    : `${runtime.minutesRemaining.toFixed(1)} min left`}
                </span>
              </div>
              ) : null;
            })()}
            {(() => {
              const runtime = sim.reservoirRuntime[stats.id];
              return runtime && runtime.gallonsHeldInSystem > 0.02 ? (
                <div className="mb-1 text-[9px] font-mono text-zinc-500">
                  {runtime.gallonsHeldInSystem.toFixed(2)} gal held in primed lines
                </div>
              ) : null;
            })()}
            <div className="flex items-baseline justify-between">
              <span className="text-xs font-semibold text-zinc-200">
                {stats.label}
              </span>
              <span className="font-mono text-[10px] text-zinc-500">
                {stats.volGal.toFixed(1)} Gal
              </span>
            </div>
            <div className="mt-1 flex items-center justify-between text-[10px] text-zinc-400">
              <span>Aeration: {stats.activeAerationGph} GPH</span>
              <span
                className={`rounded px-1.5 py-0.5 text-[9px] font-bold ${
                  stats.tdo >= 8.0
                    ? 'bg-emerald-950 text-emerald-400 border border-emerald-800/30'
                    : stats.tdo >= 7.0
                    ? 'bg-sky-950 text-sky-300 border border-sky-800/30'
                    : 'bg-amber-950 text-amber-400 border border-amber-800/30 animate-pulse'
                }`}
              >
                {stats.tdo.toFixed(1)} mg/L
              </span>
            </div>
            <div className="mt-1.5 flex justify-between text-[9px] text-zinc-500 font-mono">
              <span className={stats.tempF > 73.0 ? 'text-amber-400 font-semibold' : 'text-zinc-500'}>
                Temp: {stats.tempF.toFixed(1)}°F
              </span>
              <span className={stats.ph < 5.5 || stats.ph > 6.5 ? 'text-amber-400 font-semibold' : 'text-zinc-500'}>
                pH: {stats.ph.toFixed(1)}
              </span>
              <span className={stats.ec < 0.8 || stats.ec > 2.0 ? 'text-amber-400 font-semibold' : 'text-zinc-500'}>
                EC: {stats.ec.toFixed(1)}
              </span>
            </div>
          </button>
        ))}
      </div>

      <div className="flex flex-1 flex-col gap-1 overflow-y-auto px-4 py-2.5">
        <h3 className="text-[10px] font-bold tracking-wider text-zinc-500 uppercase">
          Diagnostics
        </h3>
        {sim.warnings.length === 0 ? (
          <p className="flex items-center gap-1.5 text-xs text-emerald-400">
            ✓ System healthy — no issues detected.
          </p>
        ) : (
          sim.warnings.map((w, i) => (
            <button
              key={i}
              onClick={() => w.partId && setSelected(w.partId)}
              className={`rounded-md border px-2.5 py-1 text-left text-[11px] leading-snug ${LEVEL_STYLE[w.level]} ${
                w.partId ? 'cursor-pointer hover:brightness-125' : 'cursor-default'
              }`}
            >
              {LEVEL_ICON[w.level]} {w.message}
            </button>
          ))
        )}
      </div>
    </footer>
    {showPaywall && <PaywallModal onClose={() => setShowPaywall(false)} />}
    {showCoach && <GrowCoachModal metrics={roomMetrics} onClose={() => setShowCoach(false)} />}
    </>
  );
}

function GrowCoachModal({ metrics, onClose }: { metrics: any[]; onClose: () => void }) {
  const m = metrics[0];
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
      <div className="w-full max-w-md overflow-hidden rounded-xl border border-sky-900 bg-zinc-950 shadow-2xl">
        <div className="border-b border-zinc-800 bg-zinc-900 px-6 py-4 flex justify-between items-center">
          <h2 className="text-lg font-bold text-sky-400 flex items-center gap-2">
            🤖 drjonesbot
          </h2>
          <button onClick={onClose} className="text-zinc-500 hover:text-zinc-300">✕</button>
        </div>
        <div className="p-6 text-sm text-zinc-300 space-y-4">
          {!m ? (
            <p>Please add a Grow Room/Tent to your scene so I can analyze the environment.</p>
          ) : (
            <>
              <div className="p-3 bg-zinc-900 rounded-lg border border-zinc-800">
                <span className="font-bold text-sky-400">Humidity Analysis:</span>
                <p className="mt-1">
                  {m.roomRH > 65 ? "Your relative humidity is dangerously high for late-stage growth. Consider adding a dehumidifier or increasing exhaust CFM to prevent bud rot." :
                   m.roomRH < 40 ? "Your humidity is too low. Seedlings and vegetative plants will struggle to transpire. Consider adding a humidifier." :
                   "Your humidity is right in the sweet spot for vegetative growth!"}
                </p>
              </div>
              <div className="p-3 bg-zinc-900 rounded-lg border border-zinc-800">
                <span className="font-bold text-emerald-400">VPD Target:</span>
                <p className="mt-1">
                  {m.roomVPD < 0.8 ? "VPD is low. Plants are not transpiring enough water, which can stunt nutrient uptake. Increase temperature or decrease humidity." :
                   m.roomVPD > 1.2 ? "VPD is high. Plants may experience water stress and close their stomata. Decrease temperature or increase humidity." :
                   "Perfect! A VPD of around 1.0 kPa is optimal for most stages of growth."}
                </p>
              </div>
              <div className="p-3 bg-zinc-900 rounded-lg border border-zinc-800">
                <span className="font-bold text-amber-400">Air Exchange:</span>
                <p className="mt-1">
                  {m.airChangesPerMinute < 1.0 ? "Your Air Changes Per Minute (ACH) is quite low. Stagnant air invites pests and mold. Add more inline exhaust fans." :
                   "Your air exchange rate is solid, ensuring fresh CO2 is continuously supplied to the canopy."}
                </p>
              </div>
            </>
          )}
        </div>
        <div className="border-t border-zinc-800 bg-zinc-900 px-6 py-4 flex justify-end">
          <button
            onClick={onClose}
            className="rounded-md bg-zinc-800 px-4 py-2 font-semibold text-zinc-200 hover:bg-zinc-700"
          >
            Got it
          </button>
        </div>
      </div>
    </div>
  );
}
