"use client";

import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

export default function DashboardHome() {
  const router = useRouter();
  const [user, setUser] = useState<any>(null);

  useEffect(() => {
    router.push("dashboard/profile");

    async function fetchProfile() {
      try {
        // Use Next.js API route
        const response = await fetch('/api/user/get-profile', {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
          },
        });

        const data = await response.json();

        if (response.ok) {
          setUser(data.data.user);
        } else {
          console.error("Something went wrong. Please try again.");
        }
      } catch (err) {
        console.error("Something went wrong. Please try again.");
      }
    }

    fetchProfile();
  }, [router]);

  return (
    <div className="bg-white shadow-lg rounded-xl w-full max-w-4xl p-6">
      {user ? (
        <div className="flex flex-col md:flex-row items-center md:items-start md:space-x-6">
          <div className="w-32 h-32 bg-gray-200 rounded-full flex items-center justify-center text-gray-600 text-xl font-bold">
            {user.name?.charAt(0) || "U"}
          </div>
          <div className="mt-4 md:mt-0 w-full">
            <h2 className="text-2xl font-semibold text-gray-800">{user.name}</h2>
            <p className="text-sm text-gray-500">
              Status:{" "}
              <span className="text-green-600 font-medium">{user.status}</span>
            </p>

            <div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-gray-700">
              <div>
                <strong>Email:</strong> {user.email}
              </div>
              <div>
                <strong>Phone:</strong> {user.phone}
              </div>
              <div>
                <strong>Gender:</strong> {user.gender}
              </div>
              <div>
                <strong>DOB:</strong> {user.dob}
              </div>
              <div>
                <strong>Created At:</strong> {user.created_at?.slice(0, 10)}
              </div>
              <div>
                <strong>Last Login:</strong> {user.last_login_at}
              </div>
              <div>
                <strong>Area PIN Code:</strong> {user.area_pin_code}
              </div>
              <div>
                <strong>City:</strong> {user.loc?.adminName2}
              </div>
              <div>
                <strong>State:</strong> {user.loc?.adminName1}
              </div>
              <div>
                <strong>Country:</strong> {user.loc?.countryCode}
              </div>
            </div>
          </div>
        </div>
      ) : (
        <div className="text-center text-gray-500">Loading profile...</div>
      )}
    </div>
  );
}