import {
  AppBar, Container, createTheme, CssBaseline, Link, Paper, Table, TableBody,
  TableCell, TableContainer, TableHead, TableRow, ThemeProvider, Toolbar, Typography,
} from '@mui/material'
import { BenchmarkRunner } from './components/BenchmarkRunner'
import { NATIVE_REFERENCE, NATIVE_MAX_THREADS } from './data/nativeReference'

const theme = createTheme({
  palette: { mode: 'light', primary: { main: '#1565c0' } },
})

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <AppBar position="static" elevation={0}>
        <Toolbar>
          <Typography variant="h6" sx={{ flexGrow: 1 }}>matmul-bench</Typography>
          <Link href="https://github.com/concept-collection/matmul-bench" target="_blank" rel="noreferrer" color="inherit" underline="hover">
            GitHub
          </Link>
        </Toolbar>
      </AppBar>

      <Container maxWidth="xl" sx={{ py: 3 }}>
        <Typography variant="body1" sx={{ mb: 2, maxWidth: 900 }}>
          Compares n×n matrix-matrix multiply (GEMM) across implementations
          running in the browser — plain JavaScript/TypeScript, a WebGPU
          compute shader, hand-optimized C compiled to WebAssembly (including a
          multi-threaded build), and libFLAME/BLIS (a real BLAS) compiled to
          WebAssembly, single- and multi-threaded — plus a fixed reference
          table from native LAPACK/OpenBLAS running outside the browser.
        </Typography>

        <BenchmarkRunner />

        <Typography variant="h6" sx={{ mt: 4, mb: 1 }}>Native reference: OpenBLAS dgemm</Typography>
        <Typography variant="caption" color="text.secondary" component="div" sx={{ mb: 1, maxWidth: 900 }}>
          Measured with <code>native/bench_native.c</code> outside the browser on one
          Linux desktop — hardware-dependent, for rough comparison only. Regenerate with{' '}
          <code>native/build.sh && native/bench_native</code>.
        </Typography>
        {NATIVE_REFERENCE.length > 0 ? (
          <TableContainer component={Paper} variant="outlined" sx={{ maxWidth: 480 }}>
            <Table size="small">
              <TableHead>
                <TableRow>
                  <TableCell>n</TableCell>
                  <TableCell align="right">1 thread (GFLOP/s)</TableCell>
                  <TableCell align="right">{NATIVE_MAX_THREADS} threads (GFLOP/s)</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {NATIVE_REFERENCE.map((r) => (
                  <TableRow key={r.n}>
                    <TableCell>{r.n}</TableCell>
                    <TableCell align="right">{r.gflops1t.toFixed(1)}</TableCell>
                    <TableCell align="right">{r.gflopsNt.toFixed(1)}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        ) : (
          <Typography variant="body2" color="text.secondary">(not yet captured)</Typography>
        )}
        <Typography variant="caption" color="text.secondary" component="div" sx={{ mt: 1 }}>
          Threading overhead dominates at small n — the {NATIVE_MAX_THREADS}-thread
          column is slower than 1 thread below n≈512 on this machine.
        </Typography>

        <Typography variant="body2" color="text.secondary" sx={{ mt: 3, maxWidth: 900 }}>
          The threaded methods (custom C and libFLAME/BLIS) use WASM pthreads
          (Web Workers + SharedArrayBuffer) and need cross-origin isolation,
          provided here by a service worker; pick the thread count above. The
          libFLAME/BLIS methods link a real BLAS (BLIS generic C kernels with{' '}
          <code>-msimd128</code>) compiled to WebAssembly — see{' '}
          <Link href="https://github.com/concept-collection/libflame2wasm" target="_blank" rel="noreferrer">libflame2wasm</Link>{' '}
          — and get far closer to native single-threaded OpenBLAS than the
          hand-written C kernels.
        </Typography>

        <Typography variant="caption" color="text.secondary" component="div" sx={{ mt: 4 }}>
          Part of the{' '}
          <Link href="https://github.com/concept-collection" target="_blank" rel="noreferrer">concept-collection</Link>.
        </Typography>
      </Container>
    </ThemeProvider>
  )
}

export default App