import React, { useState } from 'react';

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip,

ResponsiveContainer, BarChart, Bar } from 'recharts';
import { Activity, Brain, Sun, Info } from 'lucide-react';

// Generate sample data

const generateData = () => {
const data = [];
for (let week = 1; week <= 12; week++) {
data.push({
week: week,
burnoutLevel: Math.random() * 0.6 + 0.2,
productivity: Math.random() * 0.8 + 0.1,
stressLevel: Math.random() * 0.7 + 0.2,
energyLevel: Math.random() * 0.9 + 0.1,
});
}
return data;
};

const data = generateData();

const MetricCard = ({ title, value, icon, data }) => {

const [showDropdown, setShowDropdown] = useState(false);

return (
<div className="bg-white rounded-xl shadow-lg p-6">
<h3 className="text-xl font-semibold mb-4 text-gray-700 flex items-center
justify-between">
<span className="flex items-center">
{icon}
<span className="ml-2">{title}</span>
</span>
<button
onClick={() => setShowDropdown(!showDropdown)}
className="text-blue-500 hover:text-blue-700"
>
{showDropdown ? 'Hide History' : 'Show History'}
</button>
</h3>
<div className="flex items-center justify-center text-3xl font-bold mb-4">
{value.toFixed(2)}
</div>
{showDropdown && (
<ResponsiveContainer width="100%" height={200}>
<BarChart data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="week" />
<YAxis />
<Tooltip />
<Bar dataKey={title.toLowerCase().replace(' ', '')} fill="#8884d8" />
</BarChart>
</ResponsiveContainer>
)}
</div>
);
};

const BurnoutInfoDropdown = () => {

 const [isOpen, setIsOpen] = useState(false);

return (
<div className="mt-4">
<button
onClick={() => setIsOpen(!isOpen)}
className="flex items-center text-blue-500 hover:text-blue-700"
>
<Info className="mr-2" />
{isOpen ? 'Hide Burnout Information' : 'Learn About Burnout'}
</button>
{isOpen && (
<div className="mt-2 p-4 bg-gray-50 rounded-lg">
<h4 className="font-semibold mb-2">What is Burnout?</h4>
<p>Burnout is a state of physical and emotional exhaustion. It can occur
when you experience long-term stress in your job, or when you have worked in a
physically or emotionally draining role for a long time.</p>
<h4 className="font-semibold mt-4 mb-2">How to Mitigate Burnout:</h4>
<ul className="list-disc list-inside">
<li>Set boundaries and learn to say no</li>
<li>Take breaks throughout the day</li>
<li>Practice self-care and prioritize sleep</li>
<li>Seek support from colleagues, friends, or professionals</li>
</ul>
<p className="mt-4">
For more information, check out these resources:
<a href="https://www.who.int/news/item/28-05-2019-burn-out-an-
occupational-phenomenon-international-classification-of-diseases" className="text-
blue-500 hover:underline block">World Health Organization on Burnout</a>
<a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC6424886/"
className="text-blue-500 hover:underline block">Burnout Research: Implications for
Understanding and Addressing Job Burnout</a>
</p>
</div>
)}
</div>
);
};

const RefinedBurnoutDashboard = () => {

return (
<div className="w-full max-w-6xl mx-auto p-4 space-y-6">
<h2 className="text-3xl font-bold text-gray-800 text-center">Your Well-being
Dashboard</h2>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">

{/* Burnout Level Trend */}
<div className="md:col-span-3 bg-gradient-to-br from-purple-50 to-indigo-
100 rounded-xl shadow-lg p-6">
<h3 className="text-xl font-semibold mb-4 text-gray-700">Burnout Level
Over Time</h3>
<ResponsiveContainer width="100%" height={300}>
<LineChart data={data} margin={{ top: 5, right: 5, left: 5, bottom:
5 }}>
<CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />
<XAxis dataKey="week" stroke="#718096" />
<YAxis domain={[0, 1]} />
<Tooltip contentStyle={{ backgroundColor: 'rgba(255, 255, 255, 0.8)',
border: 'none', borderRadius: '0.5rem', boxShadow: '0 4px 6px rgba(0, 0, 0,
0.1)' }} />
<Line type="monotone" dataKey="burnoutLevel" stroke="#8884d8"
strokeWidth={3} dot={{ r: 4, fill: '#8884d8' }} activeDot={{ r: 8, fill: '#8884d8',
stroke: '#fff' }} />
</LineChart>
</ResponsiveContainer>
<BurnoutInfoDropdown />
</div>

{/* Productivity */}

<MetricCard
title="Productivity"
value={data[data.length - 1].productivity}
icon={<Activity className="mr-2" />}
data={data}
/>

{/* Stress Level */}

<MetricCard
title="Stress Level"
value={data[data.length - 1].stressLevel}
icon={<Brain className="mr-2" />}
data={data}
/>

{/* Energy Level */}

<MetricCard
title="Energy Level"
value={data[data.length - 1].energyLevel}
icon={<Sun className="mr-2" />}
data={data}
/>
</div>

<div className="text-sm text-gray-500 max-w-2xl mx-auto text-center">

<p>This dashboard provides an overview of your burnout risk and related
well-being metrics. The main graph shows your burnout level over time, while the
other metrics give you insights into factors that can contribute to or protect
against burnout. Use this information to monitor your well-being and take proactive
steps to prevent burnout.</p>
</div>
</div>
);
};

export default RefinedBurnoutDashboard;