import React, { useEffect, useState, useRef } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { PieChart, Pie, Cell, BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";

const DIGITS = [...Array(10).keys()]; const COLORS = ["#FF6384", "#FFCE56", "#4BC0C0", "#36A2EB", "#9966FF", "#FF9F40", "#C9CBCF", "#8E44AD", "#2ECC71", "#E74C3C"];

export default function TradingDashboard() {

 const [ticks, setTicks] = useState([]);
 const [evenCount, setEvenCount] = useState(0);
 const [oddCount, setOddCount] = useState(0);
 const [matchDigit, setMatchDigit] = useState(null);
 const [matchTimer, setMatchTimer] = useState(30);
 const [accuracy, setAccuracy] = useState({ success: 75.4, failure: 24.6 });
 const [animate, setAnimate] = useState(false);
 const [matchHistory, setMatchHistory] = useState([]);
 const alertAudio = useRef(typeof Audio !== "undefined" ? new Audio("/alert.mp3") : null);

 useEffect(() => {
   const interval = setInterval(() => {
     const tick = Math.floor(Math.random() * 10);
     setTicks((prev) => [...prev.slice(-29), tick]);
     setEvenCount((prev) => (tick % 2 === 0 ? prev + 1 : prev));
     setOddCount((prev) => (tick % 2 !== 0 ? prev + 1 : prev));
   }, 1000);
   return () => clearInterval(interval);
 }, []);

 useEffect(() => {
   if (!matchDigit) return;
   const timer = setInterval(() => {
     setMatchTimer((prev) => {
       if (prev <= 1) {
         setMatchDigit(null);
         clearInterval(timer);
         return 30;
       }
       return prev - 1;
     });
   }, 1000);
   return () => clearInterval(timer);
 }, [matchDigit]);

 useEffect(() => {
   if (!animate) return;
   const timer = setTimeout(() => setAnimate(false), 3000);
   return () => clearTimeout(timer);
 }, [animate]);

 const predictDigit = () => {
   const frequency = Array(10).fill(0);
   ticks.forEach((tick) => frequency[tick]++);
   const mostFreq = frequency.indexOf(Math.max(...frequency));
   const highestCount = Math.max(...frequency);
   if (highestCount > 6) {
     setMatchDigit(mostFreq);
     setMatchTimer(30);
     setAnimate(true);
     setMatchHistory((prev) => [...prev.slice(-9), mostFreq]);
     alertAudio.current?.play();
   }
 };

 const frequencyData = DIGITS.map((digit) => ({
   digit,
   count: ticks.filter((t) => t === digit).length,
 }));

 const pieData = [
   { name: "Even", value: evenCount },
   { name: "Odd", value: oddCount },
 ];

 // Custom SVG wheel for Even/Odd with labels
 const total = evenCount + oddCount;
 let startAngle = 0;
 const slices = pieData.map((slice) => {
   const sliceAngle = (slice.value / total) * 2 * Math.PI;
   const x1 = Math.cos(startAngle) * 100;
   const y1 = Math.sin(startAngle) * 100;
   const x2 = Math.cos(startAngle + sliceAngle) * 100;
   const y2 = Math.sin(startAngle + sliceAngle) * 100;
   const largeArcFlag = sliceAngle > Math.PI ? 1 : 0;
   const pathData = [
     `M 0 0`,
     `L ${x1} ${y1}`,
     `A 100 100 0 ${largeArcFlag} 1 ${x2} ${y2}`,
     `Z`,
   ].join(" ");
   const midAngle = startAngle + sliceAngle / 2;
   const labelX = Math.cos(midAngle) * 60;
   const labelY = Math.sin(midAngle) * 60;
   startAngle += sliceAngle;
   return {
     pathData,
     color: slice.name === "Even" ? "#36A2EB" : "#E74C3C",
     label: `${slice.name} (${((slice.value / total) * 100).toFixed(0)}%)`,
     labelX,
     labelY,
   };
 });

 return (

Emphasized Automated Predictions

       {ticks.slice(-9).map((tick, i) => (
         
           {tick}
         
       ))}

       <Card className="bg-zinc-900">
         <CardContent className="p-4">

Frequency Distribution

           <ResponsiveContainer width="100%" height={200}>
             <BarChart data={frequencyData}>
               <XAxis dataKey="digit" stroke="#ccc" />
               <YAxis stroke="#ccc" />
               <Tooltip />
               <Bar dataKey="count" fill="#36A2EB" />
             </BarChart>
           </ResponsiveContainer>
         </CardContent>
       </Card>

       <Card className="bg-zinc-900 flex flex-col justify-center items-center text-center">
         <CardContent className="p-4">

Volatility 10 (1s)

Signal Valid

{matchDigit !== null ? `${matchTimer}s` : "--"}

         </CardContent>
       </Card>

       <Card className="bg-zinc-900">
         <CardContent className="p-4">

Even/Odd Ratio

           <ResponsiveContainer width="100%" height={200}>
             <PieChart>
               <Pie data={pieData} dataKey="value" innerRadius={50} outerRadius={80}>
                 <Cell fill="#36A2EB" />
                 <Cell fill="#E74C3C" />
               </Pie>
             </PieChart>
           </ResponsiveContainer>

{evenCount}

{oddCount}

         </CardContent>
       </Card>

     {/* NEW: Custom Even/Odd Wheel */}

       <svg
         width={220}
         height={220}
         viewBox="-110 -110 220 220"
         role="img"
         aria-label="Even and Odd distribution wheel"
       >
         {slices.map(({ pathData, color, label, labelX, labelY }, i) => (
           <g key={i}>
             <path d={pathData} fill={color} />
             <text
               x={labelX}
               y={labelY}
               fill="#fff"
               fontWeight="bold"
               fontSize="14"
               textAnchor="middle"
               dominantBaseline="middle"
             >
               {label}
             </text>
           </g>
         ))}
       </svg>

Matches Digit Prediction

{matchDigit !== null ? ( [{matchDigit}] ) : ( <button onClick={predictDigit} className="mt-4 px-4 py-2 bg-blue-600 rounded"> Predict Matches Digit </button> )}

Prediction History

           {matchHistory.map((digit, index) => (
             
               [{digit}]
             
           ))}

     <style jsx>{`
       @keyframes pulse-ring {
         0% {
           box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
         }
         70% {
           box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
         }
         100% {
           box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
         }
       }
       .pulse-ring {
         animation: pulse-ring 1.5s infinite;
         border-radius: 50%;
       }
     `}</style>

);

}

Markup

An example of JSX code:

const App = () => {
   return (
     <div>
       <p>Header</p>
       <p>Content</p>
       <p>Footer</p>
     </div>
   ); 
}

Nested elements

Multiple elements on the same level need to be wrapped in a single React element such as the <div> element shown above, a fragment delineated by <Fragment> or in its shorthand form <>, or returned as an array.^[1]^[2]^[3]^: 68–69

Attributes

JSX provides a range of element attributes designed to mirror those provided by HTML. Custom attributes can also be passed to the component.^[4] All attributes will be received by the component as props.

JavaScript expressions

JavaScript expressions (but not statements) can be used inside JSX with curly brackets {}:^[3]^: 14–16

  <h1>{10+1}</h1>

The example above will render:

  <h1>11</h1>

Conditional expressions

If–else statements cannot be used inside JSX but conditional expressions can be used instead. The example below will render { i === 1 ? 'true' : 'false' } as the string 'true' because i is equal to 1.

const App = () => {
   const i = 1;

   return (
     <div>
       <h1>{ i === 1 ? 'true' : 'false' }</h1>
     </div>
   );
}

The above will render:

<div>
  <h1>true</h1>
</div>

Functions and JSX can be used in conditionals:^[3]^: 88–90

const App = () => {
   const sections = [1, 2, 3];

   return (
     <div>
       {sections.map((n,i) => (
           /* 'key' is used by React to keep track of list items and their changes */
           /* Each 'key' must be unique */
           <div key={"section-" + n}>
               Section {n} {i === 0 && <span>(first)</span>}
           </div>
       ))}
     </div>
   );
}