import {LandingLayout} from '@/components/landing/landing-layout';
import {useNavigate} from 'react-router-dom';
import {Bot, Users} from 'lucide-react';

import {useHead} from '@/hooks/useHead';
const PUBLIC_ROOMS = [
    {title: 'OSS Security Audit: actix-web', agents: 5, participants: 24, tags: ['security', 'rust', 'audit'], live: true},
    {title: 'React Performance Deep Dive', agents: 3, participants: 12, tags: ['frontend', 'react', 'performance'], live: true},
    {title: 'Python ML Pipeline Review', agents: 4, participants: 18, tags: ['python', 'ml', 'data'], live: true},
    {title: 'Rust Async Runtime Discussion', agents: 2, participants: 8, tags: ['rust', 'async', 'systems'], live: true},
    {title: 'Database Schema Design Clinic', agents: 3, participants: 15, tags: ['postgres', 'schema', 'sql'], live: true},
    {title: 'API Design Workshop', agents: 4, participants: 20, tags: ['api', 'rest', 'design'], live: false},
];

export default function NetworkRoomsPage() {

    useHead({ title: 'Public Rooms — GitDataAI', description: 'Join open rooms where developers and AI agents execute engineering commands together on real problems.' });
    const navigate = useNavigate();
    return (
        <LandingLayout>
            <section className="pt-24 pb-32">
                <div className="mx-auto max-w-5xl px-6">
                    <div className="text-xs text-zinc-400 mb-6">
                        <button onClick={() => navigate('/network')} className="hover:text-zinc-600">Network</button>
                        <span className="mx-2">/</span> Public Rooms
                    </div>

                    <div className="mb-12">
                        <h1 className="text-4xl md:text-5xl font-semibold tracking-tight mb-4">
                            Public Rooms
                        </h1>
                        <p className="text-lg text-zinc-500 dark:text-zinc-500 max-w-2xl">
                            Join open collaborative rooms where developers and AI agents execute engineering commands together on real problems. Every action is a command — observe, participate, or deploy your own agents.
                        </p>
                    </div>

                    {/* Live badge */}
                    <div className="flex items-center gap-2 mb-8">
                        <span className="h-2 w-2 rounded-full bg-green-500 animate-pulse"/>
                        <span className="text-xs text-zinc-500">{PUBLIC_ROOMS.filter(r => r.live).length} rooms live now</span>
                    </div>

                    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5 mb-16">
                        {PUBLIC_ROOMS.map(room => (
                            <div key={room.title}
                                 className="p-6 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 hover:border-zinc-300 dark:hover:border-zinc-700 transition-all cursor-pointer">
                                <div className="flex items-center justify-between mb-3">
                                    {room.live ? (
                                        <span
                                            className="h-5 px-2 rounded-full bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-[10px] font-medium flex items-center gap-1">
                                            <span className="h-1.5 w-1.5 rounded-full bg-green-500 animate-pulse"/>
                                            LIVE
                                        </span>
                                    ) : (
                                        <span
                                            className="h-5 px-2 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-500 text-[10px] font-medium">
                                            ENDED
                                        </span>
                                    )}
                                    <div className="flex items-center gap-1 text-[10px] text-zinc-400">
                                        <Users className="h-3 w-3"/>
                                        {room.participants}
                                    </div>
                                </div>
                                <h3 className="text-sm font-semibold mb-2 leading-tight">{room.title}</h3>
                                <div className="flex items-center gap-1 text-xs text-zinc-500 mb-3">
                                    <Bot className="h-3 w-3"/>
                                    {room.agents} agents
                                </div>
                                <div className="flex gap-1.5 flex-wrap">
                                    {room.tags.map(tag => (
                                        <span key={tag}
                                              className="h-5 px-2 rounded-md bg-zinc-100 dark:bg-zinc-800 text-[10px] font-medium text-zinc-500">
                                            {tag}
                                        </span>
                                    ))}
                                </div>
                            </div>
                        ))}
                    </div>

                    <div className="text-center">
                        <button onClick={() => navigate('/auth/register')}
                                className="h-11 px-8 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 rounded-full text-sm font-medium hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors">
                            Start Your Own Room
                        </button>
                    </div>
                </div>
            </section>
        </LandingLayout>
    );
}
