'use client';

import React, { useRef, useEffect, useCallback } from 'react';

export default function PhoneWidget() {
  const stageRef = useRef<HTMLDivElement>(null);

  const onMove = useCallback((e: MouseEvent) => {
    const el = stageRef.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width - 0.5;
    const py = (e.clientY - r.top) / r.height - 0.5;
    el.style.setProperty('--rx', `${(-py * 8).toFixed(2)}deg`);
    el.style.setProperty('--ry', `${(px * 10).toFixed(2)}deg`);
    el.style.setProperty('--tx', `${(px * 18).toFixed(1)}px`);
    el.style.setProperty('--ty', `${(py * 18).toFixed(1)}px`);
  }, []);

  const onLeave = useCallback(() => {
    const el = stageRef.current;
    if (!el) return;
    el.style.setProperty('--rx', '0deg');
    el.style.setProperty('--ry', '0deg');
    el.style.setProperty('--tx', '0px');
    el.style.setProperty('--ty', '0px');
  }, []);

  useEffect(() => {
    const el = stageRef.current;
    if (!el) return;
    el.addEventListener('mousemove', onMove);
    el.addEventListener('mouseleave', onLeave);
    return () => {
      el.removeEventListener('mousemove', onMove);
      el.removeEventListener('mouseleave', onLeave);
    };
  }, [onMove, onLeave]);

  return (
    <>
      <style>{`
        @keyframes pwOrbFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-22px) scale(1.04)} }
        @keyframes pwOrb2Float { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(18px) scale(0.97)} }
        @keyframes pwGlow { 0%,100%{box-shadow:0 0 30px rgba(244,190,40,0.2)} 50%{box-shadow:0 0 60px rgba(244,190,40,0.5),0 0 120px rgba(244,190,40,0.2)} }
        @keyframes pwScreenShimmer { 0%{left:-40%} 60%{left:120%} 100%{left:120%} }
        .pw-hero-grid { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6vw; width: 100%; }
        @media (max-width: 900px) { .pw-hero-grid { grid-template-columns: 1fr; } .pw-widget-col { display: none; } }
      `}</style>

      <div
        ref={stageRef}
        style={{
          position: 'relative', display: 'flex',
          justifyContent: 'center', alignItems: 'center',
          perspective: 1200, cursor: 'default',
        }}
      >
        <div style={{
          transformStyle: 'preserve-3d',
          transform: 'rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate(var(--tx,0px), var(--ty,0px))',
          transition: 'transform 0.5s cubic-bezier(0.22,1,0.36,1)',
          position: 'relative',
        }}>
          {/* Glow ring */}
          <div style={{
            position: 'absolute', inset: -36, borderRadius: '56px',
            background: 'radial-gradient(circle at 50% 50%, rgba(244,190,40,0.2) 0%, transparent 70%)',
            animation: 'pwGlow 3s ease-in-out infinite',
          }} />

          {/* Phone shell */}
          <div style={{
            width: 268, height: 548, borderRadius: '48px',
            background: 'linear-gradient(160deg, #22223a 0%, #10101c 100%)',
            border: '1.5px solid rgba(255,255,255,0.1)',
            boxShadow: '0 70px 130px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.1)',
            display: 'flex', flexDirection: 'column', overflow: 'hidden',
            animation: 'pwOrbFloat 6s ease-in-out infinite', position: 'relative',
          }}>
            {/* Shimmer sweep */}
            <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 20, overflow: 'hidden', borderRadius: '48px' }}>
              <div style={{
                position: 'absolute', top: '-20%', left: 0, width: '40%', height: '140%',
                background: 'linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.07) 50%, transparent 100%)',
                animation: 'pwScreenShimmer 4.5s ease-in-out infinite', animationDelay: '1s',
              }} />
            </div>

            {/* Dynamic island */}
            <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 16, paddingBottom: 4 }}>
              <div style={{ width: 96, height: 28, borderRadius: 20, background: '#080810', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
                <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#1a1a28', border: '1px solid rgba(255,255,255,0.08)' }} />
                <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#0d0d18' }} />
              </div>
            </div>

            {/* Header */}
            <div style={{ padding: '8px 22px 12px' }}>
              <div style={{ fontSize: 10, color: '#f4be28', fontWeight: 700, fontFamily: 'Sora, sans-serif', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Good Morning</div>
              <div style={{ fontSize: 16, color: '#fff', fontWeight: 800, fontFamily: 'Sora, sans-serif', marginTop: 2 }}>Loyaly ✦</div>
            </div>

            {/* LYT balance card */}
            <div style={{
              margin: '0 14px', borderRadius: 22,
              background: 'linear-gradient(135deg, #f4be28 0%, #e09820 100%)',
              padding: '18px 20px', boxShadow: '0 8px 24px rgba(244,190,40,0.35)',
              position: 'relative', overflow: 'hidden',
            }}>
              <div style={{ position: 'absolute', top: '-30%', right: '-10%', width: 110, height: 110, borderRadius: '50%', background: 'rgba(255,255,255,0.12)' }} />
              <div style={{ fontSize: 10, color: 'rgba(23,21,18,0.65)', fontWeight: 700, fontFamily: 'Sora, sans-serif', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Total LYT</div>
              <div style={{ fontSize: 34, color: '#171512', fontWeight: 900, fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em', marginTop: 2 }}>284</div>
              <div style={{ fontSize: 10, color: 'rgba(23,21,18,0.6)', fontFamily: 'Sora, sans-serif', marginTop: 4 }}>≈ ₹284 redeemable</div>
            </div>

            {/* Activity feed */}
            <div style={{ padding: '14px 12px', display: 'flex', flexDirection: 'column', gap: 7, flex: 1 }}>
              {[
                { label: 'Daily Login',     pts: '+50',  color: '#4ade80' },
                { label: 'Walking 5k Steps', pts: '+80',  color: '#4ade80' },
                { label: 'Spin Wheel',      pts: '-50',  color: '#f87171' },
              ].map((item, i) => (
                <div key={i} style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  background: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: '10px 13px',
                  border: '1px solid rgba(255,255,255,0.06)',
                }}>
                  <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.78)', fontFamily: 'Sora, sans-serif' }}>{item.label}</span>
                  <span style={{ fontSize: 12, color: item.color, fontWeight: 700, fontFamily: 'Sora, sans-serif' }}>{item.pts}</span>
                </div>
              ))}
            </div>

            {/* Nav dots */}
            <div style={{ display: 'flex', justifyContent: 'center', gap: 6, padding: '10px 0 20px' }}>
              {[1, 0, 0, 0].map((a, i) => (
                <div key={i} style={{ width: a ? 22 : 6, height: 4, borderRadius: 2, background: a ? '#f4be28' : 'rgba(255,255,255,0.2)' }} />
              ))}
            </div>
          </div>

          {/* Floating chip — top left */}
          <div style={{
            position: 'absolute', top: '12%', left: '-22%', borderRadius: 16,
            padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 10,
            background: 'rgba(255,255,255,0.08)', backdropFilter: 'blur(20px)',
            border: '1px solid rgba(255,255,255,0.12)',
            boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
            animation: 'pwOrb2Float 7s ease-in-out infinite',
          }}>
            <div style={{ width: 30, height: 30, borderRadius: 9, background: 'rgba(74,222,128,0.16)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#4ade80', fontSize: 14, fontWeight: 800 }}>↑</div>
            <div>
              <div style={{ fontSize: 11, fontWeight: 700, color: '#fff', fontFamily: 'Sora, sans-serif' }}>+120 LYT</div>
              <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif' }}>just now</div>
            </div>
          </div>

          {/* Floating chip — bottom right */}
          <div style={{
            position: 'absolute', bottom: '14%', right: '-22%', borderRadius: 16,
            padding: '12px 16px',
            background: 'rgba(255,255,255,0.08)', backdropFilter: 'blur(20px)',
            border: '1px solid rgba(255,255,255,0.12)',
            boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
            animation: 'pwOrbFloat 8s ease-in-out infinite',
          }}>
            <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.45)', fontFamily: 'Sora, sans-serif', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 3 }}>Redeemable</div>
            <div style={{ fontSize: 17, fontWeight: 900, color: '#f4be28', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em' }}>₹284.00</div>
          </div>
        </div>
      </div>
    </>
  );
}
