/**
 * <folk-crm-view> — API-driven CRM interface.
 *
 * Tabbed view: Pipeline | Contacts | Companies | Graph
 * Fetches from per-space API endpoints on the rNetwork module.
 */

interface Opportunity {
	id: string;
	name: string;
	stage: string;
	amount?: { amountMicros: number; currencyCode: string };
	company?: { id: string; name: string };
	pointOfContact?: { id: string; name: { firstName: string; lastName: string } };
	createdAt?: string;
	closeDate?: string;
}

interface Person {
	id: string;
	name: { firstName: string; lastName: string };
	email?: { primaryEmail: string };
	phone?: { primaryPhoneNumber: string };
	city?: string;
	company?: { id: string; name: { firstName: string; lastName: string } };
	createdAt?: string;
}

interface Company {
	id: string;
	name: string;
	domainName?: { primaryLinkUrl: string };
	employees?: number;
	address?: { addressCity: string; addressCountry: string };
	createdAt?: string;
}

interface CrmGraphNode {
	id: string;
	name: string;
	type: "person" | "company";
	companyId?: string;
}

interface CrmGraphEdge {
	source: string;
	target: string;
	type: "works_at" | "point_of_contact";
}

type Tab = "pipeline" | "contacts" | "companies" | "graph";

const PIPELINE_STAGES = [
	"INCOMING",
	"MEETING",
	"PROPOSAL",
	"CLOSED_WON",
	"CLOSED_LOST",
];

const STAGE_LABELS: Record<string, string> = {
	INCOMING: "Incoming",
	MEETING: "Meeting",
	PROPOSAL: "Proposal",
	CLOSED_WON: "Won",
	CLOSED_LOST: "Lost",
};

import { TourEngine } from "../../../shared/tour-engine";

class FolkCrmView extends HTMLElement {
	private shadow: ShadowRoot;
	private space = "";
	private activeTab: Tab = "pipeline";
	private searchQuery = "";
	private sortColumn = "";
	private sortAsc = true;

	private opportunities: Opportunity[] = [];
	private people: Person[] = [];
	private companies: Company[] = [];
	private loading = true;
	private error = "";

	// Graph state
	private graphNodes: CrmGraphNode[] = [];
	private graphEdges: CrmGraphEdge[] = [];
	private graphPositions: Record<string, { x: number; y: number }> = {};
	private graphLayoutDirty = true;
	private graphZoom = 1;
	private graphPanX = 0;
	private graphPanY = 0;
	private graphDraggingId: string | null = null;
	private graphDragStartX = 0;
	private graphDragStartY = 0;
	private graphDragNodeStartX = 0;
	private graphDragNodeStartY = 0;
	private graphIsPanning = false;
	private graphPanStartX = 0;
	private graphPanStartY = 0;
	private graphPanStartPanX = 0;
	private graphPanStartPanY = 0;
	private graphSelectedId: string | null = null;

	// Guided tour
	private _tour!: TourEngine;
	private static readonly TOUR_STEPS = [
		{ target: '[data-tab="pipeline"]', title: "Pipeline", message: "Track deals through stages — from incoming leads to closed-won. Drag cards to update their stage.", advanceOnClick: true },
		{ target: '[data-tab="contacts"]', title: "Contacts", message: "View and search your contact directory. Click a contact to see their details.", advanceOnClick: true },
		{ target: '#crm-search', title: "Search", message: "Search across contacts and companies by name, email, or city. Results filter in real time.", advanceOnClick: false },
		{ target: '[data-tab="graph"]', title: "Relationship Graph", message: "Visualise connections between people and companies as an interactive network graph.", advanceOnClick: true },
	];

	constructor() {
		super();
		this.shadow = this.attachShadow({ mode: "open" });
		this._tour = new TourEngine(
			this.shadow,
			FolkCrmView.TOUR_STEPS,
			"rnetwork_tour_done",
			() => this.shadow.host as HTMLElement,
		);
	}

	connectedCallback() {
		this.space = this.getAttribute("space") || "demo";
		this.render();
		this.loadData();
		// Auto-start tour on first visit
		if (!localStorage.getItem("rnetwork_tour_done")) {
			setTimeout(() => this._tour.start(), 1200);
		}
	}

	private getApiBase(): string {
		const path = window.location.pathname;
		const match = path.match(/^(\/[^/]+)?\/rnetwork/);
		return match ? match[0] : "";
	}

	private async loadData() {
		const base = this.getApiBase();
		try {
			const [oppRes, peopleRes, compRes] = await Promise.all([
				fetch(`${base}/api/opportunities`),
				fetch(`${base}/api/people`),
				fetch(`${base}/api/companies`),
			]);
			if (oppRes.ok) {
				const d = await oppRes.json();
				this.opportunities = d.opportunities || [];
			}
			if (peopleRes.ok) {
				const d = await peopleRes.json();
				this.people = d.people || [];
			}
			if (compRes.ok) {
				const d = await compRes.json();
				this.companies = d.companies || [];
			}
		} catch (e) {
			this.error = "Failed to load CRM data";
		}
		this.graphLayoutDirty = true;
		this.loading = false;
		this.render();
	}

