import React from 'react';
import { CheckCircle, AlertCircle, Info, User, FileText } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { UniversignType } from '@/types/sageTypes';
import { getAlluniversign } from '@/store/features/universign/selectors';
import { useAppSelector } from '@/store/hooks';
import { formatDateFRCourt } from '@/lib/utils';

const notifications = [
  { id: 1, type: 'success', icon: CheckCircle, title: 'Devis signé', message: 'Le devis DEV-00015 a été signé par ACME Corp', time: '5 min' },
  { id: 2, type: 'info', icon: FileText, title: 'Commande validée', message: 'CMD-00023 validée pour 15 450€', time: '12 min' },
  { id: 3, type: 'warning', icon: AlertCircle, title: 'Nouveau ticket', message: 'Ticket #TK-00042 créé par Sophie Martin', time: '25 min' },
  { id: 4, type: 'info', icon: User, title: 'Nouvel utilisateur', message: 'Marie Dubois a été ajoutée', time: '1h' },
  { id: 5, type: 'success', icon: FileText, title: 'Nouvelle opportunité', message: 'Opportunité "Projet Digital" créée', time: '2h' },
];

const NotificationCenter = ({ onClose }: { onClose: () => void }) => {

  const universign = useAppSelector(getAlluniversign) as UniversignType[];

  const devisSigned = universign.filter(
    (item) => item.local_status === "SIGNE" 
  );


  return (
    <AnimatePresence>
      <motion.div
        initial={{ opacity: 0, scale: 0.95, y: -10 }}
        animate={{ opacity: 1, scale: 1, y: 0 }}
        exit={{ opacity: 0, scale: 0.95, y: -10 }}
        className="absolute right-0 top-12 w-80 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-xl overflow-hidden"
      >
        <div className="p-4 border-b border-gray-200 dark:border-gray-800">
          <h3 className="text-sm font-semibold text-gray-900 dark:text-white">Notifications</h3>
        </div>
        <div className="max-h-96 overflow-y-auto">
          {devisSigned.length > 0 ? (
            devisSigned.map((notif) => (
              <div
                key={notif.id}
                className="p-4 border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-900 cursor-pointer transition-colors"
              >
                <div className="flex gap-3">
                  <div
                    className={`shrink-0 w-8 h-8 rounded-lg flex items-center justify-center bg-green-100 dark:bg-green-900/20 
                      // notif.type === 'success'
                      //   ? 'bg-green-100 dark:bg-green-900/20'
                      //   : notif.type === 'warning'
                      //   ? 'bg-orange-100 dark:bg-orange-900/20'
                      //   : 'bg-blue-100 dark:bg-blue-900/20'
                    `}
                  >
                    <i><CheckCircle></CheckCircle></i>
                    {/* <notif.icon
                      className={`w-4 h-4 ${
                        notif.type === 'success'
                          ? 'text-green-600 dark:text-green-400'
                          : notif.type === 'warning'
                          ? 'text-orange-600 dark:text-orange-400'
                          : 'text-blue-600 dark:text-blue-400'
                      }`}
                    /> */}
                     {/* <notif.icon
                      className={`w-4 h-4 ${
                        notif.type === 'success'
                          ? 'text-green-600 dark:text-green-400'
                          : notif.type === 'warning'
                          ? 'text-orange-600 dark:text-orange-400'
                          : 'text-blue-600 dark:text-blue-400'
                      }`}
                    /> */}
                  </div>

                  <div className="flex-1 min-w-0 text-left">
                    <p className="text-sm font-medium text-gray-900 dark:text-white">
                      Devis signé
                    </p>
                    <p className="text-xs text-gray-600 dark:text-gray-400 mt-0.5">
                      {/* {notif.message} */}
                      {`Le devis ${notif.sage_document_id} a été signé`}
                    </p>
                    <p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
                      {formatDateFRCourt(notif.signed_at)}
                    </p>
                  </div>
                </div>
              </div>
            ))
          ) : (
            <div className="px-6 py-8 text-center text-sm text-gray-500">
              Aucune notification
            </div>
          )}

        </div>
        {/* <div className="p-3 border-t border-gray-200 dark:border-gray-800">
          <button className="w-full text-sm font-medium text-[#941403] hover:text-[#7a1002] transition-colors">
            Voir toutes les notifications
          </button>
        </div> */}
      </motion.div>
    </AnimatePresence>
  );
};

export default NotificationCenter;