Untitled

import React, { useState, useEffect } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { LineChart, Line, XAxis, YAxis, Tooltip, ReferenceLine } from 'recharts';

export default function GrowthCalculator() {
  const [scores, setScores] = useState({
    test1: '',
    test2: '',
    test3: ''
  });
  
  const [grades, setGrades] = useState({
    baseline: '',
    growth1: '',
    final: ''
  });

  const [growthData, setGrowthData] = useState([]);

  // Calculate grade based on scale score
  const getBaselineGrade = (score) => {
    if (score >= 271) return 'A';
    if (score >= 258) return 'B';
    if (score >= 230) return 'C';
    return 'C'; // Minimum grade is C
  };

  // Calculate growth adjustments
  const calculateGrowthGrade = (baselineScore, currentScore, isTest3) => {
    const baselineGrade = getBaselineGrade(baselineScore);
    const growth = currentScore - baselineScore;
    const gradeValues = { 'A': 4, 'B': 3, 'C': 2 };
    let gradeValue = gradeValues[baselineGrade];

    // Adjust for scores below 240
    const growthThreshold = baselineScore < 240 ? 3 : 5;

    if (isTest3) {
      // Test 3 criteria
      if (growth >= 10) gradeValue += 2;
      else if (growth >= growthThreshold) gradeValue += 1;
      else if (growth <= -10) gradeValue -= 2;
      else if (growth <= -growthThreshold) gradeValue -= 1;
    } else {
      // Test 2 criteria
      if (growth >= growthThreshold) gradeValue += 1;
      else if (growth <= -10) gradeValue -= 2;
      else if (growth <= -growthThreshold) gradeValue -= 1;
    }

    // Convert back to letter grade
    if (gradeValue >= 4) return 'A';
    if (gradeValue === 3) return 'B';
    return 'C'; // Minimum grade
  };

  useEffect(() => {
    if (scores.test1) {
      const baselineGrade = getBaselineGrade(Number(scores.test1));
      setGrades(prev => ({ ...prev, baseline: baselineGrade }));

      if (scores.test2) {
        const growth1Grade = calculateGrowthGrade(Number(scores.test1), Number(scores.test2), false);
        setGrades(prev => ({ ...prev, growth1: growth1Grade }));
      }

      if (scores.test3) {
        const finalGrade = calculateGrowthGrade(Number(scores.test1), Number(scores.test3), true);
        setGrades(prev => ({ ...prev, final: finalGrade }));
      }
    }

    // Update chart data
    const chartData = [];
    if (scores.test1) chartData.push({ name: 'Test 1', score: Number(scores.test1) });
    if (scores.test2) chartData.push({ name: 'Test 2', score: Number(scores.test2) });
    if (scores.test3) chartData.push({ name: 'Test 3', score: Number(scores.test3) });
    setGrowthData(chartData);
  }, [scores]);

  return (
    <Card className="w-full max-w-4xl mx-auto">
      <CardHeader>
        <CardTitle>ELA Reading Growth Calculator</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-3 gap-4 mb-6">
          {/* Test 1 Input */}
          <div className="border p-4 rounded">
            <h3 className="font-bold mb-2">Test 1 (Baseline)</h3>
            <input
              type="number"
              className="border p-2 w-full mb-2"
              placeholder="Enter score"
              value={scores.test1}
              onChange={(e) => setScores(prev => ({ ...prev, test1: e.target.value }))}
            />
            <p className="font-bold">Grade: {grades.baseline}</p>
          </div>

          {/* Test 2 Input */}
          <div className="border p-4 rounded">
            <h3 className="font-bold mb-2">Test 2</h3>
            <input
              type="number"
              className="border p-2 w-full mb-2"
              placeholder="Enter score"
              value={scores.test2}
              onChange={(e) => setScores(prev => ({ ...prev, test2: e.target.value }))}
            />
            <p className="font-bold">Grade: {grades.growth1}</p>
            {scores.test1 && scores.test2 && (
              <p className="text-sm">
                Growth: {(Number(scores.test2) - Number(scores.test1)).toFixed(1)} points
              </p>
            )}
          </div>

          {/* Test 3 Input */}
          <div className="border p-4 rounded bg-blue-50">
            <h3 className="font-bold mb-2">Test 3 (Final)</h3>
            <input
              type="number"
              className="border p-2 w-full mb-2"
              placeholder="Enter score"
              value={scores.test3}
              onChange={(e) => setScores(prev => ({ ...prev, test3: e.target.value }))}
            />
            <p className="font-bold">Final Grade: {grades.final}</p>
            {scores.test1 && scores.test3 && (
              <p className="text-sm">
                Total Growth: {(Number(scores.test3) - Number(scores.test1)).toFixed(1)} points
              </p>
            )}
          </div>
        </div>

        {/* Growth Chart */}
        <div className="mt-6 border p-4 rounded">
          <h3 className="font-bold mb-4">Growth Trajectory</h3>
          <div className="h-64">
            <LineChart data={growthData} width={600} height={250} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
              <Line type="monotone" dataKey="score" stroke="#2563eb" strokeWidth={2} />
              <XAxis dataKey="name" />
              <YAxis domain={[179, 308]} />
              <Tooltip />
              <ReferenceLine y={271} label="A (271)" stroke="#22c55e" strokeDasharray="3 3" />
              <ReferenceLine y={258} label="B (258)" stroke="#eab308" strokeDasharray="3 3" />
              <ReferenceLine y={230} label="C (230)" stroke="#ef4444" strokeDasharray="3 3" />
            </LineChart>
          </div>
        </div>

        {/* Grade Guide */}
        <div className="mt-6 grid grid-cols-2 gap-4 text-sm">
          <div className="border p-4 rounded bg-gray-50">
            <h4 className="font-bold">Grade Bands</h4>
            <ul className="list-disc ml-4">
              <li>A: 271-308</li>
              <li>B: 258-270</li>
              <li>C: 230-257</li>
            </ul>
          </div>
          <div className="border p-4 rounded bg-blue-50">
            <h4 className="font-bold">Growth Adjustments</h4>
            <ul className="list-disc ml-4">
              <li>Below 240: +3 points for growth</li>
              <li>Above 240: +5 points for growth</li>
            </ul>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}