import React, { useState } from 'react';
import { ArrowRight, TrendingUp, TrendingDown, LineChart } from 'lucide-react';

const MonetaryPolicyDiagram = () => {
  const [activeScenario, setActiveScenario] = useState('expansion');
  const [showGraphs, setShowGraphs] = useState(false);
  
  // Graph parameters
  const [moneySupply, setMoneySupply] = useState(100);
  const [income, setIncome] = useState(100);
  const [foreignRate, setForeignRate] = useState(2);
  const [inflation, setInflation] = useState(2);
  const [outputGap, setOutputGap] = useState(0);

  // Calculate equilibrium interest rate from money market
  const calcInterestRate = (ms, y) => {
    // L(R,Y) = k1*Y - k2*R, where k1=0.5, k2=20
    // Money market equilibrium: Ms/P = L(R,Y)
    // Assuming P=1 for simplicity: Ms = k1*Y - k2*R
    // R = (k1*Y - Ms)/k2
    const k1 = 0.5;
    const k2 = 20;
    const rate = Math.max(0, (k1 * y - ms) / k2);
    return rate;
  };

  // Calculate exchange rate from UIP
  const calcExchangeRate = (domesticRate, foreignRate) => {
    // Simplified: E = base * (1 + rate_differential)
    // Higher domestic rate → currency appreciates → E falls
    const base = 1.0;
    const rateDiff = domesticRate - foreignRate;
    return base * Math.exp(-rateDiff * 0.1); // E decreases when R_dom > R_for
  };

  // Calculate Taylor Rule rate
  const calcTaylorRate = (inflationRate, inflationTarget, outputGap) => {
    const rStar = 2; // equilibrium rate
    const fPi = 1.5;
    const fY = 0.5;
    return rStar + fPi * (inflationRate - inflationTarget) + fY * outputGap;
  };

  const domesticRate = calcInterestRate(moneySupply, income);
  const exchangeRate = calcExchangeRate(domesticRate, foreignRate);
  const taylorRate = calcTaylorRate(inflation, 2, outputGap);

  // Generate points for money demand curve
  const generateMoneyDemandCurve = (y) => {
    const points = [];
    for (let r = 0; r <= 8; r += 0.2) {
      const md = 0.5 * y - 20 * r; // L(R,Y) = k1*Y - k2*R
      if (md > 0) {
        points.push({ r, md });
      }
    }
    return points;
  };

  // Generate points for UIP curve
  const generateUIPCurve = (rFor) => {
    const points = [];
    for (let rDom = 0; rDom <= 8; rDom += 0.2) {
      const e = calcExchangeRate(rDom, rFor);
      points.push({ rDom, e });
    }
    return points;
  };

  const moneyDemandPoints = generateMoneyDemandCurve(income);
  const uipPoints = generateUIPCurve(foreignRate);

  const scenarios = {
    expansion: {
      title: 'Monetary Expansion (Ms ↑)',
      color: 'blue',
      steps: [
        { label: 'Central Bank', action: 'Increases Money Supply (Ms ↑)', color: 'bg-blue-100' },
        { label: 'Money Market', action: 'Interest Rate Falls (R ↓)', color: 'bg-blue-200' },
        { label: 'FX Market', action: 'Currency Depreciates (E ↑)', color: 'bg-blue-300' },
        { label: 'Real Economy', action: 'Investment ↑, Exports ↑, AD ↑', color: 'bg-blue-400' }
      ]
    },
    contraction: {
      title: 'Monetary Contraction (Ms ↓)',
      color: 'red',
      steps: [
        { label: 'Central Bank', action: 'Decreases Money Supply (Ms ↓)', color: 'bg-red-100' },
        { label: 'Money Market', action: 'Interest Rate Rises (R ↑)', color: 'bg-red-200' },
        { label: 'FX Market', action: 'Currency Appreciates (E ↓)', color: 'bg-red-300' },
        { label: 'Real Economy', action: 'Investment ↓, Exports ↓, AD ↓', color: 'bg-red-400' }
      ]
    },
    taylor: {
      title: 'Taylor Rule Response to High Inflation',
      color: 'orange',
      steps: [
        { label: 'Shock', action: 'Inflation Above Target (π > π*)', color: 'bg-orange-100' },
        { label: 'Taylor Rule', action: 'R = R* + 1.5(π - π*) + 0.5(y - y*)', color: 'bg-orange-200' },
        { label: 'Policy Action', action: 'Raise R aggressively (by > 1% per 1% inflation)', color: 'bg-orange-300' },
        { label: 'Effect', action: 'Real Rate ↑ → Borrowing ↓ → AD ↓ → π ↓', color: 'bg-orange-400' }
      ]
    }
  };

  return (
    <div className="w-full max-w-6xl mx-auto p-6 bg-gray-50">
      <h1 className="text-3xl font-bold text-center mb-8 text-gray-800">
        Monetary Policy Transmission Mechanism
      </h1>

      {/* Scenario Selector */}
      <div className="flex gap-4 mb-8 justify-center flex-wrap">
        <button
          onClick={() => setActiveScenario('expansion')}
          className={`px-6 py-3 rounded-lg font-semibold transition-all ${
            activeScenario === 'expansion'
              ? 'bg-blue-500 text-white shadow-lg'
              : 'bg-white text-gray-700 hover:bg-gray-100'
          }`}
        >
          Monetary Expansion
        </button>
        <button
          onClick={() => setActiveScenario('contraction')}
          className={`px-6 py-3 rounded-lg font-semibold transition-all ${
            activeScenario === 'contraction'
              ? 'bg-red-500 text-white shadow-lg'
              : 'bg-white text-gray-700 hover:bg-gray-100'
          }`}
        >
          Monetary Contraction
        </button>
        <button
          onClick={() => setActiveScenario('taylor')}
          className={`px-6 py-3 rounded-lg font-semibold transition-all ${
            activeScenario === 'taylor'
              ? 'bg-orange-500 text-white shadow-lg'
              : 'bg-white text-gray-700 hover:bg-gray-100'
          }`}
        >
          Taylor Rule
        </button>
        <button
          onClick={() => setShowGraphs(!showGraphs)}
          className={`px-6 py-3 rounded-lg font-semibold transition-all flex items-center gap-2 ${
            showGraphs
              ? 'bg-green-500 text-white shadow-lg'
              : 'bg-white text-gray-700 hover:bg-gray-100'
          }`}
        >
          <LineChart size={20} />
          {showGraphs ? 'Hide Graphs' : 'Show Interactive Graphs'}
        </button>
      </div>

      {/* Interactive Graphs Section */}
      {showGraphs && (
        <div className="bg-white rounded-xl shadow-lg p-8 mb-8">
          <h2 className="text-2xl font-bold mb-6 text-center text-gray-800">
            Interactive Graph Plotter
          </h2>

          {/* Controls */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
            {/* Money Supply Slider */}
            <div className="bg-blue-50 p-4 rounded-lg border-2 border-blue-200">
              <label className="block text-sm font-bold mb-2 text-blue-800">
                Money Supply (Ms): {moneySupply}
              </label>
              <input
                type="range"
                min="50"
                max="150"
                value={moneySupply}
                onChange={(e) => setMoneySupply(Number(e.target.value))}
                className="w-full"
              />
              <div className="text-xs text-gray-600 mt-1">
                Increase → R↓, E↑ (depreciation)
              </div>
            </div>

            {/* Income Slider */}
            <div className="bg-green-50 p-4 rounded-lg border-2 border-green-200">
              <label className="block text-sm font-bold mb-2 text-green-800">
                Real Income (Y): {income}
              </label>
              <input
                type="range"
                min="50"
                max="150"
                value={income}
                onChange={(e) => setIncome(Number(e.target.value))}
                className="w-full"
              />
              <div className="text-xs text-gray-600 mt-1">
                Increase → Money demand↑ → R↑
              </div>
            </div>

            {/* Foreign Rate Slider */}
            <div className="bg-purple-50 p-4 rounded-lg border-2 border-purple-200">
              <label className="block text-sm font-bold mb-2 text-purple-800">
                Foreign Interest Rate: {foreignRate.toFixed(1)}%
              </label>
              <input
                type="range"
                min="0"
                max="6"
                step="0.1"
                value={foreignRate}
                onChange={(e) => setForeignRate(Number(e.target.value))}
                className="w-full"
              />
              <div className="text-xs text-gray-600 mt-1">
                Increase → Domestic currency appreciates
              </div>
            </div>

            {/* Inflation Slider */}
            <div className="bg-orange-50 p-4 rounded-lg border-2 border-orange-200">
              <label className="block text-sm font-bold mb-2 text-orange-800">
                Inflation (π): {inflation.toFixed(1)}%
              </label>
              <input
                type="range"
                min="0"
                max="6"
                step="0.1"
                value={inflation}
                onChange={(e) => setInflation(Number(e.target.value))}
                className="w-full"
              />
              <div className="text-xs text-gray-600 mt-1">
                Target: 2% | Current deviation: {(inflation - 2).toFixed(1)}%
              </div>
            </div>

            {/* Output Gap Slider */}
            <div className="bg-teal-50 p-4 rounded-lg border-2 border-teal-200">
              <label className="block text-sm font-bold mb-2 text-teal-800">
                Output Gap (y-y*): {outputGap.toFixed(1)}%
              </label>
              <input
                type="range"
                min="-5"
                max="5"
                step="0.1"
                value={outputGap}
                onChange={(e) => setOutputGap(Number(e.target.value))}
                className="w-full"
              />
              <div className="text-xs text-gray-600 mt-1">
                Positive = overheating | Negative = recession
              </div>
            </div>

            {/* Results Display */}
            <div className="bg-gray-50 p-4 rounded-lg border-2 border-gray-300">
              <div className="text-sm font-bold mb-2 text-gray-800">Current Values:</div>
              <div className="space-y-1 text-sm">
                <div>Interest Rate: <span className="font-bold text-blue-600">{domesticRate.toFixed(2)}%</span></div>
                <div>Exchange Rate: <span className="font-bold text-green-600">{exchangeRate.toFixed(3)}</span></div>
                <div>Taylor Rate: <span className="font-bold text-orange-600">{taylorRate.toFixed(2)}%</span></div>
                <div className="text-xs text-gray-500 mt-2">
                  Real Rate: {(domesticRate - inflation).toFixed(2)}%
                </div>
              </div>
            </div>
          </div>

          {/* Graphs */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {/* Money Market Graph */}
            <div className="border-2 border-blue-300 rounded-lg p-6 bg-blue-50">
              <h3 className="text-lg font-bold mb-4 text-blue-800 text-center">
                Money Market Equilibrium
              </h3>
              <div className="bg-white p-4 rounded relative" style={{ height: '300px' }}>
                <svg width="100%" height="100%" viewBox="0 0 400 300">
                  {/* Axes */}
                  <line x1="50" y1="250" x2="350" y2="250" stroke="black" strokeWidth="2" />
                  <line x1="50" y1="250" x2="50" y2="30" stroke="black" strokeWidth="2" />
                  
                  {/* Labels */}
                  <text x="200" y="280" textAnchor="middle" fontSize="12">Real Money (M/P)</text>
                  <text x="20" y="140" textAnchor="middle" fontSize="12" transform="rotate(-90 20 140)">Interest Rate (R)</text>
                  
                  {/* Money Demand Curve */}
                  <path
                    d={`M ${moneyDemandPoints.map((p, i) => 
                      `${i === 0 ? 'M' : 'L'} ${50 + p.md * 2.5} ${250 - p.r * 25}`
                    ).join(' ')}`}
                    stroke="blue"
                    strokeWidth="3"
                    fill="none"
                  />
                  
                  {/* Money Supply Line (vertical) */}
                  <line 
                    x1={50 + moneySupply * 2.5} 
                    y1="250" 
                    x2={50 + moneySupply * 2.5} 
                    y2="30" 
                    stroke="red" 
                    strokeWidth="3" 
                    strokeDasharray="5,5"
                  />
                  
                  {/* Equilibrium Point */}
                  <circle 
                    cx={50 + moneySupply * 2.5} 
                    cy={250 - domesticRate * 25} 
                    r="6" 
                    fill="green" 
                    stroke="darkgreen" 
                    strokeWidth="2"
                  />
                  
                  {/* Legend */}
                  <line x1="270" y1="50" x2="300" y2="50" stroke="blue" strokeWidth="3" />
                  <text x="305" y="55" fontSize="11">L(R,Y) - Demand</text>
                  
                  <line x1="270" y1="70" x2="300" y2="70" stroke="red" strokeWidth="3" strokeDasharray="5,5" />
                  <text x="305" y="75" fontSize="11">Ms/P - Supply</text>
                  
                  <circle cx="285" cy="90" r="4" fill="green" />
                  <text x="295" y="95" fontSize="11">Equilibrium</text>
                </svg>
              </div>
              <div className="mt-3 text-sm text-gray-700 bg-white p-3 rounded">
                <strong>Equilibrium:</strong> R = {domesticRate.toFixed(2)}% where money supply meets money demand
              </div>
            </div>

            {/* Exchange Rate Graph */}
            <div className="border-2 border-green-300 rounded-lg p-6 bg-green-50">
              <h3 className="text-lg font-bold mb-4 text-green-800 text-center">
                Interest Parity & Exchange Rate
              </h3>
              <div className="bg-white p-4 rounded relative" style={{ height: '300px' }}>
                <svg width="100%" height="100%" viewBox="0 0 400 300">
                  {/* Axes */}
                  <line x1="50" y1="250" x2="350" y2="250" stroke="black" strokeWidth="2" />
                  <line x1="50" y1="250" x2="50" y2="30" stroke="black" strokeWidth="2" />
                  
                  {/* Labels */}
                  <text x="200" y="280" textAnchor="middle" fontSize="12">Domestic Interest Rate</text>
                  <text x="20" y="140" textAnchor="middle" fontSize="12" transform="rotate(-90 20 140)">Exchange Rate (E)</text>
                  
                  {/* UIP Curve */}
                  <path
                    d={`M ${uipPoints.map((p, i) => 
                      `${i === 0 ? 'M' : 'L'} ${50 + p.rDom * 35} ${250 - p.e * 150}`
                    ).join(' ')}`}
                    stroke="purple"
                    strokeWidth="3"
                    fill="none"
                  />
                  
                  {/* Current Point */}
                  <circle 
                    cx={50 + domesticRate * 35} 
                    cy={250 - exchangeRate * 150} 
                    r="6" 
                    fill="red" 
                    stroke="darkred" 
                    strokeWidth="2"
                  />
                  
                  {/* Foreign Rate Reference Line */}
                  <line 
                    x1={50 + foreignRate * 35} 
                    y1="250" 
                    x2={50 + foreignRate * 35} 
                    y2="30" 
                    stroke="orange" 
                    strokeWidth="2" 
                    strokeDasharray="3,3"
                    opacity="0.5"
                  />
                  
                  {/* Legend */}
                  <line x1="250" y1="50" x2="280" y2="50" stroke="purple" strokeWidth="3" />
                  <text x="285" y="55" fontSize="11">UIP Condition</text>
                  
                  <circle cx="265" cy="70" r="4" fill="red" />
                  <text x="275" y="75" fontSize="11">Current (R, E)</text>
                  
                  <line x1="250" y1="85" x2="280" y2="85" stroke="orange" strokeWidth="2" strokeDasharray="3,3" />
                  <text x="285" y="90" fontSize="11">Foreign R</text>
                </svg>
              </div>
              <div className="mt-3 text-sm text-gray-700 bg-white p-3 rounded">
                <strong>UIP:</strong> R<sub>CHF</sub> ({domesticRate.toFixed(2)}%) vs R<sub>EUR</sub> ({foreignRate.toFixed(1)}%) 
                → E = {exchangeRate.toFixed(3)} {domesticRate > foreignRate ? '(CHF strong)' : '(CHF weak)'}
              </div>
            </div>

            {/* Taylor Rule Graph */}
            <div className="border-2 border-orange-300 rounded-lg p-6 bg-orange-50">
              <h3 className="text-lg font-bold mb-4 text-orange-800 text-center">
                Taylor Rule Policy Response
              </h3>
              <div className="bg-white p-4 rounded relative" style={{ height: '300px' }}>
                <svg width="100%" height="100%" viewBox="0 0 400 300">
                  {/* Axes */}
                  <line x1="50" y1="150" x2="350" y2="150" stroke="black" strokeWidth="2" />
                  <line x1="200" y1="250" x2="200" y2="30" stroke="black" strokeWidth="2" />
                  
                  {/* Grid lines */}
                  <line x1="50" y1="100" x2="350" y2="100" stroke="gray" strokeWidth="1" opacity="0.2" />
                  <line x1="50" y1="200" x2="350" y2="200" stroke="gray" strokeWidth="1" opacity="0.2" />
                  
                  {/* Labels */}
                  <text x="200" y="280" textAnchor="middle" fontSize="12">Inflation - Target (%)</text>
                  <text x="20" y="140" textAnchor="middle" fontSize="12" transform="rotate(-90 20 140)">Policy Rate (%)</text>
                  
                  {/* Taylor Rule Line for current output gap */}
                  {[-3, -2, -1, 0, 1, 2, 3].map((inflDev, idx, arr) => {
                    if (idx === arr.length - 1) return null;
                    const nextInflDev = arr[idx + 1];
                    const r1 = 2 + 1.5 * inflDev + 0.5 * outputGap;
                    const r2 = 2 + 1.5 * nextInflDev + 0.5 * outputGap;
                    return (
                      <line
                        key={idx}
                        x1={200 + inflDev * 40}
                        y1={150 - r1 * 15}
                        x2={200 + nextInflDev * 40}
                        y2={150 - r2 * 15}
                        stroke="orange"
                        strokeWidth="3"
                      />
                    );
                  })}
                  
                  {/* Current Position */}
                  <circle 
                    cx={200 + (inflation - 2) * 40} 
                    cy={150 - taylorRate * 15} 
                    r="6" 
                    fill="red" 
                    stroke="darkred" 
                    strokeWidth="2"
                  />
                  
                  {/* Target inflation line */}
                  <line 
                    x1="200" 
                    y1="30" 
                    x2="200" 
                    y2="250" 
                    stroke="green" 
                    strokeWidth="2" 
                    strokeDasharray="5,5"
                    opacity="0.5"
                  />
                  
                  {/* Legend */}
                  <text x="260" y="50" fontSize="11" fill="green">π = π* (target)</text>
                  <circle cx="280" cy="70" r="4" fill="red" />
                  <text x="290" y="75" fontSize="11">Current policy</text>
                </svg>
              </div>
              <div className="mt-3 text-sm text-gray-700 bg-white p-3 rounded">
                <strong>Taylor Rule:</strong> R = 2% + 1.5×({(inflation-2).toFixed(1)}%) + 0.5×({outputGap.toFixed(1)}%) = {taylorRate.toFixed(2)}%
                <br/><span className="text-xs">Real rate = {(taylorRate - inflation).toFixed(2)}%</span>
              </div>
            </div>

            {/* GDP Components Impact */}
            <div className="border-2 border-indigo-300 rounded-lg p-6 bg-indigo-50">
              <h3 className="text-lg font-bold mb-4 text-indigo-800 text-center">
                Policy Impact on GDP Components
              </h3>
              <div className="bg-white p-4 rounded" style={{ height: '300px' }}>
                <svg width="100%" height="100%" viewBox="0 0 400 300">
                  {/* Calculate impacts based on current settings */}
                  {(() => {
                    const baseline = 100;
                    const rateEffect = (domesticRate - 2) * -5; // Higher R reduces spending
                    const exRateEffect = (1 - exchangeRate) * 100; // Appreciation reduces NX
                    
                    const consumption = Math.max(0, baseline + rateEffect * 0.3);
                    const investment = Math.max(0, baseline + rateEffect * 1.0);
                    const government = baseline; // Assumed constant
                    const netExports = Math.max(-50, baseline + exRateEffect);
                    
                    const bars = [
                      { label: 'C', value: consumption, color: '#3b82f6', x: 70 },
                      { label: 'I', value: investment, color: '#8b5cf6', x: 150 },
                      { label: 'G', value: government, color: '#10b981', x: 230 },
                      { label: 'NX', value: netExports, color: '#f59e0b', x: 310 }
                    ];
                    
                    return (
                      <>
                        {/* Baseline line */}
                        <line x1="40" y1="150" x2="360" y2="150" stroke="gray" strokeWidth="1" strokeDasharray="3,3" />
                        <text x="365" y="155" fontSize="10" fill="gray">Baseline</text>
                        
                        {/* Bars */}
                        {bars.map((bar, idx) => {
                          const height = Math.abs(bar.value - baseline) * 1.5;
                          const y = bar.value >= baseline ? 150 - height : 150;
                          return (
                            <g key={idx}>
                              <rect
                                x={bar.x - 25}
                                y={y}
                                width="50"
                                height={height}
                                fill={bar.color}
                                opacity="0.8"
                              />
                              <text
                                x={bar.x}
                                y="270"
                                textAnchor="middle"
                                fontSize="14"
                                fontWeight="bold"
                              >
                                {bar.label}
                              </text>
                              <text
                                x={bar.x}
                                y={y - 5}
                                textAnchor="middle"
                                fontSize="11"
                                fill={bar.color}
                              >
                                {bar.value.toFixed(0)}
                              </text>
                            </g>
                          );
                        })}
                        
                        {/* Axis */}
                        <line x1="40" y1="250" x2="360" y2="250" stroke="black" strokeWidth="2" />
                        <text x="200" y="295" textAnchor="middle" fontSize="12">GDP = C + I + G + NX</text>
                      </>
                    );
                  })()}
                </svg>
              </div>
              <div className="mt-3 text-sm text-gray-700 bg-white p-3 rounded space-y-1">
                <div><strong>Interest Rate Effect:</strong> R↑ reduces C and I (especially I)</div>
                <div><strong>Exchange Rate Effect:</strong> Strong currency reduces NX</div>
                <div className="text-xs text-gray-500 mt-2">
                  Higher R = {domesticRate.toFixed(2)}% → Tighter policy → Lower GDP
                </div>
              </div>
            </div>
          </div>

          {/* Interactive Tips */}
          <div className="mt-6 bg-gradient-to-r from-blue-50 to-green-50 rounded-lg p-6">
            <h3 className="text-lg font-bold mb-3 text-gray-800">💡 Try These Scenarios:</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
              <div className="bg-white p-3 rounded shadow-sm">
                <strong className="text-blue-600">📈 Monetary Expansion:</strong> Increase money supply to 130 → Watch R fall and E rise (depreciation)
              </div>
              <div className="bg-white p-3 rounded shadow-sm">
                <strong className="text-red-600">📉 Fight Inflation:</strong> Set inflation to 4% → See Taylor rule prescribe higher R to cool economy
              </div>
              <div className="bg-white p-3 rounded shadow-sm">
                <strong className="text-green-600">🌍 Foreign Rate Shock:</strong> Raise foreign rate to 4% → Domestic currency strengthens
              </div>
              <div className="bg-white p-3 rounded shadow-sm">
                <strong className="text-orange-600">📊 Recession Response:</strong> Set output gap to -3% → Taylor rule suggests lower rates
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Active Scenario Flow */}
      <div className="bg-white rounded-xl shadow-lg p-8 mb-8">
        <h2 className="text-2xl font-bold mb-6 text-center text-gray-800">
          {scenarios[activeScenario].title}
        </h2>
        <div className="flex items-center justify-between">
          {scenarios[activeScenario].steps.map((step, idx) => (
            <React.Fragment key={idx}>
              <div className="flex-1">
                <div className={`${step.color} rounded-lg p-6 h-32 flex flex-col justify-center items-center text-center shadow-md`}>
                  <div className="font-bold text-lg mb-2">{step.label}</div>
                  <div className="text-sm">{step.action}</div>
                </div>
              </div>
              {idx < scenarios[activeScenario].steps.length - 1 && (
                <ArrowRight className="mx-4 text-gray-400" size={32} />
              )}
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* Main Relationships Diagram */}
      <div className="bg-white rounded-xl shadow-lg p-8 mb-8">
        <h2 className="text-2xl font-bold mb-6 text-center text-gray-800">
          Core Relationships & Formulas
        </h2>
        
        <div className="grid grid-cols-2 gap-6">
          {/* Money Market Equilibrium */}
          <div className="border-2 border-purple-300 rounded-lg p-6 bg-purple-50">
            <h3 className="text-xl font-bold mb-4 text-purple-800">Money Market Equilibrium</h3>
            <div className="space-y-3">
              <div className="bg-white p-3 rounded border border-purple-200">
                <div className="font-mono text-center text-lg">M<sup>s</sup>/P = L(R, Y)</div>
              </div>
              <div className="text-sm space-y-2">
                <div><strong>M<sup>s</sup></strong>: Money Supply (set by CB)</div>
                <div><strong>P</strong>: Price Level (sticky short-run)</div>
                <div><strong>R</strong>: Interest Rate (adjusts to clear market)</div>
                <div><strong>Y</strong>: Real Income</div>
              </div>
              <div className="mt-4 p-3 bg-purple-100 rounded text-sm">
                <strong>Key:</strong> R ↑ → L(R,Y) ↓ (inverse relationship)<br/>
                Y ↑ → L(R,Y) ↑ (positive relationship)
              </div>
            </div>
          </div>

          {/* Uncovered Interest Parity */}
          <div className="border-2 border-green-300 rounded-lg p-6 bg-green-50">
            <h3 className="text-xl font-bold mb-4 text-green-800">Uncovered Interest Parity (UIP)</h3>
            <div className="space-y-3">
              <div className="bg-white p-3 rounded border border-green-200">
                <div className="font-mono text-center text-lg">R<sub>CHF</sub> = R<sub>EUR</sub> + (E<sup>e</sup> - E)/E</div>
              </div>
              <div className="text-sm space-y-2">
                <div><strong>R<sub>CHF</sub></strong>: Domestic interest rate</div>
                <div><strong>R<sub>EUR</sub></strong>: Foreign interest rate</div>
                <div><strong>E</strong>: Current exchange rate (CHF/EUR)</div>
                <div><strong>E<sup>e</sup></strong>: Expected future exchange rate</div>
              </div>
              <div className="mt-4 p-3 bg-green-100 rounded text-sm">
                <strong>Key:</strong> If R<sub>CHF</sub> ↑ → CHF appreciates (E ↓)<br/>
                Returns must equalize across currencies
              </div>
            </div>
          </div>

          {/* Taylor Rule */}
          <div className="border-2 border-orange-300 rounded-lg p-6 bg-orange-50">
            <h3 className="text-xl font-bold mb-4 text-orange-800">Taylor Rule</h3>
            <div className="space-y-3">
              <div className="bg-white p-3 rounded border border-orange-200">
                <div className="font-mono text-center text-lg">R = R* + f<sub>π</sub>(π - π*) + f<sub>y</sub>(y - y*)</div>
              </div>
              <div className="text-sm space-y-2">
                <div><strong>R*</strong>: Equilibrium rate</div>
                <div><strong>π</strong>: Current inflation, <strong>π*</strong>: Target (2%)</div>
                <div><strong>y</strong>: Output, <strong>y*</strong>: Potential output</div>
                <div><strong>f<sub>π</sub></strong> = 1.5 (inflation response)</div>
                <div><strong>f<sub>y</sub></strong> = 0.5 (output response)</div>
              </div>
              <div className="mt-4 p-3 bg-orange-100 rounded text-sm">
                <strong>Key:</strong> f<sub>π</sub> {'>'}  1 ensures real rate rises<br/>
                when inflation ↑ to cool economy
              </div>
            </div>
          </div>

          {/* National Income Identity */}
          <div className="border-2 border-blue-300 rounded-lg p-6 bg-blue-50">
            <h3 className="text-xl font-bold mb-4 text-blue-800">National Income Identity</h3>
            <div className="space-y-3">
              <div className="bg-white p-3 rounded border border-blue-200">
                <div className="font-mono text-center text-lg">Y = C + I + G + CA</div>
              </div>
              <div className="text-sm space-y-2">
                <div><strong>Y</strong>: GDP/National Income</div>
                <div><strong>C</strong>: Consumption (~51%)</div>
                <div><strong>I</strong>: Investment (~27%, most volatile)</div>
                <div><strong>G</strong>: Government purchases (~12%)</div>
                <div><strong>CA</strong>: Current Account (~10%)</div>
              </div>
              <div className="mt-4 p-3 bg-blue-100 rounded text-sm">
                <strong>Saving Identity:</strong> S = I + CA<br/>
                Save domestically (I) or abroad (CA)
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Transmission Channels */}
      <div className="bg-white rounded-xl shadow-lg p-8">
        <h2 className="text-2xl font-bold mb-6 text-center text-gray-800">
          Monetary Policy Transmission Channels
        </h2>
        
        <div className="grid grid-cols-3 gap-6">
          {/* Interest Rate Channel */}
          <div className="border-2 border-indigo-300 rounded-lg p-6 bg-indigo-50">
            <h3 className="text-lg font-bold mb-4 text-indigo-800 text-center">Interest Rate Channel</h3>
            <div className="space-y-3 text-sm">
              <div className="flex items-center justify-between">
                <span>Policy Rate ↑</span>
                <ArrowRight size={16} />
              </div>
              <div className="flex items-center justify-between">
                <span>All Rates ↑</span>
                <ArrowRight size={16} />
              </div>
              <div className="flex items-center justify-between">
                <span>Borrowing Costs ↑</span>
                <ArrowRight size={16} />
              </div>
              <div className="flex items-center justify-between">
                <span>Investment ↓</span>
                <ArrowRight size={16} />
              </div>
              <div className="flex items-center justify-between">
                <span>Consumption ↓</span>
                <ArrowRight size={16} />
              </div>
              <div className="bg-indigo-100 p-2 rounded text-center font-semibold">
                Aggregate Demand ↓
              </div>
            </div>
          </div>

          {/* Exchange Rate Channel */}
          <div className="border-2 border-teal-300 rounded-lg p-6 bg-teal-50">
            <h3 className="text-lg font-bold mb-4 text-teal-800 text-center">Exchange Rate Channel</h3>
            <div className="space-y-3 text-sm">
              <div className="flex items-center justify-between">
                <span>R<sub>domestic</sub> ↑</span>
                <ArrowRight size={16} />
              </div>
              <div className="flex items-center justify-between">
                <span>Currency Appreciates</span>
                <ArrowRight size={16} />
              </div>
              <div className="flex items-center justify-between">
                <span>Exports ↓</span>
                <ArrowRight size={16} />
              </div>
              <div className="flex items-center justify-between">
                <span>Imports ↑</span>
                <ArrowRight size={16} />
              </div>
              <div className="flex items-center justify-between">
                <span>Net Exports ↓</span>
                <ArrowRight size={16} />
              </div>
              <div className="bg-teal-100 p-2 rounded text-center font-semibold">
                Aggregate Demand ↓
              </div>
            </div>
          </div>

          {/* Wealth/Asset Channel */}
          <div className="border-2 border-pink-300 rounded-lg p-6 bg-pink-50">
            <h3 className="text-lg font-bold mb-4 text-pink-800 text-center">Wealth/Asset Channel</h3>
            <div className="space-y-3 text-sm">
              <div className="flex items-center justify-between">
                <span>Interest Rates ↑</span>
                <ArrowRight size={16} />
              </div>
              <div className="flex items-center justify-between">
                <span>Bond Prices ↓</span>
                <ArrowRight size={16} />
              </div>
              <div className="flex items-center justify-between">
                <span>Stock Prices ↓</span>
                <ArrowRight size={16} />
              </div>
              <div className="flex items-center justify-between">
                <span>Household Wealth ↓</span>
                <ArrowRight size={16} />
              </div>
              <div className="flex items-center justify-between">
                <span>Consumption ↓</span>
                <ArrowRight size={16} />
              </div>
              <div className="bg-pink-100 p-2 rounded text-center font-semibold">
                Aggregate Demand ↓
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Key Takeaways */}
      <div className="mt-8 bg-gradient-to-r from-purple-100 to-blue-100 rounded-xl p-6">
        <h3 className="text-xl font-bold mb-4 text-gray-800">Key Takeaways</h3>
        <ul className="space-y-2 text-sm">
          <li className="flex items-start">
            <span className="text-purple-600 mr-2">•</span>
            <span><strong>Money Market:</strong> Central bank controls Ms, which determines R through equilibrium condition</span>
          </li>
          <li className="flex items-start">
            <span className="text-purple-600 mr-2">•</span>
            <span><strong>Exchange Rates:</strong> Interest rate differentials drive currency movements (UIP)</span>
          </li>
          <li className="flex items-start">
            <span className="text-purple-600 mr-2">•</span>
            <span><strong>Taylor Rule:</strong> Systematic policy response to inflation and output gaps (f<sub>π</sub> {'>'} 1 is crucial)</span>
          </li>
          <li className="flex items-start">
            <span className="text-purple-600 mr-2">•</span>
            <span><strong>Transmission:</strong> Monetary policy affects economy through multiple channels simultaneously</span>
          </li>
          <li className="flex items-start">
            <span className="text-purple-600 mr-2">•</span>
            <span><strong>Real Effects:</strong> Changes in R and E both impact aggregate demand (C, I, CA components)</span>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default MonetaryPolicyDiagram;