"use client";

import { useEffect, useMemo, useState } from "react";
import { ColumnDef } from "@tanstack/react-table";
import DataTable from "@/components/common/DataTable";
import CustomLoader from "@/components/common/CustomLoader";

interface ContactEnquiry {
  id: string;
  name: string;
  email: string;
  phone?: string | null;
  subject?: string | null;
  message: string;
  company_name?: string | null;
  ip_address?: string | null;
  status?: string | null;
  admin_notes?: string | null;
  created_at?: string | null;
}

const statusColorMap: Record<string, string> = {
  Pending: "warning",
  Replied: "primary",
  Resolved: "success",
  Spam: "danger",
};

export default function ContactEnquiriesPage() {
  const [data, setData] = useState<ContactEnquiry[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedEnquiry, setSelectedEnquiry] = useState<ContactEnquiry | null>(null);
  const [markingReplied, setMarkingReplied] = useState<Record<string, boolean>>({});

  useEffect(() => {
    fetch("/api/admin/contact-enquiries")
      .then((res) => res.json())
      .then((res) => {
        setData(res.data || []);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, []);

  const handleDelete = async (id: string) => {
    if (!confirm("Are you sure you want to delete this enquiry?")) return;

    const res = await fetch(`/api/admin/contact-enquiries/${id}`, {
      method: "DELETE",
    });

    const result = await res.json();
    if (result.success) {
      setData((prev) => prev.filter((e) => e.id !== id));
      if (selectedEnquiry?.id === id) setSelectedEnquiry(null);
    }
  };

  const handleView = (enquiry: ContactEnquiry) => {
    setSelectedEnquiry(enquiry);
  };

  const handleCloseModal = () => {
    setSelectedEnquiry(null);
  };

  // Marks the enquiry as "Replied" once the admin has responded to the
  // person outside the app (phone, personal email client, etc). No redirect,
  // no mail composition here — just a status update after confirmation.
  const handleMarkReplied = async (enquiry: ContactEnquiry) => {
    if (!confirm(`Mark the enquiry from ${enquiry.name} as Replied?`)) return;

    setMarkingReplied((prev) => ({ ...prev, [enquiry.id]: true }));
    try {
      const res = await fetch(`/api/admin/contact-enquiries/${enquiry.id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ status: "Replied" }),
      });
      const result = await res.json();

      if (result.success) {
        const updated = { ...enquiry, status: "Replied" };
        setData((prev) => prev.map((e) => (e.id === enquiry.id ? updated : e)));
        if (selectedEnquiry?.id === enquiry.id) setSelectedEnquiry(updated);
      } else {
        alert(result.message || "Failed to update status. Please try again.");
      }
    } catch {
      alert("Something went wrong while updating the status. Please try again.");
    } finally {
      setMarkingReplied((prev) => ({ ...prev, [enquiry.id]: false }));
    }
  };

  const columns = useMemo<ColumnDef<ContactEnquiry>[]>(
    () => [
      {
        accessorKey: "name",
        header: "Name",
      },
      {
        accessorKey: "email",
        header: "Email",
      },
      {
        accessorKey: "phone",
        header: "Phone",
        cell: ({ getValue }) => getValue() || <span className="text-muted">—</span>,
      },
      {
        accessorKey: "subject",
        header: "Subject",
        cell: ({ getValue }) => {
          const val = getValue() as string | null;
          if (!val) return <span className="text-muted">—</span>;
          return val.length > 40 ? val.slice(0, 40) + "…" : val;
        },
      },
      {
        accessorKey: "status",
        header: "Status",
        cell: ({ getValue }) => {
          const status = (getValue() as string) || "Pending";
          const color = statusColorMap[status] ?? "secondary";
          return <span className={`badge bg-${color}`}>{status}</span>;
        },
      },
      {
        // Dedicated column just for the reply action/state — kept separate
        // from the Actions column (view/delete) since it represents a
        // distinct workflow step, not a generic row action.
        id: "reply_status",
        header: "Reply Status",
        cell: ({ row }) => {
          const enquiry = row.original;
          const isReplied = enquiry.status === "Replied";
          const isMarking = !!markingReplied[enquiry.id];

          if (isReplied) {
            return (
              <span className="text-success small d-flex align-items-center gap-1">
                <i className="bi bi-check-circle-fill"></i> Replied
              </span>
            );
          }

          return (
            <button
              onClick={() => handleMarkReplied(enquiry)}
              className="btn btn-outline-primary btn-sm"
              disabled={isMarking}
            >
              {isMarking ? (
                <>
                  <span className="spinner-border spinner-border-sm me-1" />
                  Updating...
                </>
              ) : (
                <>
                  {/* <i className="bi bi-check2 me-1"></i> */}
                  Mark Replied
                </>
              )}
            </button>
          );
        },
      },
      {
        accessorKey: "created_at",
        header: "Date",
        cell: ({ getValue }) => {
          const val = getValue() as string | null;
          if (!val) return <span className="text-muted">—</span>;
          return new Date(val).toLocaleDateString("en-IN", {
            day: "2-digit",
            month: "short",
            year: "numeric",
          });
        },
      },
      {
        header: "Actions",
        cell: ({ row }) => {
          const enquiry = row.original;
          return (
            <div className="d-flex gap-1">
              <button
                onClick={() => handleView(enquiry)}
                className="btn btn-info btn-sm table-action-btn"
                title="View"
              >
                <i className="bi bi-eye"></i>
              </button>
              <button
                onClick={() => handleDelete(enquiry.id)}
                className="btn btn-danger btn-sm table-action-btn"
                title="Delete"
              >
                <i className="bi bi-trash"></i>
              </button>
            </div>
          );
        },
      },
    ],
    [markingReplied]
  );

  if (loading) return <CustomLoader />;

  return (
    <div className="admin-page-wrapper">
      <div className="admin-page-header">
        <div className="d-flex justify-content-between align-items-center">
          <div>
            <h2 className="admin-page-title">Contact Enquiries</h2>
            <p className="admin-page-subtitle">Manage all contact enquiries</p>
          </div>
        </div>
      </div>

      <div className="admin-table-section">
        <DataTable columns={columns} data={data} />
      </div>

      {/* React-controlled modal overlay — no Bootstrap JS needed */}
      {selectedEnquiry && (
        <div
          className="modal d-block"
          style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
          onClick={(e) => {
            if (e.target === e.currentTarget) handleCloseModal();
          }}
        >
          <div className="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div className="modal-content">
              <div className="modal-header">
                <h5 className="modal-title">Enquiry Details</h5>
                <button
                  type="button"
                  className="btn-close"
                  onClick={handleCloseModal}
                  aria-label="Close"
                />
              </div>
              <div className="modal-body">
                <div className="row g-3">
                  <div className="col-md-6">
                    <label className="fw-semibold text-muted small">Name</label>
                    <p className="mb-0">{selectedEnquiry.name}</p>
                  </div>
                  <div className="col-md-6">
                    <label className="fw-semibold text-muted small">Email</label>
                    <p className="mb-0">{selectedEnquiry.email}</p>
                  </div>
                  <div className="col-md-6">
                    <label className="fw-semibold text-muted small">Phone</label>
                    <p className="mb-0">{selectedEnquiry.phone || "—"}</p>
                  </div>
                  {/* <div className="col-md-6">
                    <label className="fw-semibold text-muted small">Company</label>
                    <p className="mb-0">{selectedEnquiry.company_name || "—"}</p>
                  </div> */}
                  <div className="col-12">
                    <label className="fw-semibold text-muted small">Subject</label>
                    <p className="mb-0">{selectedEnquiry.subject || "—"}</p>
                  </div>
                  <div className="col-12">
                    <label className="fw-semibold text-muted small">Message</label>
                    <p
                      className="mb-0 border rounded p-2 bg-light"
                      style={{ whiteSpace: "pre-wrap" }}
                    >
                      {selectedEnquiry.message}
                    </p>
                  </div>
                  <div className="col-md-6">
                    <label className="fw-semibold text-muted small">Status</label>
                    <p className="mb-0">
                      <span
                        className={`badge bg-${statusColorMap[selectedEnquiry.status ?? "Pending"] ?? "secondary"
                          }`}
                      >
                        {selectedEnquiry.status || "Pending"}
                      </span>
                    </p>
                  </div>
                  {selectedEnquiry.admin_notes && (
                    <div className="col-12">
                      <label className="fw-semibold text-muted small">Admin Notes</label>
                      <p className="mb-0">{selectedEnquiry.admin_notes}</p>
                    </div>
                  )}
                  <div className="col-md-6">
                    <label className="fw-semibold text-muted small">Received On</label>
                    <p className="mb-0">
                      {selectedEnquiry.created_at
                        ? new Date(selectedEnquiry.created_at).toLocaleString("en-IN")
                        : "—"}
                    </p>
                  </div>
                </div>
              </div>
              <div className="modal-footer">
                {selectedEnquiry.status !== "Replied" && (
                  <button
                    type="button"
                    className="btn btn-primary"
                    disabled={!!markingReplied[selectedEnquiry.id]}
                    onClick={() => handleMarkReplied(selectedEnquiry)}
                  >
                    {markingReplied[selectedEnquiry.id] ? (
                      <span className="spinner-border spinner-border-sm me-2" />
                    ) : (
                      <i className="bi bi-check2 me-2" />
                    )}
                    Mark as Replied
                  </button>
                )}
                <button
                  type="button"
                  className="btn btn-secondary"
                  onClick={handleCloseModal}
                >
                  Close
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}