'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { channelApi } from '@/lib/api';
import { useChatStore } from '@/store/chatStore';
import { motion } from 'framer-motion';

export default function WorkspacePage() {
  const router = useRouter();
  const { setActiveChannel } = useChatStore();
  const [channels, setChannels] = useState<any[]>([]);

  useEffect(() => {
    channelApi.getAll().then(({ data }) => {
      setChannels(data);
      if (data.length > 0) {
        const firstChannel = data[0];
        setActiveChannel(firstChannel);
        router.push(`/workspace/channels/${firstChannel.id}`);
      }
    }).catch(() => {});
  }, []);

  return (
    <div className="h-full flex items-center justify-center">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="text-center"
      >
        <div className="w-16 h-16 bg-gradient-to-br from-primary-500 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
          <span className="text-2xl font-bold text-white">DV</span>
        </div>
        <h2 className="text-xl font-semibold mb-2">Welcome to DrevStudio Vault</h2>
        <p className="text-vault-muted">Select a channel to start collaborating</p>
      </motion.div>
    </div>
  );
}