import { useState, useEffect } from 'react'
import { db, auth } from '../firebase'
import { collection, addDoc, query, where, orderBy, getDocs } from 'firebase/firestore'
import { useETA } from '../context/ETAContext'

const TIPOS = [
  'No pasó el camión',
  'Retraso excesivo',
  'Basura no recogida',
  'Derrame en la vía',
  'Conducta del operador',
  'Otro',
]

export default function Reports() {
  const { etaData } = useETA()
  const [tipoSelected, setTipoSelected] = useState(TIPOS[0])
  const [descripcion,  setDescripcion]  = useState('')
  const [enviando,     setEnviando]     = useState(false)
  const [toast,        setToast]        = useState(false)
  const [reportes,     setReportes]     = useState([])
  const [cargando,     setCargando]     = useState(true)

  // Cargar reportes previos del usuario desde Firestore
  useEffect(() => {
    async function cargarReportes() {
      if (!auth.currentUser) return
      try {
        const q = query(
          collection(db, 'reportes'),
          where('uid', '==', auth.currentUser.uid),
          orderBy('creadoEn', 'desc')
        )
        const snap = await getDocs(q)
        setReportes(snap.docs.map(d => ({ id: d.id, ...d.data() })))
      } catch (e) {
        console.error('Error cargando reportes:', e)
      } finally {
        setCargando(false)
      }
    }
    cargarReportes()
  }, [toast]) // recarga cuando se envía uno nuevo

  async function handleSubmit() {
    if (!auth.currentUser) return
    setEnviando(true)
    try {
      // Guardar en Firestore — reporte real
      await addDoc(collection(db, 'reportes'), {
        uid:        auth.currentUser.uid,
        email:      auth.currentUser.email,
        colonia:    etaData?.colonia ?? 'Sin colonia',
        routeId:    etaData?.routeId ?? '',
        tipo:       tipoSelected,
        descripcion,
        estado:     'abierto',
        creadoEn:   new Date().toISOString(),
      })
      setDescripcion('')
      setTipoSelected(TIPOS[0])
      setToast(true)
      setTimeout(() => setToast(false), 3000)
    } catch (e) {
      alert('Error al enviar el reporte. Intenta de nuevo.')
    } finally {
      setEnviando(false)
    }
  }

  function tiempoRelativo(iso) {
    const diff = Date.now() - new Date(iso).getTime()
    const min  = Math.floor(diff / 60000)
    if (min < 60)   return `Hace ${min} min`
    const hrs = Math.floor(min / 60)
    if (hrs < 24)   return `Hace ${hrs} h`
    return `Hace ${Math.floor(hrs / 24)} días`
  }

  return (
    <div style={styles.page}>
      <div style={styles.header}>
        <div style={styles.headerTitle}>Buzón de Reportes</div>
        <div style={styles.headerSub}>Tu reporte se envía al municipio de Celaya</div>
      </div>

      {/* Formulario */}
      <div style={styles.form}>
        <div style={styles.formTitle}>📋 Nuevo Reporte</div>

        <div style={styles.group}>
          <label style={styles.label}>Tipo de incidencia</label>
          <div style={styles.chips}>
            {TIPOS.map(tipo => (
              <div
                key={tipo}
                onClick={() => setTipoSelected(tipo)}
                style={{
                  ...styles.chip,
                  background:   tipoSelected === tipo ? 'rgba(61,154,255,0.15)' : 'transparent',
                  borderColor:  tipoSelected === tipo ? '#3d9aff' : 'rgba(255,255,255,0.14)',
                  color:        tipoSelected === tipo ? '#3d9aff' : '#6b7f96',
                }}
              >
                {tipo}
              </div>
            ))}
          </div>
        </div>

        <div style={styles.group}>
          <label style={styles.label}>Colonia</label>
          <input
            readOnly
            value={etaData?.colonia ?? 'Cargando...'}
            style={{ ...styles.input, color: '#6b7f96' }}
          />
        </div>

        <div style={styles.group}>
          <label style={styles.label}>Descripción (opcional)</label>
          <textarea
            style={styles.textarea}
            placeholder="Describe brevemente lo que ocurrió..."
            value={descripcion}
            onChange={e => setDescripcion(e.target.value)}
            maxLength={300}
          />
          <div style={styles.charCount}>{descripcion.length}/300</div>
        </div>

        <button
          onClick={handleSubmit}
          disabled={enviando}
          style={{ ...styles.submitBtn, opacity: enviando ? 0.7 : 1 }}
        >
          {enviando ? 'Enviando...' : 'Enviar Reporte'}
        </button>
      </div>

      {/* Reportes previos */}
      <div style={styles.historyTitle}>Mis reportes</div>

      {cargando && <div style={styles.muted}>Cargando...</div>}

      {!cargando && reportes.length === 0 && (
        <div style={styles.muted}>Aún no has enviado reportes</div>
      )}

      {reportes.map(r => (
        <div key={r.id} style={styles.reportItem}>
          <div style={{
            ...styles.reportIcon,
            background: r.estado === 'resuelto' ? 'rgba(0,212,160,0.12)' : 'rgba(245,158,11,0.12)',
          }}>
            {r.estado === 'resuelto' ? '✅' : '⏰'}
          </div>
          <div style={{ flex: 1 }}>
            <div style={styles.reportTipo}>{r.tipo}</div>
            <div style={styles.reportMeta}>{tiempoRelativo(r.creadoEn)} · {r.colonia}</div>
          </div>
          <span style={{
            ...styles.badge,
            background: r.estado === 'resuelto' ? 'rgba(0,212,160,0.15)' : 'rgba(245,158,11,0.15)',
            color:      r.estado === 'resuelto' ? '#00d4a0' : '#f59e0b',
          }}>
            {r.estado === 'resuelto' ? 'Resuelto' : 'Abierto'}
          </span>
        </div>
      ))}

      {toast && (
        <div style={styles.toast}>✅ Reporte enviado correctamente</div>
      )}
    </div>
  )
}

