"use client";
import { useMemo, useState } from "react";

const defaults = {
  shareContact: true,
  inquiry: true,
  appointment: true,
  whatsappLead: true,
  subscriber: true,
  autoReplyEnabled: true,
  autoReplySubject: "Thanks for contacting me",
  autoReplyMessage:
    "Your information has been received. I will get back to you soon.",
};
const statusOptions = ["new", "contacted", "converted", "closed"];

export default function LeadManager({
  value,
  tracking,
  submissions,
  onChange,
  onTrackingChange,
  onSave,
  onRefresh,
}: any) {
  const settings = { ...defaults, ...(value || {}) };
  const leads = useMemo(
    () =>
      submissions.filter((x: any) =>
        ["lead", "inquiry", "subscriber", "booking", "contact"].includes(
          x.kind,
        ),
      ),
    [submissions],
  );
  const [filter, setFilter] = useState("all");
  const updateStatus = async (id: number, status: string) => {
    await fetch("/api/cms", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ action: "status", id, status }),
    });
    onRefresh();
  };
  const exportCsv = () => {
    const rows = leads.filter(
      (x: any) => filter === "all" || x.status === filter,
    );
    const cols = [
      "ID",
      "Type",
      "Status",
      "Name",
      "Phone",
      "Email",
      "Message",
      "Date",
    ];
    const esc = (v: any) => `"${String(v ?? "").replaceAll('"', '""')}"`;
    const csv = [
      cols.join(","),
      ...rows.map((x: any) =>
        [
          x.id,
          x.kind,
          x.status,
          x.data?.name,
          x.data?.phone,
          x.data?.email,
          x.data?.message || x.data?.consultation,
          x.created_at,
        ]
          .map(esc)
          .join(","),
      ),
    ].join("\n");
    const a = document.createElement("a");
    a.href = URL.createObjectURL(new Blob([csv], { type: "text/csv" }));
    a.download = `mypagee-leads-${new Date().toISOString().slice(0, 10)}.csv`;
    a.click();
    URL.revokeObjectURL(a.href);
  };
  return (
    <>
      <section className="card">
        <h2>Public lead collection</h2>
        <p className="helper">
          Choose which lead actions visitors can use on your public profile.
        </p>
        <div className="lead-toggles">
          {[
            ["shareContact", "Share your contact with me"],
            ["inquiry", "Inquiry form"],
            ["appointment", "Appointment request"],
            ["whatsappLead", "WhatsApp lead button"],
            ["subscriber", "Email / SMS subscriber form"],
          ].map(([key, label]) => (
            <label key={key}>
              <span>{label}</span>
              <input
                type="checkbox"
                checked={!!settings[key]}
                onChange={(e) =>
                  onChange({ ...settings, [key]: e.target.checked })
                }
              />
            </label>
          ))}
        </div>
        <h3>Auto reply</h3>
        <label className="storetoggle">
          <input
            type="checkbox"
            checked={!!settings.autoReplyEnabled}
            onChange={(e) =>
              onChange({ ...settings, autoReplyEnabled: e.target.checked })
            }
          />
          <span>Send configured confirmation after form submission</span>
        </label>
        <label className="field">
          <span>Reply subject</span>
          <input
            value={settings.autoReplySubject}
            onChange={(e) =>
              onChange({ ...settings, autoReplySubject: e.target.value })
            }
          />
        </label>
        <label className="field">
          <span>Reply message</span>
          <textarea
            value={settings.autoReplyMessage}
            onChange={(e) =>
              onChange({ ...settings, autoReplyMessage: e.target.value })
            }
          />
        </label>
        <button className="saveall" onClick={onSave}>
          Save lead settings
        </button>
      </section>
      <section className="card">
        <div className="lead-head">
          <div>
            <h2>Lead pipeline</h2>
            <p>{leads.length} contacts received</p>
          </div>
          <div>
            <select value={filter} onChange={(e) => setFilter(e.target.value)}>
              <option value="all">All statuses</option>
              {statusOptions.map((x) => (
                <option key={x}>{x}</option>
              ))}
            </select>
            <button onClick={exportCsv}>
              <i className="uil uil-file-download" /> CSV export
            </button>
          </div>
        </div>
        <div className="lead-table">
          {leads
            .filter((x: any) => filter === "all" || x.status === filter)
            .map((x: any) => (
              <article key={x.id}>
                <div>
                  <span className={`lead-kind ${x.kind}`}>{x.kind}</span>
                  <b>{x.data?.name || x.data?.email || "New lead"}</b>
                  <small>
                    {x.data?.phone || x.data?.email || "No contact detail"}
                  </small>
                </div>
                <p>
                  {x.data?.message ||
                    x.data?.consultation ||
                    x.data?.item ||
                    "—"}
                </p>
                <select
                  value={x.status}
                  onChange={(e) => updateStatus(x.id, e.target.value)}
                >
                  {statusOptions.map((s) => (
                    <option key={s}>{s}</option>
                  ))}
                </select>
                <time>{new Date(x.created_at).toLocaleDateString()}</time>
              </article>
            ))}
        </div>
        {!leads.length && <div className="empty">No leads received yet.</div>}
      </section>
      <section className="card">
        <h2>Tracking integrations</h2>
        <p className="helper">
          Paste your IDs. Tracking scripts load only when an ID is saved.
        </p>
        <label className="field">
          <span>Facebook Pixel ID</span>
          <input
            value={tracking?.facebookPixel || ""}
            onChange={(e) =>
              onTrackingChange({ ...tracking, facebookPixel: e.target.value })
            }
            placeholder="1234567890"
          />
        </label>
        <label className="field">
          <span>Google Analytics Measurement ID</span>
          <input
            value={tracking?.googleAnalytics || ""}
            onChange={(e) =>
              onTrackingChange({ ...tracking, googleAnalytics: e.target.value })
            }
            placeholder="G-XXXXXXXXXX"
          />
        </label>
        <label className="field">
          <span>Google Tag Manager ID</span>
          <input
            value={tracking?.googleTagManager || ""}
            onChange={(e) =>
              onTrackingChange({
                ...tracking,
                googleTagManager: e.target.value,
              })
            }
            placeholder="GTM-XXXXXXX"
          />
        </label>
        <button className="saveall" onClick={onSave}>
          Save tracking IDs
        </button>
      </section>
    </>
  );
}