import { useEffect, useState, type CSSProperties } from "react";
import { useSearchParams } from "react-router-dom";
import { api, type CurrentUser, type IntegrationSummary, type IntegrationType } from "../api/client";
import IntegrationForm from "../components/IntegrationForm";
import IntegrationEditForm from "../components/IntegrationEditForm";
import { useSortable } from "../hooks/useSortable";
import SortableTh from "../components/SortableTh";
import { downloadCsv } from "../utils/csv";

const TYPE_LABELS: Record<IntegrationType, string> = {
  tailscale: "Tailscale",
  proxmox: "Proxmox",
  synology: "Synology",
  semaphore: "Semaphore",
  gitea: "Gitea",
  dockhand: "Dockhand",
  uptimekuma: "Uptime Kuma",
};

function typeBadgeStyle(colors: Record<string, string>, type: IntegrationType): CSSProperties {
  const color = colors[type];
  if (!color) return {};
  return { backgroundColor: `${color}22`, color, border: `1px solid ${color}55` };
}

export default function Integrations({ user }: { user: CurrentUser }) {
  const isAdmin = user.role === "admin";
  const [searchParams] = useSearchParams();

  const [integrations, setIntegrations] = useState<IntegrationSummary[] | null>(null);
  const [adding, setAdding] = useState(false);
  const [editingIntegration, setEditingIntegration] = useState<IntegrationSummary | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [integrationColors, setIntegrationColors] = useState<Record<string, string>>({});
  const [testingId, setTestingId] = useState<number | null>(null);
  const [testResults, setTestResults] = useState<Record<number, { ok: boolean; latencyMs?: number; error?: string }>>({});

  useEffect(() => {
    api.settings.integrationColors().then((res) => setIntegrationColors(res.integrationColors)).catch(() => {});
  }, []);

  function loadIntegrations() {
    api.integrations
      .list()
      .then((res) => {
        setIntegrations(res.integrations);
        // Deep-link from global search (?editId=) — jump straight to that integration's edit form.
        const editId = Number(searchParams.get("editId"));
        const target = res.integrations.find((i) => i.id === editId);
        if (target && isAdmin) setEditingIntegration(target);
      })
      .catch((err) => setError(String(err)));
  }

  useEffect(loadIntegrations, []);

  async function toggleEnabled(i: IntegrationSummary) {
    try {
      await api.integrations.update(i.id, { enabled: !i.enabled });
      loadIntegrations();
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    }
  }

  async function testIntegration(i: IntegrationSummary) {
    setTestingId(i.id);
    try {
      const result = await api.integrations.testExisting(i.id, {});
      setTestResults((prev) => ({ ...prev, [i.id]: result }));
    } catch (err) {
      setTestResults((prev) => ({ ...prev, [i.id]: { ok: false, error: err instanceof Error ? err.message : String(err) } }));
    } finally {
      setTestingId(null);
    }
  }

  async function removeIntegration(i: IntegrationSummary) {
    if (!confirm(`Delete integration "${i.name}"?`)) return;
    try {
      await api.integrations.remove(i.id);
      loadIntegrations();
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    }
  }

  const { sorted: sortedIntegrations, sortKey, sortDir, requestSort } = useSortable(integrations);

  function exportCsv() {
    if (!sortedIntegrations) return;
    downloadCsv(
      "integrations.csv",
      ["Name", "Type", "Status"],
      sortedIntegrations.map((i) => [i.name, TYPE_LABELS[i.type], i.enabled ? "Enabled" : "Disabled"]),
    );
  }

  return (
    <>
      <div className="d-flex align-items-center mb-3">
        <div>
          <h2 className="page-title mb-0">Integrations</h2>
          <div className="text-secondary small mt-1">
            Tailscale, Proxmox, Synology, Semaphore, Gitea, Dockhand, and Uptime Kuma each get their own page
            once connected — add and manage credentials here.
          </div>
        </div>
        {isAdmin && !adding && !editingIntegration && (
          <button className="btn btn-primary ms-auto" onClick={() => setAdding(true)}>
            Add integration
          </button>
        )}
      </div>
      {error && <div className="alert alert-danger">{error}</div>}

      {editingIntegration ? (
        <IntegrationEditForm
          integration={editingIntegration}
          onSaved={() => {
            setEditingIntegration(null);
            loadIntegrations();
          }}
          onCancel={() => setEditingIntegration(null)}
        />
      ) : (
        adding && (
          <IntegrationForm
            onCreated={() => {
              setAdding(false);
              loadIntegrations();
            }}
            onCancel={() => setAdding(false)}
          />
        )
      )}

      <div className="card">
        <div className="card-header justify-content-end">
          <button className="btn btn-outline-secondary btn-sm" onClick={exportCsv} disabled={!integrations || integrations.length === 0}>
            Export CSV
          </button>
        </div>
        <div className="table-responsive">
          <table className="table table-vcenter card-table">
            <thead>
              <tr>
                <SortableTh<IntegrationSummary> label="Name" sortKeyName="name" activeKey={sortKey} direction={sortDir} onSort={requestSort} />
                <SortableTh<IntegrationSummary> label="Type" sortKeyName="type" activeKey={sortKey} direction={sortDir} onSort={requestSort} />
                <SortableTh<IntegrationSummary>
                  label="Status"
                  sortKeyName="enabled"
                  activeKey={sortKey}
                  direction={sortDir}
                  onSort={requestSort}
                />
                {isAdmin && <th className="w-1">Actions</th>}
              </tr>
            </thead>
            <tbody>
              {sortedIntegrations?.map((i) => (
                <tr key={i.id}>
                  <td>{i.name}</td>
                  <td>
                    <span className="badge" style={typeBadgeStyle(integrationColors, i.type)}>
                      {TYPE_LABELS[i.type]}
                    </span>
                  </td>
                  <td>
                    {isAdmin ? (
                      <button
                        className={`badge ${i.enabled ? "bg-green-lt text-green" : "bg-secondary-lt text-secondary"} border-0`}
                        onClick={() => toggleEnabled(i)}
                      >
                        {i.enabled ? "Enabled" : "Disabled"}
                      </button>
                    ) : (
                      <span className={`badge ${i.enabled ? "bg-green-lt text-green" : "bg-secondary-lt text-secondary"}`}>
                        {i.enabled ? "Enabled" : "Disabled"}
                      </span>
                    )}
                  </td>
                  {isAdmin && (
                    <td>
                      <div className="btn-list flex-nowrap align-items-center">
                        <button className="btn btn-sm" onClick={() => testIntegration(i)} disabled={testingId === i.id}>
                          {testingId === i.id ? "Testing…" : "Test"}
                        </button>
                        {testResults[i.id] && testingId !== i.id && (
                          <span className={`badge ${testResults[i.id].ok ? "bg-green-lt text-green" : "bg-red-lt text-red"}`}>
                            {testResults[i.id].ok
                              ? `OK${testResults[i.id].latencyMs !== undefined ? ` (${testResults[i.id].latencyMs}ms)` : ""}`
                              : "Failed"}
                          </span>
                        )}
                        <button className="btn btn-sm" onClick={() => setEditingIntegration(i)}>
                          Edit
                        </button>
                        <button className="btn btn-sm btn-outline-danger" onClick={() => removeIntegration(i)}>
                          Delete
                        </button>
                      </div>
                      {testResults[i.id] && !testResults[i.id].ok && testingId !== i.id && (
                        <div className="text-red small mt-1">{testResults[i.id].error}</div>
                      )}
                    </td>
                  )}
                </tr>
              ))}
              {sortedIntegrations?.length === 0 && (
                <tr>
                  <td colSpan={isAdmin ? 4 : 3} className="text-secondary text-center">
                    No integrations configured yet.
                    {isAdmin && (
                      <>
                        {" "}
                        <button className="btn btn-link p-0 align-baseline" onClick={() => setAdding(true)}>
                          Add one
                        </button>
                        .
                      </>
                    )}
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}