audio-ui/components/controls/MasterMeter.tsx

'use client';

import * as React from 'react';

export interface MasterMeterProps {
  /** Peak level (0-1) */
  peakLevel: number;
  /** RMS level (0-1) */
  rmsLevel: number;
  /** Whether clipping has occurred */
  isClipping: boolean;
  /** Callback to reset clip indicator */
  onResetClip?: () => void;
}

export function MasterMeter({
  peakLevel,
  rmsLevel,
  isClipping,
  onResetClip,
}: MasterMeterProps) {
  // Convert linear 0-1 to dB scale for display
  const linearToDb = (linear: number): number => {
    if (linear === 0) return -60;
    const db = 20 * Math.log10(linear);
    return Math.max(-60, Math.min(0, db));
  };

  const peakDb = linearToDb(peakLevel);
  const rmsDb = linearToDb(rmsLevel);

  // Calculate bar heights (0-100%)
  const peakHeight = ((peakDb + 60) / 60) * 100;
  const rmsHeight = ((rmsDb + 60) / 60) * 100;

  return (
    <div className="flex items-center gap-2 px-3 py-2 bg-muted/30 rounded-md border border-border/50">
      {/* Clip Indicator */}
      <button
        onClick={onResetClip}
        className={`w-6 h-6 rounded-sm border transition-colors ${
          isClipping
            ? 'bg-red-500 border-red-600 shadow-lg shadow-red-500/50'
            : 'bg-muted border-border/50'
        }`}
        title={isClipping ? 'Click to reset clip indicator' : 'No clipping'}
      >
        <span className="text-[10px] font-bold text-white">C</span>
      </button>

      {/* Meters */}
      <div className="flex gap-1">
        {/* Peak Meter (Left) */}
        <div className="w-6 h-24 bg-background/50 rounded-sm relative overflow-hidden border border-border/50">
          <div className="absolute bottom-0 left-0 right-0 transition-all duration-75 ease-out"
               style={{ height: `${Math.max(0, Math.min(100, peakHeight))}%` }}>
            <div className={`w-full h-full ${
              peakDb > -3 ? 'bg-red-500' :
              peakDb > -6 ? 'bg-yellow-500' :
              'bg-green-500'
            }`} />
          </div>
          {/* dB markers */}
          <div className="absolute inset-0 pointer-events-none">
            <div className="absolute top-0 left-0 right-0 h-px bg-red-500/30" title="0 dB" />
            <div className="absolute top-[5%] left-0 right-0 h-px bg-yellow-500/20" title="-3 dB" />
            <div className="absolute top-[10%] left-0 right-0 h-px bg-border/20" title="-6 dB" />
            <div className="absolute top-[25%] left-0 right-0 h-px bg-border/20" title="-12 dB" />
            <div className="absolute top-[50%] left-0 right-0 h-px bg-border/20" title="-18 dB" />
          </div>
        </div>

        {/* RMS Meter (Right) */}
        <div className="w-6 h-24 bg-background/50 rounded-sm relative overflow-hidden border border-border/50">
          <div className="absolute bottom-0 left-0 right-0 transition-all duration-150 ease-out"
               style={{ height: `${Math.max(0, Math.min(100, rmsHeight))}%` }}>
            <div className={`w-full h-full ${
              rmsDb > -3 ? 'bg-red-400' :
              rmsDb > -6 ? 'bg-yellow-400' :
              'bg-green-400'
            }`} />
          </div>
          {/* dB markers */}
          <div className="absolute inset-0 pointer-events-none">
            <div className="absolute top-0 left-0 right-0 h-px bg-red-500/30" />
            <div className="absolute top-[5%] left-0 right-0 h-px bg-yellow-500/20" />
            <div className="absolute top-[10%] left-0 right-0 h-px bg-border/20" />
            <div className="absolute top-[25%] left-0 right-0 h-px bg-border/20" />
            <div className="absolute top-[50%] left-0 right-0 h-px bg-border/20" />
          </div>
        </div>
      </div>

      {/* Labels and Values */}
      <div className="flex flex-col text-[10px] font-mono">
        <div className="flex items-center gap-1">
          <span className="text-muted-foreground w-6">PK:</span>
          <span className={`w-12 text-right ${
            peakDb > -3 ? 'text-red-500' :
            peakDb > -6 ? 'text-yellow-500' :
            'text-green-500'
          }`}>
            {peakDb > -60 ? `${peakDb.toFixed(1)}` : '-∞'}
          </span>
        </div>
        <div className="flex items-center gap-1">
          <span className="text-muted-foreground w-6">RM:</span>
          <span className={`w-12 text-right ${
            rmsDb > -3 ? 'text-red-400' :
            rmsDb > -6 ? 'text-yellow-400' :
            'text-green-400'
          }`}>
            {rmsDb > -60 ? `${rmsDb.toFixed(1)}` : '-∞'}
          </span>
        </div>
        <div className="text-muted-foreground text-center mt-0.5">dB</div>
      </div>
    </div>
  );
}