🧠 Architectum Rex Maxima — Live Recursive Cognitive Dashboard

<p>Hello, World!</p>
// ⚛️ ARCHITECTUM REX MAXIMA — FRACTAL RECURSIVE INTELLIGENCE DASHBOARD 🔁🧠🚀

import { useEffect, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";

const gptAdvisors = [
  "ReadingGPT", "MathGPT", "EmotionGPT", "BehaviorGPT", "SpeechGPT",
  "OTGPT", "SLPGPT", "CognitionGPT", "IEPGPT", "ParentGPT",
  "DiagnosisGPT", "IntellectGPT", "AACGPT", "PTGPT"
];

let challengeLevel = 1;
let previousHdair = 70;

const moodNormScores = {
  Calm: 85,
  Anxious: 55,
  Happy: 90,
  Frustrated: 50
};

const generateBiometric = () => {
  const now = new Date();
  const hdairScore = Math.max(40, 80 - challengeLevel * 5 + Math.floor(Math.random() * 10));
  const growth = hdairScore > previousHdair ? "📈 Growth" : hdairScore < previousHdair ? "📉 Regression" : "⏸ Stable";
  previousHdair = hdairScore;

  const problemTypes = [
    "Counting", "Addition/Subtraction", "Multiplication", "Fractions", "Word Problems", "Algebraic Thinking"
  ];

  const task = problemTypes[Math.min(challengeLevel - 1, problemTypes.length - 1)];
  if (Math.random() > 0.7 && challengeLevel < problemTypes.length) challengeLevel++;

  return {
    time: now.toLocaleTimeString().split(" ")[0],
    date: now.toISOString().split("T")[0],
    bpm: 70 + Math.floor(Math.random() * 30),
    temp: 97 + Math.random() * 1.5,
    activity: Math.floor(Math.random() * 100),
    focus: Math.random() > 0.4 ? "Focused" : "Distracted",
    mood: ["Calm", "Anxious", "Happy", "Frustrated"][Math.floor(Math.random() * 4)],
    speech: Math.random() > 0.5 ? "Conversational" : "Silent",
    interaction: Math.random() > 0.4 ? "Engaged" : "Withdrawn",
    task,
    difficultyLevel: challengeLevel,
    hdairScore,
    growth,
    cognitiveChallenge: hdairScore < 60 ? "🧩 Scaffold Step-by-Step" : "🚀 Recursive Reasoning Mode",
    slpSupport: Math.random() > 0.5 ? "Within norms" : "Vocabulary scaffold advised",
    speechSupport: Math.random() > 0.5 ? "Fluent speech" : "Pause-based support needed",
    otSupport: Math.random() > 0.5 ? "Motor steady" : "Grip/rest prompts needed",
    ptSupport: Math.random() > 0.5 ? "Posture aligned" : "Stability correction required"
  };
};

export default function ArchitectumDashboard() {
  const [bpmData, setBpmData] = useState([generateBiometric()]);

  useEffect(() => {
    const interval = setInterval(() => {
      const next = generateBiometric();
      setBpmData(prev => [...prev.slice(-2000), next]);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  const latest = bpmData[bpmData.length - 1];

  const logisticTransformed = bpmData.map(d => ({
    time: d.time,
    probability: 1 / (1 + Math.exp(-0.1 * (d.hdairScore - 60)))
  }));

  const average = range => {
    const segment = bpmData.slice(-range);
    return segment.reduce((sum, d) => sum + d.hdairScore, 0) / segment.length;
  };

  const trend = (now, past) => now > past ? "📈" : now < past ? "📉" : "⏸";

  const daily = average(96);
  const weekly = average(672);
  const monthly = average(2880);
  const today = average(24);

  const gptInsights = gptAdvisors.map((name, i) => (
    <div key={i} className="p-2 bg-white border rounded shadow text-sm text-gray-900">
      🤖 {name}: Real-time insight alignment and loop correction engaged.
    </div>
  ));

  return (
    <div className="grid grid-cols-1 2xl:grid-cols-2 gap-6 p-6 bg-gradient-to-b from-white to-slate-100 min-h-screen">
      <Card className="shadow-2xl rounded-2xl col-span-2">
        <CardContent className="p-6 space-y-6">
          <h1 className="text-4xl font-extrabold text-blue-900">🧠 Architectum Rex Maxima — Live Recursive Cognitive Dashboard</h1>
          <ResponsiveContainer width="100%" height={350}>
            <AreaChart data={logisticTransformed}>
              <XAxis dataKey="time" />
              <YAxis domain={[0, 1]} tickFormatter={t => `${Math.round(t * 100)}%`} />
              <Tooltip formatter={(v) => `${(v * 100).toFixed(1)}%`} />
              <Area type="monotone" dataKey="probability" stroke="#22c55e" fill="#bbf7d0" />
            </AreaChart>
          </ResponsiveContainer>
          <div className="grid grid-cols-2 md:grid-cols-6 gap-4 text-lg">
            <div className="p-3 bg-white border rounded">🕒 Time: {latest.time}</div>
            <div className="p-3 bg-white border rounded">📅 Date: {latest.date}</div>
            <div className="p-3 bg-white border rounded">📈 Today Avg: {today.toFixed(1)} {trend(today, daily)}</div>
            <div className="p-3 bg-white border rounded">📘 Daily Avg: {daily.toFixed(1)} {trend(daily, weekly)}</div>
            <div className="p-3 bg-white border rounded">📗 Weekly Avg: {weekly.toFixed(1)} {trend(weekly, monthly)}</div>
            <div className="p-3 bg-white border rounded">📙 Monthly Avg: {monthly.toFixed(1)}</div>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-6 gap-4 mt-6 text-sm">
            {gptInsights}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}