"use client";

import { MessageSquare } from "lucide-react";
import { ChatView } from "@/components/chat/ChatView";
import { AgentDetailView } from "@/components/agents/AgentDetailView";
import { SkillsView } from "@/components/skills/SkillsView";
import { McpView } from "@/components/skills/McpView";
import { AppsView } from "@/components/apps/AppsView";
import { ToolsMenuView } from "@/components/tools-menu/ToolsMenuView";
import { ImessageView } from "@/components/admin/ImessageView";
import { GitView } from "@/components/admin/GitView";
import { BackupView } from "@/components/admin/BackupView";
import { VerificationView } from "@/components/admin/VerificationView";
import CalendarView from "@/components/calendar/CalendarView";
import StatusView from "@/components/status/StatusView";
import MusicView from "@/components/music/MusicView";
import { MusicProvider } from "@/components/providers/MusicProvider";
import { ProfileView } from "@/components/profile/ProfileView";
import ChronicleView from "@/components/chronicle/ChronicleView";
import { TaskFlowPanel } from "@/components/tasks/TaskFlowPanel";
import { EventStreamView } from "@/components/admin/EventStreamView";

interface MainContentProps {
  activeCategory?: string | null;
  activeAgent?: string | null;
  activeSubcategory?: string | null;
}

export function MainContent({ activeCategory, activeAgent, activeSubcategory }: MainContentProps) {
  if (activeAgent) {
    return (
      <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-white dark:bg-zinc-950">
        <AgentDetailView key={activeAgent} agentName={activeAgent} />
      </main>
    );
  }

  if (activeCategory === "profile") {
    return (
      <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-white dark:bg-zinc-950">
        <ProfileView />
      </main>
    );
  }

  if (activeCategory === "chronicle") {
    return (
      <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-white dark:bg-zinc-950">
        <ChronicleView />
      </main>
    );
  }

  if (activeCategory === "chat") {
    const primaryAgent = process.env.NEXT_PUBLIC_PRIMARY_AGENT || "";
    return (
      <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-white dark:bg-zinc-950">
        <ChatView key={primaryAgent} agentName={primaryAgent} />
      </main>
    );
  }

  if (activeCategory === "calendar" && activeSubcategory) {
    return (
      <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-white dark:bg-zinc-950">
        <CalendarView activeSubcategory={activeSubcategory} />
      </main>
    );
  }

  if (activeCategory === "calendar") {
    return (
      <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-white dark:bg-zinc-950">
        <CalendarView activeSubcategory="family" />
      </main>
    );
  }

  if (activeCategory === "music") {
    return (
      <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-white dark:bg-zinc-950">
        <MusicProvider>
          <MusicView />
        </MusicProvider>
      </main>
    );
  }

  if (activeCategory === "status") {
    return (
      <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-white dark:bg-zinc-950">
        <StatusView />
      </main>
    );
  }

  if (activeCategory === "skills" && activeSubcategory === "agent-skills") {
    return (
      <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-white dark:bg-zinc-950">
        <SkillsView />
      </main>
    );
  }

  if (activeCategory === "skills" && activeSubcategory === "mcp") {
    return (
      <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-white dark:bg-zinc-950">
        <McpView />
      </main>
    );
  }

  if (activeCategory === "apps" && activeSubcategory) {
    return (
      <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-white dark:bg-zinc-950">
        <AppsView activeSubcategory={activeSubcategory} />
      </main>
    );
  }

  if (activeCategory === "tools" && activeSubcategory) {
    return (
      <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-white dark:bg-zinc-950">
        <ToolsMenuView activeSubcategory={activeSubcategory} />
      </main>
    );
  }

  if (activeCategory === "administration" && activeSubcategory === "imessage") {
    return (
      <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-white dark:bg-zinc-950">
        <ImessageView />
      </main>
    );
  }

  if (activeCategory === "administration" && activeSubcategory === "git") {
    return (
      <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-white dark:bg-zinc-950">
        <GitView />
      </main>
    );
  }

  if (activeCategory === "administration" && activeSubcategory === "backup") {
    return (
      <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-white dark:bg-zinc-950">
        <BackupView />
      </main>
    );
  }

  if (activeCategory === "administration" && activeSubcategory === "verification") {
    return (
      <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-white dark:bg-zinc-950">
        <VerificationView />
      </main>
    );
  }

  if (activeCategory === "administration" && activeSubcategory === "tasks") {
    return (
      <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-white dark:bg-zinc-950">
        <TaskFlowPanel />
      </main>
    );
  }

  if (activeCategory === "administration" && activeSubcategory === "events") {
    return (
      <main className="flex min-w-0 flex-1 flex-col overflow-hidden bg-white dark:bg-zinc-950">
        <EventStreamView />
      </main>
    );
  }

  return (
    <main className="flex min-w-0 flex-1 items-center justify-center bg-white dark:bg-zinc-950">
      <div className="flex flex-col items-center gap-4 text-center">
        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-zinc-100 dark:bg-zinc-800">
          <MessageSquare size={28} className="text-zinc-400 dark:text-zinc-500" />
        </div>
        <div>
          <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
            Welcome to {process.env.NEXT_PUBLIC_SYSTEM_NAME || "Teletraan"}
          </h2>
          <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
            Select a chat or start a new one to get started.
          </p>
        </div>
      </div>
    </main>
  );
}
