"use client";

import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import type { Inquiry } from "@/lib/inquiries";
import { csrfFetch } from "@/lib/client-csrf";
import { healthQuestionnaireInterest } from "@/lib/health-questionnaire";
import { ActivateMemberButton, findInviteForPhone, type MemberInviteSummary } from "@/components/activate-member-button";
import { AdminEditContact } from "@/components/admin-edit-contact";

export type AdminInquiriesMode = "new" | "contacted" | "all";

type AdminInquiriesProps = {
  mode?: AdminInquiriesMode;
  title?: string;
  description?: string;
  onMutate?: () => void;
};

const modeCopy: Record<AdminInquiriesMode, { title: string; description: string; empty: string }> = {
  all: {
    title: "Saved inquiries",
    description: "Local JSON-backed inquiries from the contact and booking form.",
    empty: "No inquiries saved yet. Submit the contact form to test the flow.",
  },
  new: {
    title: "New inquiries",
    description: "Unread contact and interest messages that still need a reply.",
    empty: "No new inquiries.",
  },
  contacted: {
    title: "Contacted inquiries",
    description: "Already-handled inquiry history.",
    empty: "No contacted inquiries yet.",
  },
};

export function AdminInquiries({
  mode = "all",
  title,
  description,
  onMutate,
}: AdminInquiriesProps) {
  const [inquiries, setInquiries] = useState<Inquiry[]>([]);
  const [loading, setLoading] = useState(true);
  const [actionId, setActionId] = useState<string | null>(null);
  const [activityInquiryId, setActivityInquiryId] = useState<string | null>(null);
  const [activityType, setActivityType] = useState("phone_call");
  const [activityNote, setActivityNote] = useState("");
  const [activityError, setActivityError] = useState("");
  const [invites, setInvites] = useState<MemberInviteSummary[]>([]);

  const copy = modeCopy[mode];
  const heading = title ?? copy.title;
  const subheading = description ?? copy.description;

  const filtered = useMemo(() => {
    if (mode === "all") return inquiries;
    return inquiries.filter((inquiry) => inquiry.status === mode);
  }, [inquiries, mode]);

  async function loadInquiries(options?: { notify?: boolean }) {
    setLoading(true);
    const response = await fetch("/api/inquiries", { cache: "no-store" });
    const data = (await response.json()) as { inquiries: Inquiry[] };
    setInquiries(data.inquiries);
    const invitesResponse = await fetch("/api/members/invites", { cache: "no-store" });
    if (invitesResponse.ok) {
      const inviteData = (await invitesResponse.json()) as { invites?: MemberInviteSummary[] };
      setInvites(inviteData.invites || []);
    }
    setLoading(false);
    if (options?.notify) onMutate?.();
  }

  useEffect(() => {
    let active = true;

    async function loadInitialInquiries() {
      const response = await fetch("/api/inquiries", { cache: "no-store" });
      const data = (await response.json()) as { inquiries: Inquiry[] };

      if (active) {
        setInquiries(data.inquiries);
        const invitesResponse = await fetch("/api/members/invites", { cache: "no-store" });
        if (invitesResponse.ok) {
          const inviteData = (await invitesResponse.json()) as { invites?: MemberInviteSummary[] };
          setInvites(inviteData.invites || []);
        }
        setLoading(false);
      }
    }

    void loadInitialInquiries();

    return () => {
      active = false;
    };
  }, []);

  async function updateStatus(inquiry: Inquiry) {
    setActionId(inquiry.id);
    const nextStatus = inquiry.status === "new" ? "contacted" : "new";

    await csrfFetch(`/api/inquiries/${inquiry.id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ status: nextStatus }),
    });

    await loadInquiries({ notify: true });
    setActionId(null);
  }

  async function removeInquiry(inquiry: Inquiry) {
    setActionId(inquiry.id);
    await csrfFetch(`/api/inquiries/${inquiry.id}`, { method: "DELETE" });
    await loadInquiries({ notify: true });
    setActionId(null);
  }

  async function recordActivity(inquiry: Inquiry) {
    if (!activityNote.trim()) {
      setActivityError("Add a short note describing what happened.");
      return;
    }

    setActionId(inquiry.id);
    setActivityError("");
    const response = await csrfFetch(`/api/inquiries/${inquiry.id}/activity`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ activity: activityType, note: activityNote }),
    });
    const data = (await response.json().catch(() => ({}))) as { error?: string };

    if (!response.ok) {
      setActivityError(data.error || "Could not record this step.");
      setActionId(null);
      return;
    }

    setActivityInquiryId(null);
    setActivityNote("");
    setActivityType("phone_call");
    setActionId(null);
  }

  const actionBtn =
    "inline-flex min-h-10 items-center justify-center rounded-md border border-[#cfc4b2] px-2.5 py-2 text-xs font-semibold disabled:opacity-60 lg:min-h-8 lg:px-2 lg:py-1 lg:text-[11px] lg:leading-4";

  return (
    <div className="mt-6 min-w-0 rounded-2xl border border-[#d9d0bf] bg-white p-4 shadow-sm sm:mt-8 sm:p-6">
      <div className="flex flex-col justify-between gap-3 border-b border-[#d9d0bf] pb-4 sm:flex-row sm:items-center sm:pb-5">
        <div className="min-w-0">
          <h2 className="text-xl font-semibold text-[#274739] sm:text-2xl">{heading}</h2>
          <p className="mt-1 text-sm text-[#5e675f]">{subheading}</p>
        </div>
        <div className="flex flex-wrap gap-2">
          <Link
            href="/api/inquiries/export"
            className="inline-flex min-h-9 items-center rounded-full border border-[#cfc4b2] px-4 py-2 text-sm font-semibold text-[#274739]"
          >
            Export CSV
          </Link>
          <button
            type="button"
            onClick={() => void loadInquiries()}
            className="inline-flex min-h-9 items-center rounded-full bg-[#274739] px-4 py-2 text-sm font-semibold text-white"
          >
            {loading ? "Loading..." : "Refresh"}
          </button>
        </div>
      </div>

      {loading ? (
        <p className="py-6 text-sm text-[#5e675f]">Loading inquiries...</p>
      ) : filtered.length === 0 ? (
        <p className="py-6 text-sm text-[#5e675f]">{copy.empty}</p>
      ) : (
        <div className="admin-table-wrap">
          <div className="admin-table admin-table--inquiries" role="table">
            <div className="admin-table-head" role="row">
              <div role="columnheader" className="lg:text-center">
                Name
              </div>
              <div role="columnheader" className="lg:text-center">
                Interest
              </div>
              <div role="columnheader" className="lg:text-center">
                Contact
              </div>
              <div role="columnheader" className="lg:text-center">
                Message
              </div>
              <div role="columnheader" className="lg:text-center">
                Date
              </div>
              <div role="columnheader" className="lg:text-center">
                Actions
              </div>
            </div>
            <div className="admin-table-body">
              {filtered.map((inquiry, index) => (
                <div
                  key={inquiry.id}
                  className={`admin-table-row ${index % 2 === 1 ? "admin-table-row--zebra" : ""} ${
                    inquiry.status === "new" ? "border-l-[#274739]" : "border-l-[#d9d0bf]"
                  }`}
                  role="row"
                >
                  <div className="admin-table-cell min-w-0 lg:text-center" role="cell">
                    <p className="min-w-0 truncate text-sm font-semibold text-[#274739]" title={inquiry.name}>
                      {inquiry.name}
                    </p>
                    <p className="text-[11px] font-bold uppercase tracking-[0.08em] text-[#8a7a6a]">
                      {inquiry.status}
                      {mode === "new" || (mode === "all" && inquiry.status === "new") ? " · inquiry" : ""}
                    </p>
                  </div>
                  <div className="admin-table-cell min-w-0 lg:text-center" role="cell">
                    <p className="min-w-0 truncate text-sm text-[#274739]" title={inquiry.interest}>
                      <span className="admin-table-mobile-label">Interest</span>
                      {inquiry.interest}
                    </p>
                  </div>
                  <div className="admin-table-cell min-w-0 lg:text-center" role="cell">
                    <p className="min-w-0 truncate text-sm text-[#274739]" title={inquiry.phone}>
                      <span className="admin-table-mobile-label">Contact</span>
                      {inquiry.phone}
                    </p>
                    <p className="min-w-0 truncate text-xs text-[#5e675f]" title={inquiry.email}>
                      {inquiry.email}
                    </p>
                  </div>
                  <div className="admin-table-cell min-w-0 lg:text-center" role="cell">
                    <p
                      className={`min-w-0 text-sm text-[#5e675f] ${
                        inquiry.interest === healthQuestionnaireInterest
                          ? "whitespace-pre-wrap text-left lg:max-h-40 lg:overflow-auto"
                          : "truncate"
                      }`}
                      title={inquiry.message}
                    >
                      <span className="admin-table-mobile-label">Message</span>
                      {inquiry.message}
                    </p>
                  </div>
                  <div className="admin-table-cell min-w-0 lg:text-center" role="cell">
                    <time className="block truncate text-xs text-[#8a7a6a]" dateTime={inquiry.createdAt}>
                      <span className="admin-table-mobile-label">Date</span>
                      {new Date(inquiry.createdAt).toLocaleString()}
                    </time>
                  </div>
                  <div className="admin-table-cell admin-table-cell--actions lg:justify-center" role="cell">
                    <AdminEditContact
                      phone={inquiry.phone}
                      name={inquiry.name}
                      email={inquiry.email}
                      compact
                      onSaved={() => void loadInquiries({ notify: true })}
                    />
                    <ActivateMemberButton
                      sourceType="inquiry"
                      sourceId={inquiry.id}
                      invited={Boolean(findInviteForPhone(invites, inquiry.phone))}
                      onActivated={() => void loadInquiries()}
                    />
                    <button
                      type="button"
                      disabled={actionId === inquiry.id}
                      onClick={() => void updateStatus(inquiry)}
                      className={`${actionBtn} text-[#274739]`}
                    >
                      {inquiry.status === "new" ? "Mark contacted" : "Mark new"}
                    </button>
                    <button
                      type="button"
                      disabled={actionId === inquiry.id}
                      onClick={() => void removeInquiry(inquiry)}
                      className="inline-flex min-h-10 items-center justify-center rounded-md bg-[#7a2e36] px-2.5 py-2 text-xs font-semibold text-white disabled:opacity-60 lg:min-h-8 lg:px-2 lg:py-1 lg:text-[11px] lg:leading-4"
                    >
                      Delete
                    </button>
                    <button
                      type="button"
                      disabled={actionId === inquiry.id}
                      onClick={() => {
                        setActivityInquiryId((current) => (current === inquiry.id ? null : inquiry.id));
                        setActivityError("");
                      }}
                      className={`${actionBtn} text-[#274739]`}
                    >
                      {activityInquiryId === inquiry.id ? "Close activity" : "Record step"}
                    </button>
                    {activityInquiryId === inquiry.id ? (
                      <div className="mt-2 grid w-full min-w-56 gap-2 rounded-xl bg-[#f7f3ec] p-3 text-left">
                        <label className="text-[11px] font-bold uppercase tracking-[0.08em] text-[#6f6255]">
                          Activity
                          <select
                            value={activityType}
                            onChange={(event) => setActivityType(event.target.value)}
                            className="mt-1 min-h-10 w-full rounded-lg border border-[#d7cbb9] bg-white px-2 text-sm font-normal normal-case tracking-normal text-[#274739]"
                          >
                            <option value="phone_call">Phone call</option>
                            <option value="whatsapp_message">WhatsApp message</option>
                            <option value="follow_up">Follow-up</option>
                            <option value="appointment_scheduled">Appointment scheduled</option>
                            <option value="closed">Inquiry closed</option>
                            <option value="note">Internal note</option>
                          </select>
                        </label>
                        <label className="text-[11px] font-bold uppercase tracking-[0.08em] text-[#6f6255]">
                          What happened
                          <textarea
                            value={activityNote}
                            onChange={(event) => setActivityNote(event.target.value)}
                            maxLength={1_000}
                            rows={3}
                            className="mt-1 w-full rounded-lg border border-[#d7cbb9] bg-white px-2 py-2 text-sm font-normal normal-case tracking-normal text-[#274739]"
                            placeholder="Example: Spoke on phone; interested in the quarterly membership. Follow up Friday."
                          />
                        </label>
                        {activityError ? <p className="text-xs font-semibold text-[#7a2e36]">{activityError}</p> : null}
                        <button
                          type="button"
                          disabled={actionId === inquiry.id}
                          onClick={() => void recordActivity(inquiry)}
                          className="min-h-10 rounded-lg bg-[#274739] px-3 text-xs font-bold text-white disabled:opacity-60"
                        >
                          Save activity
                        </button>
                      </div>
                    ) : null}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}