import { useState } from 'react'
import {
  Box,
  Button,
  Card,
  CardBody,
  Container,
  FormControl,
  FormLabel,
  Heading,
  Input,
  Stack,
  Text,
  Textarea,
  useToast,
} from '@chakra-ui/react'
import { Link as RouterLink } from 'react-router-dom'
import { api, ApiError } from '../lib/api'

export function RequestDemo() {
  const toast = useToast()
  const [telegram, setTelegram] = useState('')
  const [message, setMessage] = useState('')
  const [loading, setLoading] = useState(false)
  const [sent, setSent] = useState(false)

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    try {
      await api.createLead(telegram.trim(), message.trim())
      setSent(true)
    } catch (err) {
      const msg = err instanceof ApiError ? err.message : 'Envoi impossible'
      toast({ status: 'error', title: 'Échec', description: msg })
    } finally {
      setLoading(false)
    }
  }

  return (
    <Container maxW="md" py={16}>
      <Stack spacing={6}>
        <Box textAlign="center">
          <Heading size="lg">Demander une démo</Heading>
          <Text color="gray.500">
            Laissez vos coordonnées, un commercial déploiera votre démo dédiée (30 jours).
          </Text>
        </Box>

        {sent ? (
          <Card>
            <CardBody>
              <Stack spacing={4} textAlign="center">
                <Heading size="md">Merci&nbsp;!</Heading>
                <Text>Votre demande a bien été enregistrée. Nous revenons vers vous rapidement.</Text>
                <Button as={RouterLink} to="/" variant="outline">
                  Retour à l'accueil
                </Button>
              </Stack>
            </CardBody>
          </Card>
        ) : (
          <Card>
            <CardBody>
              <form onSubmit={onSubmit}>
                <Stack spacing={4}>
                  <FormControl isRequired>
                    <FormLabel>Telegram</FormLabel>
                    <Input value={telegram} onChange={(e) => setTelegram(e.target.value)} />
                  </FormControl>
                  <FormControl>
                    <FormLabel>Message (optionnel)</FormLabel>
                    <Textarea value={message} onChange={(e) => setMessage(e.target.value)} rows={4} />
                  </FormControl>
                  <Button type="submit" colorScheme="primary" isLoading={loading}>
                    Envoyer ma demande
                  </Button>
                </Stack>
              </form>
            </CardBody>
          </Card>
        )}
      </Stack>
    </Container>
  )
}