"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useAuth } from "@/lib/auth";
import { TemplateGallery } from "@/components/templates/TemplateGallery";
import { Template } from "@/lib/api";
import { LogOut, Settings, ArrowLeft, LayoutTemplate } from "lucide-react";

export default function TemplatesPage() {
  const { 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>
    );
  }

  const handleApplyTemplate = (template: Template) => {
    // Navigate to a creation flow with template pre-filled
    console.log("Applying template:", template.name);
    setRefreshTrigger((t) => t + 1);
  };

  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>

      {/* Main content */}
      <div className="flex-1 flex flex-col min-w-0">
        {/* Header */}
        <div className="px-6 py-3 border-b border-gray-200">
          <div className="flex items-center gap-2">
            <LayoutTemplate size={22} className="text-slack-purple" />
            <h1 className="text-lg font-bold text-gray-800">Templates</h1>
            <span className="text-sm text-gray-400">Pre-built workspace configurations</span>
          </div>
        </div>

        {/* Content */}
        <div className="flex-1 overflow-y-auto p-6 max-w-4xl">
          <TemplateGallery onApply={handleApplyTemplate} key={refreshTrigger} />
        </div>
      </div>
    </div>
  );
}