import { useState, useEffect, useRef } from "react";
import { useNavigate } from "react-router-dom";
import api from "../api/client";
import { useAuth } from "../auth/AuthContext";
import SearchBar from "../components/SearchBar";
import ConfirmDialog from "../components/ConfirmDialog";
import {
  getLocalizedValue,
  getLanguageName,
  normalizeColor,
  formatDuration,
} from "./melodyUtils";

const MELODY_TYPES = ["", "orthodox", "catholic", "all"];
const MELODY_TONES = ["", "normal", "festive", "cheerful", "lamentation"];

// All available columns with their defaults
const ALL_COLUMNS = [
  { key: "status", label: "Status", defaultOn: true },
  { key: "color", label: "Color", defaultOn: true },
  { key: "name", label: "Name", defaultOn: true, alwaysOn: true },
  { key: "description", label: "Description", defaultOn: false },
  { key: "type", label: "Type", defaultOn: true },
  { key: "tone", label: "Tone", defaultOn: true },
  { key: "totalNotes", label: "Total Notes", defaultOn: true },
  { key: "minSpeed", label: "Min Speed", defaultOn: false },
  { key: "maxSpeed", label: "Max Speed", defaultOn: false },
  { key: "tags", label: "Tags", defaultOn: false },
  { key: "speed", label: "Speed", defaultOn: false },
  { key: "duration", label: "Duration", defaultOn: false },
  { key: "totalRunDuration", label: "Total Run", defaultOn: false },
  { key: "pauseDuration", label: "Pause", defaultOn: false },
  { key: "infiniteLoop", label: "Infinite", defaultOn: false },
  { key: "noteAssignments", label: "Note Assignments", defaultOn: false },
  { key: "isTrueRing", label: "True Ring", defaultOn: true },
  { key: "docId", label: "Document ID", defaultOn: false },
  { key: "pid", label: "PID", defaultOn: false },
];

function getDefaultVisibleColumns() {
  const saved = localStorage.getItem("melodyListColumns");
  if (saved) {
    try {
      return JSON.parse(saved);
    } catch {
      // ignore
    }
  }
  return ALL_COLUMNS.filter((c) => c.defaultOn).map((c) => c.key);
}

