"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useAuth } from "@/lib/auth";
import { getDMs, DMConversation } from "@/lib/api";
import { DMList } from "@/components/dm/DMList";
import { DMView } from "@/components/dm/DMView";
import { LogOut, Settings, ArrowLeft, MessageSquare } from "lucide-react";

export default function DMsPage() {
  const { user, isAuthenticated, loading, logout } = useAuth();
  const router = useRouter();
  const [selectedDM, setSelectedDM] = useState<DMConversation | null>(null);
  const [dms, setDMs] = useState<DMConversation[]>([]);

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

  useEffect(() => {
    if (isAuthenticated) {
      getDMs()
        .then((data) => setDMs(Array.isArray(data) ? data : []))
        .catch(console.error);
    }
  }, [isAuthenticated]);

  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-slack-aubergine">
      {/* 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>

      {/* DM list sidebar */}
      <div className="w-[300px] 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 flex items-center gap-2">
            <MessageSquare size={16} />
            Direct Messages
          </h2>
          <p className="text-xs text-white/60 mt-0.5">
            {user?.name || user?.email}
          </p>
        </div>
        <div className="flex-1 overflow-y-auto">
          <DMList
            onSelect={(dm) => setSelectedDM(dm)}
            selectedId={selectedDM?.id}
          />
        </div>
      </div>

      {/* DM conversation view */}
      <div className="flex-1 flex flex-col min-w-0">
        {selectedDM ? (
          <DMView dm={selectedDM} onBack={() => setSelectedDM(null)} />
        ) : (
          <div className="flex-1 flex items-center justify-center text-white/40 flex-col gap-3">
            <MessageSquare size={48} />
            <p>Select a conversation to start messaging</p>
            {dms.length === 0 && (
              <p className="text-sm text-white/30">
                No direct messages yet.
              </p>
            )}
          </div>
        )}
      </div>
    </div>
  );
}