// ===== ROAD HAZARD REPORT =====
// Community reporting for road & sidewalk hazards, anchored by the
// "Ibalik ang Sidewalk sa mga Tao" campaign (clear sidewalks for pedestrians).

const hazard_types = [
  { id: 'vendor', label: 'Illegal vendor on sidewalk', icon: '🛒', campaign: true },
  { id: 'parking', label: 'Vehicle on sidewalk', icon: '🚗', campaign: true },
  { id: 'structure', label: 'Structure blocking sidewalk', icon: '🏗️', campaign: true },
  { id: 'pothole', label: 'Pothole / road damage', icon: '🕳️', campaign: false },
  { id: 'flood', label: 'Flooding', icon: '🌊', campaign: false },
  { id: 'debris', label: 'Debris / obstruction', icon: '🪨', campaign: false },
  { id: 'light', label: 'Broken light / signal', icon: '💡', campaign: false },
  { id: 'drain', label: 'Open manhole / drainage', icon: '⚠️', campaign: false },
  { id: 'tree', label: 'Fallen tree / branch', icon: '🌳', campaign: false },
];

const hazard_recent = [
  { id: 1, type: 'Vehicle on sidewalk', icon: '🚗', loc: 'Aurora Blvd, Cubao', time: '20 min ago', status: 'Forwarded to LGU', color: '#2556a8' },
  { id: 2, type: 'Pothole', icon: '🕳️', loc: 'Commonwealth Ave, QC', time: '1 hr ago', status: 'Under review', color: '#ffa502' },
  { id: 3, type: 'Illegal vendor on sidewalk', icon: '🛒', loc: 'Divisoria, Manila', time: '3 hrs ago', status: 'Resolved', color: '#00c48c' },
];

