import React, { useCallback, useEffect, useState } from "react";
import { Plus, Trash2, Download, Settings, BarChart2, Eraser } from "lucide-react";
import {
  conciergeBotsApi,
  uploadMediaFile,
  whatsappTemplatesApi,
  type ConciergeBotRecord,
  type ConciergeBotReception,
  type ConciergeDripStats,
  type ConciergeReceptionDrip,
  type ConciergeReceptionInfo,
} from "../../../services/api";
import type { WhatsAppTemplateRecord } from "../../../services/api/types";
import { useAppNav } from "../../contexts/AppNavContext";
import { WhatsAppCtaEditor, normalizeCtasForSave, type WhatsAppCtaItem } from "../whatsapp/WhatsAppCtaEditor";
import { FlatpickrDatetimeInput, toDatetimeLocalValue } from "../ui/FlatpickrDatetimeInput";

const IS: React.CSSProperties = {
  width: "100%",
  padding: "8px 12px",
  border: "1px solid var(--border)",
  borderRadius: "var(--radius-button)",
  background: "var(--input-background)",
  fontSize: "var(--text-sm)",
  color: "var(--card-foreground)",
  boxSizing: "border-box",
};

const btnPrimary: React.CSSProperties = {
  display: "inline-flex",
  alignItems: "center",
  gap: 6,
  padding: "8px 14px",
  borderRadius: "var(--radius-button)",
  background: "var(--primary)",
  color: "var(--primary-foreground)",
  border: "none",
  cursor: "pointer",
  fontSize: "var(--text-sm)",
};

const btnSecondary: React.CSSProperties = {
  ...btnPrimary,
  background: "var(--secondary)",
  color: "var(--card-foreground)",
  border: "1px solid var(--border)",
};

const DEFAULT_WELCOME = "Hi {firstName}! Welcome to {eventName}.";
const DEFAULT_BADGE =
  "We couldn't match your WhatsApp to a registration. Please send a clear photo of your badge QR code.";
const DEFAULT_STAFF =
  "We still couldn't identify you. Please see the reception desk for help. You can also send another badge photo.";

function emptyDrip(): ConciergeReceptionDrip {
  return {
    trigger: "after_first_inbound",
    delayMinutes: 15,
    sendAt: "",
    body: "",
    mediaType: "none",
    mediaUrl: "",
    contentKind: "custom",
    agendaCount: 3,
    templateId: "",
    ctas: [],
  };
}

function receptionFromBot(bot: ConciergeBotRecord): ConciergeBotReception {
  const r = bot.reception || {};
  return {
    enabled: Boolean(r.enabled),
    allowNonRegistered: Boolean(r.allowNonRegistered),
    prefillText: r.prefillText || "Hi",
    welcomeMessage: r.welcomeMessage || DEFAULT_WELCOME,
    welcomeCtas: Array.isArray(r.welcomeCtas) ? r.welcomeCtas : [],
    unmatchedBadgePrompt: r.unmatchedBadgePrompt || DEFAULT_BADGE,
    staffHandoffMessage: r.staffHandoffMessage || DEFAULT_STAFF,
    dripAudience: r.dripAudience === "all_inbound" ? "all_inbound" : "matched",
    drips: Array.isArray(r.drips) && r.drips.length ? r.drips.map((d) => ({ ...emptyDrip(), ...d })) : [],
  };
}

