"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useAuth } from "@/lib/auth";
import { Slackbot } from "@/components/ai/Slackbot";
import { ChannelSummary } from "@/components/ai/ChannelSummary";
import { DailyRecap } from "@/components/ai/DailyRecap";
import { LogOut, Settings, ArrowLeft, Bot, FileText, CalendarCheck } from "lucide-react";

type Tab = "slackbot" | "summary" | "recap";

export default function AIPage() {
  const { isAuthenticated, loading, logout } = useAuth();
  const router = useRouter();
  const [tab, setTab] = useState<Tab>("slackbot");

  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>

      {/* 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 mb-3">
            <Bot size={22} className="text-slack-purple" />
            <h1 className="text-lg font-bold text-gray-800">AI Assistant</h1>
            <span className="text-sm text-gray-400">Powered by AI</span>
          </div>

          {/* Tabs */}
          <div className="flex gap-1">
            <button
              onClick={() => setTab("slackbot")}
              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
                tab === "slackbot"
                  ? "bg-slack-purple text-white"
                  : "text-gray-600 hover:bg-gray-100"
              }`}
            >
              <Bot size={14} />
              <span>Slackbot</span>
            </button>
            <button
              onClick={() => setTab("summary")}
              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
                tab === "summary"
                  ? "bg-slack-purple text-white"
                  : "text-gray-600 hover:bg-gray-100"
              }`}
            >
              <FileText size={14} />
              <span>Channel Summary</span>
            </button>
            <button
              onClick={() => setTab("recap")}
              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
                tab === "recap"
                  ? "bg-slack-purple text-white"
                  : "text-gray-600 hover:bg-gray-100"
              }`}
            >
              <CalendarCheck size={14} />
              <span>Daily Recap</span>
            </button>
          </div>
        </div>

        {/* Content */}
        <div className="flex-1 overflow-hidden">
          {tab === "slackbot" && (
            <Slackbot />
          )}
          {tab === "summary" && (
            <div className="h-full overflow-y-auto">
              <ChannelSummary channelId="" />
            </div>
          )}
          {tab === "recap" && (
            <div className="h-full overflow-y-auto">
              <DailyRecap />
            </div>
          )}
        </div>
      </div>
    </div>
  );
}