import { useEffect, useState } from 'hono/jsx'
import { getSystemInfo } from '../api'
import { navigate } from '../router'
import {
  Button,
  DashboardInstallCmd,
  HeaderActions,
  Main,
  MainContent,
  MainHeader,
  MainTitle,
  Section,
  SectionTitle,
} from '../styles'

export function SettingsPage({ render }: { render: () => void }) {
  const [version, setVersion] = useState('')
  const [sha, setSha] = useState('')

  useEffect(() => {
    getSystemInfo().then(info => {
      setVersion(info.version)
      setSha(info.sha)
    })
  }, [])

  const goBack = () => {
    navigate('/')
  }

  return (
    <Main>
      <MainHeader centered>
        <MainTitle>Settings</MainTitle>
        <HeaderActions>
          <Button onClick={goBack}>Back</Button>
        </HeaderActions>
      </MainHeader>
      <MainContent centered>
        <Section>
          <SectionTitle>About</SectionTitle>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 14 }}>
            <span>Version: {version}</span>
            <span>SHA: {sha}</span>
          </div>
        </Section>
        <Section>
          <SectionTitle>Install CLI</SectionTitle>
          <DashboardInstallCmd>
            curl -fsSL {location.origin}/install | bash
          </DashboardInstallCmd>
        </Section>
      </MainContent>
    </Main>
  )
}
