// Moodboard — store-backed: vibe + story + editable palette + inspiration image uploads.

function moodVibeFields() {
  return [
    { name: 'vibe',  label: 'Vibe (3-4 words)', type: 'text',
      placeholder: 'e.g. Coastal · Candlelit · Romantic',
      hint: 'Separate words with " · " for the italic styling' },
    { name: 'story', label: 'The story',         type: 'textarea',
      rows: 4,
      placeholder: 'A few sentences about the feel of your day.' },
  ];
}

function colorFields() {
  return [
    { name: 'name', label: 'Color name', type: 'text',
      placeholder: 'e.g. Clay, Sage, Rose' },
    { name: 'hex',  label: 'Hex',        type: 'color',
      default: '#cccccc' },
  ];
}

function inspirationFields() {
  return [
    { name: 'label', label: 'Caption', type: 'text',
      placeholder: 'e.g. Ranunculus & dahlias' },
    { name: 'kind',  label: 'Category', type: 'choice', default: 'florals',
      options: [
        { value: 'florals',  label: 'Florals'  },
        { value: 'venue',    label: 'Venue'    },
        { value: 'table',    label: 'Table'    },
        { value: 'lighting', label: 'Lighting' },
        { value: 'dress',    label: 'Dress'    },
        { value: 'cake',     label: 'Cake'     },
        { value: 'bouquet',  label: 'Bouquet'  },
        { value: 'suit',     label: 'Suit'     },
      ] },
    { name: 'span',  label: 'Size', type: 'choice', default: 'short',
      options: [
        { value: 'short', label: 'Standard' },
        { value: 'tall',  label: 'Tall' },
      ] },
  ];
}

// Resize an image File to a manageable JPEG data URL so localStorage stays small.
async function fileToResizedDataURL(file, maxDim = 1024, quality = 0.82) {
  const url = URL.createObjectURL(file);
  try {
    const img = await new Promise((resolve, reject) => {
      const i = new Image();
      i.onload = () => resolve(i);
      i.onerror = reject;
      i.src = url;
    });
    const ratio = Math.min(1, maxDim / Math.max(img.naturalWidth, img.naturalHeight));
    const w = Math.round(img.naturalWidth * ratio);
    const h = Math.round(img.naturalHeight * ratio);
    const canvas = document.createElement('canvas');
    canvas.width = w; canvas.height = h;
    const ctx = canvas.getContext('2d');
    ctx.imageSmoothingQuality = 'high';
    ctx.drawImage(img, 0, 0, w, h);
    return canvas.toDataURL('image/jpeg', quality);
  } finally {
    URL.revokeObjectURL(url);
  }
}

