// Photo upload screen — drag/file picker with mock thumbnails
const { useState: useStateUp, useRef: useRefUp } = React;

function Upload({ onBack }) {
  const [files, setFiles] = useStateUp([]); // {url, name}
  const [uploaded, setUploaded] = useStateUp(false);
  const inputRef = useRefUp(null);

  const handleFiles = (list) => {
    const arr = Array.from(list).slice(0, 8 - files.length);
    const next = arr.map(f => ({
      name: f.name,
      url: URL.createObjectURL(f),
    }));
    setFiles([...files, ...next]);
  };

  const submit = () => {
    setUploaded(true);
    setTimeout(() => { setFiles([]); setUploaded(false); }, 2200);
  };

  return (
    <ScreenShell onBack={onBack} kicker="02 · FOTO YÜKLE" title="o anı paylaş">
      <p className="body-sm" style={{opacity:0.85, marginBottom:20}}>
        Düğünden, hazırlıktan, masandan — ne çekersen yükle. Bunlar düğün albümünde olacak.
      </p>

      {/* Drop zone */}
      <div
        onClick={() => inputRef.current?.click()}
        onDragOver={(e) => e.preventDefault()}
        onDrop={(e) => { e.preventDefault(); handleFiles(e.dataTransfer.files); }}
        style={upStyles.dropzone}
      >
        <input
          ref={inputRef}
          type="file"
          accept="image/*,video/*"
          multiple
          style={{display:'none'}}
          onChange={(e) => handleFiles(e.target.files)}
        />
        <div style={upStyles.dropIcon}>
          <Icons.Upload size={26} />
        </div>
        <div className="hand" style={{fontSize:30, lineHeight:1, margin:'4px 0 4px'}}>
          tap to upload
        </div>
        <div className="body-sm" style={{opacity:0.8}}>
          Galeriden seç ya da kameradan çek
        </div>
        <div style={upStyles.dropChips}>
          <Chip2>jpg</Chip2><Chip2>png</Chip2><Chip2>heic</Chip2><Chip2>mp4</Chip2>
        </div>
      </div>

      {/* Preview grid */}
      {files.length > 0 && (
        <div style={{marginTop:22}}>
          <div className="label" style={{opacity:0.7, marginBottom:10}}>SEÇİLENLER · {files.length}</div>
          <div style={upStyles.previewGrid}>
            {files.map((f, i) => (
              <div key={i} style={upStyles.thumb}>
                <img src={f.url} alt={f.name} style={{width:'100%',height:'100%',objectFit:'cover'}}/>
                <button onClick={(e) => { e.stopPropagation(); setFiles(files.filter((_,j)=>j!==i)); }} style={upStyles.thumbRemove}>
                  <Icons.Close size={12}/>
                </button>
              </div>
            ))}
            {files.length < 8 && (
              <button onClick={() => inputRef.current?.click()} style={upStyles.addMore}>
                <Icons.Plus size={20}/>
              </button>
            )}
          </div>
        </div>
      )}

      {/* Submit */}
      <button
        onClick={submit}
        disabled={files.length === 0}
        style={{
          ...upStyles.submit,
          opacity: files.length === 0 ? 0.4 : 1,
          cursor: files.length === 0 ? 'not-allowed' : 'pointer',
        }}
      >
        {uploaded ? (
          <><Icons.Check size={18}/><span className="label">Yüklendi · Teşekkürler!</span></>
        ) : (
          <><Icons.Upload size={18}/><span className="label">Yükle · {files.length} dosya</span></>
        )}
      </button>

      {/* Mini tips */}
      <div style={{marginTop:26}}>
        <div className="label" style={{opacity:0.7, marginBottom:10}}>BİRKAÇ ŞEY</div>
        <ul style={upStyles.tipList}>
          <li>Yüklediklerin "Misafir Galerisi"nde herkesle paylaşılacak.</li>
          <li>İsmin altında görünmesin diye anonim atabilirsin.</li>
          <li>Burada paylaşmadığın özel anları bize WhatsApp'ten de gönderebilirsin.</li>
        </ul>
      </div>
    </ScreenShell>
  );
}

function Chip2({ children }) {
  return <span style={{
    fontSize:10, letterSpacing:'0.18em', textTransform:'uppercase',
    padding:'5px 9px', borderRadius:999,
    border:'1px solid rgba(255,185,201,0.4)',
    opacity:0.85,
  }}>{children}</span>;
}

const upStyles = {
  dropzone:{
    border:'2px dashed rgba(255,185,201,0.45)',
    borderRadius:24,
    padding:'34px 22px',
    textAlign:'center',
    background:'rgba(255,185,201,0.06)',
    cursor:'pointer',
  },
  dropIcon:{
    width:54,height:54,borderRadius:999,
    background:'var(--pink)', color:'var(--burgundy)',
    display:'flex',alignItems:'center',justifyContent:'center',
    margin:'0 auto 12px',
  },
  dropChips:{
    display:'flex',justifyContent:'center',gap:6,marginTop:14,flexWrap:'wrap',
  },
  previewGrid:{
    display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:8,
  },
  thumb:{
    aspectRatio:'1', borderRadius:12, overflow:'hidden',
    position:'relative', background:'rgba(255,185,201,0.1)',
  },
  thumbRemove:{
    position:'absolute', top:6, right:6,
    width:22,height:22,borderRadius:999,
    background:'rgba(0,0,0,0.55)', color:'#fff',
    display:'flex',alignItems:'center',justifyContent:'center',
  },
  addMore:{
    aspectRatio:'1', borderRadius:12,
    border:'1.5px dashed rgba(255,185,201,0.4)',
    color:'var(--pink)',
    display:'flex',alignItems:'center',justifyContent:'center',
  },
  submit:{
    marginTop:22,
    display:'flex',alignItems:'center',justifyContent:'center',gap:10,
    width:'100%', padding:'15px 16px', borderRadius:999,
    background:'var(--pink)', color:'var(--burgundy)',
  },
  tipList:{
    margin:0, padding:0, listStyle:'none',
  },
};

// shared list styles
const upTipsCSS = `
  ul li{
    padding:10px 0; border-top:1px solid rgba(255,185,201,0.15);
    font-family:'Manrope',sans-serif; font-size:13px; opacity:0.88; line-height:1.5;
  }
  ul li:first-child{border-top:none;}
`;
// inject once
if (typeof document !== 'undefined' && !document.getElementById('__up-tips')) {
  const s = document.createElement('style');
  s.id = '__up-tips'; s.textContent = upTipsCSS;
  document.head.appendChild(s);
}

window.Upload = Upload;