/* Contribute screen — six contribution types, badge progress, nearby suggestions. */

const CONTRIBUTION_TYPES = [
  { id:'add-place', label:'Add Place', reward:50, desc:'Submit a missing POI with GPS and photo evidence.', accent:'var(--status-rare)' },
  { id:'update-place', label:'Update Place', reward:30, desc:'Correct stale hours, signage, closure, or business details.', accent:'var(--teal)' },
  { id:'add-review', label:'Add Review', reward:30, desc:'Write a review and add structured amenity tags.', accent:'var(--status-stale)' },
  { id:'add-photo', label:'Add Photo', reward:30, desc:'Capture storefront, interior, menu, or signage angles.', accent:'var(--teal)' },
  { id:'update-road', label:'Update Road', reward:30, desc:'Report closure, construction, damage, or a missing road.', accent:'var(--warm)' },
  { id:'update-address', label:'Update Addr.', reward:30, desc:'Fix street number, unit, pin, or missing address evidence.', accent:'var(--status-done)' },
];

function ContributeScreen({ onStartContribution, onTabChange }) {
  const [sheetTier, setSheetTier] = React.useState('full');

  function start(type) {
    const contributionType = type || CONTRIBUTION_TYPES[0];
    onStartContribution && onStartContribution({
      id:contributionType.id,
      type:contributionType.id,
      title:contributionType.id === 'add-place' ? 'Unmarked storefront' :
        contributionType.id === 'update-road' ? 'Road segment · West block' :
        contributionType.id === 'update-address' ? 'Blue Bottle Coffee' :
        contributionType.id === 'add-review' ? 'Kensington Market' :
        contributionType.id === 'add-photo' ? 'Mori Tea House' : 'Onibus Coffee',
      hint:contributionType.desc,
      distance:'120m',
      cp:contributionType.reward,
      daysAgo:180,
      seed:contributionType.id,
      rare:contributionType.id === 'add-place',
      rareLabel:contributionType.label,
    });
  }

  return (
    <GlobalMapPanel
      activeTab="contribute"
      onTabChange={onTabChange}
      tier={sheetTier}
      setTier={setSheetTier}
      meta="CONTRIBUTE"
      summary="Choose type"
      action={<Pill tone="teal">6 flows</Pill>}
    >
      <div style={{padding:'4px 20px 28px'}}>
          <div style={{display:'flex', alignItems:'center', gap:14, marginBottom:18}}>
            <div style={{
              width:54, height:54, borderRadius:'50%', background:'var(--ink)', color:'var(--bg)',
              display:'grid', placeItems:'center', fontSize:20, fontWeight:800,
            }}>R</div>
            <div style={{flex:1}}>
              <div className="mono" style={{fontSize:9, color:'var(--teal-ink)', marginBottom:4}}>LEVEL 3 · PATHFINDER</div>
              <div style={{fontSize:22, fontWeight:800, letterSpacing:'-0.025em'}}>Contribute</div>
              <div style={{fontSize:12.5, color:'var(--ink-3)', marginTop:2}}>2,000 / 6,000 GP · 847 verified actions</div>
            </div>
          </div>

          <div style={{
            border:'1px solid var(--line)', borderRadius:15, background:'var(--bg-elev)',
            padding:14, marginBottom:18,
          }}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:8}}>
              <div style={{fontSize:13, fontWeight:700}}>Surveyor progress</div>
              <span className="mono" style={{fontSize:9}}>1,247 GP TO LV4</span>
            </div>
            <div style={{height:7, borderRadius:999, background:'var(--bg-sunk)', overflow:'hidden'}}>
              <div style={{height:'100%', width:'33%', background:'var(--teal)', borderRadius:999}}/>
            </div>
          </div>

          <div className="sec-head"><h3>Contribution types</h3><span className="label">tap to start</span></div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:10, marginBottom:18}}>
            {CONTRIBUTION_TYPES.map(type => (
              <button key={type.id} onClick={() => start(type)} style={{
                minHeight:78, borderRadius:0, border:0,
                background:'transparent',
                padding:'10px 8px', textAlign:'center', cursor:'pointer', fontFamily:'var(--font-sans)',
                display:'grid', justifyItems:'center', alignContent:'center', gap:8,
              }}>
                <span style={{
                  width:36, height:36, borderRadius:0, background:'transparent',
                  color:type.accent, display:'grid', placeItems:'center',
                }}>
                  <ContributionTypeIcon id={type.id}/>
                </span>
                <span style={{fontSize:11.5, fontWeight:800, letterSpacing:'-0.01em', lineHeight:1.15}}>{type.label}</span>
              </button>
            ))}
          </div>

          <div className="sec-head"><h3>Badge progress</h3><span className="label">Explorer badge</span></div>
          <div style={{
            border:'1px solid var(--line)', borderRadius:14, background:'var(--bg-elev)',
            padding:14, marginBottom:18, display:'grid', gap:10,
          }}>
            {[
              ['Add 2 photos', 2, 2],
              ['Add 2 reviews', 0, 2],
              ['Verify 3 places', 1, 3],
            ].map(row => (
              <div key={row[0]} style={{display:'grid', gridTemplateColumns:'1fr auto', gap:10, alignItems:'center'}}>
                <div>
                  <div style={{fontSize:13, fontWeight:700}}>{row[0]}</div>
                  <div style={{height:4, background:'var(--bg-sunk)', borderRadius:999, overflow:'hidden', marginTop:6}}>
                    <div style={{height:'100%', width:`${(row[1] / row[2]) * 100}%`, background:'var(--teal)', borderRadius:999}}/>
                  </div>
                </div>
                <span className="mono" style={{fontSize:10}}>{row[1]}/{row[2]}</span>
              </div>
            ))}
          </div>

          <div className="sec-head"><h3>Nearby suggestions</h3><span className="label">based on visits</span></div>
          <div style={{display:'grid', gap:9, marginBottom:22}}>
            {[
              ['Domino Coffee', 'You visited 6 days ago', 'Rate this place', 'add-review'],
              ['Mori Tea House', 'Missing storefront angle', 'Add photo', 'add-photo'],
            ].map(row => {
              const type = CONTRIBUTION_TYPES.find(t => t.id === row[3]);
              return (
                <button key={row[0]} onClick={() => start(type)} style={{
                  border:'1px solid var(--line)', borderRadius:13, background:'var(--bg-elev)',
                  padding:12, display:'grid', gridTemplateColumns:'46px 1fr auto', gap:11,
                  alignItems:'center', textAlign:'left', cursor:'pointer', fontFamily:'var(--font-sans)',
                }}>
                  <CoordGlyph seed={row[0]} size={46} accent={type?.accent || 'var(--teal)'}/>
                  <span>
                    <span style={{display:'block', fontSize:14, fontWeight:800}}>{row[0]}</span>
                    <span style={{display:'block', fontSize:12, color:'var(--ink-3)', marginTop:2}}>{row[1]}</span>
                  </span>
                  <span style={{fontSize:12, fontWeight:700, color:'var(--teal-ink)'}}>{row[2]}</span>
                </button>
              );
            })}
          </div>
      </div>
    </GlobalMapPanel>
  );
}

