import React, { useEffect, useState } from 'react';
import {
  FaCheckCircle,
  FaClock,
  FaHourglassHalf,
  FaTasks,
  FaChevronDown,
  FaPlus,
  FaUserPlus,
  FaFilter,
  FaCalendarAlt
} from 'react-icons/fa';

// Define a type for card data
interface CardData {
  title: string;
  count: number;
  icon: JSX.Element;
  gradient: string;
  shadowColor: string;
  iconBg: string;
  textColor: string;
  percentage?: number;
  trend?: 'up' | 'down' | 'stable';
}

// interface CardData {
//   title: string;
//   count: number;
//   icon: React.ReactNode;
//   gradient: string;
//   shadowColor: string;
//   iconBg: string;
//   textColor: string;
//   trend: 'up' | 'down';
// }

interface CardsProps {
  type?: 'dashboard' | 'account' | 'transactions';
  onOpenModal?: () => void;
  dashboardData: any;
  fromDate: string;
  toDate: string;
  onDateRangeChange: (range: { from: string; to: string }) => void;
  cards: CardData[];
  isLoading: boolean
}




const AccountData: CardData[] = [
  {
    title: 'Active Accounts',
    count: 12,
    icon: <FaTasks size={18} className="text-blue-600" />,
    gradient: 'bg-gradient-to-br from-blue-50 to-blue-100',
    shadowColor: 'shadow-blue-200/50',
    iconBg: 'bg-blue-100 border-blue-200',
    textColor: 'text-blue-700',
    trend: 'up'
  },
  {
    title: 'In-Progress',
    count: 8,
    icon: <FaClock size={18} className="text-purple-600" />,
    gradient: 'bg-gradient-to-br from-purple-50 to-purple-100',
    shadowColor: 'shadow-purple-200/50',
    iconBg: 'bg-purple-100 border-purple-200',
    textColor: 'text-purple-700',
    trend: 'stable'
  },

  {
    title: 'Completed',
    count: 27,
    icon: <FaCheckCircle size={18} className="text-green-600" />,
    gradient: 'bg-gradient-to-br from-green-50 to-green-100',
    shadowColor: 'shadow-green-200/50',
    iconBg: 'bg-green-100 border-green-200',
    textColor: 'text-green-700',
    trend: 'up'
  },
  {
    title: 'Inactive',
    count: 5,
    icon: <FaHourglassHalf size={18} className="text-gray-600" />,
    gradient: 'bg-gradient-to-br from-gray-50 to-gray-100',
    shadowColor: 'shadow-gray-200/50',
    iconBg: 'bg-gray-100 border-gray-200',
    textColor: 'text-gray-700',
    trend: 'down'
  },
];

const filters = ['Last 7 Days', 'Last 30 Days', 'Last 6 Months', 'This Year'];
const accounts = ['All Accounts', 'Account 1', 'Account 2', 'Account 3'];

