"use client";

import Image from "next/image";
import { FaBriefcase, FaUserGraduate, FaTools } from "react-icons/fa";
import { useState } from "react";

export default function Home() {
  const [file, setFile] = useState<File | null>(null);

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files) {
      setFile(event.target.files[0]);
    }
  };

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    if (!file) return;

    const formData = new FormData();
    formData.append("cv", file);

    try {
      const response = await fetch("/api/upload", {
        method: "POST",
        body: formData,
      });

      if (response.ok) {
        alert("File uploaded successfully!");
        setFile(null); // Reset the file input
      } else {
        alert("File upload failed.");
      }
    } catch (error) {
      console.error("Error uploading file:", error);
      alert("An error occurred while uploading the file.");
    }
  };

  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
        <h1 className="text-3xl font-bold">Welcome to Your CV Upgrade</h1>
        <p className="text-lg text-center">
          This platform is designed to help you enhance your CV and showcase your skills effectively.
        </p>
        <div className="flex flex-col gap-4">
          <div className="flex items-center">
            <FaBriefcase className="text-2xl mr-2" />
            <p>Highlight your professional experience and achievements.</p>
          </div>
          <div className="flex items-center">
            <FaUserGraduate className="text-2xl mr-2" />
            <p>Showcase your educational background and certifications.</p>
          </div>
          <div className="flex items-center">
            <FaTools className="text-2xl mr-2" />
            <p>Utilize our tools to create a standout CV that gets noticed.</p>
          </div>
        </div>

        <div className="flex flex-col items-center mt-8">
          <label className="mb-2 text-lg">Upload Your CV:</label>
          <input
            type="file"
            accept=".pdf,.doc,.docx"
            onChange={handleFileChange}
            className="border border-gray-300 rounded p-2"
          />
          {file && <p className="mt-2">Selected file: {file.name}</p>}
          <button
            onClick={handleSubmit}
            className="mt-4 bg-blue-500 text-white rounded p-2"
          >
            Submit
          </button>
        </div>
      </main>
      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
        <a
          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            aria-hidden
            src="/file.svg"
            alt="File icon"
            width={16}
            height={16}
          />
          Learn
        </a>
        <a
          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            aria-hidden
            src="/window.svg"
            alt="Window icon"
            width={16}
            height={16}
          />
          Examples
        </a>
        <a
          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            aria-hidden
            src="/globe.svg"
            alt="Globe icon"
            width={16}
            height={16}
          />
          Go to nextjs.org →
        </a>
      </footer>
    </div>
  );
}