'use client';

import { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';
import { channelApi, messageApi } from '@/lib/api';
import { useChatStore } from '@/store/chatStore';
import { ChatArea } from '@/components/chat/ChatArea';
import { MemberSidebar } from '@/components/layout/MemberSidebar';
import { motion } from 'framer-motion';

export default function ChannelPage() {
  const params = useParams();
  const channelId = params.channelId as string;
  const { setActiveChannel } = useChatStore();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!channelId) return;
    setLoading(true);
    channelApi.get(channelId).then(({ data }) => {
      setActiveChannel(data);
    }).catch(() => {}).finally(() => setLoading(false));
  }, [channelId]);

  if (loading) {
    return (
      <div className="h-full flex items-center justify-center">
        <div className="flex items-center gap-3">
          <div className="w-6 h-6 border-2 border-primary-500 border-t-transparent rounded-full animate-spin" />
          <p className="text-sm text-vault-muted">Loading channel...</p>
        </div>
      </div>
    );
  }

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      className="h-full flex"
    >
      <ChatArea />
      <MemberSidebar />
    </motion.div>
  );
}