frontend/src/pages/Welcome.jsx

import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  Box, Card, CardContent, Typography, Button, FormControl,
  InputLabel, Select, MenuItem, CircularProgress, Fade
} from '@mui/material';

const PLATES = [
  {
    src: '/tutorial/colorblind/plate_demo.png',
    question: 'What number do you see?',
    options: ['12', '4', '10', "I can't tell"],
    correctAnswer: '12',
  },
  {
    src: '/tutorial/colorblind/plate_redgreen.png',
    question: 'What number do you see?',
    options: ['74', '21', "I can't tell", 'Something else'],
    correctAnswer: '74',
    field: 'cb_redgreen',
  },
  {
    src: '/tutorial/colorblind/plate_blueyellow.png',
    question: 'What number do you see?',
    options: ['6', "I can't tell", '8', 'I see nothing'],
    correctAnswer: '6',
    field: 'cb_blueyellow',
  },
];

function classifyAnswer(plate, answer) {
  if (answer === plate.correctAnswer) return 'normal';
  if (answer === "I can't tell" || answer === 'I see nothing' || answer === 'Something else')
    return 'unsure';
  return 'deficient';
}

function detectDevice() {
  const ua = navigator.userAgent;
  if (/tablet|ipad|playbook|silk/i.test(ua)) return 'tablet';
  if (/mobile|iphone|ipod|android|blackberry|opera mini|iemobile/i.test(ua)) return 'mobile';
  return 'desktop';
}

export default function Welcome() {
  const navigate = useNavigate();
  const [plateStep, setPlateStep] = useState(0);
  const [plateAnswers, setPlateAnswers] = useState(['', '', '']);
  const [expertise, setExpertise] = useState('');
  const [loading, setLoading] = useState(false);

  const allPlatesDone = plateStep >= PLATES.length;

  const handlePlateAnswer = (answer) => {
    const updated = [...plateAnswers];
    updated[plateStep] = answer;
    setPlateAnswers(updated);
  };

  const handlePlateNext = () => {
    setPlateStep((s) => s + 1);
  };

  const handleStart = async () => {
    if (!allPlatesDone || !expertise) return;
    setLoading(true);

    // Classify colorblindness results
    const cbRedgreen = classifyAnswer(PLATES[1], plateAnswers[1]);
    const cbBlueyellow = classifyAnswer(PLATES[2], plateAnswers[2]);
    const colorblind =
      cbRedgreen !== 'normal' || cbBlueyellow !== 'normal' ? 1 : 0;
    const device = detectDevice();

    try {
      const res = await fetch('/api/session/start', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          expertise,
          colorblind,
          device,
          cb_redgreen: cbRedgreen,
          cb_blueyellow: cbBlueyellow,
        }),
      });
      const data = await res.json();

      localStorage.setItem('session_id', data.session_id);
      localStorage.setItem('trials', JSON.stringify(data.trials));
      localStorage.setItem('current_index', '0');

      navigate('/tutorial');
    } catch (err) {
      console.error('Failed to start session:', err);
      setLoading(false);
    }
  };

  const currentPlate = !allPlatesDone ? PLATES[plateStep] : null;
  const currentAnswer = !allPlatesDone ? plateAnswers[plateStep] : '';

  return (
    <Box
      sx={{
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        p: 2,
      }}
    >
      <Card sx={{ maxWidth: 520, width: '100%' }}>
        <CardContent
          sx={{
            p: 4,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            gap: 3,
          }}
        >
          <Typography
            variant="h3"
            textAlign="center"
            sx={{ fontSize: { xs: '1.8rem', sm: '2.4rem' } }}
          >
            Can you spot colorization artifacts?
          </Typography>
          <Typography variant="body1" color="text.secondary" textAlign="center">
            Look at 50 images and decide: are colorization artifacts present or absent?
            Takes about 5 minutes.
          </Typography>

          {/* Colorblindness plates — sequential */}
          {!allPlatesDone && currentPlate && (
            <Fade in key={plateStep} timeout={300}>
              <Box
                sx={{
                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'center',
                  gap: 1.5,
                  width: '100%',
                }}
              >
                <Typography
                  variant="caption"
                  color="text.secondary"
                  sx={{ opacity: 0.6 }}
                >
                  Vision check {plateStep + 1} of {PLATES.length}
                </Typography>

                <Box
                  component="img"
                  src={currentPlate.src}
                  alt="Color vision test plate"
                  sx={{
                    width: 300,
                    height: 300,
                    objectFit: 'contain',
                    borderRadius: '50%',
                  }}
                />

                <Typography variant="body2" color="text.secondary">
                  {currentPlate.question}
                </Typography>

                <Box
                  sx={{
                    display: 'flex',
                    gap: 1,
                    flexWrap: 'wrap',
                    justifyContent: 'center',
                  }}
                >
                  {currentPlate.options.map((opt) => (
                    <Button
                      key={opt}
                      variant={currentAnswer === opt ? 'contained' : 'outlined'}
                      size="small"
                      onClick={() => handlePlateAnswer(opt)}
                      sx={{ minWidth: 80 }}
                    >
                      {opt}
                    </Button>
                  ))}
                </Box>

                <Button
                  variant="contained"
                  size="small"
                  disabled={!currentAnswer}
                  onClick={handlePlateNext}
                  sx={{ mt: 0.5 }}
                >
                  Next &rarr;
                </Button>
              </Box>
            </Fade>
          )}

          {/* Expertise + Start — shown after all plates */}
          {allPlatesDone && (
            <Fade in timeout={300}>
              <Box
                sx={{
                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'center',
                  gap: 3,
                  width: '100%',
                }}
              >
                <FormControl fullWidth>
                  <InputLabel>Your background</InputLabel>
                  <Select
                    value={expertise}
                    label="Your background"
                    onChange={(e) => setExpertise(e.target.value)}
                  >
                    <MenuItem value="General public">General public</MenuItem>
                    <MenuItem value="Photographer / Artist">
                      Photographer / Artist
                    </MenuItem>
                    <MenuItem value="Researcher / Academic">
                      Researcher / Academic
                    </MenuItem>
                    <MenuItem value="Computer Vision / ML expert">
                      Computer Vision / ML expert
                    </MenuItem>
                  </Select>
                </FormControl>

                <Button
                  variant="contained"
                  size="large"
                  fullWidth
                  disabled={!expertise || loading}
                  onClick={handleStart}
                  sx={{ mt: 1 }}
                >
                  {loading ? (
                    <CircularProgress size={24} color="inherit" />
                  ) : (
                    'Start \u2192'
                  )}
                </Button>
              </Box>
            </Fade>
          )}
        </CardContent>
      </Card>
    </Box>
  );
}