function ContributionTypeIcon({ id }) {
  const common = { stroke:'currentColor', strokeWidth:1.6, strokeLinecap:'round', strokeLinejoin:'round', fill:'none' };
  if (id === 'add-place') {
    return <svg width="22" height="22" viewBox="0 0 22 22"><path {...common} d="M11 20s6-5.2 6-11A6 6 0 0 0 5 9c0 5.8 6 11 6 11Z"/><path {...common} d="M11 6.8v4.8M8.6 9.2h4.8"/></svg>;
  }
  if (id === 'update-place') {
    return <svg width="22" height="22" viewBox="0 0 22 22"><path {...common} d="M4 6h10M4 11h8M4 16h6"/><path {...common} d="M15.5 14.5l2 2 3-4"/></svg>;
  }
  if (id === 'add-review') {
    return <svg width="22" height="22" viewBox="0 0 22 22"><path {...common} d="M4 5.5h14v9H8l-4 3v-12Z"/><path {...common} d="m10.8 8.2.8 1.7 1.9.2-1.4 1.3.4 1.9-1.7-1-1.7 1 .4-1.9-1.4-1.3 1.9-.2.8-1.7Z"/></svg>;
  }
  if (id === 'add-photo') {
    return <svg width="22" height="22" viewBox="0 0 22 22"><path {...common} d="M4 7h3l1.2-2h5.6L15 7h3v10H4V7Z"/><circle {...common} cx="11" cy="12" r="3"/><path {...common} d="M17 4v4M15 6h4"/></svg>;
  }
  if (id === 'update-road') {
    return <svg width="22" height="22" viewBox="0 0 22 22"><path {...common} d="M8 20 10 2M14 20 12 2"/><path {...common} d="M4 12h14M5 17h12M5 7h12"/></svg>;
  }
  return <svg width="22" height="22" viewBox="0 0 22 22"><path {...common} d="M5 5h12v12H5z"/><path {...common} d="M8 9h6M8 13h4"/><path {...common} d="m15 15 3 3"/></svg>;
}

window.ContributeScreen = ContributeScreen;
window.CONTRIBUTION_TYPES = CONTRIBUTION_TYPES;