// Demo data + shared constants + mapping helpers for the Universal Design Canvas prototype.
// All SVGs are inline data-URIs so the prototype never depends on network images.

export const uid = () => Math.random().toString(36).slice(2, 9);

const enc = (s) => `data:image/svg+xml;utf8,${encodeURIComponent(s)}`;

export const DEMO_SVGS = {
  emblem: enc(`<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'>
    <defs><radialGradient id='g' cx='50%' cy='42%'><stop offset='0%' stop-color='%237df9ff'/><stop offset='100%' stop-color='%2315b8d4'/></radialGradient></defs>
    <g fill='none' stroke='%2338e0f2' stroke-width='3' opacity='0.85'><circle cx='110' cy='110' r='78'/><path d='M110 28V192 M28 110H192 M52 52L168 168 M168 52L52 168'/></g>
    <path d='M110 55 L150 110 L110 165 L70 110 Z' fill='url(%23g)' opacity='0.95'/>
    <circle cx='110' cy='110' r='20' fill='%23a78bfa'/></svg>`),
  web: enc(`<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'>
    <g fill='none' stroke='%2322d3ee' stroke-width='1.6' opacity='0.7'>
    <path d='M120 8 L120 232 M8 120 L232 120 M28 28L212 212 M212 28L28 212'/>
    <circle cx='120' cy='120' r='40'/><circle cx='120' cy='120' r='74'/><circle cx='120' cy='120' r='108'/></g></svg>`),
  bg: enc(`<svg xmlns='http://www.w3.org/2000/svg' width='240' height='320' viewBox='0 0 240 320'>
    <defs><linearGradient id='b' x1='0' y1='0' x2='0' y2='1'><stop offset='0%' stop-color='%23101824' stop-opacity='0.9'/><stop offset='100%' stop-color='%230b0f14' stop-opacity='0.4'/></linearGradient></defs>
    <rect width='240' height='320' rx='20' fill='url(%23b)'/></svg>`),
  accent: enc(`<svg xmlns='http://www.w3.org/2000/svg' width='80' height='200' viewBox='0 0 80 200'>
    <g fill='none' stroke='%23a78bfa' stroke-width='4' opacity='0.8'><path d='M20 20 L60 40 L20 60 M20 90 L60 110 L20 130 M20 160 L60 180'/></g></svg>`),
  shire: enc(`<svg xmlns='http://www.w3.org/2000/svg' width='120' height='80' viewBox='0 0 120 80'>
    <g fill='none' stroke='%2338e0f2' stroke-width='2'><path d='M60 8 L104 40 L60 72 L16 40 Z'/></g>
    <text x='60' y='46' font-family='Space Grotesk, sans-serif' font-size='20' font-weight='700' fill='%2338e0f2' text-anchor='middle'>S</text></svg>`)
};

export const BEHAVIOURS = [
  ['keep_shape', 'Keep its shape'],
  ['flexible', 'Fit gently'],
  ['repeatable', 'Repeat pattern'],
  ['croppable', 'Fill available area'],
  ['border_following', 'Follow an edge'],
  ['full_wrap', 'Wrap around'],
  ['let_shire_choose', 'Let SHiRE choose']
];

export const EFFECTS = [
  ['colour_texture', 'Colour'],
  ['raised_emboss', 'Raised'],
  ['engraving', 'Engraved'],
  ['stencil', 'Cut-out'],
  ['sculpted_relief', 'Sculpted'],
  ['mixed', 'Let SHiRE choose']
];

export const INTENSITY = [
  ['subtle', 'Subtle'],
  ['standard', 'Standard'],
  ['bold', 'Bold']
];

export const MATERIALS = ['Smooth', 'Matte', 'Gloss', 'Metallic', 'Carbon-style', 'Translucent accent'];

export const PLACEMENTS = [
  ['front_centre', 'Front centre'],
  ['upper_front', 'Upper front'],
  ['lower_front', 'Lower front'],
  ['outer_side', 'Outer side'],
  ['inner_side', 'Inner side'],
  ['rear', 'Rear'],
  ['wrap_around', 'Wrap around'],
  ['full_surface', 'Full cover'],
  ['let_shire_choose', 'Let SHiRE choose']
];

export const REGIONS = [
  ['main_focal', 'Main focal area'],
  ['upper', 'Upper detail area'],
  ['lower', 'Lower detail area'],
  ['background', 'Background pattern area'],
  ['border', 'Border area'],
  ['wrap', 'Optional wrap area']
];