const Cards: React.FC<CardsProps> = ({ type = 'dashboard', onOpenModal, onDateRangeChange, cards, isLoading }) => {
  const [selectedFilter, setSelectedFilter] = useState<string>('Last 7 Days');
  const [selectedAccount, setSelectedAccount] = useState<string>('All Accounts');
  const [showCards, setShowCards] = useState<CardData[]>([]);
  // const [isLoading, setIsLoading] = useState<boolean>(true);

  // useEffect(() => {
  //   setIsLoading(true);
  //   setTimeout(() => {
  //     if (type === 'account') {
  //       setShowCards(AccountData);
  //     } else {
  //       setShowCards(cards);
  //     }
  //     setIsLoading(false);
  //   }, 500);
  // }, [type]);

  useEffect(() => {

    if (type === 'dashboard') {
      const now = new Date();
      let fromDate = new Date();

      switch (selectedFilter) {
        case 'Last 7 Days':
          fromDate.setDate(now.getDate() - 7);
          break;
        case 'Last 30 Days':
          fromDate.setDate(now.getDate() - 30);
          break;
        case 'Last 6 Months':
          fromDate.setMonth(now.getMonth() - 6);
          break;
        case 'This Year':
          fromDate = new Date(now.getFullYear(), 0, 1);
          break;
        default:
          fromDate.setDate(now.getDate() - 7);
      }

      const from = fromDate.toISOString().split('T')[0];
      const to = now.toISOString().split('T')[0];

      onDateRangeChange({ from, to });
    }
  }, [selectedFilter]);

  const getButtonConfig = () => {
    switch (type) {
      case 'account':
        return {
          text: 'Add Account',
          icon: <FaPlus size={14} />,
          gradient: 'bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800'
        };
      case 'transactions':
        return {
          text: 'Send Invite',
          icon: <FaUserPlus size={14} />,
          gradient: 'bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800'
        };
      default:
        return null;
    }
  };

  const buttonConfig = getButtonConfig();

  const renderTrendIndicator = (trend: string | undefined, percentage: number | undefined) => {
    if (!trend || !percentage) return null;

    const trendColors = {
      up: 'text-emerald-500',
      down: 'text-red-500',
      stable: 'text-gray-500'
    };

    const trendSymbols = {
      up: '↗',
      down: '↘',
      stable: '→'
    };

    return (
      <div className={`flex items-center text-xs ${trendColors[trend as keyof typeof trendColors]} mt-1`}>
        <span className="mr-1">{trendSymbols[trend as keyof typeof trendSymbols]}</span>
        {/* <span>{percentage}%</span> */}
      </div>
    );
  };

  // if (isLoading) {
  //   return (
  //     <div className="w-full [h-50vh] px-6 py-8">
  //       <div className="animate-pulse">
  //         <div className="h-8 bg-gray-200 rounded w-32 mb-8"></div>
  //         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
  //           {[...Array(7)].map((_, i) => (
  //             <div key={i} className="h-32 bg-gray-200 rounded-xl"></div>
  //           ))}
  //         </div>
  //       </div>
  //     </div>
  //   );
  // }

  return (
    <div className="w-full px-3  rounded-md">
      {/* Header */}
      <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between mb-2 gap-4">
        <div className="flex items-center gap-3">
          {/* <div className="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
            <FaFilter className="text-white text-lg" />
          </div> */}
          <div>
            {/* <h2 className="text-lg font-semibold text-gray-800">Overview</h2> */}
            {/* <p className="text-gray-600 text-sm">Monitor performance metrics</p> */}
          </div>
        </div>


      </div>

      {/* Cards */}
      {isLoading ? <div className="w-full [h-50vh] px-6 py-8">
        <div className="animate-pulse">
          <div className="h-8 bg-gray-200 rounded w-32 mb-8"></div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {[...Array(7)].map((_, i) => (
              <div key={i} className="h-32 bg-gray-200 rounded-xl"></div>
            ))}
          </div>
        </div>
      </div> :
        <div className="flex flex-wrap gap-2 justify-end">
          {cards.map((card, index) => (
            <div
              key={card.title}
              className={`group relative overflow-hidden rounded-lg ${card.gradient} border border-white/40 px-3 py-1 transition-all duration-300 hover:scale-105 hover:shadow-lg ${card.shadowColor} cursor-pointer backdrop-blur-sm min-w-[200px] max-w-[220px]`}
              style={{
                animationDelay: `${index * 100}ms`
              }}
            >
              {/* Background Pattern */}
              <div className="absolute inset-0 opacity-5">
                <div className="absolute -top-6 -right-6 w-12 h-12 rounded-full bg-current"></div>
                <div className="absolute -bottom-6 -left-6 w-10 h-10 rounded-full bg-current"></div>
              </div>

              {/* Content */}
              <div className="relative flex justify-between items-center z-10">
                <div className="flex items-center gap-2">
                  <div className={`p-2 rounded-lg border ${card.iconBg} group-hover:scale-110 transition-transform duration-200`}>
                    {card.icon}
                  </div>
                  <h3 className="text-sm font-medium text-gray-600 group-hover:text-gray-700 transition-colors">
                    {card.title}
                  </h3>
                </div>

                <div className="flex items-center">
                  <p className={`text-xl font-bold ${card.textColor} group-hover:scale-105 transition-transform duration-200 leading-none mb-1`}>
                    {card.count}
                  </p>
                </div>
              </div>

              {/* Hover Effect */}
              <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            </div>
          ))}
        </div>

      }
    </div>
  );
};

export default Cards;




{/* <div className="flex flex-wrap gap-3 w-full lg:w-auto">
          {type === 'dashboard' && <>
            Account Selector
            <div className="relative">
              <select
                value={selectedAccount}
                onChange={(e) => setSelectedAccount(e.target.value)}
                className="appearance-none text-sm text-gray-700 border border-gray-300 rounded-xl px-4 py-3 pr-10 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white shadow-sm hover:shadow-md transition-all cursor-pointer min-w-[140px]"
              >
                {accounts.map((account) => (
                  <option key={account} value={account}>{account}</option>
                ))}
              </select>
              <FaChevronDown className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs pointer-events-none" />
            </div>

            Date Filter
            <div className="relative">
              <select
                value={selectedFilter}
                onChange={(e) => setSelectedFilter(e.target.value)}
                className="appearance-none text-sm text-gray-700 border border-gray-300 rounded-xl px-4 py-3 pr-10 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white shadow-sm hover:shadow-md transition-all cursor-pointer min-w-[140px]"
              >
                {filters.map((filter) => (
                  <option key={filter} value={filter}>{filter}</option>
                ))}
              </select>
              <FaCalendarAlt className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs pointer-events-none" />
            </div>
          </>}

          Action Button
          {buttonConfig && (
            <button
              className={`flex items-center gap-1 px-3 py-3 text-sm font-semibold text-white rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105 active:scale-95 cursor-pointer ${buttonConfig.gradient}`}
              onClick={onOpenModal}
            >
              {buttonConfig.icon}
              {buttonConfig.text}
            </button>
          )}
        </div> */}