import React, { ReactNode } from 'react';

type Size = 'sm' | 'md' | 'lg';
type Color = 'black' | 'white' | 'silver';

interface IphoneMockupProps {
  children: ReactNode;
  size?: Size;
  color?: Color;
  showDynamicIsland?: boolean;
  aspectRatio?: string;
  className?: string;
}

const IphoneMockup: React.FC<IphoneMockupProps> = ({
  children,
  size = 'md',
  color = 'black',
  showDynamicIsland = true,
  aspectRatio = '0/0',
  className = '',
}) => {
  const parsedAspect = aspectRatio.replace('/', ' / ');

  const sizeClass = {
    sm: 'max-w-[280px]',
    md: 'max-w-[375px]',
    lg: 'max-w-[500px]',
  }[size];

  const colorClasses = {
    black: [
      'bg-gradient-to-b from-slate-900/95 to-slate-950/95',
      'border-8 border-slate-950/40',
      'shadow-[0_35px_60px_-15px_rgba(0,0,0,0.7)] shadow-slate-950/60',
      "before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-r before:from-white/10 before:to-transparent before:rounded-[3rem] before:pointer-events-none",
      "after:content-[''] after:absolute after:inset-0 after:bg-gradient-to-b after:from-white/15 after:via-transparent after:to-black/10 after:rounded-[3rem] after:pointer-events-none after:opacity-80",
    ].join(' '),
    white: [
      'bg-gradient-to-b from-white/95 to-gray-100/95 backdrop-blur-sm',
      'border-8 border-white/60',
      'shadow-[0_35px_60px_-15px_rgba(255,255,255,0.5)] shadow-black/20',
      "before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-r before:from-black/8 before:to-transparent before:rounded-[3rem] before:pointer-events-none",
      "after:content-[''] after:absolute after:inset-0 after:bg-gradient-to-b after:from-black/5 after:via-transparent after:to-white/10 after:rounded-[3rem] after:pointer-events-none after:opacity-80",
    ].join(' '),
    silver: [
      'bg-gradient-to-b from-gray-200/95 to-gray-300/95',
      'border-8 border-gray-400/50',
      'shadow-[0_35px_60px_-15px_rgba(0,0,0,0.5)] shadow-gray-900/40',
      "before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-r before:from-white/20 before:to-transparent before:rounded-[3rem] before:pointer-events-none",
      "after:content-[''] after:absolute after:inset-0 after:bg-gradient-to-b after:from-white/25 after:via-transparent after:to-gray-900/10 after:rounded-[3rem] after:pointer-events-none after:opacity-80",
    ].join(' '),
  };

  const colorClass = colorClasses[color];

  const baseClass = `relative mx-auto rounded-[3rem] overflow-visible ${sizeClass} w-full ${colorClass} ${className}`;

  const screenClass = 'absolute inset-0 mx-[1.75rem] mt-[2.6rem] mb-[3.2rem] bg-neutral-900/98 rounded-[2.25rem] overflow-hidden shadow-[inset_0_2px_8px_rgba(255,255,255,0.08),inset_0_-2px_8px_rgba(0,0,0,0.4)] relative z-10';

  const reflection1Class = 'absolute inset-0 bg-gradient-to-b from-white/25 via-transparent to-black/25 z-20 pointer-events-none opacity-90';
  const reflection2Class = 'absolute inset-0 bg-gradient-to-r from-transparent via-white/8 to-transparent z-30 pointer-events-none opacity-90';

  const dynamicIslandClass = 'absolute -top-[0.45rem] left-1/2 -translate-x-1/2 w-[5.75rem] h-[1.15rem] bg-neutral-950/98 backdrop-blur-md rounded-full shadow-[0_8px_20px_rgba(0,0,0,0.6)] border border-neutral-800/60 z-40';

  return (
    <div className={baseClass} style={{ aspectRatio: parsedAspect }}>
      <div className={screenClass}>
        <div className={reflection1Class} />
        <div className={reflection2Class} />
        <div className="h-full w-full relative z-50 flex items-center justify-center bg-gradient-to-br from-gray-900 to-black">
          {children}
        </div>
      </div>
      {showDynamicIsland && <div className={dynamicIslandClass} />}
    </div>
  );
};

export default IphoneMockup;

// Exemplo de uso:
/*
<div className="p-12 bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 min-h-screen flex flex-col md:flex-row items-center justify-center gap-8 py-24">
  <IphoneMockup size="lg" color="black" showDynamicIsland={true}>
    <img 
      src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=400&h=850&fit=crop"
      alt="Mockup com imagem"
      className="w-full h-full object-cover"
    />
  </IphoneMockup>

  <IphoneMockup size="md" color="silver" className="shadow-2xl">
    <video 
      autoPlay 
      loop 
      muted 
      playsInline 
      className="w-full h-full object-cover"
      poster="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=400&h=850&fit=crop"
    >
      <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4" />
      Seu navegador não suporta o elemento de vídeo.
    </video>
  </IphoneMockup>
</div>
*/