import { useState, useMemo, useRef, useEffect } from "react";
import { PLATFORM_METRICS, getMetricValue, formatMetricValue } from "./platformMetrics";
import type { PostInsight } from "../../hooks/usePostInsights";
import clsx from "clsx";

interface Props {
  posts: PostInsight[];
  platformType: string;
  title?: string;
  pageSize?: number;
}

export default function EnhancedPostsTable({ posts, platformType, title = "Post Performance", pageSize = 10 }: Props) {
  const config = PLATFORM_METRICS[platformType];
  if (!config) return null;

  const allColumns = config.table;
  const storageKey = `viraly-cols-${platformType}`;

  const [visibleCols, setVisibleCols] = useState<Set<string>>(() => {
    try {
      const saved = localStorage.getItem(storageKey);
      if (saved) return new Set(JSON.parse(saved));
    } catch { /* ignore */ }
    return new Set(allColumns.map((c) => c.key));
  });

  const updateVisibleCols = (updater: (prev: Set<string>) => Set<string>) => {
    setVisibleCols((prev) => {
      const next = updater(prev);
      try { localStorage.setItem(storageKey, JSON.stringify([...next])); } catch { /* ignore */ }
      return next;
    });
  };
  const [sortKey, setSortKey] = useState<string | null>(null);
  const [sortDir, setSortDir] = useState<"asc" | "desc">("desc");
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(pageSize);
  const [colMenuOpen, setColMenuOpen] = useState(false);
  const colMenuRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!colMenuOpen) return;
    const handler = (e: MouseEvent) => {
      if (colMenuRef.current && !colMenuRef.current.contains(e.target as Node)) setColMenuOpen(false);
    };
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, [colMenuOpen]);

  const handleSort = (key: string) => {
    if (sortKey === key) setSortDir((d) => (d === "asc" ? "desc" : "asc"));
    else { setSortKey(key); setSortDir("desc"); }
  };

  const sorted = useMemo(() => {
    if (!sortKey) return posts;
    return [...posts].sort((a, b) => {
      const va = getMetricValue(a, platformType, sortKey);
      const vb = getMetricValue(b, platformType, sortKey);
      return sortDir === "asc" ? va - vb : vb - va;
    });
  }, [posts, sortKey, sortDir, platformType]);

  const totalPages = Math.ceil(sorted.length / rowsPerPage);
  const paginated = sorted.slice(page * rowsPerPage, (page + 1) * rowsPerPage);
  const visibleColumns = allColumns.filter((c) => visibleCols.has(c.key));

  return (
    <div>
      <div className="vr-flex vr-items-center vr-justify-between vr-mb-3">
        <div>
          <h4 className="vr-text-xs vr-font-semibold vr-text-gray-700">{title}</h4>
          <p className="vr-text-xs vr-text-gray-400">{posts.length} post{posts.length !== 1 ? "s" : ""}</p>
        </div>

        {/* Column visibility toggle */}
        <div className="vr-relative" ref={colMenuRef}>
          <button
            onClick={() => setColMenuOpen(!colMenuOpen)}
            className="vr-inline-flex vr-items-center vr-gap-1.5 vr-px-2.5 vr-py-1.5 vr-rounded-md vr-text-xs vr-font-medium vr-text-gray-500 vr-bg-gray-100 hover:vr-bg-gray-200 vr-border-0 vr-cursor-pointer vr-transition-colors"
          >
            <i className="fa-solid fa-table-columns" style={{ fontSize: "9px" }} />
            Columns
          </button>
          {colMenuOpen && (
            <div className="vr-absolute vr-right-0 vr-mt-1 vr-w-48 vr-bg-white vr-border vr-border-gray-200 vr-rounded-lg vr-shadow-lg vr-z-50 vr-py-1 vr-max-h-64 vr-overflow-y-auto">
              {allColumns.map((col) => (
                <label key={col.key} className="vr-flex vr-items-center vr-gap-2 vr-px-3 vr-py-1.5 vr-text-xs vr-text-gray-700 hover:vr-bg-gray-50 vr-cursor-pointer">
                  <input
                    type="checkbox"
                    checked={visibleCols.has(col.key)}
                    onChange={() => {
                      updateVisibleCols((prev) => {
                        const next = new Set(prev);
                        if (next.has(col.key)) next.delete(col.key);
                        else next.add(col.key);
                        return next;
                      });
                    }}
                    className="vr-w-3 vr-h-3"
                    style={{ accentColor: "#E03058" }}
                  />
                  {col.label}
                </label>
              ))}
              <div className="vr-border-t vr-border-gray-100 vr-mt-1 vr-pt-1 vr-px-3">
                <button
                  onClick={() => { updateVisibleCols(() => new Set(allColumns.map((c) => c.key))); setColMenuOpen(false); }}
                  className="vr-text-xs vr-text-primary-600 vr-font-medium vr-border-0 vr-bg-transparent vr-cursor-pointer vr-p-0"
                >
                  Reset to all
                </button>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Table */}
      <div className="vr-overflow-x-auto vr-rounded-lg vr-border vr-border-gray-200">
        <table className="vr-w-full vr-text-xs" style={{ borderCollapse: "collapse" }}>
          <thead>
            <tr className="vr-bg-gray-50 vr-border-b vr-border-gray-200">
              <th className="vr-text-left vr-px-3 vr-py-2.5 vr-font-semibold vr-text-gray-500 vr-whitespace-nowrap vr-sticky vr-left-0 vr-bg-gray-50 vr-z-10" style={{ minWidth: "180px" }}>
                Post
              </th>
              <th className="vr-text-left vr-px-3 vr-py-2.5 vr-font-semibold vr-text-gray-500 vr-whitespace-nowrap" style={{ minWidth: "70px" }}>
                Date
              </th>
              {visibleColumns.map((col) => (
                <th
                  key={col.key}
                  onClick={() => handleSort(col.key)}
                  className={clsx(
                    "vr-text-right vr-px-3 vr-py-2.5 vr-font-semibold vr-whitespace-nowrap vr-cursor-pointer hover:vr-text-gray-900 vr-transition-colors vr-select-none",
                    sortKey === col.key ? "vr-text-primary-600" : "vr-text-gray-500"
                  )}
                >
                  {col.label}
                  {sortKey === col.key && (
                    <i className={`fa-solid fa-caret-${sortDir === "asc" ? "up" : "down"} vr-ml-1`} style={{ fontSize: "9px" }} />
                  )}
                </th>
              ))}
            </tr>
          </thead>
          <tbody className="vr-divide-y vr-divide-gray-100">
            {paginated.map((post, i) => {
              const date = post.publishedAt || post.scheduledAt;
              return (
                <tr key={post.id || i} className="hover:vr-bg-gray-50 vr-transition-colors">
                  <td className="vr-px-3 vr-py-2.5 vr-sticky vr-left-0 vr-bg-white vr-z-10">
                    <div className="vr-flex vr-items-center vr-gap-2.5">
                      {post.thumbnailUrl && (
                        <img src={post.thumbnailUrl} alt="" className="vr-w-8 vr-h-8 vr-rounded vr-object-cover vr-flex-shrink-0" />
                      )}
                      <span className="vr-text-gray-900 vr-font-medium vr-truncate" style={{ maxWidth: "180px" }}>
                        {post.title || post.caption || "Post"}
                      </span>
                    </div>
                  </td>
                  <td className="vr-px-3 vr-py-2.5 vr-text-gray-400 vr-whitespace-nowrap">
                    {date ? new Date(date).toLocaleDateString(undefined, { month: "short", day: "numeric" }) : "—"}
                  </td>
                  {visibleColumns.map((col) => {
                    const val = getMetricValue(post, platformType, col.key);
                    return (
                      <td key={col.key} className="vr-px-3 vr-py-2.5 vr-text-right vr-text-gray-700 vr-font-medium vr-whitespace-nowrap">
                        {formatMetricValue(val, col.format)}
                      </td>
                    );
                  })}
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {/* Pagination */}
      {sorted.length > 0 && (
        <div className="vr-flex vr-items-center vr-justify-between vr-mt-3 vr-flex-wrap vr-gap-2">
          <div className="vr-flex vr-items-center vr-gap-2">
            <span className="vr-text-xs vr-text-gray-400">
              Showing {page * rowsPerPage + 1}–{Math.min((page + 1) * rowsPerPage, sorted.length)} of {sorted.length}
            </span>
            <select
              value={rowsPerPage}
              onChange={(e) => { setRowsPerPage(Number(e.target.value)); setPage(0); }}
              className="vr-text-xs vr-text-gray-500 vr-bg-gray-100 vr-border-0 vr-rounded-md vr-px-2 vr-py-1 vr-cursor-pointer"
            >
              {[10, 25, 50].map((n) => (
                <option key={n} value={n}>{n} rows</option>
              ))}
            </select>
          </div>
          {totalPages > 1 && (
            <div className="vr-flex vr-gap-1">
              <button
                onClick={() => setPage((p) => Math.max(0, p - 1))}
                disabled={page === 0}
                className="vr-px-2.5 vr-py-1 vr-rounded-md vr-text-xs vr-font-medium vr-text-gray-500 vr-bg-gray-100 hover:vr-bg-gray-200 vr-border-0 vr-cursor-pointer disabled:vr-opacity-40"
              >
                Prev
              </button>
              <span className="vr-px-2 vr-py-1 vr-text-xs vr-text-gray-500">
                {page + 1} / {totalPages}
              </span>
              <button
                onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
                disabled={page >= totalPages - 1}
                className="vr-px-2.5 vr-py-1 vr-rounded-md vr-text-xs vr-font-medium vr-text-gray-500 vr-bg-gray-100 hover:vr-bg-gray-200 vr-border-0 vr-cursor-pointer disabled:vr-opacity-40"
              >
                Next
              </button>
            </div>
          )}
        </div>
      )}
    </div>
  );
}