const styles = {
  page:        { padding: 16, paddingBottom: 32, position: 'relative' },
  header:      { marginBottom: 16 },
  headerTitle: { fontSize: 18, fontWeight: 600, color: '#e8edf5', marginBottom: 2 },
  headerSub:   { fontSize: 12, color: '#6b7f96' },
  form:        { background: '#131820', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 14, padding: 16, marginBottom: 16 },
  formTitle:   { fontSize: 14, fontWeight: 600, color: '#e8edf5', marginBottom: 14 },
  group:       { marginBottom: 14 },
  label:       { fontSize: 11, fontWeight: 500, letterSpacing: '0.05em', textTransform: 'uppercase', color: '#6b7f96', display: 'block', marginBottom: 8 },
  chips:       { display: 'flex', flexWrap: 'wrap', gap: 6 },
  chip:        { padding: '5px 12px', borderRadius: 20, fontSize: 11, fontWeight: 500, border: '1px solid', cursor: 'pointer', transition: 'all 0.15s' },
  input:       { width: '100%', background: '#1a2332', border: '1px solid rgba(255,255,255,0.14)', borderRadius: 8, color: '#e8edf5', fontFamily: "'DM Sans', sans-serif", fontSize: 13, padding: '10px 12px', outline: 'none' },
  textarea:    { width: '100%', background: '#1a2332', border: '1px solid rgba(255,255,255,0.14)', borderRadius: 8, color: '#e8edf5', fontFamily: "'DM Sans', sans-serif", fontSize: 13, padding: '10px 12px', outline: 'none', resize: 'none', minHeight: 80, lineHeight: 1.5 },
  charCount:   { fontSize: 10, color: '#3d5570', textAlign: 'right', marginTop: 4 },
  submitBtn:   { width: '100%', padding: 13, borderRadius: 10, border: 'none', background: '#3d9aff', color: '#fff', fontFamily: "'DM Sans', sans-serif", fontSize: 14, fontWeight: 600, cursor: 'pointer' },
  historyTitle:{ fontSize: 11, fontWeight: 500, letterSpacing: '0.06em', textTransform: 'uppercase', color: '#6b7f96', marginBottom: 10 },
  muted:       { fontSize: 13, color: '#3d5570', textAlign: 'center', padding: '20px 0' },
  reportItem:  { background: '#131820', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 10, padding: '12px 14px', marginBottom: 8, display: 'flex', gap: 10, alignItems: 'center' },
  reportIcon:  { width: 32, height: 32, borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 15, flexShrink: 0 },
  reportTipo:  { fontSize: 12, fontWeight: 500, color: '#e8edf5', marginBottom: 2 },
  reportMeta:  { fontSize: 11, color: '#6b7f96' },
  badge:       { padding: '2px 8px', borderRadius: 6, fontSize: 10, fontWeight: 600, flexShrink: 0 },
  toast:       { position: 'fixed', bottom: 24, left: '50%', transform: 'translateX(-50%)', background: '#00d4a0', color: '#0a1e15', padding: '10px 20px', borderRadius: 20, fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap', zIndex: 999 },
}
