import { useState } from "react";
import { INK, RED, SKY, PAPER, MUTE, FONT_MONO, FONT_SERIF } from "../../theme";
import { COMPLAINTS_CONTACT } from "../../constants";
import { fmtDate } from "../../lib/dates";

/*
 * Waarschuwing van de beheerder: de lichtste maatregel na een melding, en de enige die de gebruiker
 * te zien krijgt. Hij blokkeert de app tot hij weggeklikt is — een waarschuwing die je weg kunt
 * scrollen is geen waarschuwing. Wegklikken is meteen het bewijs dat hij gelezen is
 * (`acknowledged_at`), en dat is precies wat je nodig hebt als er een tweede keer iets gebeurt.
 *
 * Geen ruzie hier: wie het er niet mee eens is, mailt. Dit scherm is er om te zeggen wat er is
 * gezien en wat er verwacht wordt, niet om erover te onderhandelen.
 */
export default function WarningView({ me, warning, onAcknowledge }) {
  const [state, setState] = useState({ busy: false, error: null });

  const ack = async () => {
    setState({ busy: true, error: null });
    try {
      await onAcknowledge(warning.id);
    } catch (e) {
      setState({ busy: false, error: e.message });
    }
  };

  return (
    <main className="app-main">
      <h2 style={{ margin: "0 0 4px", fontSize: 22 }}>Bericht van de beheerder</h2>
      <p style={{ fontFamily: FONT_MONO, fontSize: 11, color: MUTE, margin: "0 0 16px" }}>
        {fmtDate(warning.at)} · aan {me.name}
      </p>

      <div style={{ border: `2px solid ${RED}`, background: PAPER, padding: "16px 18px", marginBottom: 18 }}>
        <p style={{ fontFamily: FONT_SERIF, fontSize: 16, lineHeight: 1.7, margin: 0, whiteSpace: "pre-wrap" }}>
          {warning.text}
        </p>
      </div>

      <p style={{ fontSize: 14, lineHeight: 1.6, margin: "0 0 18px", color: INK }}>
        Deze waarschuwing volgt op een melding over jouw gedrag in Liefdesbrieven. Gebeurt het opnieuw, dan kan je
        account geschorst of verwijderd worden. Ben je het er niet mee eens of klopt er iets niet, mail dan{" "}
        <span style={{ fontFamily: FONT_MONO, fontSize: 13 }}>{COMPLAINTS_CONTACT}</span> — met een antwoord hier kunnen
        we niets.
      </p>

      <button
        onClick={ack}
        disabled={state.busy}
        style={{
          width: "100%", padding: "14px 0", fontSize: 16, fontWeight: 700, border: "none",
          background: state.busy ? SKY : INK, color: state.busy ? MUTE : "#fff",
        }}
      >
        {state.busy ? "Even geduld…" : "Gelezen, verder →"}
      </button>
      {state.error && (
        <p role="alert" style={{ fontFamily: FONT_MONO, fontSize: 12, color: RED, margin: "10px 0 0" }}>fout: {state.error}</p>
      )}
    </main>
  );
}