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

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

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

  const handleTaskSelect = (taskId: string) => {
    setLocation(`/tasks?selected=${taskId}`);
  };

  const handleTaskComplete = async (taskId: string) => {
    await fetch(`/api/tasks/${taskId}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ status: 'done' }),
    });
  };

  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-yellow-400 to-orange-500 text-white shrink-0">
            <Zap 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.quickWins.title')}</h1>
            <p className="text-sm sm:text-base text-muted-foreground">{t('adhd.quickWins.description')}</p>
          </div>
        </div>
      </div>

      <div className="bg-gradient-to-br from-yellow-50 to-orange-50 dark:from-yellow-950/20 dark:to-orange-950/20 rounded-2xl p-6 border border-yellow-200 dark:border-yellow-800">
        <p className="text-sm text-muted-foreground mb-4">
          {t('adhd.quickWins.tip', 'Small wins build momentum! Complete these quick tasks to boost your dopamine and build confidence.')}
        </p>

        <QuickWinList />
      </div>
    </div>
  );
}
