import { closeModal, openModal, rerenderModal } from '../components/modal'
import { navigate } from '../router'
import { apps } from '../state'
import { Button, Form, FormActions, FormCheckbox, FormCheckboxField, FormCheckboxLabel, FormError, FormField, FormInput, FormLabel, FormSelect } from '../styles'

type TemplateType = 'ssr' | 'spa' | 'bare'

let newAppCreating = false
let newAppError = ''
let newAppName = ''
let newAppTemplate: TemplateType = 'ssr'
let newAppTool = false

async function createNewApp() {
  const name = newAppName.trim().toLowerCase().replace(/\s+/g, '-')

  if (!name) {
    newAppError = 'App name is required'
    rerenderModal()
    return
  }

  if (!/^[a-z][a-z0-9-]*$/.test(name)) {
    newAppError = 'Name must start with a letter and contain only lowercase letters, numbers, and hyphens'
    rerenderModal()
    return
  }

  if (apps.some(a => a.name === name)) {
    newAppError = 'An app with this name already exists'
    rerenderModal()
    return
  }

  newAppCreating = true
  newAppError = ''
  rerenderModal()

  try {
    const res = await fetch('/api/apps', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name, template: newAppTemplate, tool: newAppTool }),
    })

    const data = await res.json()

    if (!res.ok || !data.ok) {
      throw new Error(data.error || 'Failed to create app')
    }

    // Success - close modal and navigate to the new app
    closeModal()
    navigate(`/app/${name}`)
  } catch (err) {
    newAppError = err instanceof Error ? err.message : 'Failed to create app'
    newAppCreating = false
    rerenderModal()
  }
}

export function openNewAppModal() {
  newAppCreating = false
  newAppError = ''
  newAppName = ''
  newAppTemplate = 'ssr'
  newAppTool = false

  openModal('New App', () => (
    <Form onSubmit={(e: Event) => {
      e.preventDefault()
      createNewApp()
    }}>
      <FormField>
        <FormLabel for="app-name">App Name</FormLabel>
        <FormInput
          id="app-name"
          type="text"
          placeholder="my-app"
          value={newAppName}
          onInput={(e: Event) => {
            newAppName = (e.target as HTMLInputElement).value
          }}
          autofocus
        />
        {newAppError && <FormError>{newAppError}</FormError>}
      </FormField>
      <FormField>
        <FormLabel for="app-template">Template</FormLabel>
        <FormSelect
          id="app-template"
          onChange={(e: Event) => {
            newAppTemplate = (e.target as HTMLSelectElement).value as TemplateType
          }}
        >
          <option value="ssr" selected={newAppTemplate === 'ssr'}>SSR</option>
          <option value="spa" selected={newAppTemplate === 'spa'}>SPA</option>
          <option value="bare" selected={newAppTemplate === 'bare'}>Bare</option>
        </FormSelect>
      </FormField>
      <FormCheckboxField>
        <FormCheckbox
          id="app-tool"
          type="checkbox"
          checked={newAppTool}
          onChange={(e: Event) => {
            newAppTool = (e.target as HTMLInputElement).checked
            rerenderModal()
          }}
        />
        <FormCheckboxLabel for="app-tool">Tool</FormCheckboxLabel>
      </FormCheckboxField>
      <FormActions>
        <Button type="button" onClick={closeModal} disabled={newAppCreating}>
          Cancel
        </Button>
        <Button type="submit" variant="primary" disabled={newAppCreating}>
          {newAppCreating ? 'Creating...' : 'Create App'}
        </Button>
      </FormActions>
    </Form>
  ))
}