'use client';

import { PaperPlaneIcon } from '@/components/icons';
import { FC } from 'react';
import { useForm } from 'react-hook-form';

export type FormData = {
  name: string;
  email: string;
  message: string;
};

export const ContactForm: FC = () => {
  const { register, handleSubmit } = useForm<FormData>();

  function onSubmit(data: FormData) {
    sendMessageToTelegram(data);
    console.log('data :>> ', data);
  }

  async function sendMessageToTelegram(messageInfo: FormData): Promise<void> {
    try {
      const body = {
        chatId: '-1002284892610', // Replace with the chat ID
        message: `New Message Received (chasefonteno.com):\n\n👤 Name: ${messageInfo.name}\n📧 Email: ${messageInfo.email}\n✉️ Message: ${messageInfo.message}`,
      };

      const response = await fetch('/api/send-message', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });

      if (!response.ok) {
        throw new Error(`Something went wrong: ${response.status}`);
      }

      const data = await response.json();

      if (data.success) {
        console.log('Message sent successfully:', data);
      } else {
        console.error('Telegram API returned an error:', data.error);
      }
    } catch (error) {
      console.error('Error sending message to Telegram:', error);
    }
  }

  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      className="flex flex-col gap-[50px]"
    >
      <div className="space-y-10">
        <input
          type="text"
          placeholder="Your name"
          className="w-full border-b-2 border-foreground bg-transparent pb-[6px] text-[16px] leading-5 font-medium focus:text-accent outline-none focus:border-accent"
          {...register('name', { required: true })}
        />

        <input
          type="email"
          placeholder="Your email"
          className="w-full border-b-2 border-foreground bg-transparent pb-[6px] text-[16px] leading-5 font-medium focus:text-accent outline-none focus:border-accent"
          {...register('email', { required: true })}
        />

        <input
          placeholder="Your message"
          className="w-full resize-none border-b-2 border-foreground bg-transparent pb-[6px] text-[16px] leading-5 font-medium focus:text-accent outline-none focus:border-accent"
          {...register('message', { required: true })}
        />
      </div>

      <button className="flex items-center gap-2 mx-auto w-fit border-[3px] border-transparent hover:bg-accent/20 hover:border-accent hover:text-foreground rounded-2xl bg-accent py-3 px-4 xs:px-10 lg:px-4 xl:px-11 text-[18px] leading-[1.4rem] font-medium text-button outline-none transition-all duration-300 ease-in-out">
        <PaperPlaneIcon />
        <span>Send Message</span>
      </button>
    </form>
  );
};