client/src/DashBoard.jsx

import React, { useRef, useState, useEffect } from 'react';
import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid } from 'recharts';
import Draggable from 'react-draggable';
import { FaPen, FaEraser, FaSave, FaTimes } from 'react-icons/fa';
import html2canvas from 'html2canvas';

const Dashboard = ({ report, onClose }) => {
  const [isDrawingMode, setIsDrawingMode] = useState(false);
  const canvasRef = useRef(null);
  const containerRef = useRef(null);
  const [context, setContext] = useState(null);

  // Prepare Data for Chart
  const chartData = report.deals.map((deal, index) => ({
    name: index, // Simplified X axis (Trade #)
    balance: deal.balance,
    profit: deal.profit
  }));

  // Setup Canvas for drawing
  useEffect(() => {
    if (canvasRef.current) {
      const canvas = canvasRef.current;
      canvas.width = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
      const ctx = canvas.getContext('2d');
      ctx.strokeStyle = "yellow";
      ctx.lineWidth = 3;
      setContext(ctx);
    }
  }, [isDrawingMode]);

  const startDrawing = (e) => {
    if (!isDrawingMode || !context) return;
    context.beginPath();
    context.moveTo(e.nativeEvent.offsetX, e.nativeEvent.offsetY);
  };

  const draw = (e) => {
    if (!isDrawingMode || !context || e.buttons !== 1) return;
    context.lineTo(e.nativeEvent.offsetX, e.nativeEvent.offsetY);
    context.stroke();
  };

  const saveReport = () => {
    if (containerRef.current) {
      html2canvas(containerRef.current).then(canvas => {
        const link = document.createElement('a');
        link.download = `Remodeled_Report_${report.accountId}.png`;
        link.href = canvas.toDataURL();
        link.click();
      });
    }
  };

  return (
    <Draggable handle=".drag-handle">

      <div 

        ref={containerRef}

        className="bg-black border border-gray-700 rounded-xl overflow-hidden relative shadow-2xl min-h-[600px]"

      >

        {/* Header / Drag Handle */}

        <div className="drag-handle bg-gray-900 p-3 cursor-grab flex justify-between items-center border-b border-gray-800">

          <h3 className="font-bold text-white">Account: {report.accountId}</h3>

          <div className="flex gap-2">

            <button onClick={() => setIsDrawingMode(!isDrawingMode)} className={`p-2 rounded ${isDrawingMode ? 'bg-blue-600' : 'bg-gray-700'}`}><FaPen /></button>

            <button onClick={saveReport} className="p-2 bg-green-600 rounded"><FaSave /></button>

            <button onClick={onClose} className="p-2 bg-red-600 rounded"><FaTimes /></button>

          </div>

        </div>



        {/* Content */}

        <div className="p-4 relative">

          

          {/* Canvas Overlay */}

          <canvas 

            ref={canvasRef}

            onMouseDown={startDrawing}

            onMouseMove={draw}

            className={`absolute inset-0 z-20 ${isDrawingMode ? 'cursor-crosshair pointer-events-auto' : 'pointer-events-none'}`}

            style={{ width: '100%', height: '100%' }}

          />



          {/* Grid Layout for Remodeled Report */}

          <div className="grid grid-cols-3 gap-4 mb-6">

             <div className="col-span-3 bg-gray-900/50 p-4 rounded-lg">

                <h4 className="text-gray-400 mb-2">Equity & Balance Curve</h4>

                <div className="h-64 w-full">

                  <ResponsiveContainer width="100%" height="100%">

                    <AreaChart data={chartData}>

                      <defs>

                        <linearGradient id="colorBal" x1="0" y1="0" x2="0" y2="1">

                          <stop offset="5%" stopColor="#8884d8" stopOpacity={0.8}/>

                          <stop offset="95%" stopColor="#8884d8" stopOpacity={0}/>

                        </linearGradient>

                      </defs>

                      <CartesianGrid strokeDasharray="3 3" stroke="#333" />

                      <XAxis dataKey="name" stroke="#666" />

                      <YAxis stroke="#666" domain={['auto', 'auto']} />

                      <Tooltip contentStyle={{backgroundColor: '#000', borderColor: '#333'}} />

                      <Area type="monotone" dataKey="balance" stroke="#8884d8" fillOpacity={1} fill="url(#colorBal)" />

                    </AreaChart>

                  </ResponsiveContainer>

                </div>

             </div>



             {/* Stat Cards */}

             <div className="bg-gray-800 p-4 rounded text-center">

                <p className="text-gray-400 text-xs">Total Deals</p>

                <p className="text-2xl font-bold">{report.deals.length}</p>

             </div>

             <div className="bg-gray-800 p-4 rounded text-center">

                <p className="text-gray-400 text-xs">Final Balance</p>

                <p className="text-2xl font-bold text-green-400">

                  ${report.deals[report.deals.length - 1]?.balance.toFixed(2)}

                </p>

             </div>

             <div className="bg-gray-800 p-4 rounded text-center">

                <p className="text-gray-400 text-xs">Profit Factor</p>

                <p className="text-2xl font-bold">1.5</p> {/* Placeholder calculation */}

             </div>

          </div>

          

          {/* Data Table */}

          <div className="overflow-x-auto">

            <table className="w-full text-left text-xs text-gray-400">

              <thead className="bg-gray-900 text-gray-200">

                <tr>

                  <th className="p-2">Time</th>

                  <th className="p-2">Symbol</th>

                  <th className="p-2">Type</th>

                  <th className="p-2">Profit</th>

                </tr>

              </thead>

              <tbody>

                {report.deals.slice(0, 10).map((d, i) => (

                  <tr key={i} className="border-b border-gray-800 hover:bg-gray-900">

                    <td className="p-2">{d.time}</td>

                    <td className="p-2 text-blue-400">{d.symbol}</td>

                    <td className="p-2">{d.type}</td>

                    <td className={`p-2 ${d.profit >= 0 ? 'text-green-500' : 'text-red-500'}`}>

                      {d.profit}

                    </td>

                  </tr>

                ))}

              </tbody>

            </table>

          </div>



        </div>

      </div>

    </Draggable>
  );
};

export default Dashboard;