// ReportsPage.jsx — Community pollution reports feed

const IMG = [
  'uploads/report-images/WhatsApp Image 2026-04-26 at 01.55.27 (1).jpeg',
  'uploads/report-images/WhatsApp Image 2026-04-26 at 01.56.29 (1).jpeg',
  'uploads/report-images/WhatsApp Image 2026-04-26 at 01.56.40 (1).jpeg',
  'uploads/report-images/WhatsApp Image 2026-04-26 at 01.57.02 (2).jpeg',
  'uploads/report-images/WhatsApp Image 2026-04-26 at 01.57.21 (1).jpeg',
  'uploads/report-images/WhatsApp Image 2026-04-26 at 01.57.49 (1).jpeg',
];

const REPORTS = [
  { id: 1, user: 'Ana K.', location: 'Karposh, Vardar Riverside', kind: 'red',
    type: 'Plastic waste on riverbank', desc: 'Large amount of plastic bottles and bags near the riverbank.',
    time: 'Today, 08:45 AM', likes: 14, verified: true, img: IMG[0] },
  { id: 2, user: 'Bojan M.', location: 'Aerodrom, Vardar Riverside', kind: 'orange',
    type: 'Sewage discharge', desc: 'Dark water flowing from a pipe near the bridge.',
    time: 'Today, 07:32 AM', likes: 9, verified: false, img: IMG[1] },
  { id: 3, user: 'Gorche Petrov', location: 'G. Jorche Petrov', kind: 'red',
    type: 'Oil/chemical spill', desc: 'Rainbow sheen visible on the water surface near the bridge.',
    time: 'Today, 06:15 AM', likes: 21, verified: true, img: IMG[2] },
  { id: 4, user: 'Elena V.', location: 'Centar, Vardar River', kind: 'green',
    type: 'Floating waste', desc: 'Floating debris spotted near the central park area.',
    time: 'Today, 05:40 AM', likes: 7, verified: false, img: IMG[3] },
  { id: 5, user: 'Nikola R.', location: 'Matka Canyon', kind: 'orange',
    type: 'Litter dumping', desc: 'Construction waste dumped near the riverbank.',
    time: 'Yesterday, 11:20 PM', likes: 5, verified: true, img: IMG[4] },
  { id: 6, user: 'Sara P.', location: 'Treska tributary, Saraj', kind: 'yellow',
    type: 'Agricultural runoff', desc: 'Brownish water from fields after last night\'s rain.',
    time: 'Yesterday, 09:15 PM', likes: 3, verified: false, img: IMG[5] },
  { id: 7, user: 'Marko D.', location: 'Dojran Lake', kind: 'green',
    type: 'Algae bloom', desc: 'Green algae visible along the northern shore.',
    time: 'Yesterday, 06:00 PM', likes: 2, verified: false, img: IMG[0] },
  { id: 8, user: 'Ivan T.', location: 'Ohrid, South inlet', kind: 'orange',
    type: 'Foam discharge', desc: 'White foam accumulating near the tourist pier.',
    time: 'Yesterday, 02:30 PM', likes: 11, verified: true, img: IMG[1] },
];

function riskLabel(kind) {
  return kind === 'red' ? 'HIGH RISK' : kind === 'orange' ? 'MEDIUM RISK' : kind === 'yellow' ? 'LOW RISK' : 'LOW RISK';
}
function riskColor(kind) {
  return kind === 'red' ? '#E94B4B' : kind === 'orange' ? '#F08537' : '#16A34A';
}
function riskBg(kind) {
  return kind === 'red' ? '#FCE5E5' : kind === 'orange' ? '#FEF0E6' : '#E6F9ED';
}

function ReportCard({ r, chevron = true }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '12px 0', borderBottom: '1px solid #F3F4F6',
    }}>
      {/* thumbnail */}
      <img src={r.img} alt={r.type} style={{
        width: 64, height: 64, borderRadius: 12, flexShrink: 0,
        objectFit: 'cover',
      }} />

      {/* body */}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontWeight: 600, fontSize: 14, color: '#111827', marginBottom: 2,
          whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.type}</div>
        <div style={{ fontSize: 12, color: '#6B7280', marginBottom: 5,
          whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.location}</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{
            fontSize: 10, fontWeight: 700, padding: '2px 7px', borderRadius: 999,
            background: riskBg(r.kind), color: riskColor(r.kind), letterSpacing: 0.3,
          }}>{riskLabel(r.kind)}</span>
          <span style={{ fontSize: 11, color: '#9CA3AF' }}>{r.time}</span>
        </div>
      </div>

      {/* chevron */}
      {chevron && (
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0 }}>
          <path d="M9 6 L15 12 L9 18" stroke="#9CA3AF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      )}
    </div>
  );
}

function AllReportsView({ onBack }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      {/* header */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '14px 16px 10px', flexShrink: 0 }}>
        <button onClick={onBack} style={{
          background: 'none', border: 'none', padding: 4, cursor: 'pointer', display: 'flex', alignItems: 'center',
        }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
            <path d="M15 6 L9 12 L15 18" stroke="#111827" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
        <span style={{ fontWeight: 700, fontSize: 17, color: '#111827' }}>All Reports</span>
      </div>

      {/* time filters */}
      <div style={{ display: 'flex', gap: 8, padding: '0 16px 10px', flexShrink: 0 }}>
        {['Last 24 hours', 'Last 7 days', 'Last 30 days'].map((t, i) => (
          <button key={t} style={{
            padding: '6px 12px', borderRadius: 999, border: 'none', cursor: 'pointer', fontSize: 12, fontWeight: 600,
            background: i === 0 ? '#5BB8C7' : '#F3F4F6', color: i === 0 ? '#fff' : '#374151',
          }}>{t}</button>
        ))}
      </div>

      {/* risk filters */}
      <div style={{ display: 'flex', gap: 8, padding: '0 16px 12px', flexShrink: 0 }}>
        {[
          { label: 'High risk', kind: 'red' },
          { label: 'Medium risk', kind: 'orange' },
          { label: 'Low risk', kind: 'green' },
        ].map(f => (
          <button key={f.label} style={{
            padding: '6px 12px', borderRadius: 999, border: 'none', cursor: 'pointer', fontSize: 12, fontWeight: 600,
            background: riskBg(f.kind), color: riskColor(f.kind),
          }}>{f.label}</button>
        ))}
      </div>

      {/* list */}
      <div style={{ flex: 1, overflowY: 'auto', padding: '0 16px 32px' }}>
        {REPORTS.map(r => <ReportCard key={r.id} r={r} />)}
      </div>
    </div>
  );
}

function ReportsPage() {
  const [showAll, setShowAll] = React.useState(false);

  if (showAll) return <AllReportsView onBack={() => setShowAll(false)} />;

  return (
    <div style={{ padding: '16px 16px 32px' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
        <span style={{ fontWeight: 700, fontSize: 17, color: '#111827' }}>Recent Reports</span>
        <button onClick={() => setShowAll(true)} style={{
          background: 'none', border: 'none', color: '#5BB8C7', fontWeight: 600, fontSize: 14, cursor: 'pointer', padding: 0,
        }}>See All</button>
      </div>
      {REPORTS.slice(0, 4).map(r => <ReportCard key={r.id} r={r} />)}
    </div>
  );
}

window.ReportsPage = ReportsPage;