'use client'

import { useCallback, useRef, useState } from 'react'
import { ArrowUp } from 'lucide-react'
import dynamic from 'next/dynamic'
import { cn } from '@/lib/core/utils/cn'
import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
import { captureClientEvent } from '@/lib/posthog/client'
import { useLandingSubmit } from '@/app/(landing)/components/landing-preview/components/landing-preview-panel/landing-preview-panel'
import { trackLandingCta } from '@/app/(landing)/landing-analytics'
import { useAnimatedPlaceholder } from '@/hooks/use-animated-placeholder'

const AuthModal = dynamic(
  () => import('@/app/(landing)/components/auth-modal/auth-modal').then((m) => m.AuthModal),
  { loading: () => null }
)

const MAX_HEIGHT = 120

const CTA_BUTTON =
  'inline-flex items-center h-[32px] rounded-[5px] border px-2.5 font-[430] font-season text-sm'

export function FooterCTA() {
  const landingSubmit = useLandingSubmit()
  const [inputValue, setInputValue] = useState('')
  const textareaRef = useRef<HTMLTextAreaElement>(null)
  const animatedPlaceholder = useAnimatedPlaceholder()

  const isEmpty = inputValue.trim().length === 0

  const handleSubmit = useCallback(() => {
    if (isEmpty) return
    captureClientEvent('landing_prompt_submitted', {})
    landingSubmit(inputValue)
  }, [isEmpty, inputValue, landingSubmit])

  const handleKeyDown = useCallback(
    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault()
        handleSubmit()
      }
    },
    [handleSubmit]
  )

  const handleInput = useCallback((e: React.FormEvent<HTMLTextAreaElement>) => {
    const target = e.target as HTMLTextAreaElement
    target.style.height = 'auto'
    target.style.height = `${Math.min(target.scrollHeight, MAX_HEIGHT)}px`
  }, [])

  return (
    <section
      id='cta'
      aria-labelledby='cta-heading'
      className='flex flex-col items-center px-4 pt-[90px] pb-[90px] sm:px-8 sm:pt-[120px] sm:pb-[120px] md:px-16 md:pt-[150px] md:pb-[150px]'
    >
      <h2
        id='cta-heading'
        className='text-balance text-center font-[430] font-season text-[28px] text-white leading-[100%] tracking-[-0.02em] sm:text-[32px] md:text-[36px]'
      >
        What should we get done?
      </h2>

      <div className='mt-8 w-full max-w-[42rem]'>
        <div
          role='group'
          aria-label='Landing prompt input'
          className='cursor-text rounded-[20px] border border-[var(--landing-bg-elevated)] bg-[var(--landing-bg-surface)] px-2.5 py-2'
          onClick={() => textareaRef.current?.focus()}
          onKeyDown={(event) => {
            if (event.target !== event.currentTarget) return
            handleKeyboardActivation(event, () => textareaRef.current?.focus())
          }}
        >
          <textarea
            ref={textareaRef}
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            onKeyDown={handleKeyDown}
            onInput={handleInput}
            aria-label='Describe what you want to build'
            placeholder={animatedPlaceholder}
            rows={2}
            className='m-0 box-border min-h-[48px] w-full resize-none border-0 bg-transparent p-1 font-body text-[var(--landing-text)] text-base leading-[24px] tracking-[-0.015em] caret-white outline-none placeholder:font-[380] placeholder:text-[var(--landing-text-muted)] focus-visible:ring-0'
            style={{ maxHeight: `${MAX_HEIGHT}px` }}
          />
          <div className='flex items-center justify-end'>
            <button
              type='button'
              onClick={handleSubmit}
              disabled={isEmpty}
              aria-label='Submit message'
              className={cn(
                'flex h-[28px] w-[28px] items-center justify-center rounded-full border-0 p-0 transition-colors',
                isEmpty ? 'cursor-not-allowed bg-[#555555]' : 'cursor-pointer bg-white'
              )}
            >
              <ArrowUp size={16} strokeWidth={2.25} color={isEmpty ? '#888888' : '#1C1C1C'} />
            </button>
          </div>
        </div>
      </div>

      <div className='mt-8 flex gap-2'>
        <a
          href='https://docs.sim.ai'
          target='_blank'
          rel='noopener noreferrer'
          className={cn(
            CTA_BUTTON,
            'border-[var(--landing-border-strong)] text-[var(--landing-text)] transition-colors hover:bg-[var(--landing-bg-elevated)]'
          )}
          onClick={() =>
            trackLandingCta({
              label: 'Docs',
              section: 'footer_cta',
              destination: 'https://docs.sim.ai',
            })
          }
        >
          Docs
        </a>
        <AuthModal defaultView='signup' source='footer_cta'>
          <button
            type='button'
            className={cn(
              CTA_BUTTON,
              'gap-2 border-white bg-white text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
            )}
            onClick={() =>
              trackLandingCta({
                label: 'Get started',
                section: 'footer_cta',
                destination: 'auth_modal',
              })
            }
          >
            Get started
          </button>
        </AuthModal>
      </div>
    </section>
  )
}
