import { useState } from "react";
import { reportarLocal } from "../firebase.js";

const MOTIVOS = [
  { id: "cerrado", label: "Ha cerrado / ya no existe" },
  { id: "datos_incorrectos", label: "Los datos son incorrectos" },
  { id: "inapropiado", label: "Contenido inapropiado" },
  { id: "otro", label: "Otro motivo" },
];

export default function ReportarLocal({ localId }) {
  const [abierto, setAbierto] = useState(false);
  const [motivo, setMotivo] = useState("cerrado");
  const [comentario, setComentario] = useState("");
  const [enviando, setEnviando] = useState(false);
  const [enviado, setEnviado] = useState(false);

  if (enviado) {
    return <p style={{ fontSize: 12, color: "#1E8449", margin: 0 }}>✅ Gracias, hemos recibido tu aviso.</p>;
  }

  if (!abierto) {
    return (
      <button type="button" onClick={() => setAbierto(true)}
        style={{ display: "inline-flex", alignItems: "center", gap: 4, background: "none", border: "none", padding: 0, fontSize: 12, color: "var(--color-text-tertiary)", cursor: "pointer", width: "fit-content" }}>
        <i className="ti ti-flag" aria-hidden="true"></i> Reportar
      </button>
    );
  }

  const enviar = async () => {
    setEnviando(true);
    try {
      await reportarLocal(localId, motivo, comentario);
      setEnviado(true);
    } catch (e) {
      console.error(e);
    }
    setEnviando(false);
  };

  return (
    <div style={{ background: "var(--color-background-secondary)", borderRadius: "var(--border-radius-md)", padding: "8px 10px", display: "flex", flexDirection: "column", gap: 6 }}>
      <p style={{ margin: 0, fontSize: 12, fontWeight: 500 }}>¿Qué está mal con este local?</p>
      <select value={motivo} onChange={(e) => setMotivo(e.target.value)}
        style={{ fontSize: 12, padding: "5px 8px", borderRadius: "var(--border-radius-md)", border: "0.5px solid var(--color-border-secondary)", background: "var(--color-background-primary)", color: "var(--color-text-primary)" }}>
        {MOTIVOS.map((m) => <option key={m.id} value={m.id}>{m.label}</option>)}
      </select>
      <textarea value={comentario} onChange={(e) => setComentario(e.target.value)} placeholder="Comentario opcional..."
        style={{ fontSize: 12, padding: "5px 8px", borderRadius: "var(--border-radius-md)", border: "0.5px solid var(--color-border-secondary)", background: "var(--color-background-primary)", color: "var(--color-text-primary)", resize: "vertical", minHeight: 40 }} />
      <div style={{ display: "flex", gap: 6 }}>
        <button type="button" onClick={enviar} disabled={enviando}
          style={{ fontSize: 12, background: "#8B0000", color: "white", border: "none", borderRadius: "var(--border-radius-md)", padding: "5px 12px", cursor: "pointer" }}>
          {enviando ? "Enviando..." : "Enviar aviso"}
        </button>
        <button type="button" onClick={() => setAbierto(false)}
          style={{ fontSize: 12, background: "none", border: "none", color: "var(--color-text-tertiary)", cursor: "pointer" }}>
          Cancelar
        </button>
      </div>
    </div>
  );
}