// ReportPollution.jsx — the core report-pollution sheet/screen
// Responsive: phone width fills, tablet/desktop stacks side-by-side or modal-centered

const POLLUTION_TYPES = [
  { id: 'plastic', label: 'Plastic', icon: 'plastic' },
  { id: 'chemical', label: 'Chemical', icon: 'chemical' },
  { id: 'oil', label: 'Oil', icon: 'oil' },
  { id: 'debris', label: 'Debris', icon: 'debris' },
  { id: 'sewage', label: 'Sewage', icon: 'sewage' },
  { id: 'other', label: 'Other', icon: 'other' },
];

// Hand-drawn-ish illustrated icons inline (no external assets)
function PollutionIcon({ kind, active }) {
  const stroke = '#1f2937';
  switch (kind) {
    case 'plastic':
      return (
        <svg viewBox="0 0 48 48" width="40" height="40" fill="none">
          <path d="M14 16 L34 16 L32 40 Q24 42 16 40 Z" fill="#E94B4B" stroke={stroke} strokeWidth="2" strokeLinejoin="round"/>
          <rect x="12" y="13" width="24" height="5" rx="1.5" fill="#C73838" stroke={stroke} strokeWidth="2"/>
          <path d="M19 22 Q24 26 29 22" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" fill="none" opacity="0.7"/>
        </svg>
      );
    case 'chemical':
      return (
        <svg viewBox="0 0 48 48" width="40" height="40" fill="none">
          <path d="M20 8 L28 8 L28 22 L34 38 Q24 42 14 38 L20 22 Z" fill="#7AD9C7" stroke={stroke} strokeWidth="2" strokeLinejoin="round"/>
          <path d="M14 38 Q24 42 34 38 L33 35 Q24 39 15 35 Z" fill="#3FA593" stroke={stroke} strokeWidth="2" strokeLinejoin="round"/>
          <line x1="20" y1="8" x2="28" y2="8" stroke={stroke} strokeWidth="2" strokeLinecap="round"/>
        </svg>
      );
    case 'oil':
      return (
        <svg viewBox="0 0 48 48" width="40" height="40" fill="none">
          <ellipse cx="24" cy="14" rx="12" ry="3.5" fill="#C73838" stroke={stroke} strokeWidth="2"/>
          <path d="M12 14 L12 36 Q24 40 36 36 L36 14" fill="#E94B4B" stroke={stroke} strokeWidth="2" strokeLinejoin="round"/>
          <path d="M12 22 Q24 26 36 22" stroke={stroke} strokeWidth="1.5" fill="none"/>
          <path d="M12 28 Q24 32 36 28" stroke={stroke} strokeWidth="1.5" fill="none"/>
        </svg>
      );
    case 'debris':
      return (
        <svg viewBox="0 0 48 48" width="40" height="40" fill="none">
          <path d="M12 16 L36 16 L34 40 L14 40 Z" fill="#4A5563" stroke={stroke} strokeWidth="2" strokeLinejoin="round"/>
          <line x1="18" y1="20" x2="18" y2="36" stroke="#1f2937" strokeWidth="1.5"/>
          <line x1="24" y1="20" x2="24" y2="36" stroke="#1f2937" strokeWidth="1.5"/>
          <line x1="30" y1="20" x2="30" y2="36" stroke="#1f2937" strokeWidth="1.5"/>
          <rect x="10" y="13" width="28" height="4" rx="1" fill="#374151" stroke={stroke} strokeWidth="2"/>
        </svg>
      );
    case 'sewage':
      return (
        <svg viewBox="0 0 48 48" width="40" height="40" fill="none">
          <path d="M24 8 Q14 24 14 32 Q14 40 24 40 Q34 40 34 32 Q34 24 24 8 Z" fill="#3BB7E0" stroke={stroke} strokeWidth="2" strokeLinejoin="round"/>
          <path d="M20 30 Q20 34 24 35" stroke="#fff" strokeWidth="2" strokeLinecap="round" fill="none" opacity="0.8"/>
        </svg>
      );
    case 'other':
      return (
        <svg viewBox="0 0 48 48" width="40" height="40" fill="none">
          <path d="M18 18 Q18 12 24 12 Q30 12 30 18 Q30 22 26 24 Q24 25 24 28 L24 30" stroke="#C73838" strokeWidth="3.5" strokeLinecap="round" fill="none"/>
          <circle cx="24" cy="36" r="2" fill="#C73838"/>
        </svg>
      );
    default:
      return null;
  }
}

function CameraIcon({ size = 28, color = '#3FA0B0' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M3 8 a2 2 0 0 1 2 -2 h2.5 l1.2 -1.6 a1.5 1.5 0 0 1 1.2 -.6 h4.2 a1.5 1.5 0 0 1 1.2 .6 L16.5 6 H19 a2 2 0 0 1 2 2 v9 a2 2 0 0 1 -2 2 H5 a2 2 0 0 1 -2 -2 Z"
            stroke={color} strokeWidth="1.8" strokeLinejoin="round"/>
      <circle cx="12" cy="13" r="3.5" stroke={color} strokeWidth="1.8"/>
    </svg>
  );
}

