import { Image as ContentImage } from '@/components/ui/image';
import { Sparkles, ShieldAlert } from 'lucide-react';

// Honest 2D browser adaptation preview.
// Composites the design's master artwork pieces onto the cover preview using
// NORMALISED (0..1) positions/scales produced by computeAdaptation(). This is a
// placement preview only — it is never presented as final printable geometry.
export default function AdaptationPreview({ cover, adaptation, layerImages = {}, demo = false, className = '' }) {
  const layers = Array.isArray(adaptation?.adaptedLayers) ? adaptation.adaptedLayers : [];
  const warnings = Array.isArray(adaptation?.protectedZoneWarnings) ? adaptation.protectedZoneWarnings : [];

  return (
    <div className={`viewport-grid relative aspect-[3/4] w-full overflow-hidden rounded-2xl border border-white/[0.07] ${className}`}>
      {cover?.previewImageUrl ? (
        <ContentImage src={cover.previewImageUrl} alt={cover.name || 'Cover'} fittingType="fill" className="absolute inset-0 h-full w-full opacity-90" />
      ) : (
        <div className="checkerboard absolute inset-0 grid place-items-center text-slate-500">
          <div className="text-center"><Sparkles size={30} className="mx-auto mb-2 text-cyan-400/40" /><p className="text-xs">No cover preview model</p></div>
        </div>
      )}

      {/* Decoration area boundary (normalised rect from adaptation) */}
      {adaptation?.decorationRect && (
        <div
          className="pointer-events-none absolute rounded border border-dashed border-cyan-400/40"
          style={{
            left: `${adaptation.decorationRect.x * 100}%`,
            top: `${adaptation.decorationRect.y * 100}%`,
            width: `${adaptation.decorationRect.w * 100}%`,
            height: `${adaptation.decorationRect.h * 100}%`
          }}
        />
      )}

      {/* Adapted design layers */}
      {layers.map((a) => {
        const url = layerImages[a.layerId];
        if (!url) return null;
        const w = Math.max(4, (a.relativeWidth || 0.4) * 100);
        const h = Math.max(4, (a.relativeHeight || 0.4) * 100);
        const transform = `translate(-50%, -50%)${a.mirrored ? ' scaleX(-1)' : ''} rotate(${a.rotation || 0}deg)`;
        return (
          <div key={a.layerId || a.name} className="absolute" style={{ left: `${a.positionU * 100}%`, top: `${a.positionV * 100}%`, width: `${w}%`, height: `${h}%`, transform }}>
            <img
              src={url}
              alt={a.name || 'Design piece'}
              className={`h-full w-full object-contain drop-shadow-[0_2px_8px_rgba(0,0,0,0.6)] ${a.focal ? 'ring-2 ring-cyan-400/80' : ''} ${a.clipped ? 'opacity-80' : 'opacity-95'}`}
            />
            {a.repeated && <span className="absolute right-1 top-1 rounded bg-cyan-400/80 px-1 text-[8px] text-slate-950">↻</span>}
          </div>
        );
      })}

      {/* Focal-point marker */}
      {adaptation?.focalPointResults?.anchor && (
        <div className="pointer-events-none absolute" style={{ left: `${adaptation.focalPointResults.anchor.u * 100}%`, top: `${adaptation.focalPointResults.anchor.v * 100}%`, transform: 'translate(-50%,-50%)' }}>
          <span className="block h-3 w-3 rounded-full border-2 border-cyan-300 bg-cyan-400/30" />
        </div>
      )}

      {/* Warnings */}
      {warnings.length > 0 && (
        <div className="absolute left-2 top-2 flex max-w-[70%] flex-col gap-1">
          {warnings.map((w, i) => (
            <span key={i} className="inline-flex items-center gap-1 rounded border border-amber-400/40 bg-amber-400/10 px-1.5 py-0.5 text-[9px] text-amber-100 backdrop-blur"><ShieldAlert size={10} />{w}</span>
          ))}
        </div>
      )}

      <span className="pointer-events-none absolute right-2 top-2 sim-badge">{demo ? 'Demonstration preview' : 'Adaptation preview'}</span>
      <span className="pointer-events-none absolute bottom-2 left-1/2 -translate-x-1/2 max-w-[92%] rounded border border-amber-400/30 bg-amber-400/10 px-2 py-1 text-center text-[9px] leading-3 text-amber-100 backdrop-blur">
        This preview shows how the design is intended to fit. Final surface wrapping and print checks happen during 3D processing.
      </span>
    </div>
  );
}