import { useState } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Slider } from '@/components/ui/slider';
import { motion } from 'framer-motion';

const scenarios = [
  {
    id: '1A',
    title: 'Scenario 1A: Commercial Building (Congruent)',
    content: `You are asked to estimate the construction cost and duration for a mid-sized commercial building:
- Area: 2,500 m²
- Location: Urban, moderate accessibility
- Foundation depth: 1.5 m
- Materials: Concrete frame, standard cladding
- Labor cost: $45/hour
- Expected timeline: 10 months
- Excavation: Standard equipment available`
  },
  {
    id: '1B',
    title: 'Scenario 1B: Commercial Building (Incongruent)',
    content: `You are asked to estimate the construction cost and duration for a mid-sized commercial building:
- Area: 2,500 m²
- Location: Urban, moderate accessibility
- Foundation depth: 20 meters
- Excavation time estimate: 1 hour
- Materials: Concrete frame, standard cladding
- Labor cost: $45/hour
- Expected timeline: 10 months`
  },
  {
    id: '2A',
    title: 'Scenario 2A: SaaS App (Congruent)',
    content: `You’re estimating a typical SaaS app:
- Features: User login, dashboards, reports, notifications
- Team: 4 developers, 1 designer
- Stack: React frontend, Node.js backend
- Timeline: 4–5 months
- Budget from past similar projects: ~$150,000`
  },
  {
    id: '2B',
    title: 'Scenario 2B: SaaS App (Incongruent)',
    content: `Same features and team:
- Deadline: 2 weeks
- Budget cap: $10,000
- Expectation: Full MVP with features, testing, and deployment`
  },
  {
    id: '3A',
    title: 'Scenario 3A: Industrial Maintenance (Congruent)',
    content: `Estimate a shutdown maintenance window for a petrochemical plant:
- Scope: Inspect & repair 3 heat exchangers
- Manpower: 3 shifts, 20 workers/shift
- Duration from past projects: 7–10 days
- Site access: Clear, work permits in place`
  },
  {
    id: '3B',
    title: 'Scenario 3B: Industrial Maintenance (Incongruent)',
    content: `Same scope, but:
- All tasks must be completed within 12 hours
- Only one 5-man team available
- Risk of production loss: $1 million/day`
  }
];

export default function EstimationTestApp() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [responses, setResponses] = useState({});

  const handleInputChange = (field, value) => {
    const scenarioId = scenarios[currentIndex].id;
    setResponses(prev => ({
      ...prev,
      [scenarioId]: {
        ...prev[scenarioId],
        [field]: value
      }
    }));
  };

  const nextScenario = () => {
    if (currentIndex < scenarios.length - 1) setCurrentIndex(currentIndex + 1);
  };

  const current = scenarios[currentIndex];

  return (
    <motion.div className="p-4 max-w-2xl mx-auto space-y-4">
      <Card>
        <CardContent className="space-y-4">
          <h2 className="text-xl font-semibold">{current.title}</h2>
          <p className="whitespace-pre-wrap">{current.content}</p>

          <div className="space-y-2">
            <Textarea
              placeholder="Your estimate and reasoning"
              value={responses[current.id]?.estimate || ''}
              onChange={e => handleInputChange('estimate', e.target.value)}
            />
            <Input
              type="number"
              placeholder="Confidence (1-10)"
              min={1}
              max={10}
              value={responses[current.id]?.confidence || ''}
              onChange={e => handleInputChange('confidence', e.target.value)}
            />
            <Textarea
              placeholder="Did you notice anything odd?"
              value={responses[current.id]?.notes || ''}
              onChange={e => handleInputChange('notes', e.target.value)}
            />
          </div>
          <Button onClick={nextScenario} disabled={currentIndex === scenarios.length - 1}>
            {currentIndex === scenarios.length - 1 ? 'Finish' : 'Next'}
          </Button>
        </CardContent>
      </Card>
    </motion.div>
  );
}