import React, { useEffect, useState } from 'react';
import type { ReactElement } from 'react';
import Head from 'next/head';
import LayoutGuest from '../../layouts/Guest';
import WebSiteHeader from '../../components/WebPageComponents/Header';
import WebSiteFooter from '../../components/WebPageComponents/Footer';

type User = {
  id: string;
  firstName: string;
  lastName: string;
  email: string;
};

export default function Users() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/users')
      .then((res) => res.json())
      .then((data) => {
        setUsers(data.rows);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, []);

  return (
    <div className="flex flex-col min-h-screen">
      <Head>
        <title>Users - Strategic Intelligence Engine</title>
        <meta
          name="description"
          content="Public list of users for the Strategic Intelligence Engine."
        />
      </Head>

      <WebSiteHeader projectName="IntelliLedger Consulting" />

      <main className="flex-grow bg-white px-4 py-8">
        <section className="max-w-4xl mx-auto">
          <h1 className="text-4xl font-bold mb-4">Users</h1>
          {loading ? (
            <p>Loading users...</p>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
              {users.map((user) => (
                <div key={user.id} className="bg-white shadow p-4 rounded-lg">
                  <p className="font-medium text-lg">{user.firstName} {user.lastName}</p>
                  <p className="text-sm text-gray-500">{user.email}</p>
                </div>
              ))}
            </div>
          )}
        </section>
      </main>

      <WebSiteFooter projectName="IntelliLedger Consulting" />
    </div>
  );
}

Users.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
};
