'use client';

import { useMemo, useRef, useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { apiFetch } from '../../../lib/api';
import { useSession } from '../../../components/session-provider';

interface Contact { id: string; fullName: string; email: string | null; role: string | null; tags: string[]; }
interface Organization { id: string; name: string; industry: string | null; }

interface GraphNode {
  id: string; label: string; type: 'contact' | 'org' | 'tag';
  x: number; y: number; color: string;
}
interface GraphEdge { from: string; to: string; }

const TYPE_COLOR = { contact: '#6366f1', org: '#f59e0b', tag: '#10b981' };

function layoutCircle(nodes: GraphNode[], cx = 400, cy = 300, r = 220) {
  return nodes.map((n, i) => ({
    ...n,
    x: cx + r * Math.cos((2 * Math.PI * i) / nodes.length - Math.PI / 2),
    y: cy + r * Math.sin((2 * Math.PI * i) / nodes.length - Math.PI / 2),
  }));
}

export default function NetworkMapPage() {
  const { activeTenant } = useSession();
  const tenantId = activeTenant?.tenantId ?? '';
  const [showTags, setShowTags] = useState(false);
  const [selected, setSelected] = useState<GraphNode | null>(null);
  const svgRef = useRef<SVGSVGElement>(null);

  const { data: contacts = [], isLoading: cL } = useQuery({
    queryKey: ['netmap-contacts', tenantId],
    queryFn: () => apiFetch<Contact[]>('/v1/contacts?limit=200', { tenantId }),
    enabled: Boolean(tenantId), staleTime: 120_000,
  });
  const { data: orgs = [], isLoading: oL } = useQuery({
    queryKey: ['netmap-orgs', tenantId],
    queryFn: () => apiFetch<Organization[]>('/v1/organizations?limit=100', { tenantId }),
    enabled: Boolean(tenantId), staleTime: 120_000,
  });

  const { nodes, edges } = useMemo(() => {
    const limit = 40;
    const topContacts = contacts.slice(0, Math.min(limit, contacts.length));
    const topOrgs = orgs.slice(0, Math.min(10, orgs.length));

    const nodeList: GraphNode[] = [
      ...topContacts.map((c) => ({ id: `c-${c.id}`, label: c.fullName.split(' ')[0], type: 'contact' as const, x: 0, y: 0, color: TYPE_COLOR.contact })),
      ...topOrgs.map((o) => ({ id: `o-${o.id}`, label: o.name.split(' ')[0], type: 'org' as const, x: 0, y: 0, color: TYPE_COLOR.org })),
    ];

    // Tag nodes
    if (showTags) {
      const allTags = new Set<string>();
      topContacts.forEach((c) => c.tags.slice(0, 2).forEach((t) => allTags.add(t)));
      Array.from(allTags).slice(0, 8).forEach((tag) => {
        nodeList.push({ id: `t-${tag}`, label: tag, type: 'tag', x: 0, y: 0, color: TYPE_COLOR.tag });
      });
    }

    // Layout: contacts in outer ring, orgs in inner ring
    const contactNodes = nodeList.filter((n) => n.type === 'contact');
    const orgNodes = nodeList.filter((n) => n.type === 'org');
    const tagNodes = nodeList.filter((n) => n.type === 'tag');

    const laid = [
      ...layoutCircle(contactNodes, 400, 300, 230),
      ...layoutCircle(orgNodes, 400, 300, 130),
      ...layoutCircle(tagNodes, 400, 300, 60),
    ];

    // Edges: contacts to orgs by tag match
    const edgeList: GraphEdge[] = [];
    topContacts.forEach((c) => {
      topOrgs.forEach((o) => {
        const orgName = o.name.toLowerCase().split(' ')[0];
        if (c.tags.some((t) => t.toLowerCase().includes(orgName))) {
          edgeList.push({ from: `c-${c.id}`, to: `o-${o.id}` });
        }
      });
      if (showTags) {
        c.tags.slice(0, 2).forEach((tag) => {
          if (nodeList.some((n) => n.id === `t-${tag}`)) {
            edgeList.push({ from: `c-${c.id}`, to: `t-${tag}` });
          }
        });
      }
    });

    return { nodes: laid, edges: edgeList };
  }, [contacts, orgs, showTags]);

  const nodeMap = useMemo(() => {
    const m: Record<string, GraphNode> = {};
    nodes.forEach((n) => { m[n.id] = n; });
    return m;
  }, [nodes]);

  const isLoading = cL || oL;

  return (
    <div className="max-w-5xl space-y-4 p-6">
      <div className="flex items-start justify-between flex-wrap gap-3">
        <div>
          <h1 className="font-display text-2xl font-semibold text-ink">Hartă Relații</h1>
          <p className="text-sm text-ink-faint mt-1">
            {isLoading ? 'Se construiește graful…' : `${contacts.length} contacte · ${orgs.length} organizații · ${edges.length} conexiuni`}
          </p>
        </div>
        <div className="flex items-center gap-3">
          <label className="flex items-center gap-2 text-xs text-ink-faint cursor-pointer">
            <input type="checkbox" checked={showTags} onChange={(e) => setShowTags(e.target.checked)} className="accent-primary" />
            Arată taguri
          </label>
          <div className="flex items-center gap-3 text-[10px] text-ink-faint">
            {Object.entries(TYPE_COLOR).map(([type, color]) => (
              <span key={type} className="flex items-center gap-1">
                <span className="w-2 h-2 rounded-full" style={{ background: color }} />
                {type}
              </span>
            ))}
          </div>
        </div>
      </div>

      <div className="card p-1 overflow-hidden">
        {isLoading ? (
          <div className="flex items-center justify-center h-[500px] text-sm text-ink-faint">Se construiește graful…</div>
        ) : nodes.length === 0 ? (
          <div className="flex flex-col items-center justify-center h-[500px] gap-2">
            <p className="text-2xl">🕸️</p>
            <p className="text-sm text-ink-faint">Nicio conexiune. Adaugă contacte și organizații.</p>
          </div>
        ) : (
          <svg ref={svgRef} viewBox="0 0 800 600" className="w-full h-[500px]" style={{ background: 'transparent' }}>
            {/* Edges */}
            {edges.map((edge, i) => {
              const from = nodeMap[edge.from];
              const to = nodeMap[edge.to];
              if (!from || !to) return null;
              return (
                <line key={i}
                  x1={from.x} y1={from.y} x2={to.x} y2={to.y}
                  stroke="currentColor" strokeOpacity="0.1" strokeWidth="1" />
              );
            })}
            {/* Nodes */}
            {nodes.map((node) => {
              const isSelected = selected?.id === node.id;
              const r = node.type === 'org' ? 10 : node.type === 'tag' ? 7 : 8;
              return (
                <g key={node.id} onClick={() => setSelected(isSelected ? null : node)} className="cursor-pointer">
                  <circle cx={node.x} cy={node.y} r={isSelected ? r + 3 : r}
                    fill={node.color} opacity={isSelected ? 1 : 0.8}
                    stroke={isSelected ? 'white' : 'transparent'} strokeWidth="2" />
                  {nodes.length <= 40 && (
                    <text x={node.x} y={node.y - r - 4} textAnchor="middle"
                      fontSize="8" fill="currentColor" opacity="0.7">
                      {node.label.slice(0, 10)}
                    </text>
                  )}
                </g>
              );
            })}
          </svg>
        )}
      </div>

      {/* Selected node info */}
      {selected && (
        <div className="card p-4 flex items-center gap-3">
          <span className="w-3 h-3 rounded-full" style={{ background: selected.color }} />
          <div>
            <p className="text-sm font-medium text-ink">{selected.label}</p>
            <p className="text-[10px] text-ink-faint capitalize">{selected.type}</p>
          </div>
          <div className="ml-auto text-[10px] text-ink-faint">
            {edges.filter((e) => e.from === selected.id || e.to === selected.id).length} conexiuni
          </div>
        </div>
      )}

      <p className="text-[10px] text-ink-faint">
        Regulă: graful nu clasifică persoanele ca valoroase/nevaloroase. Conexiunile sunt bazate pe taguri comune. Graph complet disponibil când Apache AGE este conectat.
      </p>
    </div>
  );
}