"use client";

import { useEffect, useState } from "react";

type Company = {
  name: string;
  phone: string;
  email: string;
  address: string;
  logo: string;
  heroImage: string;
};

export default function CompanyPage() {
  const [company, setCompany] =
    useState<Company>({
      name: "",
      phone: "",
      email: "",
      address: "",
      logo: "",
      heroImage: "",
    });

  useEffect(() => {
    async function load() {
      const res = await fetch("/api/company");

      const data = await res.json();

      if (data) {
        setCompany({
          name: data.name || "",
          phone: data.phone || "",
          email: data.email || "",
          address: data.address || "",
          logo: data.logo || "",
          heroImage: data.heroImage || "",
        });
      }
    }

    load();
  }, []);

  const save = async () => {
    await fetch("/api/company", {
      method: "PUT",

      headers: {
        "Content-Type": "application/json",
      },

      body: JSON.stringify(company),
    });

    alert("Informations sauvegardées");
  };

  return (
    <div className="p-10 max-w-3xl">
      <h1 className="text-3xl font-bold mb-8">
        Informations entreprise
      </h1>

      <div className="space-y-4">
        <input
          placeholder="Nom entreprise"
          className="border p-3 w-full rounded"
          value={company.name}
          onChange={(e) =>
            setCompany({
              ...company,
              name: e.target.value,
            })
          }
        />

        <input
          placeholder="Téléphone"
          className="border p-3 w-full rounded"
          value={company.phone}
          onChange={(e) =>
            setCompany({
              ...company,
              phone: e.target.value,
            })
          }
        />

        <input
          placeholder="Email"
          className="border p-3 w-full rounded"
          value={company.email}
          onChange={(e) =>
            setCompany({
              ...company,
              email: e.target.value,
            })
          }
        />

        <textarea
          placeholder="Adresse"
          className="border p-3 w-full rounded h-32"
          value={company.address}
          onChange={(e) =>
            setCompany({
              ...company,
              address: e.target.value,
            })
          }
        />

        <input
          placeholder="URL Logo"
          className="border p-3 w-full rounded"
          value={company.logo}
          onChange={(e) =>
            setCompany({
              ...company,
              logo: e.target.value,
            })
          }
        />

        <input
          placeholder="URL Hero Image"
          className="border p-3 w-full rounded"
          value={company.heroImage}
          onChange={(e) =>
            setCompany({
              ...company,
              heroImage: e.target.value,
            })
          }
        />

        <button
          onClick={save}
          className="bg-black text-white px-6 py-3 rounded"
        >
          Sauvegarder
        </button>
      </div>
    </div>
  );
}