'use client'

import { InputMui } from '@/components/mui/inputs'
import { Button } from '@/components/ui/button'
import { zodResolver } from '@hookform/resolvers/zod'
import { MenuItem } from '@mui/material'
import { Clock4, Mail, Smartphone } from 'lucide-react'
import { useState } from 'react'
import { useForm } from 'react-hook-form'
import { z } from 'zod'

const matters = [
  {
    value: 'recent',
    label: 'Mais recentes',
  },
  {
    value: 'fast',
    label: 'Cursos rápidos',
  },
  {
    value: 'students',
    label: 'Estudantes',
  },
  {
    value: 'immediate',
    label: 'Início imediato',
  },
]

type DataEmail = {
  fullname: string
  email: string
  message: string
  subject: string
}

const schema = z
  .object({
    fullname: z.string().min(5, { message: 'Digite seu nome completo' }),
    email: z.string().email({ message: 'E-mail inválido' }),
    message: z
      .string()
      .min(5, { message: 'Mensagem deve ter no mínimo 5 caracteres' }),
    subject: z.string().min(2, { message: 'Selecione uma assunto' }),
  })
  .required()

export default function Contact() {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<DataEmail>({
    resolver: zodResolver(schema),
  })
  const [status, setStatus] = useState('')

  async function onSubmit(data: DataEmail) {
    setStatus('Enviando...')
    try {
      const response = await fetch('/api/send-email', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      })

      if (response.ok) {
        setStatus('E-mail enviado com sucesso!')
        reset()
      } else {
        setStatus('Erro ao enviar o e-mail.')
      }
    } catch (error) {
      setStatus('Erro ao enviar o e-mail.')
    }
  }

  return (
    <main className="container flex flex-col justify-center items-center py-20">
      <h1 className="text-center font-normal md:font-extrabold text-green-800 text-2xl md:text-4xl">
        Fale com a SevenPro
      </h1>
      <div className="flex flex-col md:flex-row justify-between w-full mt-10 gap-10 md:gap-4">
        <div className="w-full md:w-1/2">
          <h2 className="text-green-800 text-xl md:text-2xl">
            Atendimento aos alunos e parceiros
          </h2>
          <ul className="flex flex-col gap-4 mt-6">
            <li className="flex items-center gap-4">
              <Clock4 className="text-green-800" />
              <span>De segunda à sexta das 08h às 18h</span>
            </li>
            <li className="flex items-center gap-4">
              <Smartphone className="text-green-800" />
              <span>Telefones: (44) 9725-0427</span>
            </li>
            <li className="flex items-center gap-4">
              <Mail className="text-green-800" />
              <span>E-mail: id.sevenpro@gmail.com</span>
            </li>
          </ul>
        </div>
        <div className="w-full md:w-1/2">
          <h2 className="text-green-800 text-xl md:text-2xl">
            Envie uma mensagem
          </h2>
          <form
            onSubmit={handleSubmit(onSubmit)}
            className="mt-6 flex flex-col gap-6"
          >
            <InputMui
              type="text"
              variant="outlined"
              label="Nome completo"
              name="fullname"
              register={register}
            />
            {errors.fullname?.message && (
              <p className="text-red-600">{errors.fullname?.message}</p>
            )}
            <InputMui
              type="text"
              variant="outlined"
              label="E-mail"
              name="email"
              register={register}
            />
            {errors.email?.message && (
              <p className="text-red-600">{errors.email?.message}</p>
            )}
            <InputMui
              type="text"
              variant="outlined"
              label="Mensagem"
              multiline
              rows={4}
              name="message"
              register={register}
            />
            {errors.message?.message && (
              <p className="text-red-600">{errors.message?.message}</p>
            )}
            <InputMui
              type="text"
              variant="outlined"
              label="Assunto"
              select
              name="subject"
              register={register}
            >
              {matters.map((option) => (
                <MenuItem key={option.value} value={option.value}>
                  {option.label}
                </MenuItem>
              ))}
            </InputMui>
            {errors.subject?.message && (
              <p className="text-red-600">{errors.subject?.message}</p>
            )}

            <div className="flex">
              <Button type="submit" className="w-auto">
                Enviar
              </Button>
            </div>
          </form>
          {status && <p className="mt-4 text-sm text-white">{status}</p>}
        </div>
      </div>
    </main>
  )
}