function MoodboardScreen() {
  const wedding = useWedding();
  const moodboard = useMoodboard();
  const [editingVibe, setEditingVibe] = React.useState(false);
  const [editingColor, setEditingColor] = React.useState(null);
  const [editingTile, setEditingTile] = React.useState(null);  // tile object or null
  const fileInputRef = React.useRef(null);
  const replaceForRef = React.useRef(null);

  const submitVibe = (v) => {
    moodboard.setMoodboard({ vibe: (v.vibe || '').trim(), story: (v.story || '').trim() });
    setEditingVibe(false);
  };
  const submitColor = (v) => {
    const norm = { name: (v.name || '').trim(), hex: (v.hex || '#cccccc').trim() };
    if (editingColor === 'new') moodboard.addColor(norm);
    else moodboard.updateColor(editingColor.id, norm);
    setEditingColor(null);
  };
  const deleteColor = () => {
    if (editingColor && editingColor !== 'new') {
      moodboard.deleteColor(editingColor.id);
      setEditingColor(null);
    }
  };

  // File-picker handlers.
  const triggerAddImage = () => {
    replaceForRef.current = null;
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
      fileInputRef.current.click();
    }
  };
  const triggerReplaceImage = (tile) => {
    replaceForRef.current = tile.id;
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
      fileInputRef.current.click();
    }
  };
  const onFilePicked = async (e) => {
    const file = e.target.files && e.target.files[0];
    if (!file) return;
    try {
      const dataURL = await fileToResizedDataURL(file);
      const targetId = replaceForRef.current;
      if (targetId) {
        moodboard.updateInspiration(targetId, { dataURL });
      } else {
        moodboard.addInspiration({ dataURL, label: '', kind: 'florals' });
      }
    } catch (err) {
      // Silently ignore — large file or non-image.
      console.warn('Image upload failed', err);
    } finally {
      replaceForRef.current = null;
    }
  };

  const submitTile = (v) => {
    if (editingTile) moodboard.updateInspiration(editingTile.id, v);
    setEditingTile(null);
  };
  const deleteTile = () => {
    if (editingTile) {
      moodboard.deleteInspiration(editingTile.id);
      setEditingTile(null);
    }
  };

  const hasVibe = moodboard.vibe || moodboard.story;
  const palette = moodboard.palette;

  return (
    <div style={{ background: W.bg, paddingBottom: 28, position: 'relative' }}>
      <div style={{ paddingTop: 56 }}/>

      <ScreenHeader eyebrow="Look & feel" title="Moodboard"/>

      {/* Hidden file input */}
      <input
        ref={fileInputRef}
        type="file"
        accept="image/*"
        onChange={onFilePicked}
        style={{ display: 'none' }}
      />

      {/* Hero — vibe statement (tappable to edit) */}
      <div style={{ padding: '8px 16px 18px' }}>
        <Card onClick={() => setEditingVibe(true)} style={{
          padding: 24, overflow: 'hidden', position: 'relative',
          background: W.cardSoft, cursor: 'pointer',
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            marginBottom: 8,
          }}>
            <div style={{
              fontFamily: FONT_UI, fontSize: 10.5, fontWeight: 600,
              letterSpacing: 1.8, textTransform: 'uppercase', color: W.muted,
            }}>The Vibe</div>
            <div style={{
              fontFamily: FONT_UI, fontSize: 11, color: W.clay, fontWeight: 500,
              display: 'inline-flex', alignItems: 'center', gap: 4,
            }}>{hasVibe ? 'Edit' : 'Add'} <Icon name="chevron" size={11} color={W.clay}/></div>
          </div>
          {hasVibe ? (
            <>
              {moodboard.vibe && (
                <div style={{
                  fontFamily: FONT_DISPLAY, fontSize: 28, fontWeight: 500,
                  color: W.ink, letterSpacing: -0.3, lineHeight: 1.1,
                }}>
                  {moodboard.vibe.split(' · ').map((w, i, arr) => (
                    <span key={i}>
                      {i === arr.length - 1 ? <em style={{ fontStyle: 'italic' }}>{w}</em> : w}
                      {i < arr.length - 1 && <span style={{ color: W.faint, fontWeight: 300 }}> · </span>}
                    </span>
                  ))}
                </div>
              )}
              {moodboard.story && (
                <div style={{
                  fontFamily: FONT_DISPLAY, fontStyle: 'italic', fontSize: 14.5,
                  color: W.ink2, marginTop: 14, lineHeight: 1.55,
                }}>{moodboard.story}</div>
              )}
            </>
          ) : (
            <div style={{
              fontFamily: FONT_DISPLAY, fontStyle: 'italic', fontSize: 17,
              color: W.muted, lineHeight: 1.4, marginTop: 6,
            }}>
              Describe the feel of your day in a few words.
            </div>
          )}
        </Card>
      </div>

      {/* Palette */}
      <SectionTitle eyebrow="Palette" title="Colors"
        action={<><Icon name="plus" size={12} color={W.clay} strokeWidth={1.8}/> Add</>}
        onAction={() => setEditingColor('new')}/>
      <div style={{ padding: '0 16px 24px' }}>
        {palette.length === 0 ? (
          <Card style={{ padding: 22, textAlign: 'center' }}>
            <div style={{
              fontFamily: FONT_DISPLAY, fontStyle: 'italic', fontSize: 15, color: W.muted,
            }}>No colors yet.</div>
            <button onClick={() => setEditingColor('new')} style={{
              marginTop: 14, padding: '10px 16px',
              background: W.ink, color: W.bg, border: 'none', borderRadius: 999,
              cursor: 'pointer',
              fontFamily: FONT_UI, fontSize: 12.5, fontWeight: 500,
              display: 'inline-flex', alignItems: 'center', gap: 6,
            }}>
              <Icon name="plus" size={12} color={W.bg} strokeWidth={1.8}/>
              Add a color
            </button>
          </Card>
        ) : (
          <Card style={{ padding: 16 }}>
            <div style={{
              display: 'grid',
              gridTemplateColumns: `repeat(${Math.min(palette.length, 5)}, 1fr)`,
              gap: 8,
            }}>
              {palette.map(c => {
                const isLight = isLightColor(c.hex);
                return (
                  <button key={c.id} onClick={() => setEditingColor(c)} style={{
                    background: 'transparent', border: 'none', cursor: 'pointer',
                    padding: 0, textAlign: 'center',
                  }}>
                    <div style={{
                      width: '100%', aspectRatio: '1', borderRadius: 10,
                      background: c.hex,
                      border: isLight ? `0.5px solid ${W.line}` : 'none',
                      boxShadow: '0 1px 2px rgba(60,40,20,0.05), 0 6px 16px -10px rgba(60,40,20,0.15)',
                    }}/>
                    <div style={{
                      fontFamily: FONT_DISPLAY, fontSize: 13, color: W.ink, marginTop: 8,
                      letterSpacing: -0.1,
                    }}>{c.name}</div>
                    <div style={{
                      fontFamily: FONT_MONO, fontSize: 9, color: W.muted, marginTop: 2,
                      letterSpacing: 0.4,
                    }}>{(c.hex || '').toUpperCase()}</div>
                  </button>
                );
              })}
            </div>
          </Card>
        )}
      </div>

      {/* Inspiration grid — store-backed with uploads */}
      <SectionTitle
        eyebrow={`${moodboard.inspiration.length} ${moodboard.inspiration.length === 1 ? 'piece' : 'pieces'}`}
        title="Inspiration"
        action={<><Icon name="plus" size={12} color={W.clay} strokeWidth={1.8}/> Add image</>}
        onAction={triggerAddImage}
      />
      <div style={{ padding: '0 16px 32px' }}>
        {moodboard.inspiration.length === 0 ? (
          <Card style={{ padding: 32, textAlign: 'center' }}>
            <div style={{
              width: 56, height: 56, borderRadius: 999, background: W.cardSoft,
              border: `0.5px solid ${W.line}`, margin: '0 auto 16px',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name="sparkle" size={22} color={W.clay} strokeWidth={1.4}/>
            </div>
            <div style={{
              fontFamily: FONT_DISPLAY, fontStyle: 'italic', fontSize: 18, color: W.ink,
              lineHeight: 1.3,
            }}>Start a collection.</div>
            <div style={{
              fontFamily: FONT_UI, fontSize: 12.5, color: W.muted, marginTop: 6,
              lineHeight: 1.5, maxWidth: 260, margin: '6px auto 0',
            }}>Upload photos that capture the feel you're going for.</div>
            <button onClick={triggerAddImage} style={{
              marginTop: 18, padding: '11px 18px',
              background: W.ink, color: W.bg, border: 'none', borderRadius: 999,
              cursor: 'pointer',
              fontFamily: FONT_UI, fontSize: 13, fontWeight: 500,
              display: 'inline-flex', alignItems: 'center', gap: 6,
            }}>
              <Icon name="plus" size={13} color={W.bg} strokeWidth={1.8}/>
              Upload an image
            </button>
          </Card>
        ) : (
          <InspirationGrid items={moodboard.inspiration} onPick={setEditingTile}/>
        )}
      </div>

      {editingVibe && (
        <FormSheet
          title="The vibe"
          eyebrow="Edit"
          fields={moodVibeFields()}
          initial={{ vibe: moodboard.vibe, story: moodboard.story }}
          submitLabel="Save"
          onClose={() => setEditingVibe(false)}
          onSubmit={submitVibe}
        />
      )}

      {editingColor && (
        <FormSheet
          title={editingColor === 'new' ? 'Add a color' : 'Edit color'}
          eyebrow={editingColor === 'new' ? 'New' : 'Edit'}
          fields={colorFields()}
          initial={editingColor === 'new' ? { hex: '#a87a4f' } : editingColor}
          submitLabel={editingColor === 'new' ? 'Add' : 'Save'}
          onClose={() => setEditingColor(null)}
          onSubmit={submitColor}
          onDelete={editingColor !== 'new' ? deleteColor : null}
        />
      )}

      {editingTile && (
        <InspirationEditSheet
          tile={editingTile}
          onClose={() => setEditingTile(null)}
          onSave={submitTile}
          onDelete={deleteTile}
          onReplace={() => { triggerReplaceImage(editingTile); setEditingTile(null); }}
        />
      )}
    </div>
  );
}

function isLightColor(hex) {
  const m = /^#?([0-9a-f]{3,6})$/i.exec(hex || '');
  if (!m) return false;
  let s = m[1];
  if (s.length === 3) s = s.split('').map(c => c + c).join('');
  const r = parseInt(s.slice(0,2), 16);
  const g = parseInt(s.slice(2,4), 16);
  const b = parseInt(s.slice(4,6), 16);
  return (r * 0.299 + g * 0.587 + b * 0.114) > 220;
}

// 2-column masonry — taller items occupy more vertical space.
function InspirationGrid({ items, onPick }) {
  const left  = [];
  const right = [];
  let leftH = 0, rightH = 0;
  items.forEach((it) => {
    const h = it.span === 'tall' ? 220 : 140;
    if (leftH <= rightH) { left.push({ ...it, h }); leftH += h + 8; }
    else                 { right.push({ ...it, h }); rightH += h + 8; }
  });
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {left.map(it => <InspirationTile key={it.id} item={it} onClick={() => onPick(it)}/>)}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {right.map(it => <InspirationTile key={it.id} item={it} onClick={() => onPick(it)}/>)}
      </div>
    </div>
  );
}