	private formatAmount(amount?: { amountMicros: number; currencyCode: string }): string {
		if (!amount || !amount.amountMicros) return "-";
		const value = amount.amountMicros / 1_000_000;
		const currency = amount.currencyCode || "USD";
		try {
			return new Intl.NumberFormat("en-US", { style: "currency", currency, maximumFractionDigits: 0 }).format(value);
		} catch {
			return `${currency} ${value.toLocaleString()}`;
		}
	}

	private personName(p?: { firstName: string; lastName: string }): string {
		if (!p) return "-";
		return [p.firstName, p.lastName].filter(Boolean).join(" ") || "-";
	}

	private companyName(c?: { id: string; name: string | { firstName: string; lastName: string } }): string {
		if (!c) return "-";
		if (typeof c.name === "string") return c.name;
		return [c.name?.firstName, c.name?.lastName].filter(Boolean).join(" ") || "-";
	}

	private formatDate(d?: string): string {
		if (!d) return "-";
		try { return new Date(d).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }); }
		catch { return "-"; }
	}

	// ── Pipeline view ──
	private renderPipeline(): string {
		if (this.opportunities.length === 0) {
			return `<div class="empty-state">No opportunities found${this.space === "demo" ? " — connect a Twenty workspace to see pipeline data" : ""}.</div>`;
		}

		const byStage = new Map<string, Opportunity[]>();
		for (const stage of PIPELINE_STAGES) byStage.set(stage, []);
		for (const opp of this.opportunities) {
			const stage = opp.stage || "INCOMING";
			const list = byStage.get(stage) || byStage.get("INCOMING")!;
			list.push(opp);
		}

		return `<div class="pipeline-grid">
			${PIPELINE_STAGES.map(stage => {
				const opps = byStage.get(stage) || [];
				const total = opps.reduce((s, o) => s + (o.amount?.amountMicros || 0), 0) / 1_000_000;
				const stageClass = stage.toLowerCase().replace(/_/g, "-");
				return `<div class="pipeline-column">
					<div class="pipeline-header stage-${stageClass}">
						<span class="pipeline-stage-name">${STAGE_LABELS[stage] || stage}</span>
						<span class="pipeline-count">${opps.length}</span>
					</div>
					${total > 0 ? `<div class="pipeline-total">${this.formatAmount({ amountMicros: total * 1_000_000, currencyCode: "USD" })}</div>` : ""}
					<div class="pipeline-cards">
						${opps.map(opp => `<div class="pipeline-card" data-collab-id="opp:${opp.id}">
							<div class="card-name">${this.esc(opp.name)}</div>
							<div class="card-amount">${this.formatAmount(opp.amount)}</div>
							${opp.company?.name ? `<div class="card-company">${this.esc(opp.company.name)}</div>` : ""}
							${opp.pointOfContact ? `<div class="card-contact">${this.esc(this.personName(opp.pointOfContact.name))}</div>` : ""}
							${opp.closeDate ? `<div class="card-date">Close: ${this.formatDate(opp.closeDate)}</div>` : ""}
						</div>`).join("")}
					</div>
				</div>`;
			}).join("")}
		</div>`;
	}

	// ── Contacts table ──
	private renderContacts(): string {
		let filtered = this.people;
		if (this.searchQuery.trim()) {
			const q = this.searchQuery.toLowerCase();
			filtered = filtered.filter(p =>
				this.personName(p.name).toLowerCase().includes(q) ||
				(p.email?.primaryEmail || "").toLowerCase().includes(q) ||
				this.companyName(p.company).toLowerCase().includes(q) ||
				(p.city || "").toLowerCase().includes(q)
			);
		}

		if (this.sortColumn) {
			filtered = [...filtered].sort((a, b) => {
				let va = "", vb = "";
				switch (this.sortColumn) {
					case "name": va = this.personName(a.name); vb = this.personName(b.name); break;
					case "email": va = a.email?.primaryEmail || ""; vb = b.email?.primaryEmail || ""; break;
					case "company": va = this.companyName(a.company); vb = this.companyName(b.company); break;
					case "city": va = a.city || ""; vb = b.city || ""; break;
				}
				const cmp = va.localeCompare(vb);
				return this.sortAsc ? cmp : -cmp;
			});
		}

		if (filtered.length === 0) {
			return `<div class="empty-state">${this.searchQuery ? "No contacts match your search." : "No contacts found."}</div>`;
		}

		const sortIcon = (col: string) => this.sortColumn === col ? (this.sortAsc ? " \u25B2" : " \u25BC") : "";

		return `<table class="data-table">
			<thead><tr>
				<th data-sort="name">Name${sortIcon("name")}</th>
				<th data-sort="email">Email${sortIcon("email")}</th>
				<th data-sort="company">Company${sortIcon("company")}</th>
				<th data-sort="city">City${sortIcon("city")}</th>
				<th>Phone</th>
			</tr></thead>
			<tbody>
				${filtered.map(p => `<tr data-collab-id="contact:${p.id}">
					<td class="cell-name">${this.esc(this.personName(p.name))}</td>
					<td class="cell-email">${p.email?.primaryEmail ? this.esc(p.email.primaryEmail) : "-"}</td>
					<td>${this.esc(this.companyName(p.company))}</td>
					<td>${this.esc(p.city || "-")}</td>
					<td>${this.esc(p.phone?.primaryPhoneNumber || "-")}</td>
				</tr>`).join("")}
			</tbody>
		</table>
		<div class="table-footer">${filtered.length} contact${filtered.length !== 1 ? "s" : ""}</div>`;
	}

	// ── Companies table ──
	private renderCompanies(): string {
		let filtered = this.companies;
		if (this.searchQuery.trim()) {
			const q = this.searchQuery.toLowerCase();
			filtered = filtered.filter(c =>
				(c.name || "").toLowerCase().includes(q) ||
				(c.domainName?.primaryLinkUrl || "").toLowerCase().includes(q) ||
				(c.address?.addressCity || "").toLowerCase().includes(q)
			);
		}

		if (this.sortColumn) {
			filtered = [...filtered].sort((a, b) => {
				let va = "", vb = "";
				switch (this.sortColumn) {
					case "name": va = a.name || ""; vb = b.name || ""; break;
					case "domain": va = a.domainName?.primaryLinkUrl || ""; vb = b.domainName?.primaryLinkUrl || ""; break;
					case "city": va = a.address?.addressCity || ""; vb = b.address?.addressCity || ""; break;
					case "employees": return this.sortAsc ? (a.employees || 0) - (b.employees || 0) : (b.employees || 0) - (a.employees || 0);
				}
				const cmp = va.localeCompare(vb);
				return this.sortAsc ? cmp : -cmp;
			});
		}

		if (filtered.length === 0) {
			return `<div class="empty-state">${this.searchQuery ? "No companies match your search." : "No companies found."}</div>`;
		}

		const sortIcon = (col: string) => this.sortColumn === col ? (this.sortAsc ? " \u25B2" : " \u25BC") : "";

		return `<table class="data-table">
			<thead><tr>
				<th data-sort="name">Name${sortIcon("name")}</th>
				<th data-sort="domain">Domain${sortIcon("domain")}</th>
				<th data-sort="employees">Employees${sortIcon("employees")}</th>
				<th data-sort="city">City${sortIcon("city")}</th>
				<th>Country</th>
			</tr></thead>
			<tbody>
				${filtered.map(c => `<tr data-collab-id="company:${c.id}">
					<td class="cell-name">${this.esc(c.name || "-")}</td>
					<td class="cell-domain">${c.domainName?.primaryLinkUrl ? `<a href="${this.esc(c.domainName.primaryLinkUrl)}" target="_blank" rel="noopener">${this.esc(c.domainName.primaryLinkUrl)}</a>` : "-"}</td>
					<td>${c.employees ?? "-"}</td>
					<td>${this.esc(c.address?.addressCity || "-")}</td>
					<td>${this.esc(c.address?.addressCountry || "-")}</td>
				</tr>`).join("")}
			</tbody>
		</table>
		<div class="table-footer">${filtered.length} compan${filtered.length !== 1 ? "ies" : "y"}</div>`;
	}

	// ── Inline Graph ──

	private buildGraphData(): { nodes: CrmGraphNode[]; edges: CrmGraphEdge[] } {
		const nodes: CrmGraphNode[] = [];
		const edges: CrmGraphEdge[] = [];
		const seenEdges = new Set<string>();

		for (const c of this.companies) {
			nodes.push({ id: "co:" + c.id, name: c.name || "Unknown", type: "company" });
		}

		for (const p of this.people) {
			const name = this.personName(p.name);
			const companyId = p.company?.id ? "co:" + p.company.id : undefined;
			nodes.push({ id: "p:" + p.id, name, type: "person", companyId });
			if (companyId) {
				edges.push({ source: "p:" + p.id, target: companyId, type: "works_at" });
			}
		}

		// Cross-org edges from opportunities
		for (const opp of this.opportunities) {
			if (!opp.pointOfContact?.id || !opp.company?.id) continue;
			const person = this.people.find(p => p.id === opp.pointOfContact!.id);
			if (!person?.company?.id || person.company.id === opp.company.id) continue;
			const key = `p:${person.id}->co:${opp.company.id}`;
			if (seenEdges.has(key)) continue;
			seenEdges.add(key);
			edges.push({ source: "p:" + person.id, target: "co:" + opp.company.id, type: "point_of_contact" });
		}

		return { nodes, edges };
	}

	private computeGraphLayout(nodes: CrmGraphNode[], edges: CrmGraphEdge[]): Record<string, { x: number; y: number }> {
		const pos: Record<string, { x: number; y: number }> = {};
		const W = 800, H = 600;
		const cx = W / 2, cy = H / 2;

		const companies = nodes.filter(n => n.type === "company");
		const orbitR = Math.min(W, H) * 0.3;
		const orgCenters: Record<string, { x: number; y: number }> = {};

		companies.forEach((org, i) => {
			const angle = -Math.PI / 2 + (2 * Math.PI * i) / Math.max(companies.length, 1);
			const p = { x: cx + orbitR * Math.cos(angle), y: cy + orbitR * Math.sin(angle) };
			orgCenters[org.id] = p;
			pos[org.id] = { ...p };
		});

		// Fan people around their company
		const peopleByOrg: Record<string, CrmGraphNode[]> = {};
		for (const n of nodes) {
			if (n.type === "person" && n.companyId && orgCenters[n.companyId]) {
				(peopleByOrg[n.companyId] ??= []).push(n);
			}
		}
		for (const [oid, people] of Object.entries(peopleByOrg)) {
			const c = orgCenters[oid];
			const base = Math.atan2(c.y - cy, c.x - cx);
			const spread = Math.PI * 0.8;
			people.forEach((p, i) => {
				const angle = base - spread / 2 + (spread * i) / Math.max(people.length - 1, 1);
				pos[p.id] = { x: c.x + 110 * Math.cos(angle), y: c.y + 110 * Math.sin(angle) };
			});
		}

		// Unlinked nodes near center
		for (const n of nodes) {
			if (!pos[n.id]) {
				pos[n.id] = { x: cx + (Math.random() - 0.5) * W * 0.4, y: cy + (Math.random() - 0.5) * H * 0.4 };
			}
		}

		// Force iterations
		const allIds = nodes.map(n => n.id).filter(id => pos[id]);
		for (let iter = 0; iter < 70; iter++) {
			const force: Record<string, { fx: number; fy: number }> = {};
			for (const id of allIds) force[id] = { fx: 0, fy: 0 };

			// Repulsion
			for (let i = 0; i < allIds.length; i++) {
				for (let j = i + 1; j < allIds.length; j++) {
					const a = pos[allIds[i]], b = pos[allIds[j]];
					let dx = b.x - a.x, dy = b.y - a.y;
					const dist = Math.max(Math.sqrt(dx * dx + dy * dy), 1);
					const repel = 3000 / (dist * dist);
					dx /= dist; dy /= dist;
					force[allIds[i]].fx -= dx * repel;
					force[allIds[i]].fy -= dy * repel;
					force[allIds[j]].fx += dx * repel;
					force[allIds[j]].fy += dy * repel;
				}
			}

			// Edge attraction
			for (const edge of edges) {
				const a = pos[edge.source], b = pos[edge.target];
				if (!a || !b) continue;
				const dx = b.x - a.x, dy = b.y - a.y;
				const dist = Math.sqrt(dx * dx + dy * dy);
				const idealLen = edge.type === "works_at" ? 100 : 200;
				const attract = (dist - idealLen) * 0.01;
				const ux = dx / Math.max(dist, 1), uy = dy / Math.max(dist, 1);
				if (force[edge.source]) { force[edge.source].fx += ux * attract; force[edge.source].fy += uy * attract; }
				if (force[edge.target]) { force[edge.target].fx -= ux * attract; force[edge.target].fy -= uy * attract; }
			}

			// Center gravity
			for (const id of allIds) {
				force[id].fx += (W / 2 - pos[id].x) * 0.002;
				force[id].fy += (H / 2 - pos[id].y) * 0.002;
			}

			// Apply with damping
			const damping = 0.4 * (1 - iter / 70);
			for (const id of allIds) {
				pos[id].x += force[id].fx * damping;
				pos[id].y += force[id].fy * damping;
			}
		}
		return pos;
	}

	private ensureGraphLayout() {
		if (!this.graphLayoutDirty && Object.keys(this.graphPositions).length > 0) return;
		const { nodes, edges } = this.buildGraphData();
		this.graphNodes = nodes;
		this.graphEdges = edges;
		this.graphPositions = this.computeGraphLayout(nodes, edges);
		this.graphLayoutDirty = false;
	}

	private fitGraphView() {
		const svg = this.shadow.getElementById("graph-svg") as SVGSVGElement | null;
		if (!svg) return;
		this.ensureGraphLayout();
		const positions = Object.values(this.graphPositions);
		if (positions.length === 0) return;

		const pad = 60;
		let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
		for (const p of positions) {
			if (p.x < minX) minX = p.x;
			if (p.y < minY) minY = p.y;
			if (p.x > maxX) maxX = p.x;
			if (p.y > maxY) maxY = p.y;
		}
		minX -= 40; minY -= 40; maxX += 40; maxY += 40;

		const rect = svg.getBoundingClientRect();
		const svgW = rect.width || 800;
		const svgH = rect.height || 600;
		const zoom = Math.min((svgW - pad * 2) / Math.max(maxX - minX, 1), (svgH - pad * 2) / Math.max(maxY - minY, 1), 2);
		this.graphZoom = Math.max(0.1, Math.min(zoom, 4));
		this.graphPanX = (svgW / 2) - ((minX + maxX) / 2) * this.graphZoom;
		this.graphPanY = (svgH / 2) - ((minY + maxY) / 2) * this.graphZoom;
		this.updateGraphTransform();
		this.updateGraphZoomDisplay();
	}

	private updateGraphTransform() {
		const g = this.shadow.getElementById("graph-transform");
		if (g) g.setAttribute("transform", `translate(${this.graphPanX},${this.graphPanY}) scale(${this.graphZoom})`);
	}

	private updateGraphZoomDisplay() {
		const el = this.shadow.getElementById("graph-zoom-level");
		if (el) el.textContent = `${Math.round(this.graphZoom * 100)}%`;
	}

	private zoomGraphAt(screenX: number, screenY: number, factor: number) {
		const oldZoom = this.graphZoom;
		const newZoom = Math.max(0.1, Math.min(4, oldZoom * factor));
		this.graphPanX = screenX - (screenX - this.graphPanX) * (newZoom / oldZoom);
		this.graphPanY = screenY - (screenY - this.graphPanY) * (newZoom / oldZoom);
		this.graphZoom = newZoom;
		this.updateGraphTransform();
		this.updateGraphZoomDisplay();
	}

	private updateGraphNodePosition(nodeId: string) {
		const pos = this.graphPositions[nodeId];
		if (!pos) return;

		const g = this.shadow.querySelector(`[data-node-id="${nodeId}"]`) as SVGGElement | null;
		if (!g) return;

		const node = this.graphNodes.find(n => n.id === nodeId);
		if (!node) return;
		const isOrg = node.type === "company";
		const radius = isOrg ? 22 : 12;

		// Update circles (includes selection ring if present)
		g.querySelectorAll("circle").forEach(circle => {
			circle.setAttribute("cx", String(pos.x));
			circle.setAttribute("cy", String(pos.y));
		});

		// Update text
		const texts = g.querySelectorAll("text");
		if (isOrg) {
			if (texts[0]) { texts[0].setAttribute("x", String(pos.x)); texts[0].setAttribute("y", String(pos.y + 4)); }
			if (texts[1]) { texts[1].setAttribute("x", String(pos.x)); texts[1].setAttribute("y", String(pos.y + radius + 13)); }
		} else {
			if (texts[0]) { texts[0].setAttribute("x", String(pos.x)); texts[0].setAttribute("y", String(pos.y + radius + 13)); }
		}

		// Update cluster circle for company nodes
		if (isOrg) {
			const cluster = this.shadow.querySelector(`[data-cluster="${nodeId}"]`) as SVGCircleElement | null;
			if (cluster) {
				cluster.setAttribute("cx", String(pos.x));
				cluster.setAttribute("cy", String(pos.y));
			}
		}

		// Update connected edges
		for (const edge of this.graphEdges) {
			if (edge.source !== nodeId && edge.target !== nodeId) continue;
			const sp = this.graphPositions[edge.source];
			const tp = this.graphPositions[edge.target];
			if (!sp || !tp) continue;
			const line = this.shadow.querySelector(`[data-edge="${edge.source}:${edge.target}"]`) as SVGLineElement | null;
			if (line) {
				line.setAttribute("x1", String(sp.x));
				line.setAttribute("y1", String(sp.y));
				line.setAttribute("x2", String(tp.x));
				line.setAttribute("y2", String(tp.y));
			}
		}
	}

	private renderGraphTab(): string {
		this.ensureGraphLayout();
		const nodes = this.graphNodes;
		const edges = this.graphEdges;

		if (nodes.length === 0) {
			return `<div class="empty-state">No data to graph. Add contacts and companies to see the relationship network.</div>`;
		}

		const positions = this.graphPositions;

		// Color palette for companies
		const palette = ["#6366f1", "#22c55e", "#f59e0b", "#ec4899", "#14b8a6", "#f97316", "#8b5cf6", "#06b6d4"];
		const companyNodes = nodes.filter(n => n.type === "company");
		const orgColors: Record<string, string> = {};
		companyNodes.forEach((org, i) => { orgColors[org.id] = palette[i % palette.length]; });

		// Cluster background circles
		const clustersSvg = companyNodes.map(org => {
			const pos = positions[org.id];
			if (!pos) return "";
			const color = orgColors[org.id] || "#333";
			return `<circle data-cluster="${org.id}" cx="${pos.x}" cy="${pos.y}" r="120" fill="${color}" opacity="0.05" stroke="${color}" stroke-width="1" stroke-opacity="0.15" stroke-dasharray="4 4"/>`;
		}).join("");

		// Edges
		const edgesSvg = edges.map(edge => {
			const sp = positions[edge.source], tp = positions[edge.target];
			if (!sp || !tp) return "";
			if (edge.type === "works_at") {
				return `<line data-edge="${edge.source}:${edge.target}" x1="${sp.x}" y1="${sp.y}" x2="${tp.x}" y2="${tp.y}" style="stroke:var(--rs-text-muted)" stroke-width="1" opacity="0.3"/>`;
			} else {
				return `<line data-edge="${edge.source}:${edge.target}" x1="${sp.x}" y1="${sp.y}" x2="${tp.x}" y2="${tp.y}" stroke="#c084fc" stroke-width="1.5" stroke-dasharray="6 3" opacity="0.6"/>`;
			}
		}).join("");

		// Nodes
		const nodesSvg = nodes.map(node => {
			const pos = positions[node.id];
			if (!pos) return "";
			const isOrg = node.type === "company";
			const color = isOrg ? (orgColors[node.id] || "#22c55e") : "#3b82f6";
			const radius = isOrg ? 22 : 12;
			const isSelected = this.graphSelectedId === node.id;
			const label = this.esc(node.name);
			const truncLabel = label.length > 14 ? label.slice(0, 12) + "\u2026" : label;

			return `<g class="graph-node" data-node-id="${node.id}" style="cursor:pointer">
				${isSelected ? `<circle cx="${pos.x}" cy="${pos.y}" r="${radius + 6}" fill="none" stroke="${color}" stroke-width="2" opacity="0.6"/>` : ""}
				<circle cx="${pos.x}" cy="${pos.y}" r="${radius}" fill="${color}" opacity="${isOrg ? 0.9 : 0.75}" stroke="${isOrg ? color : "none"}" stroke-width="${isOrg ? 2 : 0}" stroke-opacity="0.3"/>
				${isOrg ? `<text x="${pos.x}" y="${pos.y + 4}" fill="#fff" font-size="9" font-weight="600" text-anchor="middle">${truncLabel}</text>` : ""}
				<text x="${pos.x}" y="${pos.y + radius + 13}" style="fill:var(--rs-text-primary)" font-size="${isOrg ? 11 : 10}" font-weight="${isOrg ? 600 : 400}" text-anchor="middle">${label}</text>
			</g>`;
		}).join("");

		return `<div class="graph-container" id="graph-container">
			<svg id="graph-svg" width="100%" height="100%">
				<g id="graph-transform" transform="translate(${this.graphPanX},${this.graphPanY}) scale(${this.graphZoom})">
					<g id="cluster-layer">${clustersSvg}</g>
					<g id="edge-layer">${edgesSvg}</g>
					<g id="node-layer">${nodesSvg}</g>
				</g>
			</svg>
			<div class="graph-zoom-controls">
				<button class="graph-zoom-btn" id="graph-zoom-in" title="Zoom in">+</button>
				<span class="graph-zoom-level" id="graph-zoom-level">${Math.round(this.graphZoom * 100)}%</span>
				<button class="graph-zoom-btn" id="graph-zoom-out" title="Zoom out">&minus;</button>
				<button class="graph-zoom-btn graph-zoom-btn--fit" id="graph-zoom-fit" title="Fit to view">&#x2922;</button>
			</div>
		</div>
		<div class="graph-legend">
			<div class="graph-legend-item"><span class="graph-legend-dot" style="background:#3b82f6"></span> People</div>
			<div class="graph-legend-item"><span class="graph-legend-dot" style="background:#22c55e"></span> Companies</div>
			<div class="graph-legend-item"><svg width="20" height="10"><line x1="0" y1="5" x2="20" y2="5" style="stroke:var(--rs-text-muted)" stroke-width="2"/></svg> Works at</div>
			<div class="graph-legend-item"><svg width="20" height="10"><line x1="0" y1="5" x2="20" y2="5" stroke="#c084fc" stroke-width="2" stroke-dasharray="4 2"/></svg> Cross-org link</div>
		</div>`;
	}

	// ── Main render ──
	private render() {
		const tabs: { id: Tab; label: string; count: number }[] = [
			{ id: "pipeline", label: "Pipeline", count: this.opportunities.length },
			{ id: "contacts", label: "Contacts", count: this.people.length },
			{ id: "companies", label: "Companies", count: this.companies.length },
			{ id: "graph", label: "Graph", count: 0 },
		];

		let content = "";
		if (this.loading) {
			content = `<div class="loading">Loading CRM data...</div>`;
		} else if (this.error) {
			content = `<div class="error">${this.esc(this.error)}</div>`;
		} else {
			switch (this.activeTab) {
				case "pipeline": content = this.renderPipeline(); break;
				case "contacts": content = this.renderContacts(); break;
				case "companies": content = this.renderCompanies(); break;
				case "graph": content = this.renderGraphTab(); break;
			}
		}

		const showSearch = this.activeTab === "contacts" || this.activeTab === "companies";

		this.shadow.innerHTML = `
		<style>
			:host { display: block; font-family: system-ui, -apple-system, sans-serif; color: var(--rs-text-primary); }
			* { box-sizing: border-box; }

			.crm-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
			.crm-title { font-size: 15px; font-weight: 600; color: var(--rs-text-primary); }

			.tabs { display: flex; gap: 2px; background: var(--rs-input-bg); border-radius: 10px; padding: 3px; margin-bottom: 16px; }
			.tab {
				padding: 8px 16px; border-radius: 8px; border: none;
				background: transparent; color: var(--rs-text-muted); cursor: pointer; font-size: 13px;
				font-weight: 500; transition: all 0.15s;
			}
			.tab:hover { color: var(--rs-text-secondary); }
			.tab.active { background: var(--rs-bg-surface); color: var(--rs-text-primary); }
			.tab-count { font-size: 11px; color: var(--rs-text-muted); margin-left: 4px; }
			.tab.active .tab-count { color: var(--rs-primary-hover); }

			.toolbar { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
			.search-input {
				border: 1px solid var(--rs-input-border); border-radius: 8px; padding: 8px 12px;
				background: var(--rs-input-bg); color: var(--rs-input-text); font-size: 13px; width: 260px; outline: none;
			}
			.search-input:focus { border-color: var(--rs-primary-hover); }

			.loading { text-align: center; color: var(--rs-text-muted); padding: 60px 20px; font-size: 14px; }
			.error { text-align: center; color: var(--rs-error); padding: 40px 20px; }
			.empty-state { text-align: center; color: var(--rs-text-muted); padding: 60px 20px; font-size: 14px; }

			/* ── Pipeline grid ── */
			.pipeline-grid {
				display: grid;
				grid-template-columns: repeat(${PIPELINE_STAGES.length}, 1fr);
				gap: 12px;
				overflow-x: auto;
			}
			.pipeline-column { min-width: 180px; }
			.pipeline-header {
				padding: 8px 12px; border-radius: 8px 8px 0 0;
				display: flex; align-items: center; justify-content: space-between;
				font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
			}
			.stage-incoming { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
			.stage-meeting { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
			.stage-proposal { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
			.stage-closed-won { background: rgba(34, 197, 94, 0.2); color: #16a34a; }
			.stage-closed-lost { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
			.pipeline-count {
				background: rgba(255,255,255,0.1); padding: 1px 7px; border-radius: 10px;
				font-size: 11px;
			}
			.pipeline-total { font-size: 12px; color: var(--rs-text-muted); padding: 4px 12px; }
			.pipeline-cards { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
			.pipeline-card {
				background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 8px;
				padding: 12px; transition: border-color 0.15s;
			}
			.pipeline-card:hover { border-color: var(--rs-border-strong); }
			.card-name { font-size: 13px; font-weight: 600; color: var(--rs-text-primary); margin-bottom: 4px; }
			.card-amount { font-size: 14px; font-weight: 700; color: var(--rs-primary-hover); margin-bottom: 6px; }
			.card-company { font-size: 12px; color: var(--rs-text-secondary); }
			.card-contact { font-size: 11px; color: var(--rs-text-muted); margin-top: 2px; }
			.card-date { font-size: 11px; color: var(--rs-text-muted); margin-top: 4px; }

			/* ── Data tables ── */
			.data-table {
				width: 100%; border-collapse: collapse;
				background: var(--rs-input-bg); border-radius: 10px; overflow: hidden;
			}
			.data-table th {
				text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 600;
				color: var(--rs-text-muted); text-transform: uppercase; letter-spacing: 0.04em;
				border-bottom: 1px solid var(--rs-border); cursor: pointer; user-select: none;
				white-space: nowrap;
			}
			.data-table th:hover { color: var(--rs-text-secondary); }
			.data-table td {
				padding: 10px 14px; font-size: 13px; border-bottom: 1px solid var(--rs-border-subtle);
				color: var(--rs-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
				max-width: 250px;
			}
			.data-table tr:hover td { background: var(--rs-bg-hover); }
			.cell-name { font-weight: 500; color: var(--rs-text-primary); }
			.cell-email { color: #93c5fd; }
			.cell-domain a { color: #93c5fd; text-decoration: none; }
			.cell-domain a:hover { text-decoration: underline; }
			.table-footer { font-size: 12px; color: var(--rs-text-muted); padding: 10px 14px; }

			/* ── Graph tab ── */
			.graph-container {
				position: relative; width: 100%; height: 420px;
				background: var(--rs-canvas-bg, #0a0a0f); border: 1px solid var(--rs-border);
				border-radius: 12px; overflow: hidden; cursor: grab;
			}
			.graph-container.grabbing { cursor: grabbing; }
			.graph-container svg { display: block; width: 100%; height: 100%; }
			.graph-node:hover circle { filter: brightness(1.2); }
			.graph-zoom-controls {
				position: absolute; bottom: 12px; right: 12px;
				display: flex; align-items: center; gap: 4px;
				background: var(--rs-bg-surface); border: 1px solid var(--rs-border-strong);
				border-radius: 8px; padding: 4px 6px; z-index: 5;
			}
			.graph-zoom-btn {
				width: 28px; height: 28px; border: none; border-radius: 6px;
				background: transparent; color: var(--rs-text-primary); font-size: 16px;
				cursor: pointer; display: flex; align-items: center; justify-content: center;
			}
			.graph-zoom-btn:hover { background: var(--rs-bg-hover); }
			.graph-zoom-btn--fit { font-size: 14px; }
			.graph-zoom-level { font-size: 11px; color: var(--rs-text-muted); min-width: 36px; text-align: center; }
			.graph-legend { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
			.graph-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--rs-text-muted); }
			.graph-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

			@media (max-width: 900px) {
				.pipeline-grid { grid-template-columns: repeat(2, 1fr); }
			}
			@media (max-width: 600px) {
				.pipeline-grid { grid-template-columns: 1fr; }
				.tabs { flex-wrap: wrap; }
				.toolbar { flex-direction: column; align-items: stretch; }
				.search-input { width: 100%; }
				.data-table td, .data-table th { padding: 8px 10px; font-size: 12px; }
				.graph-container { height: 300px; }
			}
		</style>

		<div class="crm-header">
			<span class="crm-title">CRM</span>
			<button class="tab" id="btn-tour" style="margin-left:auto;font-size:0.78rem;padding:4px 10px">Tour</button>
		</div>

		<div class="tabs">
			${tabs.map(t => `<button class="tab ${this.activeTab === t.id ? "active" : ""}" data-tab="${t.id}">
				${t.label}${t.count > 0 ? `<span class="tab-count">${t.count}</span>` : ""}
			</button>`).join("")}
		</div>

		${showSearch ? `<div class="toolbar">
			<input class="search-input" type="text" placeholder="Search..." id="crm-search" value="${this.esc(this.searchQuery)}">
		</div>` : ""}

		<div class="crm-content">${content}</div>
		`;

		this.attachListeners();
		this._tour.renderOverlay();
	}

	startTour() { this._tour.start(); }

	private attachListeners() {
		// Tour button
		this.shadow.getElementById("btn-tour")?.addEventListener("click", () => this.startTour());

		// Tab switching
		this.shadow.querySelectorAll("[data-tab]").forEach(el => {
			el.addEventListener("click", () => {
				this.activeTab = (el as HTMLElement).dataset.tab as Tab;
				this.searchQuery = "";
				this.sortColumn = "";
				this.sortAsc = true;
				this.render();
			});
		});

		// Search
		let searchTimeout: any;
		this.shadow.getElementById("crm-search")?.addEventListener("input", (e) => {
			this.searchQuery = (e.target as HTMLInputElement).value;
			clearTimeout(searchTimeout);
			searchTimeout = setTimeout(() => this.render(), 200);
		});

		// Sort columns
		this.shadow.querySelectorAll("[data-sort]").forEach(el => {
			el.addEventListener("click", () => {
				const col = (el as HTMLElement).dataset.sort!;
				if (this.sortColumn === col) {
					this.sortAsc = !this.sortAsc;
				} else {
					this.sortColumn = col;
					this.sortAsc = true;
				}
				this.render();
			});
		});

		// ── Graph interactions ──
		if (this.activeTab === "graph") {
			const container = this.shadow.getElementById("graph-container");
			const svg = this.shadow.getElementById("graph-svg") as SVGSVGElement | null;

			if (svg && container) {
				// Zoom controls
				this.shadow.getElementById("graph-zoom-in")?.addEventListener("click", () => {
					const rect = svg.getBoundingClientRect();
					this.zoomGraphAt(rect.width / 2, rect.height / 2, 1.25);
				});
				this.shadow.getElementById("graph-zoom-out")?.addEventListener("click", () => {
					const rect = svg.getBoundingClientRect();
					this.zoomGraphAt(rect.width / 2, rect.height / 2, 0.8);
				});
				this.shadow.getElementById("graph-zoom-fit")?.addEventListener("click", () => this.fitGraphView());

				// Wheel zoom
				svg.addEventListener("wheel", (e: WheelEvent) => {
					e.preventDefault();
					const rect = svg.getBoundingClientRect();
					this.zoomGraphAt(e.clientX - rect.left, e.clientY - rect.top, 1 - e.deltaY * 0.003);
				}, { passive: false });

				// Pointer down — node drag or canvas pan
				svg.addEventListener("pointerdown", (e: PointerEvent) => {
					if (e.button !== 0) return;
					const target = (e.target as Element).closest("[data-node-id]") as HTMLElement | null;

					if (target) {
						const nodeId = target.dataset.nodeId!;
						this.graphDraggingId = nodeId;
						this.graphDragStartX = e.clientX;
						this.graphDragStartY = e.clientY;
						const pos = this.graphPositions[nodeId];
						if (pos) { this.graphDragNodeStartX = pos.x; this.graphDragNodeStartY = pos.y; }
						svg.setPointerCapture(e.pointerId);
						e.preventDefault();
					} else {
						this.graphIsPanning = true;
						this.graphPanStartX = e.clientX;
						this.graphPanStartY = e.clientY;
						this.graphPanStartPanX = this.graphPanX;
						this.graphPanStartPanY = this.graphPanY;
						container.classList.add("grabbing");
						svg.setPointerCapture(e.pointerId);
						e.preventDefault();
					}
				});

				svg.addEventListener("pointermove", (e: PointerEvent) => {
					if (this.graphDraggingId) {
						const dx = (e.clientX - this.graphDragStartX) / this.graphZoom;
						const dy = (e.clientY - this.graphDragStartY) / this.graphZoom;
						const pos = this.graphPositions[this.graphDraggingId];
						if (pos) {
							pos.x = this.graphDragNodeStartX + dx;
							pos.y = this.graphDragNodeStartY + dy;
							this.updateGraphNodePosition(this.graphDraggingId);
						}
					} else if (this.graphIsPanning) {
						this.graphPanX = this.graphPanStartPanX + (e.clientX - this.graphPanStartX);
						this.graphPanY = this.graphPanStartPanY + (e.clientY - this.graphPanStartY);
						this.updateGraphTransform();
					}
				});

				svg.addEventListener("pointerup", (e: PointerEvent) => {
					if (this.graphDraggingId) {
						const dx = Math.abs(e.clientX - this.graphDragStartX);
						const dy = Math.abs(e.clientY - this.graphDragStartY);
						if (dx < 4 && dy < 4) {
							// Click — toggle selection
							const id = this.graphDraggingId;
							this.graphSelectedId = this.graphSelectedId === id ? null : id;
							this.graphDraggingId = null;
							this.render();
							return;
						}
						this.graphDraggingId = null;
					}
					if (this.graphIsPanning) {
						this.graphIsPanning = false;
						container.classList.remove("grabbing");
					}
				});
			}

			// Fit view on first render
			requestAnimationFrame(() => this.fitGraphView());
		}
	}

	private esc(s: string): string {
		const d = document.createElement("div");
		d.textContent = s || "";
		return d.innerHTML;
	}
}

customElements.define("folk-crm-view", FolkCrmView);