import { useState } from "react";
import clsx from "clsx";
import { toast } from "react-toastify";

interface ExportColumn {
  key: string;
  label: string;
}

interface Props {
  open: boolean;
  onClose: () => void;
  platformType: string;
  channelId: string;
  columns: ExportColumn[];
}

export default function ExportDialog({ open, onClose, platformType, channelId, columns }: Props) {
  const [startDate, setStartDate] = useState("");
  const [endDate, setEndDate] = useState("");
  const [selectedCols, setSelectedCols] = useState<Set<string>>(new Set(columns.map((c) => c.key)));
  const [exporting, setExporting] = useState(false);

  if (!open) return null;

  const toggleCol = (key: string) => {
    setSelectedCols((prev) => {
      const next = new Set(prev);
      if (next.has(key)) next.delete(key);
      else next.add(key);
      return next;
    });
  };

  const selectAll = () => setSelectedCols(new Set(columns.map((c) => c.key)));
  const deselectAll = () => setSelectedCols(new Set());

  const handleExport = async () => {
    if (selectedCols.size === 0) {
      toast.error("Select at least one column to export.");
      return;
    }

    setExporting(true);
    try {
      const baseUrl = (window as any).viralyWP.restUrl.replace(/\/+$/, "");
      const nonce = (window as any).viralyWP.restNonce;

      const payload: any = {
        channelId,
        postMetrics: Array.from(selectedCols),
      };
      if (startDate) payload.startDate = startDate;
      if (endDate) payload.endDate = endDate;

      const res = await fetch(`${baseUrl}/analytics/export/${platformType.toLowerCase()}`, {
        method: "POST",
        credentials: "same-origin",
        headers: { "X-WP-Nonce": nonce, "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });

      if (!res.ok) {
        const errorData = await res.json().catch(() => null);
        throw new Error(errorData?.error || `Export failed (${res.status})`);
      }

      // Check if we got CSV or JSON error
      const contentType = res.headers.get("content-type") || "";
      if (contentType.includes("text/csv") || contentType.includes("application/octet-stream")) {
        const blob = await res.blob();
        const url = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = `${platformType.toLowerCase()}_analytics.csv`;
        a.click();
        URL.revokeObjectURL(url);
        toast.success("Export downloaded.");
        onClose();
      } else {
        // JSON response — might be an error or the CSV as text
        const text = await res.text();
        try {
          const json = JSON.parse(text);
          if (json.error) throw new Error(json.error);
          // If it's wrapped by PHP proxy, the CSV content might be in the body
          const blob = new Blob([text], { type: "text/csv" });
          const url = URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.href = url;
          a.download = `${platformType.toLowerCase()}_analytics.csv`;
          a.click();
          URL.revokeObjectURL(url);
          toast.success("Export downloaded.");
          onClose();
        } catch {
          // Raw CSV text
          const blob = new Blob([text], { type: "text/csv" });
          const url = URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.href = url;
          a.download = `${platformType.toLowerCase()}_analytics.csv`;
          a.click();
          URL.revokeObjectURL(url);
          toast.success("Export downloaded.");
          onClose();
        }
      }
    } catch (err: any) {
      toast.error(err.message || "Export failed.");
    } finally {
      setExporting(false);
    }
  };

  return (
    <div className="vr-fixed vr-inset-0 vr-z-50 vr-flex vr-items-center vr-justify-center vr-bg-black/30" onClick={onClose}>
      <div className="vr-bg-white vr-rounded-xl vr-shadow-2xl vr-w-full vr-max-w-md vr-mx-4 vr-overflow-hidden" onClick={(e) => e.stopPropagation()}>
        {/* Header */}
        <div className="vr-flex vr-items-center vr-justify-between vr-px-5 vr-py-4 vr-border-b vr-border-gray-200">
          <h3 className="vr-text-sm vr-font-bold vr-text-gray-900">
            Export {platformType} Analytics
          </h3>
          <button onClick={onClose} className="vr-text-gray-400 hover:vr-text-gray-600 vr-border-0 vr-bg-transparent vr-cursor-pointer vr-p-1">
            <i className="fa-solid fa-xmark" />
          </button>
        </div>

        {/* Content */}
        <div className="vr-p-5 vr-space-y-4">
          {/* Date range */}
          <div>
            <label className="vr-text-xs vr-font-semibold vr-text-gray-500 vr-uppercase vr-tracking-wide vr-mb-2 vr-block">
              Date Range (optional)
            </label>
            <div className="vr-flex vr-gap-2">
              <input
                type="date"
                value={startDate}
                onChange={(e) => setStartDate(e.target.value)}
                className="vr-flex-1 vr-px-3 vr-py-2 vr-rounded-lg vr-border vr-border-gray-200 vr-text-xs vr-outline-none focus:vr-border-primary-300"
                placeholder="From"
              />
              <input
                type="date"
                value={endDate}
                onChange={(e) => setEndDate(e.target.value)}
                className="vr-flex-1 vr-px-3 vr-py-2 vr-rounded-lg vr-border vr-border-gray-200 vr-text-xs vr-outline-none focus:vr-border-primary-300"
                placeholder="To"
              />
            </div>
          </div>

          {/* Columns */}
          <div>
            <div className="vr-flex vr-items-center vr-justify-between vr-mb-2">
              <label className="vr-text-xs vr-font-semibold vr-text-gray-500 vr-uppercase vr-tracking-wide">
                Columns ({selectedCols.size} selected)
              </label>
              <button
                onClick={selectedCols.size === columns.length ? deselectAll : selectAll}
                className="vr-text-xs vr-text-primary-600 vr-font-semibold vr-border-0 vr-bg-transparent vr-cursor-pointer vr-p-0"
              >
                {selectedCols.size === columns.length ? "Deselect All" : "Select All"}
              </button>
            </div>
            <div className="vr-flex vr-flex-wrap vr-gap-1.5">
              {columns.map((col) => (
                <button
                  key={col.key}
                  onClick={() => toggleCol(col.key)}
                  className={clsx(
                    "vr-px-2.5 vr-py-1 vr-rounded-full vr-text-xs vr-font-medium vr-border-0 vr-cursor-pointer vr-transition-all",
                    selectedCols.has(col.key)
                      ? "vr-bg-primary-600 vr-text-white"
                      : "vr-bg-gray-100 vr-text-gray-500 hover:vr-bg-gray-200"
                  )}
                >
                  {col.label}
                </button>
              ))}
            </div>
          </div>
        </div>

        {/* Footer */}
        <div className="vr-flex vr-items-center vr-justify-end vr-gap-2 vr-px-5 vr-py-4 vr-border-t vr-border-gray-100">
          <button
            onClick={onClose}
            className="vr-px-4 vr-py-2 vr-text-xs vr-font-medium vr-text-gray-500 hover:vr-text-gray-700 vr-border-0 vr-bg-transparent vr-cursor-pointer"
          >
            Cancel
          </button>
          <button
            onClick={handleExport}
            disabled={exporting || selectedCols.size === 0}
            className="vr-inline-flex vr-items-center vr-gap-1.5 vr-px-4 vr-py-2 vr-bg-primary-600 vr-text-white vr-rounded-lg vr-text-xs vr-font-semibold hover:vr-bg-primary-700 vr-transition-colors disabled:vr-opacity-50 vr-border-0 vr-cursor-pointer"
          >
            {exporting ? (
              <>
                <div className="vr-w-3 vr-h-3 vr-border-2 vr-border-white/30 vr-border-t-white vr-rounded-full vr-animate-spin" />
                Exporting...
              </>
            ) : (
              <>
                <i className="fa-solid fa-download" style={{ fontSize: "10px" }} />
                Export CSV
              </>
            )}
          </button>
        </div>
      </div>
    </div>
  );
}