function InspirationTile({ item, onClick }) {
  const tone = {
    florals:  ['#e8d4c4', '#d4b8a3'],
    venue:    ['#d8d2bd', '#bcb59a'],
    table:    ['#e3d9c2', '#cdbfa1'],
    lighting: ['#f0e3c8', '#dccfb0'],
    dress:    ['#f4ece0', '#e0d4c0'],
    cake:     ['#efe5d0', '#d8cbb1'],
    bouquet:  ['#dde2d4', '#c1c7b4'],
    suit:     ['#dccdb6', '#b9a98e'],
  }[item.kind] || ['#e6d9c2', '#cdbfa1'];

  const hasImage = !!item.dataURL;
  return (
    <button onClick={onClick} style={{
      width: '100%', height: item.h, borderRadius: 12,
      background: hasImage ? '#1d1812'
                : `linear-gradient(135deg, ${tone[0]}, ${tone[1]})`,
      border: `0.5px solid ${W.lineSoft}`,
      boxShadow: '0 1px 2px rgba(60,40,20,0.04), 0 8px 20px -14px rgba(60,40,20,0.18)',
      overflow: 'hidden', position: 'relative',
      padding: 0, cursor: 'pointer',
      display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
    }}>
      {hasImage && (
        <img src={item.dataURL} alt={item.label || item.kind} style={{
          position: 'absolute', inset: 0,
          width: '100%', height: '100%', objectFit: 'cover',
        }}/>
      )}
      {!hasImage && (
        <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.18 }}
          viewBox="0 0 80 120" preserveAspectRatio="xMidYMid slice">
          <defs>
            <pattern id={`tx-${item.id}`} width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(-30)">
              <line x1="0" y1="0" x2="0" y2="6" stroke="rgba(60,40,20,0.18)" strokeWidth="0.4"/>
            </pattern>
          </defs>
          <rect x="0" y="0" width="80" height="120" fill={`url(#tx-${item.id})`}/>
        </svg>
      )}
      {/* kind badge top-left */}
      <div style={{
        position: 'absolute', top: 10, left: 10,
        width: 26, height: 26, borderRadius: 999,
        background: 'rgba(255,253,247,0.85)',
        backdropFilter: 'blur(4px)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <Icon name={kindToIcon(item.kind)} size={13} color={W.clayDeep} strokeWidth={1.4}/>
      </div>

      {/* caption — shown if there's a label, OR a "tap to caption" prompt for placeholder tiles */}
      {(item.label || !hasImage) && (
        <div style={{
          padding: '10px 12px',
          background: 'linear-gradient(0deg, rgba(29,24,18,0.5) 0%, rgba(29,24,18,0) 100%)',
          position: 'relative',
          textAlign: 'left',
        }}>
          <div style={{
            fontFamily: FONT_UI, fontSize: 9.5, fontWeight: 600,
            letterSpacing: 1.4, textTransform: 'uppercase', color: 'rgba(255,253,247,0.85)',
            marginBottom: 2,
          }}>{item.kind}</div>
          <div style={{
            fontFamily: FONT_DISPLAY, fontSize: 13.5, color: '#fff',
            letterSpacing: -0.1, lineHeight: 1.2,
            textShadow: '0 1px 2px rgba(0,0,0,0.18)',
          }}>{item.label || (hasImage ? '' : <em style={{ fontStyle: 'italic', opacity: 0.85 }}>Tap to caption</em>)}</div>
        </div>
      )}
    </button>
  );
}

function kindToIcon(kind) {
  return ({
    florals:  'leaf',
    venue:    'home',
    table:    'cake',
    lighting: 'sparkle',
    dress:    'heart',
    cake:     'cake',
    bouquet:  'leaf',
    suit:     'flag',
  })[kind] || 'sparkle';
}

// Bottom sheet for editing an inspiration tile — caption, kind, size, Replace, Delete.
function InspirationEditSheet({ tile, onClose, onSave, onDelete, onReplace }) {
  const [values, setValues] = React.useState({
    label: tile.label || '',
    kind:  tile.kind  || 'florals',
    span:  tile.span  || 'short',
  });
  return (
    <FormSheet
      title={tile.label || 'Inspiration'}
      eyebrow="Edit"
      fields={inspirationFields()}
      initial={values}
      submitLabel="Save"
      onClose={onClose}
      onSubmit={onSave}
      onDelete={onDelete}
    />
  );
}

Object.assign(window, { MoodboardScreen });