"use client";

import { useEffect } from "react";
import { useRouter, useParams } from "next/navigation";
import { useAuth } from "@/lib/auth";
import { CanvasView } from "@/components/canvas/CanvasView";
import { ArrowLeft, Settings, LogOut } from "lucide-react";

export default function CanvasPage() {
  const { user, isAuthenticated, loading, logout } = useAuth();
  const router = useRouter();
  const params = useParams();
  const channelId = params.channelId as string;

  useEffect(() => {
    if (!loading && !isAuthenticated) {
      router.replace("/login");
    }
  }, [loading, isAuthenticated, router]);

  if (loading || (!isAuthenticated && !loading)) {
    return (
      <div className="flex h-screen items-center justify-center bg-slack-darkpurple">
        <div className="text-white text-lg animate-pulse">Loading...</div>
      </div>
    );
  }

  return (
    <div className="flex h-screen bg-white">
      {/* Sidebar */}
      <div className="w-[60px] bg-slack-purple flex flex-col items-center py-4 gap-3">
        <div className="w-10 h-10 rounded-md bg-white text-slack-purple flex items-center justify-center font-bold text-lg">
          CA
        </div>
        <button
          onClick={() => router.push("/chat")}
          className="w-10 h-10 rounded-md hover:bg-slack-lightpurple flex items-center justify-center text-white"
          title="Back to chat"
        >
          <ArrowLeft size={20} />
        </button>
        <button
          onClick={() => router.push("/settings")}
          className="w-10 h-10 rounded-md hover:bg-slack-lightpurple flex items-center justify-center text-white"
          title="Settings"
        >
          <Settings size={20} />
        </button>
        <button
          onClick={logout}
          className="mt-auto w-10 h-10 rounded-md hover:bg-slack-lightpurple flex items-center justify-center text-white"
          title="Sign out"
        >
          <LogOut size={20} />
        </button>
      </div>

      {/* Main */}
      <div className="flex-1 flex flex-col min-w-0">
        <CanvasView channelId={channelId} />
      </div>
    </div>
  );
}