import { useTranslation } from 'react-i18next';
import { useQuery } from '@tanstack/react-query';
import { BodyDoublingLobby } from '@/components/adhd';
import { User } from '@shared/schema';
import { Users, ArrowLeft } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useLocation } from 'wouter';

export default function BodyDoublingPage() {
  const { t } = useTranslation();
  const [, setLocation] = useLocation();

  const { data: user } = useQuery<User>({
    queryKey: ['/api/user'],
  });

  if (!user) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <p className="text-muted-foreground">{t('common.loading', 'Loading...')}</p>
      </div>
    );
  }

  return (
    <div className="max-w-4xl mx-auto space-y-6">
      <div className="flex items-center gap-3 sm:gap-4 mb-6">
        <Button
          variant="ghost"
          size="icon"
          onClick={() => window.history.back()}
          className="shrink-0"
        >
          <ArrowLeft className="h-5 w-5" />
        </Button>
        <div className="flex items-center gap-2 sm:gap-3 min-w-0">
          <div className="p-2 sm:p-3 rounded-xl bg-gradient-to-br from-green-400 to-teal-500 text-white shrink-0">
            <Users className="h-5 w-5 sm:h-6 sm:w-6" />
          </div>
          <div className="min-w-0">
            <h1 className="text-xl sm:text-2xl font-bold">{t('adhd.bodyDoubling.title')}</h1>
            <p className="text-sm sm:text-base text-muted-foreground">{t('adhd.bodyDoubling.description')}</p>
          </div>
        </div>
      </div>

      <div className="bg-gradient-to-br from-green-50 to-teal-50 dark:from-green-950/20 dark:to-teal-950/20 rounded-2xl p-6 border border-green-200 dark:border-green-800">
        <p className="text-sm text-muted-foreground mb-4">
          {t('adhd.bodyDoubling.tip', 'Working alongside others helps maintain focus. Join or create a session to stay accountable.')}
        </p>

        <BodyDoublingLobby />
      </div>
    </div>
  );
}
