"use client";

import { useState, useEffect } from "react";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, BarChart, Bar, ComposedChart } from 'recharts';

export default function TeamLeadsDashboard() {
	const [chartData, setChartData] = useState([]);
	const [loading, setLoading] = useState(true);
	const [error, setError] = useState(null);

	useEffect(() => {
		fetchDashboardData();
	}, []);

	const fetchDashboardData = async () => {
		try {
			const response = await fetch('/api/dashboard');
			if (!response.ok) {
				throw new Error('Failed to fetch dashboard data');
			}
			const data = await response.json();
			setChartData(data);
		} catch (err) {
			setError(err.message);
		} finally {
			setLoading(false);
		}
	};

	const formatCurrency = (value) => {
		return new Intl.NumberFormat('pl-PL', {
			style: 'currency',
			currency: 'PLN',
			minimumFractionDigits: 0,
			maximumFractionDigits: 0
		}).format(value);
	};

	const CustomTooltip = ({ active, payload, label }) => {
		if (active && payload && payload.length) {
			// Find the monthly and cumulative values
			const monthlyData = payload.find(p => p.dataKey === 'value');
			const cumulativeData = payload.find(p => p.dataKey === 'cumulative');

			return (
				<div className="bg-white dark:bg-gray-800 p-3 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg">
					<p className="font-medium text-gray-900 dark:text-white">{`Month: ${label}`}</p>
					<p className="text-blue-600 dark:text-blue-400 font-semibold">
						{`Monthly Value: ${monthlyData ? formatCurrency(monthlyData.value) : 'N/A'}`}
					</p>
					<p className="text-green-600 dark:text-green-400 text-sm">
						{`Cumulative: ${cumulativeData ? formatCurrency(cumulativeData.value) : 'N/A'}`}
					</p>
				</div>
			);
		}
		return null;
	};

	return (
		<div className="container mx-auto px-4 py-8">
			<h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-8">
				Dashboard
			</h1>

			<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
				<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-6">
					Project Completion Value Over Time
				</h2>

				{loading ? (
					<div className="flex items-center justify-center h-64">
						<div className="text-gray-500 dark:text-gray-400">Loading chart data...</div>
					</div>
				) : error ? (
					<div className="flex items-center justify-center h-64">
						<div className="text-red-500 dark:text-red-400">Error: {error}</div>
					</div>
				) : chartData.length === 0 ? (
					<div className="flex items-center justify-center h-64">
						<div className="text-gray-500 dark:text-gray-400">No completed projects data available</div>
					</div>
				) : (
					<div className="h-96">
						<ResponsiveContainer width="100%" height="100%">
							<ComposedChart
								data={chartData}
								margin={{
									top: 20,
									right: 30,
									left: 20,
									bottom: 5,
								}}
							>
								<CartesianGrid strokeDasharray="3 3" className="opacity-30" />
								<XAxis
									dataKey="month"
									className="text-gray-600 dark:text-gray-400"
									fontSize={12}
								/>
								<YAxis
									className="text-gray-600 dark:text-gray-400"
									fontSize={12}
									tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
								/>
								<Tooltip content={<CustomTooltip />} />
								<Legend />
								<Bar
									dataKey="value"
									fill="#3b82f6"
									name="Monthly Value"
									radius={[4, 4, 0, 0]}
								/>
								<Line
									type="monotone"
									dataKey="cumulative"
									stroke="#10b981"
									strokeWidth={3}
									name="Cumulative Value"
									dot={{ fill: '#10b981', strokeWidth: 2, r: 4 }}
									activeDot={{ r: 6, stroke: '#10b981', strokeWidth: 2 }}
								/>
							</ComposedChart>
						</ResponsiveContainer>
					</div>
				)}

				<div className="mt-4 text-sm text-gray-600 dark:text-gray-400">
					<p>This chart shows the cumulative value of completed projects over time, with monthly additions.</p>
				</div>
			</div>
		</div>
	);
}