"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useAuth } from "./auth-context";
import { API_URL } from "./config";

export default function Home() {
  const [count, setCount] = useState<number | null>(null);
  const { user, isLoading, logout } = useAuth();
  const router = useRouter();

  useEffect(() => {
    if (!isLoading && !user) {
      router.push("/login");
    }
  }, [isLoading, user, router]);

  useEffect(() => {
    if (user) {
      fetch(`${API_URL}/api/counter`, {
        credentials: "include",
      })
        .then((res) => res.json())
        .then((data) => setCount(data.value))
        .catch(() => setCount(null));
    }
  }, [user]);

  const increment = async () => {
    const res = await fetch(`${API_URL}/api/counter/increment`, {
      method: "POST",
      credentials: "include",
    });
    const data = await res.json();
    setCount(data.value);
  };

  const handleLogout = async () => {
    await logout();
    router.push("/login");
  };

  if (isLoading) {
    return (
      <main style={styles.main}>
        <div style={styles.loader}>Loading...</div>
      </main>
    );
  }

  if (!user) {
    return null;
  }

  return (
    <main style={styles.main}>
      <div style={styles.header}>
        <div style={styles.nav}>
          <span style={styles.navCurrent}>Counter</span>
          <span style={styles.navDivider}>•</span>
          <a href="/sum" style={styles.navLink}>Sum</a>
          <span style={styles.navDivider}>•</span>
          <a href="/audit" style={styles.navLink}>Audit</a>
        </div>
        <div style={styles.userInfo}>
          <span style={styles.userEmail}>{user.email}</span>
          <button onClick={handleLogout} style={styles.logoutBtn}>
            Sign out
          </button>
        </div>
      </div>

      <div style={styles.content}>
        <div style={styles.counterCard}>
          <span style={styles.counterLabel}>Current Count</span>
          <h1 style={styles.counter}>{count === null ? "..." : count}</h1>
          <button onClick={increment} style={styles.incrementBtn}>
            <span style={styles.plusIcon}>+</span>
            Increment
          </button>
        </div>
      </div>
    </main>
  );
}

const styles: Record<string, React.CSSProperties> = {
  main: {
    minHeight: "100vh",
    background: "linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #2d1b4e 100%)",
    display: "flex",
    flexDirection: "column",
  },
  loader: {
    flex: 1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontFamily: "'DM Sans', system-ui, sans-serif",
    color: "rgba(255, 255, 255, 0.5)",
    fontSize: "1.125rem",
  },
  header: {
    padding: "1.5rem 2rem",
    borderBottom: "1px solid rgba(255, 255, 255, 0.06)",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
  },
  nav: {
    display: "flex",
    alignItems: "center",
    gap: "0.75rem",
  },
  navLink: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    color: "rgba(255, 255, 255, 0.5)",
    fontSize: "0.875rem",
    textDecoration: "none",
    transition: "color 0.2s",
  },
  navDivider: {
    color: "rgba(255, 255, 255, 0.2)",
    fontSize: "0.75rem",
  },
  navCurrent: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    color: "#a78bfa",
    fontSize: "0.875rem",
    fontWeight: 600,
  },
  userInfo: {
    display: "flex",
    alignItems: "center",
    gap: "1rem",
  },
  userEmail: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    color: "rgba(255, 255, 255, 0.6)",
    fontSize: "0.875rem",
  },
  logoutBtn: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    padding: "0.5rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 500,
    background: "rgba(255, 255, 255, 0.05)",
    color: "rgba(255, 255, 255, 0.7)",
    border: "1px solid rgba(255, 255, 255, 0.1)",
    borderRadius: "8px",
    cursor: "pointer",
    transition: "all 0.2s",
  },
  content: {
    flex: 1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    padding: "2rem",
  },
  counterCard: {
    background: "rgba(255, 255, 255, 0.03)",
    backdropFilter: "blur(10px)",
    border: "1px solid rgba(255, 255, 255, 0.08)",
    borderRadius: "32px",
    padding: "4rem 5rem",
    textAlign: "center",
    boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
  },
  counterLabel: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    display: "block",
    color: "rgba(255, 255, 255, 0.4)",
    fontSize: "0.875rem",
    textTransform: "uppercase",
    letterSpacing: "0.1em",
    marginBottom: "1rem",
  },
  counter: {
    fontFamily: "'Instrument Serif', Georgia, serif",
    fontSize: "8rem",
    fontWeight: 400,
    color: "#fff",
    margin: 0,
    lineHeight: 1,
    background: "linear-gradient(135deg, #fff 0%, #a78bfa 100%)",
    WebkitBackgroundClip: "text",
    WebkitTextFillColor: "transparent",
    backgroundClip: "text",
  },
  incrementBtn: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    marginTop: "2.5rem",
    padding: "1rem 2.5rem",
    fontSize: "1.125rem",
    fontWeight: 600,
    background: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)",
    color: "#fff",
    border: "none",
    borderRadius: "16px",
    cursor: "pointer",
    display: "inline-flex",
    alignItems: "center",
    gap: "0.5rem",
    transition: "transform 0.2s, box-shadow 0.2s",
    boxShadow: "0 4px 14px rgba(99, 102, 241, 0.4)",
  },
  plusIcon: {
    fontSize: "1.5rem",
    fontWeight: 400,
  },
};