
import React, { useState, useEffect } from 'react';
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine, Legend } from 'recharts';

const ForeignTradeOwnerTimeline = () => {
    const [experience, setExperience] = useState(10);
    const [wealth, setWealth] = useState(0);
    const [initialInvestment, setInitialInvestment] = useState(100);
    const [startYear, setStartYear] = useState(0);
    const [showFinancialFocus, setShowFinancialFocus] = useState(true);
    const [showWealthAccumulation, setShowWealthAccumulation] = useState(true);
    const [showTradeRisk, setShowTradeRisk] = useState(true);
    const [showWorkHours, setShowWorkHours] = useState(true);

    const generateData = (currentExperience, initialInvest, startYr) => {
        const data = [];
        let accumulatedWealth = 0;
        for (let i = 0; i <= 40; i += 2) {
            let financialFocus = 0;
            let wealthAccumulation = 0;
            let tradeRisk = 0;
            let workHours = 0;

            if (i < 5) {
                financialFocus = 20 + i * 10;
                tradeRisk = 80 - i * 5;
                workHours = 11 - i * 0.1;
            } else if (i < 15) {
                financialFocus = 60 + (i - 5) * 3;
                tradeRisk = 60 - (i - 5) * 2;
                workHours = 10.5 - (i - 5) * 0.05;
            } else if (i < 25) {
                financialFocus = 90 + (i - 15);
                tradeRisk = 40 - (i - 15);
                workHours = 10 - (i - 15) * 0.02;
            } else {
                financialFocus = 100 - (i - 25) * 0.5;
                tradeRisk = 30 - (i - 25) * 0.2;
                workHours = 9.8 - (i - 25) * 0.01;
            }

            if (i >= startYr) {
                if (i === startYr) {
                    accumulatedWealth = initialInvest;
                } else {
                    const growthRate = 1 + (financialFocus / 100) * 0.1 * (1 - tradeRisk / 100);
                    accumulatedWealth *= growthRate;
                }
                wealthAccumulation = accumulatedWealth;
            }

            data.push({
                years: i,
                financialFocus,
                wealthAccumulation,
                tradeRisk,
                workHours,
                current: i === currentExperience ? financialFocus : null,
                currentWealth: i === currentExperience ? wealthAccumulation : null,
            });
        }
        return data;
    };

    const data = generateData(experience, initialInvestment, startYear);

    useEffect(() => {
        const currentData = data.find(item => item.years === experience);
        if (currentData) {
            setWealth(currentData.wealthAccumulation);
        }
    }, [experience, data]);

    const handleSliderChange = (event) => {
        setExperience(Number(event.target.value));
    };

    const handleInitialInvestmentChange = (event) => {
        setInitialInvestment(Number(event.target.value));
    };

    const handleStartYearChange = (event) => {
        setStartYear(Number(event.target.value));
    };

    const formatCurrency = (value) => {
        return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(value * 10000);
    };

    return (
        <div className="p-4">
            <h1 className="text-2xl font-bold mb-4">Foreign Trade Owner Wealth Development Timeline</h1>
            <div className="mb-4">
                <label htmlFor="experience-slider" className="block mb-2">
                    Adjust your years of entrepreneurship: {experience} years
                </label>
                <input
                    type="range"
                    id="experience-slider"
                    min="0"
                    max="40"
                    value={experience}
                    onChange={handleSliderChange}
                    className="w-full"
                />
            </div>
            <div className="mb-4">
                <label htmlFor="initial-investment" className="block mb-2">
                    Initial investment amount (10,000 USD):
                </label>
                <input
                    type="number"
                    id="initial-investment"
                    value={initialInvestment}
                    onChange={handleInitialInvestmentChange}
                    className="w-full p-2 border rounded"
                />
            </div>
            <div className="mb-4">
                <label htmlFor="start-year" className="block mb-2">
                    Investment start year:
                </label>
                <input
                    type="number"
                    id="start-year"
                    value={startYear}
                    onChange={handleStartYearChange}
                    min="0"
                    max="40"
                    className="w-full p-2 border rounded"
                />
            </div>
            <div className="mb-4">
                <h2 className="text-xl font-semibold">Estimated wealth accumulation: {formatCurrency(wealth)}</h2>
            </div>
            <div className="flex flex-wrap gap-4 mb-4">
                <label className="flex items-center">
                    <input
                        type="checkbox"
                        checked={showFinancialFocus}
                        onChange={() => setShowFinancialFocus(!showFinancialFocus)}
                        className="mr-2"
                    />
                    <span>Show Financial Focus</span>
                </label>
                <label className="flex items-center">
                    <input
                        type="checkbox"
                        checked={showWealthAccumulation}
                        onChange={() => setShowWealthAccumulation(!showWealthAccumulation)}
                        className="mr-2"
                    />
                    <span>Show Wealth Accumulation</span>
                </label>
                <label className="flex items-center">
                    <input
                        type="checkbox"
                        checked={showTradeRisk}
                        onChange={() => setShowTradeRisk(!showTradeRisk)}
                        className="mr-2"
                    />
                    <span>Show Trade Risk</span>
                </label>
                <label className="flex items-center">
                    <input
                        type="checkbox"
                        checked={showWorkHours}
                        onChange={() => setShowWorkHours(!showWorkHours)}
                        className="mr-2"
                    />
                    <span>Show Work Hours</span>
                </label>
            </div>
            <ResponsiveContainer width="100%" height={400}>
                <AreaChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="years" />
                    <YAxis yAxisId="left" />
                    <YAxis yAxisId="right" orientation="right" />
                    <Tooltip formatter={(value, name) => {
                        if (name === 'wealthAccumulation') {
                            return [formatCurrency(value), 'Wealth Accumulation'];
                        }
                        if (name === 'tradeRisk') {
                            return [value, 'Trade Risk'];
                        }
                        if (name === 'workHours') {
                            return [value.toFixed(1), 'Daily Average Work Hours'];
                        }
                        if (name === 'current') {
                            return [value, 'Current Financial Focus'];
                        }
                        if (name === 'currentWealth') {
                            return [formatCurrency(value), 'Current Wealth Accumulation'];
                        }
                        return [value, name === 'financialFocus' ? 'Financial Focus' : name];
                    }} />
                    <Legend />
                    {showFinancialFocus && <Area yAxisId="left" type="monotone" dataKey="financialFocus" stroke="#8884d8" fill="#8884d8" fillOpacity={0.3} />}
                    {showWealthAccumulation && <Area yAxisId="right" type="monotone" dataKey="wealthAccumulation" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.3} />}
                    {showTradeRisk && <Area yAxisId="left" type="monotone" dataKey="tradeRisk" stroke="#ffc658" fill="#ffc658" fillOpacity={0.3} />}
                    {showWorkHours && <Area yAxisId="left" type="monotone" dataKey="workHours" stroke="#ff6b6b" fill="#ff6b6b" fillOpacity={0.3} />}
                    <ReferenceLine yAxisId="left" x={experience} stroke="red" label="Current Year" />
                    <Area yAxisId="left" type="monotone" dataKey="current" stroke="#ff7300" fill="#ff7300" fillOpacity={0.8} />
                    <Area yAxisId="right" type="monotone" dataKey="currentWealth" stroke="#ff7300" fill="#ff7300" fillOpacity={0.8} />
                </AreaChart>
            </ResponsiveContainer>
            <div className="mt-4">
                <h2 className="text-xl font-semibold mb-2">Chart Description</h2>
                <ul className="list-disc pl-5">
                    <li><strong>Financial Focus (Purple):</strong> Reflects the company's emphasis on financial management.</li>
                    <li><strong>Wealth Accumulation (Green):</strong> Shows the trend of company wealth growth over time.</li>
                    <li><strong>Trade Risk (Yellow):</strong> Indicates the level of risk in foreign trade operations.</li>
                    <li><strong>Daily Average Work Hours (Red):</strong> Shows the average daily working hours of the owner.</li>
                    <li><strong>Current Financial Focus (Orange dot):</strong> Displays the financial focus at the selected year.</li>
                    <li><strong>Current Wealth Accumulation (Orange dot):</strong> Shows the level of wealth accumulation at the selected year.</li>
                    <li><strong>Red Vertical Line:</strong> Marks the currently selected year of entrepreneurship.</li>
                </ul>
            </div>
            <div className="mt-4">
                <h2 className="text-xl font-semibold mb-2">Foreign Trade Company Owner Wealth Development Insights</h2>
                <ul className="list-disc pl-5">
                    <li>0-5 years (Early Stage):
                        <ul className="list-disc pl-5">
                            <li>Financial Focus: Fundraising, cash flow management, cost control</li>
                            <li>Wealth Accumulation: Slow, mainly investing in company development</li>
                            <li>Trade Risk: High, need to establish customer trust and market positioning</li>
                            <li>Work Hours: Longest, may need to invest a lot of time to establish the business</li>
                        </ul>
                    </li>
                    <li>5-15 years (Stable Growth Period):
                        <ul className="list-disc pl-5">
                            <li>Financial Focus: Profit margin improvement, financing channel expansion, risk management</li>
                            <li>Wealth Accumulation: Starts to accelerate, can consider diversified investments</li>
                            <li>Trade Risk: Gradually decreasing, but need to pay attention to market changes and competition</li>
                            <li>Work Hours: Still long, but starting to decrease</li>
                        </ul>
                    </li>
                    <li>15-25 years (Business Expansion Period):
                        <ul className="list-disc pl-5">
                            <li>Financial Focus: Capital operations, cross-border investments, mergers and acquisitions</li>
                            <li>Wealth Accumulation: Rapid growth, requires professional wealth management</li>
                            <li>Trade Risk: Relatively stable, but need to be alert to international political and economic risks</li>
                            <li>Work Hours: Further reduced, more time used for strategic decision-making</li>
                        </ul>
                    </li>
                    <li>25+ years (Wealth Management Period):
                        <ul className="list-disc pl-5">
                            <li>Financial Focus: Asset allocation, wealth inheritance, philanthropic endeavors</li>
                            <li>Wealth Accumulation: Stable growth, focus shifts to value preservation and social contribution</li>
                            <li>Trade Risk: Maintained at a low level, but need to continuously monitor global economic situations</li>
                            <li>Work Hours: Shortest, more time for personal development and giving back to society</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    );
};

export default ForeignTradeOwnerTimeline;