function RoadHazardScreen({ t, go, user }) {
  const now = new Date();
  const isoDate = new Date(now.getTime() - now.getTimezoneOffset() * 60000).toISOString().slice(0, 10);
  const isoTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000).toISOString().slice(11, 16);

  const [type, setType] = useState('');
  const [photo, setPhoto] = useState(null);   // {url}
  const [video, setVideo] = useState(null);   // {name}
  const [loc, setLoc] = useState('');
  const [date, setDate] = useState(isoDate);
  const [time, setTime] = useState(isoTime);
  const [desc, setDesc] = useState('');
  const [submitted, setSubmitted] = useState(null);
  const photoRef = useRef(null);
  const videoRef = useRef(null);

  const ready = type && loc.trim() && (photo || video);

  const onPhoto = (e) => { const f = e.target.files && e.target.files[0]; if (f) setPhoto({ url: URL.createObjectURL(f), name: f.name }); };
  const onVideo = (e) => { const f = e.target.files && e.target.files[0]; if (f) setVideo({ url: URL.createObjectURL(f), name: f.name }); };
  const useGps = () => setLoc(`${(14.55 + Math.random() * 0.2).toFixed(4)}° N, ${(120.95 + Math.random() * 0.12).toFixed(4)}° E`);

  const submit = () => {
    if (!ready) return;
    setSubmitted({ ref: 'HZ-' + Math.floor(100000 + Math.random() * 900000), type: hazard_types.find(h => h.id === type)?.label });
  };
  const reset = () => { setSubmitted(null); setType(''); setPhoto(null); setVideo(null); setLoc(''); setDesc(''); setDate(isoDate); setTime(isoTime); };

  const field = { width: '100%', border: `1.5px solid ${t.border}`, background: t.inputBg, color: t.text, borderRadius: 12, padding: '12px 13px', outline: 'none', fontWeight: 500, fontSize: 14 };
  const lbl = { fontSize: 12, fontWeight: 700, color: t.text, display: 'block', marginBottom: 7 };

  if (submitted) {
    return (
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', flex: 1, gap: 16, textAlign: 'center' }}>
        <div style={{ width: 88, height: 88, borderRadius: 999, background: t.success + (t.dark ? '2e' : '1c'), display: 'grid', placeItems: 'center', position: 'relative' }}>
          <div style={{ position: 'absolute', inset: 0, borderRadius: 999, border: `2px solid ${t.success}66`, animation: 'pulse-ring 2s infinite' }} />
          <span style={{ fontSize: 42 }}>📍</span>
        </div>
        <div>
          <h2 style={{ margin: 0, fontSize: 21, fontWeight: 800, color: t.text }}>Hazard reported!</h2>
          <p style={{ margin: '8px 0 0', fontSize: 13.5, color: t.subtext, lineHeight: 1.5, maxWidth: 300 }}>Your report of <b style={{ color: t.text }}>{submitted.type}</b> has been forwarded to the concerned LGU. Ref <b style={{ color: t.text }}>{submitted.ref}</b>.</p>
        </div>
        <div style={{ display: 'flex', gap: 10, marginTop: 4, width: '100%', maxWidth: 320 }}>
          <Btn t={t} full variant="outline" onClick={() => go('Home')}>Done</Btn>
          <Btn t={t} full color={t.accent} onClick={reset}>Report another</Btn>
        </div>
      </div>
    );
  }

  return (
    <div style={{ padding: '0 16px 8px', display: 'flex', flexDirection: 'column', gap: 16 }}>
      {/* Campaign banner */}
      <div style={{ borderRadius: 24, padding: 20, color: '#fff', position: 'relative', overflow: 'hidden', background: `linear-gradient(135deg, ${t.accent}, #b53d12)`, boxShadow: '0 12px 30px rgba(255,107,43,0.3)' }}>
        <div style={{ position: 'absolute', right: -26, top: -26, width: 120, height: 120, borderRadius: '50%', background: 'rgba(255,255,255,0.1)' }} />
        <div style={{ position: 'relative' }}>
          <div style={{ fontSize: 30 }}>🚶‍♀️🚶</div>
          <div style={{ fontSize: 19, fontWeight: 800, marginTop: 8 }}>Ibalik ang Sidewalk sa mga Tao</div>
          <div style={{ fontSize: 12.5, opacity: 0.95, marginTop: 5, lineHeight: 1.5 }}>Isang kampanya laban sa illegal vendors, nakaparadang sasakyan, at mga istrukturang sumasakop sa bangketa. Ayon sa batas, ang bangketa ay para lamang sa mga pedestrian — ligtas at malayang madaanan.</div>
        </div>
      </div>

      <div style={{ fontSize: 13, color: t.subtext, lineHeight: 1.5, fontWeight: 500 }}>Spotted a hazard or a blocked sidewalk? Report it below — your photo, location, and details go straight to the responsible LGU.</div>

      {/* Media */}
      <Card t={t}>
        <label style={lbl}>Add photo or video <span style={{ color: t.danger }}>*</span></label>
        <div style={{ display: 'flex', gap: 10 }}>
          {/* Photo */}
          <button onClick={() => photoRef.current && photoRef.current.click()} className="no-select" style={{ flex: 1, border: `1.5px ${photo ? 'solid' : 'dashed'} ${photo ? t.success : t.border}`, background: t.inputBg, borderRadius: 14, minHeight: 110, overflow: 'hidden', position: 'relative', padding: 0 }}>
            {photo ? (
              <img src={photo.url} alt="hazard" style={{ width: '100%', height: 110, objectFit: 'cover', display: 'block' }} />
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6, height: 110, color: t.subtext }}>
                <span style={{ fontSize: 26 }}>📷</span>
                <span style={{ fontSize: 12, fontWeight: 700 }}>Take / upload photo</span>
              </div>
            )}
            {photo && <span style={{ position: 'absolute', top: 6, right: 6, background: t.success, color: '#fff', borderRadius: 999, width: 22, height: 22, display: 'grid', placeItems: 'center' }}><Icon name="check" size={13} /></span>}
          </button>
          <input ref={photoRef} type="file" accept="image/*" capture="environment" onChange={onPhoto} style={{ display: 'none' }} />

          {/* Video */}
          <button onClick={() => videoRef.current && videoRef.current.click()} className="no-select" style={{ flex: 1, border: `1.5px ${video ? 'solid' : 'dashed'} ${video ? t.success : t.border}`, background: t.inputBg, borderRadius: 14, minHeight: 110, padding: 0, position: 'relative' }}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6, height: 110, color: video ? t.text : t.subtext, padding: 8 }}>
              <span style={{ fontSize: 26 }}>{video ? '🎬' : '📹'}</span>
              <span style={{ fontSize: 12, fontWeight: 700, textAlign: 'center', lineHeight: 1.3, wordBreak: 'break-word' }}>{video ? video.name.slice(0, 22) : 'Take / upload video'}</span>
            </div>
            {video && <span style={{ position: 'absolute', top: 6, right: 6, background: t.success, color: '#fff', borderRadius: 999, width: 22, height: 22, display: 'grid', placeItems: 'center' }}><Icon name="check" size={13} /></span>}
          </button>
          <input ref={videoRef} type="file" accept="video/*" capture="environment" onChange={onVideo} style={{ display: 'none' }} />
        </div>
      </Card>

      {/* Hazard type */}
      <Card t={t}>
        <label style={lbl}>Type of hazard <span style={{ color: t.danger }}>*</span></label>
        <div style={{ fontSize: 11, fontWeight: 700, color: t.accent, letterSpacing: '0.03em', margin: '2px 0 8px' }}>🚶 SIDEWALK CAMPAIGN</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8, marginBottom: 12 }}>
          {hazard_types.filter(h => h.campaign).map(h => {
            const sel = type === h.id;
            return (
              <button key={h.id} onClick={() => setType(h.id)} className="no-select" style={{ border: `1.5px solid ${sel ? t.accent : t.border}`, background: sel ? t.accent + (t.dark ? '24' : '12') : t.card, borderRadius: 13, padding: '11px 6px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5, minHeight: 76 }}>
                <span style={{ fontSize: 21 }}>{h.icon}</span>
                <span style={{ fontSize: 10, fontWeight: 600, color: t.text, textAlign: 'center', lineHeight: 1.15 }}>{h.label}</span>
              </button>
            );
          })}
        </div>
        <div style={{ fontSize: 11, fontWeight: 700, color: t.subtext, letterSpacing: '0.03em', margin: '2px 0 8px' }}>OTHER ROAD HAZARDS</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8 }}>
          {hazard_types.filter(h => !h.campaign).map(h => {
            const sel = type === h.id;
            return (
              <button key={h.id} onClick={() => setType(h.id)} className="no-select" style={{ border: `1.5px solid ${sel ? t.mid : t.border}`, background: sel ? t.mid + (t.dark ? '24' : '12') : t.card, borderRadius: 13, padding: '11px 6px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5, minHeight: 76 }}>
                <span style={{ fontSize: 21 }}>{h.icon}</span>
                <span style={{ fontSize: 10, fontWeight: 600, color: t.text, textAlign: 'center', lineHeight: 1.15 }}>{h.label}</span>
              </button>
            );
          })}
        </div>
      </Card>

      {/* Location + date/time */}
      <Card t={t}>
        <label style={lbl}>Location <span style={{ color: t.danger }}>*</span></label>
        <div style={{ display: 'flex', gap: 9, marginBottom: 14 }}>
          <input value={loc} onChange={e => setLoc(e.target.value)} placeholder="Street, barangay, city" style={{ ...field, flex: 1 }} />
          <button onClick={useGps} className="no-select" style={{ border: `1.5px solid ${t.mid}`, background: t.mid + (t.dark ? '24' : '12'), color: t.mid, borderRadius: 12, padding: '0 13px', fontSize: 12.5, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap' }}><Icon name="location" size={16} />GPS</button>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <div style={{ flex: 1 }}>
            <label style={lbl}>Date</label>
            <input type="date" value={date} onChange={e => setDate(e.target.value)} style={field} />
          </div>
          <div style={{ flex: 1 }}>
            <label style={lbl}>Time</label>
            <input type="time" value={time} onChange={e => setTime(e.target.value)} style={field} />
          </div>
        </div>
        <div style={{ marginTop: 14 }}>
          <label style={lbl}>Description (optional)</label>
          <textarea value={desc} onChange={e => setDesc(e.target.value)} rows={2} placeholder="Add any helpful detail…" style={{ ...field, resize: 'none', lineHeight: 1.5 }} />
        </div>
      </Card>

      <Btn t={t} full color={ready ? t.accent : t.muted} onClick={submit} style={{ opacity: ready ? 1 : 0.5, minHeight: 52, fontSize: 15 }} icon="send">
        {ready ? 'Submit hazard report' : 'Add photo/video, type & location'}
      </Btn>

      {/* Recent nearby reports */}
      <div>
        <SectionTitle t={t}>Recent Reports Near You</SectionTitle>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {hazard_recent.map(r => (
            <Card t={t} key={r.id} pad={13}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <IconTile icon={r.icon} color={r.color} t={t} size={44} fontSize={21} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 700, color: t.text }}>{r.type}</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11.5, color: t.subtext, marginTop: 2 }}>
                    <Icon name="location" size={12} />{r.loc} · {r.time}
                  </div>
                </div>
                <Badge t={t} color={r.color}>{r.status}</Badge>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { RoadHazardScreen });