export default function MelodyList() {
  const [melodies, setMelodies] = useState([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [search, setSearch] = useState("");
  const [typeFilter, setTypeFilter] = useState("");
  const [toneFilter, setToneFilter] = useState("");
  const [statusFilter, setStatusFilter] = useState("");
  const [displayLang, setDisplayLang] = useState("en");
  const [melodySettings, setMelodySettings] = useState(null);
  const [deleteTarget, setDeleteTarget] = useState(null);
  const [unpublishTarget, setUnpublishTarget] = useState(null);
  const [actionLoading, setActionLoading] = useState(null);
  const [visibleColumns, setVisibleColumns] = useState(getDefaultVisibleColumns);
  const [showColumnPicker, setShowColumnPicker] = useState(false);
  const columnPickerRef = useRef(null);
  const navigate = useNavigate();
  const { hasPermission } = useAuth();
  const canEdit = hasPermission("melodies", "edit");

  useEffect(() => {
    api.get("/settings/melody").then((ms) => {
      setMelodySettings(ms);
      setDisplayLang(ms.primary_language || "en");
    });
  }, []);

  // Close column picker on outside click
  useEffect(() => {
    const handleClick = (e) => {
      if (columnPickerRef.current && !columnPickerRef.current.contains(e.target)) {
        setShowColumnPicker(false);
      }
    };
    if (showColumnPicker) {
      document.addEventListener("mousedown", handleClick);
      return () => document.removeEventListener("mousedown", handleClick);
    }
  }, [showColumnPicker]);

  const fetchMelodies = async () => {
    setLoading(true);
    setError("");
    try {
      const params = new URLSearchParams();
      if (search) params.set("search", search);
      if (typeFilter) params.set("type", typeFilter);
      if (toneFilter) params.set("tone", toneFilter);
      if (statusFilter) params.set("status", statusFilter);
      const qs = params.toString();
      const data = await api.get(`/melodies${qs ? `?${qs}` : ""}`);
      setMelodies(data.melodies);
      setTotal(data.total);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchMelodies();
  }, [search, typeFilter, toneFilter, statusFilter]);

  const handleDelete = async () => {
    if (!deleteTarget) return;
    try {
      await api.delete(`/melodies/${deleteTarget.id}`);
      setDeleteTarget(null);
      fetchMelodies();
    } catch (err) {
      setError(err.message);
      setDeleteTarget(null);
    }
  };

  const handlePublish = async (row) => {
    setActionLoading(row.id);
    try {
      await api.post(`/melodies/${row.id}/publish`);
      fetchMelodies();
    } catch (err) {
      setError(err.message);
    } finally {
      setActionLoading(null);
    }
  };

  const handleUnpublish = async () => {
    if (!unpublishTarget) return;
    setActionLoading(unpublishTarget.id);
    try {
      await api.post(`/melodies/${unpublishTarget.id}/unpublish`);
      setUnpublishTarget(null);
      fetchMelodies();
    } catch (err) {
      setError(err.message);
      setUnpublishTarget(null);
    } finally {
      setActionLoading(null);
    }
  };

  const toggleColumn = (key) => {
    const col = ALL_COLUMNS.find((c) => c.key === key);
    if (col?.alwaysOn) return;
    setVisibleColumns((prev) => {
      const next = prev.includes(key)
        ? prev.filter((k) => k !== key)
        : [...prev, key];
      localStorage.setItem("melodyListColumns", JSON.stringify(next));
      return next;
    });
  };

  const isVisible = (key) => visibleColumns.includes(key);

  const getDisplayName = (nameVal) =>
    getLocalizedValue(nameVal, displayLang, "Untitled");

  const renderCellValue = (key, row) => {
    const info = row.information || {};
    const ds = row.default_settings || {};
    switch (key) {
      case "status":
        return (
          <span
            className="px-2 py-0.5 text-xs font-semibold rounded-full"
            style={row.status === "published"
              ? { backgroundColor: "rgba(22,163,74,0.15)", color: "#22c55e" }
              : { backgroundColor: "rgba(156,163,175,0.15)", color: "#9ca3af" }
            }
          >
            {row.status === "published" ? "Live" : "Draft"}
          </span>
        );
      case "color":
        return info.color ? (
          <span
            className="inline-block w-3 h-8 rounded-sm"
            style={{ backgroundColor: normalizeColor(info.color) }}
            title={info.color}
          />
        ) : (
          <span className="inline-block w-3 h-8 rounded-sm" style={{ backgroundColor: "var(--border-primary)" }} />
        );
      case "name":
        return (
          <div>
            <span className="font-medium" style={{ color: "var(--text-heading)" }}>
              {getDisplayName(info.name)}
            </span>
            {isVisible("description") && (
              <p className="text-xs mt-0.5 truncate max-w-xs" style={{ color: "var(--text-muted)" }}>
                {getLocalizedValue(info.description, displayLang) || "-"}
              </p>
            )}
          </div>
        );
      case "type":
        return <span className="capitalize">{row.type}</span>;
      case "tone":
        return <span className="capitalize">{info.melodyTone || "-"}</span>;
      case "totalNotes":
        return info.totalNotes ?? "-";
      case "minSpeed":
        return info.minSpeed ?? "-";
      case "maxSpeed":
        return info.maxSpeed ?? "-";
      case "tags":
        return info.customTags?.length > 0 ? (
          <div className="flex flex-wrap gap-1">
            {info.customTags.map((tag) => (
              <span
                key={tag}
                className="px-1.5 py-0.5 text-xs rounded-full"
                style={{ backgroundColor: "var(--badge-blue-bg)", color: "var(--badge-blue-text)" }}
              >
                {tag}
              </span>
            ))}
          </div>
        ) : (
          "-"
        );
      case "speed":
        return ds.speed != null ? `${ds.speed}%` : "-";
      case "duration":
        return ds.duration != null ? formatDuration(ds.duration) : "-";
      case "totalRunDuration":
        return ds.totalRunDuration ?? "-";
      case "pauseDuration":
        return ds.pauseDuration ?? "-";
      case "infiniteLoop":
        return (
          <span
            className="px-2 py-0.5 text-xs rounded-full"
            style={{
              backgroundColor: ds.infiniteLoop ? "var(--success-bg)" : "var(--bg-card-hover)",
              color: ds.infiniteLoop ? "var(--success-text)" : "var(--text-muted)",
            }}
          >
            {ds.infiniteLoop ? "Yes" : "No"}
          </span>
        );
      case "noteAssignments":
        return ds.noteAssignments?.length > 0
          ? ds.noteAssignments.join(", ")
          : "-";
      case "isTrueRing":
        return (
          <span
            className="px-2 py-0.5 text-xs rounded-full"
            style={{
              backgroundColor: info.isTrueRing ? "var(--success-bg)" : "var(--bg-card-hover)",
              color: info.isTrueRing ? "var(--success-text)" : "var(--text-muted)",
            }}
          >
            {info.isTrueRing ? "Yes" : "No"}
          </span>
        );
      case "docId":
        return (
          <span className="font-mono text-xs" style={{ color: "var(--text-muted)" }}>{row.id}</span>
        );
      case "pid":
        return row.pid || "-";
      default:
        return "-";
    }
  };

  // Build visible column list (description is rendered inside name, not as its own column)
  const activeColumns = ALL_COLUMNS.filter(
    (c) => c.key !== "description" && isVisible(c.key)
  );

  const languages = melodySettings?.available_languages || ["en"];

  const selectClass =
    "px-3 py-2 rounded-md text-sm cursor-pointer border";

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-bold" style={{ color: "var(--text-heading)" }}>Melodies</h1>
        {canEdit && (
          <button
            onClick={() => navigate("/melodies/new")}
            className="px-4 py-2 text-sm rounded-md transition-colors cursor-pointer"
              style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
          >
            Add Melody
          </button>
        )}
      </div>

      <div className="mb-4 space-y-3">
        <SearchBar
          onSearch={setSearch}
          placeholder="Search by name, description, or tags..."
        />
        <div className="flex flex-wrap gap-3 items-center">
          <select
            value={typeFilter}
            onChange={(e) => setTypeFilter(e.target.value)}
            className={selectClass}
          >
            <option value="">All Types</option>
            {MELODY_TYPES.filter(Boolean).map((t) => (
              <option key={t} value={t}>
                {t.charAt(0).toUpperCase() + t.slice(1)}
              </option>
            ))}
          </select>
          <select
            value={toneFilter}
            onChange={(e) => setToneFilter(e.target.value)}
            className={selectClass}
          >
            <option value="">All Tones</option>
            {MELODY_TONES.filter(Boolean).map((t) => (
              <option key={t} value={t}>
                {t.charAt(0).toUpperCase() + t.slice(1)}
              </option>
            ))}
          </select>
          <select
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
            className={selectClass}
          >
            <option value="">All Statuses</option>
            <option value="published">Published (Live)</option>
            <option value="draft">Drafts</option>
          </select>
          {languages.length > 1 && (
            <select
              value={displayLang}
              onChange={(e) => setDisplayLang(e.target.value)}
              className={selectClass}
            >
              {languages.map((l) => (
                <option key={l} value={l}>
                  {getLanguageName(l)}
                </option>
              ))}
            </select>
          )}

          {/* Column visibility dropdown */}
          <div className="relative" ref={columnPickerRef}>
            <button
              type="button"
              onClick={() => setShowColumnPicker((prev) => !prev)}
              className="px-3 py-2 rounded-md text-sm transition-colors cursor-pointer flex items-center gap-1.5 border"
              style={{
                borderColor: "var(--border-primary)",
                color: "var(--text-secondary)",
              }}
            >
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
              </svg>
              Columns
            </button>
            {showColumnPicker && (
              <div
                className="absolute right-0 top-full mt-1 z-20 rounded-lg shadow-lg py-2 w-52 border"
                style={{
                  backgroundColor: "var(--bg-card)",
                  borderColor: "var(--border-primary)",
                }}
              >
                {ALL_COLUMNS.map((col) => (
                  <label
                    key={col.key}
                    className="flex items-center gap-2 px-3 py-1.5 text-sm cursor-pointer"
                    style={{
                      color: col.alwaysOn ? "var(--text-muted)" : "var(--text-primary)",
                    }}
                  >
                    <input
                      type="checkbox"
                      checked={isVisible(col.key)}
                      onChange={() => toggleColumn(col.key)}
                      disabled={col.alwaysOn}
                      className="h-3.5 w-3.5 rounded cursor-pointer"
                    />
                    {col.label}
                  </label>
                ))}
              </div>
            )}
          </div>

          <span className="flex items-center text-sm" style={{ color: "var(--text-muted)" }}>
            {total} {total === 1 ? "melody" : "melodies"}
          </span>
        </div>
      </div>

      {error && (
        <div
          className="text-sm rounded-md p-3 mb-4 border"
          style={{
            backgroundColor: "var(--danger-bg)",
            borderColor: "var(--danger)",
            color: "var(--danger-text)",
          }}
        >
          {error}
        </div>
      )}

      {loading ? (
        <div className="text-center py-8" style={{ color: "var(--text-muted)" }}>Loading...</div>
      ) : melodies.length === 0 ? (
        <div
          className="rounded-lg p-8 text-center text-sm border"
          style={{
            backgroundColor: "var(--bg-card)",
            borderColor: "var(--border-primary)",
            color: "var(--text-muted)",
          }}
        >
          No melodies found.
        </div>
      ) : (
        <div
          className="rounded-lg overflow-hidden border"
          style={{
            backgroundColor: "var(--bg-card)",
            borderColor: "var(--border-primary)",
          }}
        >
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr style={{ backgroundColor: "var(--bg-primary)", borderBottom: "1px solid var(--border-primary)" }}>
                  {activeColumns.map((col) => (
                    <th
                      key={col.key}
                      className={`px-4 py-3 text-left font-medium ${
                        col.key === "color" ? "w-8 px-2" : ""
                      }`}
                      style={{ color: "var(--text-muted)" }}
                    >
                      {col.key === "color" ? "" : col.label}
                    </th>
                  ))}
                  {canEdit && (
                    <th className="px-4 py-3 text-left font-medium w-24" style={{ color: "var(--text-muted)" }} />
                  )}
                </tr>
              </thead>
              <tbody>
                {melodies.map((row) => (
                  <tr
                    key={row.id}
                    onClick={() => navigate(`/melodies/${row.id}`)}
                    className="cursor-pointer transition-colors"
                    style={{ borderBottom: "1px solid var(--border-secondary)" }}
                    onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = "var(--bg-card-hover)")}
                    onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = "transparent")}
                  >
                    {activeColumns.map((col) => (
                      <td
                        key={col.key}
                        className={`px-4 py-3 ${
                          col.key === "color" ? "w-8 px-2" : ""
                        }`}
                        style={{ color: "var(--text-primary)" }}
                      >
                        {renderCellValue(col.key, row)}
                      </td>
                    ))}
                    {canEdit && (
                      <td className="px-4 py-3">
                        <div
                          className="flex gap-2"
                          onClick={(e) => e.stopPropagation()}
                        >
                          {row.status === "draft" ? (
                            <button
                              onClick={() => handlePublish(row)}
                              disabled={actionLoading === row.id}
                              className="text-xs cursor-pointer disabled:opacity-50"
                              style={{ color: "#22c55e" }}
                            >
                              {actionLoading === row.id ? "..." : "Publish"}
                            </button>
                          ) : (
                            <button
                              onClick={() => setUnpublishTarget(row)}
                              disabled={actionLoading === row.id}
                              className="text-xs cursor-pointer disabled:opacity-50"
                              style={{ color: "#ea580c" }}
                            >
                              Unpublish
                            </button>
                          )}
                          <button
                            onClick={() => navigate(`/melodies/${row.id}/edit`)}
                            className="text-xs cursor-pointer"
                            style={{ color: "var(--text-link)" }}
                          >
                            Edit
                          </button>
                          <button
                            onClick={() => setDeleteTarget(row)}
                            className="text-xs cursor-pointer"
                            style={{ color: "var(--danger)" }}
                          >
                            Delete
                          </button>
                        </div>
                      </td>
                    )}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      <ConfirmDialog
        open={!!deleteTarget}
        title="Delete Melody"
        message={`Are you sure you want to delete "${getDisplayName(deleteTarget?.information?.name)}"? This will also delete any uploaded files.`}
        onConfirm={handleDelete}
        onCancel={() => setDeleteTarget(null)}
      />

      <ConfirmDialog
        open={!!unpublishTarget}
        title="Unpublish Melody"
        message={`This melody may be in use by devices. Unpublishing will remove "${getDisplayName(unpublishTarget?.information?.name)}" from Firestore and devices will no longer have access. The melody will be kept as a draft. Continue?`}
        onConfirm={handleUnpublish}
        onCancel={() => setUnpublishTarget(null)}
      />
    </div>
  );
}