import React from 'react';
import { mdiChartBar, mdiChevronRight } from '@mdi/js';
import BaseIcon from '../../BaseIcon';
import Link from 'next/link';
import { useAppSelector } from '../../../stores/hooks';

const ProfitLossSummaryChart = () => {
  const { stats, loading } = useAppSelector((state) => state.dashboard);

  const revenue = stats?.revenue || 0;
  const expenses = stats?.expenses || 0;
  const profit = stats?.profit || 0;

  // Calculate percentages for progress bars (simplified)
  const max = Math.max(revenue, expenses) || 1;
  const revenuePercent = (revenue / max) * 100;
  const expensesPercent = (expenses / max) * 100;

  return (
    <div className="bg-gradient-to-br from-indigo-600 to-indigo-700 dark:from-indigo-800 dark:to-indigo-900 rounded-[1.5rem] p-8 shadow-xl overflow-hidden flex flex-col h-full relative">
      <div className="absolute top-0 right-0 p-8 opacity-10 pointer-events-none">
        <BaseIcon path={mdiChartBar} size={128} />
      </div>
      
      <div className="flex items-center justify-between mb-10 relative z-10">
        <h2 className="text-xl font-bold text-white flex items-center">
          <div className="w-10 h-10 bg-white/20 backdrop-blur-md rounded-xl flex items-center justify-center mr-3 shadow-lg">
            <BaseIcon path={mdiChartBar} size={24} className="text-white" />
          </div>
          P&L Summary
        </h2>
      </div>
      
      <div className="flex-grow space-y-6 relative z-10">
        <div className="flex items-center justify-between group cursor-default">
          <span className="text-indigo-100 text-sm font-medium tracking-wide group-hover:text-white transition-colors">Revenue</span>
          <span className="text-white text-lg font-bold tracking-tight">ETB {Number(revenue).toLocaleString()}</span>
        </div>
        
        <div className="w-full bg-white/10 backdrop-blur-sm rounded-full h-1.5 mb-6 overflow-hidden">
          <div className="bg-emerald-400 h-full rounded-full transition-all duration-1000" style={{ width: `${revenuePercent}%` }}></div>
        </div>
        
        <div className="flex items-center justify-between group cursor-default">
          <span className="text-indigo-100 text-sm font-medium tracking-wide group-hover:text-white transition-colors">Expenses</span>
          <span className="text-white text-lg font-bold tracking-tight">ETB {Number(expenses).toLocaleString()}</span>
        </div>
        
        <div className="w-full bg-white/10 backdrop-blur-sm rounded-full h-1.5 mb-6 overflow-hidden">
          <div className="bg-rose-400 h-full rounded-full transition-all duration-1000" style={{ width: `${expensesPercent}%` }}></div>
        </div>
        
        <div className="pt-4 border-t border-white/10 flex items-center justify-between group cursor-default">
          <span className="text-indigo-100 text-base font-bold tracking-wide group-hover:text-white transition-colors">Net Profit</span>
          <div className="flex flex-col items-end">
             <span className="text-white text-2xl font-black tracking-tight">ETB {Number(profit).toLocaleString()}</span>
          </div>
        </div>
      </div>
      
      <div className="mt-10 relative z-10">
        <Link href="/financial-reports">
          <button className="w-full py-4 px-6 bg-white/10 backdrop-blur-md hover:bg-white/20 border border-white/20 text-white rounded-2xl text-sm font-bold flex items-center justify-center transition-all active:scale-[0.98] shadow-lg group">
            View Full Report
            <BaseIcon path={mdiChevronRight} size={20} className="ml-1 group-hover:translate-x-1 transition-transform" />
          </button>
        </Link>
      </div>
    </div>
  );
};

export default ProfitLossSummaryChart;