import { motion } from 'framer-motion';
import html2canvas from 'html2canvas';
import React, { useRef } from 'react';
import { LineChart, XAxis, Tooltip, ReferenceDot, YAxis, ReferenceLine } from 'recharts';

const data = [
	{ day: 0, label: 'Inventory arrives / sold', period: 'this' },
	{ day: 11, label: 'Creditors paid', period: 'this' },
	{ day: 19, label: 'Cash banked', period: 'this' },
	{ day: 0, label: 'Inventory arrives', period: 'last' },
	{ day: 11, label: 'Creditors paid', period: 'last' },
	{ day: 23, label: 'Inventory sold', period: 'last' },
	{ day: 39, label: 'Cash banked', period: 'last' }
];

const timelineData = [
	{ day: 0 },
	{ day: 5 },
	{ day: 10 },
	{ day: 15 },
	{ day: 20 },
	{ day: 25 },
	{ day: 30 },
	{ day: 35 },
	{ day: 40 }
];

const Card = ({ children }: any) => (
	<div className="rounded-2xl shadow-md p-4 bg-white border border-gray-200">{children}</div>
);

const CardContent = ({ children }: any) => <div className="p-4">{children}</div>;

const WorkingCapitalTimeline = () => {
	const chartRef = useRef();

	const handleExport = async () => {
		if (!chartRef.current) return;
		const canvas = await html2canvas(chartRef.current);
		const link = document.createElement('a');
		link.download = 'working-capital-timeline.png';
		link.href = canvas.toDataURL();
		link.click();
	};

	return (
		<div className="p-4 grid gap-6 grid-cols-1 md:grid-cols-2">
			<motion.div
				initial={{ opacity: 0, y: 20 }}
				animate={{ opacity: 1, y: 0 }}
				transition={{ duration: 0.5 }}
				// @ts-ignore
				ref={chartRef}
			>
				<Card>
					<CardContent>
						<h2 className="text-xl font-bold mb-4">Working Capital Timeline</h2>
						<h3 className="text-md font-semibold mb-2">This Period</h3>
						<LineChart width={500} height={100} data={timelineData}>
							<XAxis dataKey="day" type="number" domain={[0, 40]} />
							<YAxis hide domain={[0, 1]} /> {/* Dummy Y-axis to prevent ReferenceDot error */}
							<Tooltip
								// @ts-ignore
								formatter={(value, name, props) => `${props.payload.day} Days`}
								labelFormatter={() => 'Timeline'}
							/>
							{data
								.filter((d) => d.period === 'this')
								.map((d, index) => (
									<>
										<ReferenceDot
											key={index}
											x={d.day}
											y={0}
											r={5}
											fill={index === 0 ? 'orange' : index === 1 ? 'purple' : 'green'}
											stroke="none"
											label={{ position: 'top', value: d.label, fill: 'black' }}
										/>
										<ReferenceLine
											x={d.day}
											stroke={index === 0 ? 'orange' : index === 1 ? 'purple' : 'green'}
											strokeWidth={1}
										/>
									</>
								))}
						</LineChart>
						<div className="mt-4 text-center">
							<div className="text-3xl font-bold">8</div>
							<div>Working Capital Days</div>
							<div className="text-green-600 font-semibold mt-2">871,161</div>
							<div>Cash Impact</div>
						</div>
					</CardContent>
				</Card>
				<Card className="mt-6">
					<CardContent>
						<h3 className="text-md font-semibold mb-2">Last Period</h3>
						<LineChart width={500} height={100} data={timelineData}>
							<XAxis dataKey="day" type="number" domain={[0, 40]} />
							<YAxis hide domain={[0, 1]} /> {/* Dummy Y-axis to prevent ReferenceDot error */}
							<Tooltip
								// @ts-ignore
								formatter={(value, name, props) => `${props.payload.day} Days`}
								labelFormatter={() => 'Timeline'}
							/>
							{data
								.filter((d) => d.period === 'last')
								.map((d, index) => (
									<ReferenceDot
										key={index}
										x={d.day}
										y={0}
										r={5}
										fill={
											index === 0
												? 'blue'
												: index === 1
												? 'purple'
												: index === 2
												? 'orange'
												: 'green'
										}
										stroke="none"
										label={{ position: 'top', value: d.label, fill: 'black' }}
									/>
								))}
						</LineChart>
						<div className="mt-4 text-center">
							<div className="text-3xl font-bold">28</div>
							<div>Working Capital Days</div>
						</div>
					</CardContent>
				</Card>
			</motion.div>
			<div className="flex items-center justify-center">
				<button
					onClick={handleExport}
					className="mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg shadow hover:bg-blue-700"
				>
					Export as PNG
				</button>
			</div>
		</div>
	);
};

export default WorkingCapitalTimeline;