// Friendly concept presets for PromptForge (clearly different, original-inspired).
export const CONCEPT_PRESETS = [
  { title: 'Clean Hero', description: 'A bold single emblem with clean lines and a bright cyan accent.', palette: ['#0ea5b7', '#7df9ff', '#0b0f14'], treatment: 'Colour design', svg: DEMO_SVGS.emblem, tags: ['Heroic', 'Clean'] },
  { title: 'Aggressive Arachnid', description: 'An original arachnid-inspired design with raised web lines and a central emblem.', palette: ['#7c3aed', '#22d3ee', '#0b0f14'], treatment: 'Raised design', svg: DEMO_SVGS.web, tags: ['Heroic', 'Futuristic'] },
  { title: 'Mechanical Web', description: 'A mechanical, panelled web pattern suited to wrap around a cover.', palette: ['#64748b', '#38e0f2', '#11181f'], treatment: 'Engraved design', svg: DEMO_SVGS.bg, tags: ['Mechanical', 'Bold'] }
];

export function regionForPiece(p) {
  if (!p) return 'main_focal';
  if (p.role === 'background_pattern') return 'background';
  if (p.role === 'shire_branding') return 'border';
  if (p.cy < 0.32) return 'upper';
  if (p.cy > 0.66) return 'lower';
  if (p.cx < 0.22 || p.cx > 0.78) return 'wrap';
  return 'main_focal';
}

export function makeDemoPieces() {
  return [
    { id: uid(), name: 'Background colour', src: DEMO_SVGS.bg, cx: 0.5, cy: 0.5, w: 0.94, h: 0.94, rotation: 0, visible: true, locked: false, order: 0, behaviour: 'flexible', placement: 'full_surface', effect: 'colour_texture', intensity: 'standard', mainColour: '#101824', accentColour: '#22d3ee', backgroundColour: '#0b0f14', material: 'Matte', role: 'background_pattern' },
    { id: uid(), name: 'Web pattern', src: DEMO_SVGS.web, cx: 0.5, cy: 0.46, w: 0.62, h: 0.62, rotation: 0, visible: true, locked: false, order: 1, behaviour: 'repeatable', placement: 'full_surface', effect: 'colour_texture', intensity: 'standard', mainColour: '#22d3ee', accentColour: '#a78bfa', backgroundColour: '#0b0f14', material: 'Gloss', role: 'main_pattern' },
    { id: uid(), name: 'Main emblem', src: DEMO_SVGS.emblem, cx: 0.5, cy: 0.42, w: 0.3, h: 0.3, rotation: 0, visible: true, locked: false, order: 2, behaviour: 'keep_shape', placement: 'front_centre', effect: 'raised_emboss', intensity: 'bold', mainColour: '#38e0f2', accentColour: '#a78bfa', backgroundColour: '#0b0f14', material: 'Metallic', role: 'primary_emblem' },
    { id: uid(), name: 'Side accents', src: DEMO_SVGS.accent, cx: 0.17, cy: 0.58, w: 0.13, h: 0.34, rotation: 0, visible: true, locked: false, order: 3, behaviour: 'flexible', placement: 'outer_side', effect: 'colour_texture', intensity: 'standard', mainColour: '#a78bfa', accentColour: '#38e0f2', backgroundColour: '#0b0f14', material: 'Matte', role: 'accent_detail' },
    { id: uid(), name: 'SHiRE creator mark', src: DEMO_SVGS.shire, cx: 0.82, cy: 0.91, w: 0.12, h: 0.07, rotation: 0, visible: true, locked: true, order: 4, behaviour: 'keep_shape', placement: 'rear', effect: 'engraving', intensity: 'subtle', mainColour: '#38e0f2', accentColour: '#38e0f2', backgroundColour: '#0b0f14', material: 'Matte', role: 'shire_branding' }
  ];
}

// Map an in-canvas piece to the adaptation engine's layer shape.
export function pieceToLayer(p, focalId) {
  const isFocal = p.id === focalId;
  const aspectMap = { keep_shape: 'keep_shape', flexible: 'flexible', repeatable: 'repeatable', croppable: 'croppable', border_following: 'border_following', full_wrap: 'full_wrap', let_shire_choose: 'flexible' };
  return {
    id: p.id,
    name: p.name,
    role: isFocal ? 'primary_emblem' : p.role,
    visible: p.visible !== false,
    order: p.order ?? 0,
    aspectPolicy: aspectMap[p.behaviour] || 'flexible',
    applicationIntent: p.effect || 'colour_texture',
    relativeRotation: p.rotation || 0,
    mayClip: p.behaviour === 'croppable' || p.behaviour === 'full_wrap',
    mayRepeat: p.behaviour === 'repeatable',
    protectedFromDistortion: p.behaviour === 'keep_shape' || isFocal
  };
}

export function layerImageMap(pieces) {
  const m = {};
  (Array.isArray(pieces) ? pieces : []).forEach(p => { if (p.visible !== false && p.src) m[p.id] = p.src; });
  return m;
}