"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useAuth } from "@/lib/auth";
import { SavedItems } from "@/components/chat/SavedItems";
import { LogOut, Settings, ArrowLeft, Bookmark } from "lucide-react";

export default function SavedItemsPage() {
  const { user, isAuthenticated, loading, logout } = useAuth();
  const router = useRouter();
  const [refreshTrigger, setRefreshTrigger] = useState(0);

  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 ChatApp...</div>
      </div>
    );
  }

  return (
    <div className="flex h-screen bg-white">
      {/* Far left: workspace 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>

      {/* Channel list sidebar (simplified) */}
      <div className="w-[240px] bg-slack-aubergine text-white flex flex-col">
        <div className="px-4 py-3 border-b border-white/10">
          <h2 className="font-bold text-sm">ChatApp Workspace</h2>
          <p className="text-xs text-white/60 mt-0.5">{user?.name || user?.email}</p>
        </div>
        <div className="flex-1 overflow-y-auto p-3">
          <button
            onClick={() => router.push("/chat")}
            className="w-full flex items-center gap-1.5 px-3 py-1.5 text-sm text-left text-white/70 hover:bg-white/5 hover:text-white rounded transition-colors"
          >
            <ArrowLeft size={14} />
            <span>Back to chat</span>
          </button>
          <div className="mt-4 px-3">
            <span className="text-xs font-semibold text-white/50 uppercase tracking-wide">
              Saved
            </span>
          </div>
          <div className="mt-1 px-3 py-1.5 text-sm text-white bg-white/15 rounded font-medium flex items-center gap-1.5">
            <Bookmark size={14} />
            <span>Saved Items</span>
          </div>
        </div>
      </div>

      {/* Main content */}
      <div className="flex-1 flex flex-col min-w-0">
        {/* Header */}
        <div className="border-b border-[#E1E1E1] px-6 py-4 bg-white">
          <div className="flex items-center gap-2">
            <Bookmark size={22} className="text-slack-purple" />
            <h1 className="text-xl font-bold text-gray-800">Saved Items</h1>
          </div>
          <p className="text-sm text-gray-400 mt-1">
            Messages you've saved for later reference.
          </p>
        </div>

        {/* Saved items list */}
        <div className="flex-1 overflow-y-auto p-6 max-w-3xl">
          <SavedItems
            refreshTrigger={refreshTrigger}
            onUnsave={() => setRefreshTrigger((t) => t + 1)}
          />
        </div>
      </div>
    </div>
  );
}