import { useTranslation } from '@/lib/i18n';

type DebugPanelProps = {
  fullControlMode: boolean;
  cameraInfo: {
    cameraPosition: number[];
    target: number[];
    zoom: number;
  };
  modelInfo: {
    position: number[];
    rotation: number[];
    scale: number;
  };
};

export function DebugPanel({ fullControlMode, cameraInfo, modelInfo }: DebugPanelProps) {
  const { t } = useTranslation();
  return (
    <div className="fixed top-4 left-4 bg-black/80 text-white p-4 rounded text-xs font-mono space-y-2 z-[100]">
      <div className="font-bold text-blue-400">{t('auth.debug.controls')}</div>
      <div className={fullControlMode ? 'text-green-300' : 'text-yellow-300'}>
        Mode: {fullControlMode ? 'FULL CONTROL' : 'ROTATION ONLY'}
      </div>
      <div>* Left-click/Touch + drag: Rotate</div>
      {fullControlMode && (
        <>
          <div>* Right-click + drag: Pan</div>
          <div>* Scroll: Zoom</div>
        </>
      )}
      <div>* Ctrl+Alt+Enter: Toggle full control</div>
      <div>* Ctrl+Alt+D: Toggle debug panel</div>

      <div className="font-bold text-green-400 pt-2">{t('auth.debug.camera')}</div>
      <div>Position: [{cameraInfo.cameraPosition.map((v) => v.toFixed(2)).join(', ')}]</div>
      <div>Target: [{cameraInfo.target.map((v) => v.toFixed(2)).join(', ')}]</div>
      <div>Zoom: {cameraInfo.zoom.toFixed(2)}</div>

      <div className="font-bold text-yellow-400 pt-2">{t('auth.debug.model')}</div>
      <div>Position: [{modelInfo.position.map((v) => v.toFixed(2)).join(', ')}]</div>
      <div>Rotation: [{modelInfo.rotation.map((v) => v.toFixed(2)).join(', ')}]</div>
      <div>Scale: {modelInfo.scale.toFixed(2)}</div>
    </div>
  );
}