export function WhatsAppReceptionTab({
  bot,
  eventId,
  onSaved,
}: {
  bot: ConciergeBotRecord;
  eventId: string;
  onSaved: () => Promise<void> | void;
}) {
  const { setActiveNav, setSettingsInitialSection } = useAppNav();
  const [reception, setReception] = useState<ConciergeBotReception>(() => receptionFromBot(bot));
  const [info, setInfo] = useState<ConciergeReceptionInfo | null>(null);
  const [templates, setTemplates] = useState<WhatsAppTemplateRecord[]>([]);
  const [msg, setMsg] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);
  const [qrWithLogo, setQrWithLogo] = useState(false);
  const [qrDownloading, setQrDownloading] = useState<"png" | "svg" | null>(null);
  const [statsDripId, setStatsDripId] = useState<string | null>(null);
  const [statsLoading, setStatsLoading] = useState(false);
  const [statsError, setStatsError] = useState<string | null>(null);
  const [stats, setStats] = useState<ConciergeDripStats | null>(null);
  const [clearingSessions, setClearingSessions] = useState(false);

  useEffect(() => {
    setReception(receptionFromBot(bot));
  }, [bot._id, bot.updatedAt]);

  const loadInfo = useCallback(async () => {
    const res = await conciergeBotsApi.getReception(bot._id, { logo: qrWithLogo });
    if (!res.error && res.data) setInfo(res.data);
  }, [bot._id, qrWithLogo]);

  useEffect(() => {
    void loadInfo();
  }, [loadInfo]);

  useEffect(() => {
    whatsappTemplatesApi.list({ status: "APPROVED" }).then((r) => {
      if (!r.error) setTemplates(r.data?.templates || []);
    });
  }, []);

  const downloadQr = async (format: "png" | "svg") => {
    setQrDownloading(format);
    setMsg(null);
    try {
      await conciergeBotsApi.downloadReceptionQr(bot._id, format, { logo: qrWithLogo });
    } catch (e) {
      setMsg(e instanceof Error ? e.message : "QR download failed");
    } finally {
      setQrDownloading(null);
    }
  };

  const patch = (partial: Partial<ConciergeBotReception>) => setReception((prev) => ({ ...prev, ...partial }));

  const patchDrip = (index: number, partial: Partial<ConciergeReceptionDrip>) => {
    const drips = [...(reception.drips || [])];
    drips[index] = { ...drips[index], ...partial };
    patch({ drips });
  };

  const loadDripStats = async (dripId: string) => {
    if (!dripId) {
      setStatsError("Save reception first so this drip gets an id.");
      setStats(null);
      setStatsDripId(null);
      return;
    }
    if (statsDripId === dripId) {
      setStatsDripId(null);
      setStats(null);
      setStatsError(null);
      return;
    }
    setStatsDripId(dripId);
    setStatsLoading(true);
    setStatsError(null);
    setStats(null);
    try {
      const res = await conciergeBotsApi.getDripStats(bot._id, dripId);
      if (res.error) {
        setStatsError(res.error);
        setStats(null);
      } else {
        setStats(res.data?.stats ?? null);
      }
    } catch {
      setStatsError("Failed to load drip stats.");
      setStats(null);
    } finally {
      setStatsLoading(false);
    }
  };

  const save = async () => {
    setSaving(true);
    setMsg(null);
    let dripsPayload: ConciergeReceptionDrip[];
    let welcomeCtas: WhatsAppCtaItem[];
    try {
      welcomeCtas = normalizeCtasForSave((reception.welcomeCtas || []) as WhatsAppCtaItem[]);
      dripsPayload = (reception.drips || []).map((d) => {
        const ctas =
          d.contentKind === "upcoming_agenda" ? [] : normalizeCtasForSave((d.ctas || []) as WhatsAppCtaItem[]);
        if (ctas.length && !String(d.body || "").trim()) {
          throw new Error("Drip message text is required when buttons are set.");
        }
        return {
          _id: d._id,
          trigger: d.trigger,
          delayMinutes: d.delayMinutes,
          body: d.body,
          mediaType: d.contentKind === "upcoming_agenda" ? "none" : d.mediaType,
          mediaUrl: d.contentKind === "upcoming_agenda" ? "" : d.mediaUrl,
          contentKind: d.contentKind || "custom",
          agendaCount: d.agendaCount,
          templateId: d.templateId || null,
          sendAt: d.sendAt || null,
          ctas,
        };
      });
    } catch (e) {
      setSaving(false);
      setMsg(e instanceof Error ? e.message : "Invalid buttons");
      return;
    }
    const res = await conciergeBotsApi.update(bot._id, {
      reception: {
        ...reception,
        welcomeCtas,
        drips: dripsPayload,
      },
    });
    setSaving(false);
    if (res.error) {
      setMsg(res.error);
      return;
    }
    setMsg("Reception settings saved");
    await onSaved();
    await loadInfo();
  };

  const uploadDripMedia = async (index: number, file: File) => {
    const up = await uploadMediaFile(file, { eventId: eventId || "portfolio", module: "whatsapp/reception-drip" });
    if (up.error || !up.url) {
      setMsg(up.error || "Upload failed");
      return;
    }
    const mime = String(file.type || "").toLowerCase();
    const mediaType = mime.startsWith("video/") ? "video" : "image";
    patchDrip(index, { mediaUrl: up.url, mediaType });
  };

  const goSettings = () => {
    setSettingsInitialSection("whatsapp");
    setActiveNav("settings");
  };

  const clearReceptionList = async () => {
    const count = info?.sessionCount ?? 0;
    const ok = window.confirm(
      count
        ? `Clear ${count} reception WhatsApp visitor${count === 1 ? "" : "s"} for this chatbot? The next message from those numbers will send the welcome and drip sequence again.`
        : "Clear the reception WhatsApp list for this chatbot? The next message from any previous number will send the welcome and drip sequence again.",
    );
    if (!ok) return;
    setClearingSessions(true);
    setMsg(null);
    try {
      const res = await conciergeBotsApi.clearReceptionSessions(bot._id);
      if (res.error) {
        setMsg(res.error);
        return;
      }
      const n = res.data?.sessionsCleared ?? 0;
      setMsg(
        n
          ? `Cleared ${n} reception visitor${n === 1 ? "" : "s"}. Next inbound from those numbers is treated as new.`
          : "Reception list was already empty.",
      );
      await loadInfo();
    } finally {
      setClearingSessions(false);
    }
  };

  const outside24h = (d: ConciergeReceptionDrip) => {
    if (d.trigger === "absolute") return true;
    return Number(d.delayMinutes || 0) > 24 * 60;
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 720 }}>
      <section style={{ padding: 12, border: "1px solid var(--border)", borderRadius: 8 }}>
        <h3 style={{ margin: "0 0 10px", fontSize: 14 }}>Desk / reception</h3>
        <label style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
          <input
            type="checkbox"
            checked={Boolean(reception.enabled)}
            onChange={(e) => patch({ enabled: e.target.checked })}
            disabled={!info?.canSendMessages}
          />
          Enable reception check-in
        </label>
        <label style={{ display: "flex", alignItems: "flex-start", gap: 8, marginBottom: 10 }}>
          <input
            type="checkbox"
            checked={Boolean(reception.allowNonRegistered)}
            onChange={(e) => patch({ allowNonRegistered: e.target.checked })}
            disabled={!info?.canSendMessages}
            style={{ marginTop: 3 }}
          />
          <span>
            Allow non-registered participants
            <span style={{ display: "block", fontSize: 11, color: "var(--muted-foreground)", marginTop: 2 }}>
              If their WhatsApp number or name is not on the guest list, add them to this event using their phone
              number and profile name. Badge matching still runs when the match is unclear.
            </span>
          </span>
        </label>
        <div style={{ margin: "4px 0 12px" }}>
          <button
            type="button"
            style={btnSecondary}
            disabled={clearingSessions}
            onClick={() => void clearReceptionList()}
          >
            <Eraser size={14} />
            {clearingSessions
              ? "Clearing…"
              : info?.sessionCount
                ? `Clear reception list (${info.sessionCount})`
                : "Clear reception list"}
          </button>
          <p style={{ fontSize: 11, color: "var(--muted-foreground)", margin: "6px 0 0" }}>
            Removes all WhatsApp visitors for this desk so the next message from an existing number is treated as
            new (welcome + drips).
          </p>
        </div>
        {!info?.canSendMessages && (
          <p style={{ fontSize: 12, color: "var(--muted-foreground)", margin: "0 0 10px" }}>
            WhatsApp Cloud is not ready to send. Configure WABA ID, token, and phone number ID in Organisation
            settings.
            <button type="button" style={{ ...btnSecondary, marginLeft: 8 }} onClick={goSettings}>
              <Settings size={14} /> WhatsApp settings
            </button>
          </p>
        )}
        {info?.resolveError && info.canSendMessages && (
          <p style={{ fontSize: 12, color: "var(--destructive)", margin: "0 0 8px" }}>{info.resolveError}</p>
        )}
        {info?.displayPhone && (
          <p style={{ fontSize: 13, margin: "0 0 8px" }}>
            Desk number (from organisation settings): <strong>{info.displayPhone}</strong>
          </p>
        )}
        {info?.qrPngBase64 && (
          <div style={{ marginBottom: 10 }}>
            <img
              alt="Reception WhatsApp QR"
              src={`data:image/png;base64,${info.qrPngBase64}`}
              style={{ width: 180, height: 180, background: "#fff", borderRadius: 8 }}
            />
            <label style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 8, fontSize: 13 }}>
              <input
                type="checkbox"
                checked={qrWithLogo}
                onChange={(e) => setQrWithLogo(e.target.checked)}
              />
              Include WhatsApp logo
            </label>
            <p style={{ fontSize: 11, color: "var(--muted-foreground)", margin: "4px 0 8px" }}>
              Logo uses high error correction so the code still scans. Prefer Meta’s brand guidelines for posters.
            </p>
            <div style={{ marginTop: 4, display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
              <a href={info.waMeUrl} target="_blank" rel="noreferrer" style={{ fontSize: 12 }}>
                Open wa.me link
              </a>
              <button
                type="button"
                style={btnSecondary}
                disabled={Boolean(qrDownloading)}
                onClick={() => void downloadQr("png")}
              >
                <Download size={14} /> {qrDownloading === "png" ? "Downloading…" : "Download PNG"}
              </button>
              <button
                type="button"
                style={btnSecondary}
                disabled={Boolean(qrDownloading)}
                onClick={() => void downloadQr("svg")}
              >
                <Download size={14} /> {qrDownloading === "svg" ? "Downloading…" : "Download SVG"}
              </button>
            </div>
          </div>
        )}
        <label>
          Prefill message
          <input
            style={IS}
            value={reception.prefillText || ""}
            onChange={(e) => patch({ prefillText: e.target.value })}
          />
        </label>
        <p style={{ fontSize: 11, color: "var(--muted-foreground)", margin: "4px 0 10px" }}>
          Visitors scan the QR and send this text (default Hi). WhatsApp Cloud credentials stay in Organisation
          settings.
        </p>
        <label>
          Welcome message
          <textarea
            style={{ ...IS, minHeight: 72 }}
            value={reception.welcomeMessage || ""}
            onChange={(e) => patch({ welcomeMessage: e.target.value })}
          />
        </label>
        <p style={{ fontSize: 11, color: "var(--muted-foreground)", margin: "4px 0 10px" }}>
          Placeholders: {"{firstName}"}, {"{profileName}"}, {"{eventName}"}, {"{engagementUrl}"}
        </p>
        <div style={{ marginBottom: 12 }}>
          <WhatsAppCtaEditor
            value={(reception.welcomeCtas || []) as WhatsAppCtaItem[]}
            onChange={(welcomeCtas) => patch({ welcomeCtas })}
          />
        </div>
        <label>
          If not matched — ask for badge photo
          <textarea
            style={{ ...IS, minHeight: 64 }}
            value={reception.unmatchedBadgePrompt || ""}
            onChange={(e) => patch({ unmatchedBadgePrompt: e.target.value })}
          />
        </label>
        {reception.allowNonRegistered && (
          <p style={{ fontSize: 11, color: "var(--muted-foreground)", margin: "4px 0 10px" }}>
            With non-registered guests allowed, this prompt is only used when a match is unclear (for example several
            people share the same name).
          </p>
        )}
        <label style={{ marginTop: 8, display: "block" }}>
          After badge fails — see reception
          <textarea
            style={{ ...IS, minHeight: 64 }}
            value={reception.staffHandoffMessage || ""}
            onChange={(e) => patch({ staffHandoffMessage: e.target.value })}
          />
        </label>
      </section>

      <section style={{ padding: 12, border: "1px solid var(--border)", borderRadius: 8 }}>
        <h3 style={{ margin: "0 0 10px", fontSize: 14 }}>Drip messages</h3>
        <p style={{ fontSize: 12, color: "var(--muted-foreground)", margin: "0 0 10px" }}>
          Drips are queued when a visitor messages (or is identified), not when you click Save.
          If someone already checked in, they need to send another WhatsApp message to pick up a newly added drip.
          Upcoming agenda drips list the next sessions at send time (not when you save).
          Unique profile links: put {"{engagementUrl}"} in the body or as a URL button (session window only).
          Approved templates outside 24h cannot take a fully dynamic button URL unless Meta allows a suffix variable.
        </p>
        <label style={{ display: "block", marginBottom: 10 }}>
          Send drips to
          <select
            style={IS}
            value={reception.dripAudience || "matched"}
            onChange={(e) => patch({ dripAudience: e.target.value as "matched" | "all_inbound" })}
          >
            <option value="matched">Matched participants only</option>
            <option value="all_inbound">Everyone who messaged (including unidentified)</option>
          </select>
        </label>
        {(reception.drips || []).map((drip, i) => (
          <div
            key={drip._id || i}
            style={{ border: "1px solid var(--border)", borderRadius: 8, padding: 10, marginBottom: 10 }}
          >
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8, gap: 8, flexWrap: "wrap" }}>
              <strong style={{ fontSize: 13 }}>Message {i + 1}</strong>
              <div style={{ display: "flex", gap: 6 }}>
                <button
                  type="button"
                  style={btnSecondary}
                  title={drip._id ? "Show send stats for this drip" : "Save reception first to track stats"}
                  disabled={!drip._id || (statsLoading && statsDripId === drip._id)}
                  onClick={() => void loadDripStats(String(drip._id || ""))}
                >
                  <BarChart2 size={14} /> Stats
                </button>
                <button
                  type="button"
                  style={{ ...btnSecondary, color: "var(--destructive)" }}
                  onClick={() => {
                    if (drip._id && statsDripId === drip._id) {
                      setStatsDripId(null);
                      setStats(null);
                      setStatsError(null);
                    }
                    patch({ drips: (reception.drips || []).filter((_, j) => j !== i) });
                  }}
                >
                  <Trash2 size={14} /> Remove
                </button>
              </div>
            </div>
            {drip._id && statsDripId === drip._id && (
              <div
                style={{
                  marginBottom: 10,
                  padding: 10,
                  borderRadius: 8,
                  background: "var(--secondary)",
                  border: "1px solid var(--border)",
                  fontSize: 13,
                }}
              >
                {statsLoading ? (
                  <p style={{ margin: 0, color: "var(--muted)" }}>Loading stats…</p>
                ) : statsError ? (
                  <p style={{ margin: 0, color: "var(--destructive)" }}>{statsError}</p>
                ) : stats ? (
                  <div style={{ display: "grid", gridTemplateColumns: "repeat(5, minmax(0, 1fr))", gap: 8 }}>
                    {(
                      [
                        ["Pending", stats.pending],
                        ["Sent", stats.sent],
                        ["Skipped", stats.skipped],
                        ["Failed", stats.failed],
                        ["Total", stats.total],
                      ] as const
                    ).map(([label, value]) => (
                      <div key={label}>
                        <div style={{ fontSize: 10, textTransform: "uppercase", color: "var(--muted)", fontWeight: 600 }}>
                          {label}
                        </div>
                        <div style={{ fontWeight: 600 }}>{value}</div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <p style={{ margin: 0, color: "var(--muted)" }}>No jobs yet for this drip.</p>
                )}
              </div>
            )}
            {!drip._id && (
              <p style={{ margin: "0 0 8px", fontSize: 12, color: "var(--muted)" }}>
                Save reception to enable stats for this new drip.
              </p>
            )}
            <label>
              Type
              <select
                style={IS}
                value={drip.contentKind || "custom"}
                onChange={(e) =>
                  patchDrip(i, {
                    contentKind: e.target.value as ConciergeReceptionDrip["contentKind"],
                    ...(e.target.value === "upcoming_agenda" ? { mediaType: "none" as const, mediaUrl: "" } : {}),
                  })
                }
              >
                <option value="custom">Custom message</option>
                <option value="upcoming_agenda">Upcoming agenda</option>
              </select>
            </label>
            <label>
              When
              <select
                style={IS}
                value={drip.trigger || "after_first_inbound"}
                onChange={(e) =>
                  patchDrip(i, { trigger: e.target.value as ConciergeReceptionDrip["trigger"] })
                }
              >
                <option value="after_first_inbound">Minutes after first inbound</option>
                <option value="after_match">Minutes after we identify them</option>
                <option value="absolute">Fixed date and time</option>
              </select>
            </label>
            {drip.trigger === "absolute" ? (
              <label>
                Send at
                <FlatpickrDatetimeInput
                  style={IS}
                  value={toDatetimeLocalValue(drip.sendAt || undefined)}
                  onChange={(local) =>
                    patchDrip(i, {
                      sendAt: local ? new Date(local).toISOString() : "",
                    })
                  }
                />
              </label>
            ) : (
              <label>
                Delay (minutes)
                <input
                  type="number"
                  min={0}
                  style={IS}
                  value={drip.delayMinutes ?? 0}
                  onChange={(e) => patchDrip(i, { delayMinutes: Number(e.target.value) })}
                />
              </label>
            )}
            {drip.contentKind === "upcoming_agenda" && (
              <label>
                How many upcoming sessions
                <input
                  type="number"
                  min={1}
                  max={8}
                  style={IS}
                  value={drip.agendaCount ?? 3}
                  onChange={(e) => patchDrip(i, { agendaCount: Number(e.target.value) })}
                />
              </label>
            )}
            <label>
              {drip.contentKind === "upcoming_agenda" ? "Intro (optional)" : "Body"}
              <textarea
                style={{ ...IS, minHeight: 64 }}
                value={drip.body || ""}
                onChange={(e) => patchDrip(i, { body: e.target.value })}
                placeholder={
                  drip.contentKind === "upcoming_agenda"
                    ? "e.g. Here are the next sessions on the agenda."
                    : undefined
                }
              />
            </label>
            {drip.contentKind !== "upcoming_agenda" && (
              <>
                <label>
                  Media
                  <input
                    type="file"
                    accept="image/*,video/*"
                    onChange={(e) => {
                      const f = e.target.files?.[0];
                      if (f) void uploadDripMedia(i, f);
                      e.target.value = "";
                    }}
                  />
                </label>
                {drip.mediaUrl && (
                  <p style={{ fontSize: 11, margin: "4px 0" }}>
                    {drip.mediaType}: {drip.mediaUrl}
                    <button type="button" style={btnSecondary} onClick={() => patchDrip(i, { mediaUrl: "", mediaType: "none" })}>
                      Clear
                    </button>
                  </p>
                )}
                <WhatsAppCtaEditor
                  value={(drip.ctas || []) as WhatsAppCtaItem[]}
                  onChange={(ctas) => patchDrip(i, { ctas })}
                  compact
                />
              </>
            )}
            {outside24h(drip) && drip.contentKind === "upcoming_agenda" && (
              <p style={{ fontSize: 12, color: "var(--destructive)", margin: "6px 0" }}>
                If this fires after WhatsApp’s 24-hour window, the agenda drip is skipped (live session lists cannot use a template).
              </p>
            )}
            {outside24h(drip) && drip.contentKind !== "upcoming_agenda" && (
              <p style={{ fontSize: 12, color: "var(--destructive)", margin: "6px 0" }}>
                This send may fall outside WhatsApp’s 24-hour window. Pick an approved template.
              </p>
            )}
            {drip.contentKind !== "upcoming_agenda" && (
              <label>
                Template (if outside 24h)
                <select
                  style={IS}
                  value={drip.templateId || ""}
                  onChange={(e) => patchDrip(i, { templateId: e.target.value })}
                >
                  <option value="">None</option>
                  {templates.map((t) => (
                    <option key={t._id} value={t._id}>
                      {t.name} ({t.language})
                    </option>
                  ))}
                </select>
              </label>
            )}
          </div>
        ))}
        <button type="button" style={btnSecondary} onClick={() => patch({ drips: [...(reception.drips || []), emptyDrip()] })}>
          <Plus size={14} /> Add drip message
        </button>
      </section>

      {msg && <p style={{ fontSize: 13, margin: 0 }}>{msg}</p>}
      <button type="button" style={btnPrimary} disabled={saving} onClick={() => void save()}>
        {saving ? "Saving…" : "Save reception"}
      </button>
    </div>
  );
}