// Per-mesh rendering settings (from layerDialog.cpp / ml_render_gui.h)
// Shading / Color / Back-Face / Texture Coord groups

import { useMeshStore } from '../stores/meshStore';

const groupStyle: React.CSSProperties = {
  display: 'flex', alignItems: 'center', gap: 2, marginBottom: 3,
};
const labelStyle: React.CSSProperties = {
  width: 72, fontSize: 10, color: '#333', flexShrink: 0,
};

function ToggleBtn({ label, active, onClick, testId }: {
  label: string; active?: boolean; onClick: () => void; testId?: string;
}) {
  return (
    <button
      data-testid={testId}
      onClick={onClick}
      style={{
        padding: '1px 6px', fontSize: 10, border: '1px solid #a0a0a0', borderRadius: 2,
        background: active ? '#4a90d9' : '#e8e8e8', color: active ? '#fff' : '#333',
        cursor: 'pointer', fontFamily: 'system-ui, sans-serif',
      }}
    >
      {label}
    </button>
  );
}

export function MeshRenderSettings() {
  const { state, dispatch } = useMeshStore();
  const active = state.layers.find((l) => l.id === state.activeLayerId);
  if (!active) return null;

  const mode = state.globalRenderMode;
  const setMode = (m: string) => dispatch({ type: 'SET_RENDER_MODE', mode: m as import('./Toolbar').RenderMode });

  return (
    <div data-testid="project-panel" style={{
      padding: '6px 8px', borderTop: '1px solid #c0c0c0', fontSize: 10,
      fontFamily: 'system-ui, sans-serif', background: '#f0f0f0',
    }}>
      {/* Viewport buttons (desktop-style [1][2][3][4]) */}
      <div style={{ display: 'flex', gap: 2, marginBottom: 4 }}>
        <div style={{ display: 'flex', gap: 1 }}>
          {[1, 2, 3, 4].map(n => (
            <button key={`vp-${n}`} data-testid={`viewport-btn-${n}`} style={{
              width: 22, height: 18, fontSize: 10, border: '1px solid #999', borderRadius: 2,
              background: n === 1 ? '#4a90d9' : '#d0d0d0', color: n === 1 ? '#fff' : '#888',
              cursor: n === 1 ? 'pointer' : 'not-allowed', opacity: n === 1 ? 1 : 0.5,
            }}>{n}</button>
          ))}
        </div>
        <div style={{ width: 8 }} />
        <div style={{ display: 'flex', gap: 1 }}>
          {[1, 2, 3, 4].map(n => (
            <button key={`vl-${n}`} style={{
              width: 22, height: 18, fontSize: 10, border: '1px solid #999', borderRadius: 2,
              background: n === 1 ? '#4a90d9' : '#d0d0d0', color: n === 1 ? '#fff' : '#888',
              cursor: n === 1 ? 'pointer' : 'not-allowed', opacity: n === 1 ? 1 : 0.5,
            }}>{n}</button>
          ))}
        </div>
      </div>

      {/* Active layer name */}
      <div style={{ fontWeight: 'bold', marginBottom: 4, fontSize: 11, color: '#333' }}>
        {active.name}
      </div>

      {/* Render mode quick icons */}
      <div style={{ display: 'flex', gap: 2, marginBottom: 6 }}>
        {[
          { icon: '/icons/bbox.png', m: 'bbox', tip: 'BBox' },
          { icon: '/icons/points.png', m: 'points', tip: 'Points' },
          { icon: '/icons/wire.png', m: 'wireframe', tip: 'Wire' },
          { icon: '/icons/flat.png', m: 'flat', tip: 'Flat' },
          { icon: '/icons/smooth.png', m: 'solid', tip: 'Smooth' },
          { icon: '/icons/texture.png', m: 'texture', tip: 'Texture' },
        ].map(({ icon, m, tip }) => (
          <button key={m} title={tip} onClick={() => m !== 'bbox' && m !== 'texture' && setMode(m)}
            style={{
              width: 24, height: 22, border: '1px solid #aaa', borderRadius: 2, padding: 1,
              background: mode === m ? '#b0c4de' : '#e8e8e8', cursor: 'pointer',
            }}>
            <img src={icon} alt={tip} style={{ width: 18, height: 18 }}
              onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; (e.target as HTMLImageElement).parentElement!.textContent = tip[0]; }} />
          </button>
        ))}
      </div>

      <div style={groupStyle}>
        <span style={labelStyle}>Shading</span>
        <ToggleBtn label="Vert" active={mode === 'solid'} onClick={() => setMode('solid')} data-testid="shading-vert" testId="shading-vert" />
        <ToggleBtn label="Face" active={mode === 'flat'} onClick={() => setMode('flat')} testId="shading-face" />
        <ToggleBtn label="None" active={mode === 'wireframe'} onClick={() => setMode('wireframe')} />
      </div>

      <div style={groupStyle}>
        <span style={labelStyle}>Color</span>
        <ToggleBtn label="Mesh" active={true} onClick={() => {}} />
        <ToggleBtn label="Vert" active={false} onClick={() => {}} />
        <ToggleBtn label="Face" active={false} onClick={() => {}} />
        <div style={{
          width: 14, height: 14, borderRadius: 2, border: '1px solid #888',
          background: active.color, cursor: 'pointer',
        }} />
      </div>

      <div style={groupStyle}>
        <span style={labelStyle}>Back-Face</span>
        <ToggleBtn label="Single" active={false} onClick={() => {}} />
        <ToggleBtn label="Double" active={true} onClick={() => {}} testId="backface-double" />
        <ToggleBtn label="Cull" active={false} onClick={() => {}} />
      </div>

      <div style={groupStyle}>
        <span style={labelStyle}>Texture Coord</span>
        <ToggleBtn label="Off" active={true} onClick={() => {}} />
        <ToggleBtn label="On" active={false} onClick={() => {}} />
      </div>

      {/* Decoration toggles — matches desktop layerDialog */}
      <div style={{ marginTop: 6, borderTop: '1px solid #c0c0c0', paddingTop: 4 }}>
        <div style={groupStyle}>
          <span style={labelStyle}>Boundary Edges</span>
          <ToggleBtn label="On" active={state.showBoundary} onClick={() => dispatch({ type: 'SET_RENDER_SETTING', key: 'showBoundary', value: !state.showBoundary })} />
          <ToggleBtn label="Off" active={!state.showBoundary} onClick={() => dispatch({ type: 'SET_RENDER_SETTING', key: 'showBoundary', value: false })} />
        </div>
        <div style={groupStyle}>
          <span style={labelStyle}>No-Manif Verts</span>
          <ToggleBtn label="On" active={state.showNonManifold} onClick={() => dispatch({ type: 'SET_RENDER_SETTING', key: 'showNonManifold', value: !state.showNonManifold })} />
          <ToggleBtn label="Off" active={!state.showNonManifold} onClick={() => dispatch({ type: 'SET_RENDER_SETTING', key: 'showNonManifold', value: false })} />
        </div>
        <div style={groupStyle}>
          <span style={labelStyle}>No-Manif Edges</span>
          <ToggleBtn label="On" active={state.showNonManifold} onClick={() => dispatch({ type: 'SET_RENDER_SETTING', key: 'showNonManifold', value: !state.showNonManifold })} />
          <ToggleBtn label="Off" active={!state.showNonManifold} onClick={() => dispatch({ type: 'SET_RENDER_SETTING', key: 'showNonManifold', value: false })} />
        </div>
        <div style={groupStyle}>
          <span style={labelStyle}>Boundary Faces</span>
          <ToggleBtn label="On" active={state.showBoundary} onClick={() => dispatch({ type: 'SET_RENDER_SETTING', key: 'showBoundary', value: true })} />
          <ToggleBtn label="Off" active={!state.showBoundary} onClick={() => dispatch({ type: 'SET_RENDER_SETTING', key: 'showBoundary', value: false })} />
        </div>
        <div style={groupStyle}>
          <span style={labelStyle}>Texture Border</span>
          <ToggleBtn label="On" active={false} onClick={() => {}} />
          <ToggleBtn label="Off" active={true} onClick={() => {}} />
        </div>
        <div style={groupStyle}>
          <span style={labelStyle}>Show Normals</span>
          <ToggleBtn label="On" active={state.showNormals} onClick={() => dispatch({ type: 'SET_RENDER_SETTING', key: 'showNormals', value: !state.showNormals })} />
          <ToggleBtn label="Off" active={!state.showNormals} onClick={() => dispatch({ type: 'SET_RENDER_SETTING', key: 'showNormals', value: false })} />
        </div>
      </div>
    </div>
  );
}
