"use client";

import { useState, useEffect } from "react";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, BarChart, Bar, ComposedChart, PieChart, Pie, Cell } from 'recharts';
import { useTranslation } from "@/lib/i18n";
import PageContainer from "@/components/ui/PageContainer";

export default function TeamLeadsDashboard() {
	const { t } = useTranslation();
	const [chartData, setChartData] = useState([]);
	const [summaryData, setSummaryData] = useState(null);
	const [loading, setLoading] = useState(true);
	const [error, setError] = useState(null);
	const [selectedYear, setSelectedYear] = useState(null);

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

	const fetchDashboardData = async () => {
		try {
			const params = new URLSearchParams();
			if (selectedYear) {
				params.append('year', selectedYear.toString());
			}

			const url = `/api/dashboard${params.toString() ? '?' + params.toString() : ''}`;
			const response = await fetch(url);
			if (!response.ok) {
				throw new Error('Failed to fetch dashboard data');
			}
			const data = await response.json();
			setChartData(data.chartData || []);
			setSummaryData(data.summary || null);
		} catch (err) {
			setError(err.message);
		} finally {
			setLoading(false);
		}
	};

	const currentYear = new Date().getFullYear();
	const availableYears = [];
	for (let year = currentYear; year >= 2023; year--) {
		availableYears.push(year);
	}

	const handleYearChange = (year) => {
		setSelectedYear(year === 'all' ? null : parseInt(year));
	};

	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">{`${t('teamDashboard.monthLabel')} ${label}`}</p>
					<p className="text-blue-600 dark:text-blue-400 font-semibold">
						{`${t('teamDashboard.monthlyValue')} ${monthlyData ? formatCurrency(monthlyData.value) : t('teamDashboard.na')}`}
					</p>
					<p className="text-green-600 dark:text-green-400 text-sm">
						{`${t('teamDashboard.cumulative')} ${cumulativeData ? formatCurrency(cumulativeData.value) : t('teamDashboard.na')}`}
					</p>
				</div>
			);
		}
		return null;
	};

	return (
		<PageContainer>
			<div className="flex items-center justify-between mb-8">
				<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
					{t('teamDashboard.title')}
				</h1>

				{/* Year Filter */}
				<div className="flex items-center space-x-2">
					<label htmlFor="year-select" className="text-sm font-medium text-gray-700 dark:text-gray-300">
						{t('teamDashboard.yearLabel')}
					</label>
					<select
						id="year-select"
						value={selectedYear || 'all'}
						onChange={(e) => handleYearChange(e.target.value)}
						className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
					>
						<option value="all">{t('teamDashboard.allYears')}</option>
						{availableYears.map(year => (
							<option key={year} value={year}>{year}</option>
						))}
					</select>
				</div>
			</div>

			<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">
					{t('teamDashboard.projectCompletionTitle')}
				</h2>

				{loading ? (
					<div className="flex items-center justify-center h-64">
						<div className="text-gray-500 dark:text-gray-400">{t('teamDashboard.loadingChart')}</div>
					</div>
				) : error ? (
					<div className="flex items-center justify-center h-64">
						<div className="text-red-500 dark:text-red-400">{t('teamDashboard.errorPrefix')} {error}</div>
					</div>
				) : chartData.length === 0 ? (
					<div className="flex items-center justify-center h-64">
						<div className="text-gray-500 dark:text-gray-400">{t('teamDashboard.noData')}</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={t('teamDashboard.monthlyValue').replace(':', '')}
									radius={[4, 4, 0, 0]}
								/>
								<Line
									type="monotone"
									dataKey="cumulative"
									stroke="#10b981"
									strokeWidth={3}
									name={t('teamDashboard.cumulative').replace(':', '')}
									dot={{ fill: '#10b981', strokeWidth: 2, r: 4 }}
									activeDot={{ r: 6, stroke: '#10b981', strokeWidth: 2 }}
								/>
							</ComposedChart>
						</ResponsiveContainer>
					</div>
				)}

				<div className="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-8">
					{/* Main Total Chart */}
					<div className="lg:col-span-1">
						<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-6">
							{t('teamDashboard.totalPortfolio')}
						</h2>

						{summaryData?.total ? (
							<div className="h-64">
								<ResponsiveContainer width="100%" height="100%">
									<PieChart>
										<Pie
											data={[
												{
													name: t('teamDashboard.realised'),
													value: summaryData.total.realisedValue,
													color: '#10b981'
												},
												{
													name: t('teamDashboard.unrealised'),
													value: summaryData.total.unrealisedValue,
													color: '#8b5cf6'
												}
											]}
											cx="50%"
											cy="50%"
											outerRadius={80}
											dataKey="value"
											label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
										>
											<Cell fill="#10b981" />
											<Cell fill="#8b5cf6" />
										</Pie>
										<Tooltip formatter={(value) => formatCurrency(value)} />
										<Legend />
									</PieChart>
								</ResponsiveContainer>
							</div>
						) : (
							<div className="flex items-center justify-center h-64">
								<div className="text-gray-500 dark:text-gray-400">{t('teamDashboard.noSummaryData')}</div>
							</div>
						)}

						{summaryData?.total && (
							<div className="mt-4 grid grid-cols-1 gap-3">
								<div className="bg-green-50 dark:bg-green-900/20 p-3 rounded-lg">
									<div className="text-sm text-green-600 dark:text-green-400 font-medium">{t('teamDashboard.realisedValue')}</div>
									<div className="text-xl font-bold text-green-700 dark:text-green-300">
										{formatCurrency(summaryData.total.realisedValue)}
									</div>
								</div>
								<div className="bg-purple-50 dark:bg-purple-900/20 p-3 rounded-lg">
									<div className="text-sm text-purple-600 dark:text-purple-400 font-medium">{t('teamDashboard.unrealisedValue')}</div>
									<div className="text-xl font-bold text-purple-700 dark:text-purple-300">
										{formatCurrency(summaryData.total.unrealisedValue)}
									</div>
								</div>
							</div>
						)}
					</div>

					{/* Project Type Charts */}
					<div className="lg:col-span-2">
						<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-6">
							{t('teamDashboard.byProjectType')}
						</h2>

						<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
							{summaryData?.byType && Object.entries(summaryData.byType).map(([type, data]) => (
								<div key={type} className="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
									<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4 capitalize text-center">
										{t(`projectType.${type}`)}
									</h3>

									{/* Mini pie chart */}
									<div className="h-32 mb-4">
										<ResponsiveContainer width="100%" height="100%">
											<PieChart>
											<Pie
												data={[
													{ name: t('teamDashboard.realised'), value: data.realisedValue, color: '#10b981' },
													{ name: t('teamDashboard.unrealised'), value: data.unrealisedValue, color: '#8b5cf6' }
												]}
													cx="50%"
													cy="50%"
													outerRadius={45}
													dataKey="value"
													label={({ percent }) => percent > 0.1 ? `${(percent * 100).toFixed(0)}%` : ''}
												>
													<Cell fill="#10b981" />
													<Cell fill="#8b5cf6" />
												</Pie>
												<Tooltip formatter={(value) => formatCurrency(value)} />
											</PieChart>
										</ResponsiveContainer>
									</div>

									<div className="space-y-3">
										<div className="flex justify-between items-center">
											<span className="text-sm text-green-600 dark:text-green-400">{t('teamDashboard.realised')}</span>
											<span className="text-sm font-semibold text-green-700 dark:text-green-300">
												{formatCurrency(data.realisedValue)}
											</span>
										</div>
										<div className="flex justify-between items-center">
											<span className="text-sm text-purple-600 dark:text-purple-400">{t('teamDashboard.unrealised')}</span>
											<span className="text-sm font-semibold text-purple-700 dark:text-purple-300">
												{formatCurrency(data.unrealisedValue)}
											</span>
										</div>
									</div>
								</div>
							))}
						</div>
					</div>
				</div>

				{/* By Contract Section */}
				{summaryData?.byContract && Object.keys(summaryData.byContract).length > 0 && (
					<div className="mt-8">
						<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-6">
							{t('teamDashboard.byContract')}
						</h2>

						<div className="h-96">
							<ResponsiveContainer width="100%" height="100%">
								<BarChart
									data={Object.entries(summaryData.byContract).map(([contractNumber, data]) => ({
										name: contractNumber,
										fullName: data.contract_name,
										realised: data.realisedValue,
										unrealised: data.unrealisedValue,
										total: data.totalValue
									}))}
									margin={{
										top: 20,
										right: 30,
										left: 20,
										bottom: 100,
									}}
								>
									<CartesianGrid strokeDasharray="3 3" className="opacity-30" />
									<XAxis
										dataKey="name"
										angle={-45}
										textAnchor="end"
										height={100}
										className="text-gray-600 dark:text-gray-400"
										fontSize={11}
									/>
									<YAxis
										className="text-gray-600 dark:text-gray-400"
										fontSize={12}
										tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
									/>
									<Tooltip
										content={({ active, payload }) => {
											if (active && payload && payload.length) {
												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 mb-2">{payload[0].payload.fullName}</p>
														<p className="text-sm text-gray-600 dark:text-gray-400 mb-2">{payload[0].payload.name}</p>
														<p className="text-green-600 dark:text-green-400 text-sm">
															{`${t('teamDashboard.realised')}: ${formatCurrency(payload[0].payload.realised)}`}
														</p>
														<p className="text-purple-600 dark:text-purple-400 text-sm">
															{`${t('teamDashboard.unrealised')}: ${formatCurrency(payload[0].payload.unrealised)}`}
														</p>
														<p className="text-blue-600 dark:text-blue-400 text-sm font-semibold mt-1">
															{`${t('teamDashboard.total')}: ${formatCurrency(payload[0].payload.total)}`}
														</p>
													</div>
												);
											}
											return null;
										}}
									/>
									<Legend />
									<Bar
										dataKey="realised"
										stackId="a"
										fill="#10b981"
										name={t('teamDashboard.realised')}
										radius={[0, 0, 0, 0]}
									/>
									<Bar
										dataKey="unrealised"
										stackId="a"
										fill="#8b5cf6"
										name={t('teamDashboard.unrealised')}
										radius={[4, 4, 0, 0]}
									/>
								</BarChart>
							</ResponsiveContainer>
						</div>
					</div>
				)}
			</div>
		</PageContainer>
	);
}