function PinIcon({ size = 18, color = '#3FA0B0' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M12 22 s-7 -7.5 -7 -13 a7 7 0 0 1 14 0 c0 5.5 -7 13 -7 13 z" stroke={color} strokeWidth="2" fill="none" strokeLinejoin="round"/>
      <circle cx="12" cy="9" r="2.5" stroke={color} strokeWidth="2"/>
    </svg>
  );
}

function CloseIcon({ size = 22, color = '#1f2937' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M6 6 L18 18 M18 6 L6 18" stroke={color} strokeWidth="2" strokeLinecap="round"/>
    </svg>
  );
}

function UploadIcon({ size = 20, color = '#fff' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M12 16 V5 M12 5 L7 10 M12 5 L17 10" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M5 18 H19" stroke={color} strokeWidth="2.2" strokeLinecap="round"/>
    </svg>
  );
}

function ReportPollution({ onClose, photo, setPhoto, selectedType, setSelectedType, severity, setSeverity, location, layout = 'mobile' }) {
  const fileInputRef = React.useRef(null);

  const handleFileChange = (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    const url = URL.createObjectURL(file);
    setPhoto(url);
  };

  const isWide = layout === 'wide';

  return (
    <div className="rp-sheet" data-layout={layout}>
      {/* Header */}
      <div className="rp-header">
        <h1 className="rp-title">Report Pollution</h1>
        <button className="rp-close" onClick={onClose} aria-label="Close">
          <CloseIcon />
        </button>
      </div>

      <div className={isWide ? 'rp-grid rp-grid--wide' : 'rp-grid'}>
        {/* LEFT column on wide / top on mobile */}
        <div className="rp-col">
          {/* Photo evidence */}
          <section className="rp-section">
            <h2 className="rp-label">Photo Evidence</h2>
            <button
              className={`rp-photo ${photo ? 'has-photo' : ''}`}
              onClick={() => fileInputRef.current?.click()}
              type="button"
            >
              <input
                ref={fileInputRef}
                type="file"
                accept="image/*"
                style={{ display: 'none' }}
                onChange={handleFileChange}
              />
              {photo ? (
                <img src={photo} alt="Evidence" className="rp-photo-preview"/>
              ) : (
                <div className="rp-photo-empty">
                  <div className="rp-camera-circle">
                    <CameraIcon />
                  </div>
                  <div className="rp-photo-title">Take Photo or Upload</div>
                  <div className="rp-photo-sub">Tap to select from gallery</div>
                </div>
              )}
            </button>
          </section>

          {/* Location */}
          <section className="rp-section">
            <div className="rp-location">
              <PinIcon />
              <div className="rp-location-text">
                <div className="rp-location-title">Current Location</div>
                <div className="rp-location-place">{location.place}</div>
                <div className="rp-location-coords">{location.coords}</div>
              </div>
            </div>
          </section>
        </div>

        {/* RIGHT column on wide / bottom on mobile */}
        <div className="rp-col">
          {/* Type of pollution */}
          <section className="rp-section">
            <h2 className="rp-label">Type of Pollution</h2>
            <div className="rp-types">
              {POLLUTION_TYPES.map((t) => (
                <button
                  key={t.id}
                  type="button"
                  className={`rp-type ${selectedType === t.id ? 'is-selected' : ''}`}
                  onClick={() => setSelectedType(t.id)}
                >
                  <PollutionIcon kind={t.icon} active={selectedType === t.id}/>
                  <span className="rp-type-label">{t.label}</span>
                </button>
              ))}
            </div>
          </section>

          {/* Severity */}
          <section className="rp-section">
            <div className="rp-severity-head">
              <h2 className="rp-label" style={{margin: 0}}>Severity Level: <span className="rp-severity-num">{severity}/10</span></h2>
            </div>
            <div className="rp-slider-wrap">
              <input
                type="range"
                min="1"
                max="10"
                value={severity}
                onChange={(e) => setSeverity(Number(e.target.value))}
                className="rp-slider"
                style={{
                  background: `linear-gradient(to right, #5BB8C7 0%, #5BB8C7 ${(severity-1)/9*100}%, #E5E7EB ${(severity-1)/9*100}%, #E5E7EB 100%)`
                }}
              />
              <div className="rp-slider-ticks">
                {Array.from({length: 10}).map((_, i) => (
                  <span key={i} className={i < severity ? 'tick on' : 'tick'}/>
                ))}
              </div>
            </div>
          </section>
        </div>
      </div>

      {/* Submit */}
      <div className="rp-submit-wrap">
        <button className="rp-back" onClick={onClose} aria-label="Back">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M15 18l-6-6 6-6" />
          </svg>
        </button>
        <button
          className="rp-submit"
          disabled={!selectedType}
          onClick={() => {
            onClose?.();
          }}
        >
          <UploadIcon />
          <span>Submit Report</span>
        </button>
      </div>
    </div>
  );
}

window.ReportPollution = ReportPollution;
window.PollutionIcon = PollutionIcon;
window.CameraIcon = CameraIcon;
window.PinIcon = PinIcon;
window.CloseIcon = CloseIcon;
window.UploadIcon = UploadIcon;