import { useState } from 'react';
import { Layers } from 'lucide-react';
import HeightMapPreview from '@/components/studio/HeightMapPreview';
import { Image as ContentImage } from '@/components/ui/image';

// Preview of how the processed mask is interpreted per application mode.
// All five remain previews until the Geometry Engine returns real geometry.
const MODES = [
  ['colour_texture', 'Colour texture', 'Visual colour applied — no geometry change.'],
  ['raised_emboss', 'Emboss source', 'Opaque mask raised above the cover surface.'],
  ['engraving', 'Engraving source', 'Mask engraved into the cover surface.'],
  ['sculpted_relief', 'Relief height map', 'Luminance mapped to surface relief.'],
  ['stencil', 'Stencil source', 'Mask used as a cut-through stencil.']
];

function ModeTile({ mode, label, desc, url, active, onClick }) {
  return (
    <button onClick={onClick} className={`text-left rounded-xl border p-0 overflow-hidden transition ${active ? 'border-cyan-400/55 ring-1 ring-cyan-400/30' : 'border-white/[0.06] hover:border-cyan-400/30'}`}>
      <div className="checkerboard relative grid h-28 place-items-center overflow-hidden">
        {url ? (
          mode === 'raised_emboss' ? (
            <ContentImage src={url} fittingType="fit" className="h-full w-full" style={{ filter: 'brightness(1.15) contrast(1.4) drop-shadow(0 2px 3px rgba(0,0,0,0.6))' }} />
          ) : mode === 'engraving' ? (
            <ContentImage src={url} fittingType="fit" className="h-full w-full" style={{ filter: 'invert(1) brightness(0.8) contrast(1.3)' }} />
          ) : mode === 'stencil' ? (
            <ContentImage src={url} fittingType="fit" className="h-full w-full" style={{ filter: 'contrast(2) brightness(0)' }} />
          ) : mode === 'colour_texture' ? (
            <ContentImage src={url} fittingType="fit" className="h-full w-full" />
          ) : (
            <ContentImage src={url} fittingType="fit" className="h-full w-full" style={{ filter: 'saturate(0.6) contrast(1.2)' }} />
          )
        ) : <span className="text-[10px] text-slate-500">No mask yet</span>}
        <span className="absolute left-2 top-2 rounded border border-white/10 bg-black/45 px-1.5 py-0.5 text-[9px] uppercase tracking-wider text-slate-300 backdrop-blur">{label}</span>
      </div>
      <p className="px-2.5 py-1.5 text-[10px] leading-4 text-slate-400">{desc}</p>
    </button>
  );
}

export default function ConversionPreview({ processedUrl, emboss, depth, inverted, smoothing }) {
  const [active, setActive] = useState('sculpted_relief');
  return (
    <div className="space-y-3">
      <div className="grid grid-cols-2 gap-2">
        {MODES.slice(0, 4).map(([k, l, d]) => (
          <ModeTile key={k} mode={k} label={l} desc={d} url={processedUrl} active={active === k} onClick={() => setActive(k)} />
        ))}
      </div>
      <div>
        <div className="mb-1 flex items-center gap-1.5 text-[11px] font-semibold text-slate-200"><Layers size={12} className="text-cyan-300" />Relief height-map preview</div>
        <HeightMapPreview imageUrl={processedUrl} emboss={emboss} depth={depth} inverted={inverted} smoothing={smoothing} />
      </div>
      <div className="warning-box">Conversion preview — final printable geometry not yet generated. Real displacement, emboss and engraving geometry require the LimbForge Geometry Engine.</div>
    </div>
  );
}