import React, { useMemo } from 'react';

// --- Data Generation Logic (Keeps the component clean) ---
const generateData = () => {
  const dates = ['20 June', '21 June', '22 June', '23 June', '24 June', '25 June'];
  
  return dates.map(date => {
    // Generate 1 to 10 messages per day (replicating Pug "Math.random() * 10")
    const msgCount = Math.floor(Math.random() * 10) + 1;
    const messages = Array.from({ length: msgCount }).map((_, i) => ({
      id: `${date}-${i}`,
      // Random height between 50px and 250px
      height: Math.floor(Math.random() * 200) + 50
    }));

    return { date, messages };
  });
};

const TestMessages = () => {
  // Memoize data so it doesn't regenerate on re-renders
  const groups = useMemo(() => generateData(), []);

  return (
    <div className="flex flex-col items-center justify-center w-full min-h-screen bg-black text-white font-sans overflow-hidden">
      
      {/* Scroll Animation Styles 
        We use a scoped style block for the advanced 'view()' timeline logic 
        because Tailwind doesn't support this native CSS feature by default yet.
      */}
      <style>{`
        .scroll-fade-item {
          /* Define the animation range relative to the viewport */
          animation: fade-scale linear both;
          animation-timeline: view();
          
          /* Logic: 
            - 25% to 45%: Fade IN as it approaches center
            - 45% to 55%: FULL visibility (The sweet spot center)
            - 55% to 75%: Fade OUT as it leaves center
          */
          animation-range: entry 25% cover 45%, cover 55% exit 25%;
        }

        @keyframes fade-scale {
          0% { opacity: 0.15; transform: scale(0.9); filter: blur(2px); }
          50% { opacity: 1; transform: scale(1); filter: blur(0px); }
          100% { opacity: 0.15; transform: scale(0.9); filter: blur(2px); }
        }
        
        /* Hide scrollbar for cleaner look */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
      `}</style>

      {/* Viewport Container */}
      <div className="
        relative w-full max-w-[400px] h-[80vh] 
        border border-lime-400/50 shadow-[0_0_15px_rgba(132,204,22,0.2)] 
        rounded-xl overflow-y-auto no-scrollbar
        bg-gray-900/50 backdrop-blur-sm
      ">
        <div className="flex flex-col w-full pb-20">
          
          {groups.map((group) => (
            <div key={group.date} className="flex flex-col gap-5 mb-5">
              
              {/* Sticky Date Header */}
              <div className="sticky top-4 z-20 flex justify-center py-4 pointer-events-none">
                <span className="
                  bg-gray-800/80 backdrop-blur-md 
                  border border-white/10 shadow-lg
                  px-4 py-1 rounded-full 
                  text-xs font-medium tracking-wide text-gray-300
                ">
                  {group.date}
                </span>
              </div>

              {/* Messages Group */}
              <div className="flex flex-col gap-6 px-4">
                {group.messages.map((msg) => (
                  <div 
                    key={msg.id} 
                    className="scroll-fade-item flex items-start gap-4 px-2"
                  >
                    {/* Avatar (Sticky relative to the message group context) */}
                    {/* Size minimized from 60px to 36px (h-9 w-9) */}
                    <div className="
                      sticky top-14 shrink-0 
                      w-9 h-9 rounded-full 
                      bg-gradient-to-br from-gray-700 to-gray-800 
                      border border-gray-600 shadow-inner
                    " />

                    {/* Message Bubble */}
                    <div 
                      className="w-full rounded-2xl bg-gray-800/80 border border-gray-700/50"
                      style={{ height: `${msg.height}px` }}
                    />
                  </div>
                ))}
              </div>
            </div>
          ))}

        </div>
      </div>
      
      <p className="mt-6 text-gray-500 text-xs tracking-widest uppercase">
        Scroll to see focus effect
      </p>
    </div>
  );
};

export default TestMessages;