import { __, _n, sprintf } from '@/lib/i18n';
import { useEffect, useMemo, useState } from 'react';
import { newNodeId, useEditorStore } from '@/state/editorStore';
import { IconClose, IconTools } from '@/lib/icons';
import type { IntegrationKind, IntegrationSummary, NodeSummary } from '@/types';

/**
 * The node library: what a workflow can connect, and the tools to wire it.
 *
 * Two tabs split what a workflow connects to. Integrations are the WordPress
 * plugins on this site; Apps are services outside WordPress, reached over
 * their APIs. FlowWP's own nodes — Logic, Data tools, Schedules & Webhooks —
 * connect nothing, so they sit behind the Tools button rather than in either
 * list, one click away from any tab. The server says which is which
 * (IntegrationKind), so a new app or tool files itself.
 *
 * Accordions were the wrong shape for the lists. With thirty integrations the
 * list of names is already taller than the panel, so expanding one pushes the
 * rest out of view and the author loses their place. Opening an integration
 * into a panel of its own keeps the answer to "what can WooCommerce do?" on one
 * screen, and closing it puts the author back exactly where they were.
 *
 * Two things stay visible rather than hidden, for the same reason: a node you
 * cannot see is a node you will never pay for or install a plugin to get.
 * Pro nodes keep a plan badge (Freemius §09), and integrations whose plugin is
 * missing are listed with what they need.
 *
 * The two never borrow each other's badge. A node the plan covers but whose
 * plugin is missing says it needs the plugin; badging it with a plan would tell
 * a customer to buy what they already have. Only plan-locked nodes count
 * towards "locked" and the upgrade offer, because upgrading unlocks only those.
 */

interface NodeLibraryProps {
  catalogue: NodeSummary[];
  integrations: IntegrationSummary[];
  upgradeUrl: string | null;
}

interface Category {
  label: string;
  nodes: NodeSummary[];
}

interface Group {
  integration: IntegrationSummary;
  categories: Category[];
  total: number;
  locked: number;
}

type Tab = Exclude<IntegrationKind, 'tool'>;

/** Tools in the order an author reaches for them. */
const TOOL_ORDER = ['logic', 'ai', 'data', 'code', 'flowwp'];

/** What the Apps tab promises until the first app ships. Names, not logos. */
const COMING_APPS = ['Slack', 'Google Sheets', 'Zoom', 'Gmail', 'Notion', 'Mailchimp'];

/** Group nodes under the integration that registered them. */
function groupNodes(catalogue: NodeSummary[], integrations: IntegrationSummary[]): Group[] {
  const byIntegration = new Map<string, NodeSummary[]>();

  for (const node of catalogue) {
    const list = byIntegration.get(node.integration) ?? [];

    list.push(node);
    byIntegration.set(node.integration, list);
  }

  const known = new Map(integrations.map((entry) => [entry.id, entry]));

  return [...byIntegration.entries()]
    .map(([id, nodes]): Group => {
      const byCategory = new Map<string, NodeSummary[]>();

      for (const node of nodes) {
        const list = byCategory.get(node.categoryLabel) ?? [];

        list.push(node);
        byCategory.set(node.categoryLabel, list);
      }

      return {
        integration: known.get(id) ?? {
          // A node whose integration never registered still has to appear
          // somewhere, or it would silently vanish from the library.
          id,
          name: id,
          icon: '',
          available: true,
          requirement: '',
          nodeCount: nodes.length,
          kind: 'plugin',
        },
        categories: [...byCategory.entries()]
          .map(([label, list]) => ({
            label,
            nodes: list.sort((a, b) => a.categoryOrder - b.categoryOrder || a.label.localeCompare(b.label)),
          }))
          .sort((a, b) => (a.nodes[0]?.categoryOrder ?? 0) - (b.nodes[0]?.categoryOrder ?? 0)),
        total: nodes.length,
        locked: nodes.filter((node) => node.lockReason === 'plan').length,
      };
    })
    // WordPress first: it is on every site, and most workflows start there.
    .sort(
      (a, b) =>
        Number(b.integration.id === 'core') - Number(a.integration.id === 'core') ||
        a.integration.name.localeCompare(b.integration.name),
    );
}

function matches(node: NodeSummary, term: string): boolean {
  return (
    node.label.toLowerCase().includes(term) ||
    node.description.toLowerCase().includes(term) ||
    node.type.toLowerCase().includes(term)
  );
}

export function NodeLibrary({ catalogue, integrations, upgradeUrl }: NodeLibraryProps) {
  const [search, setSearch] = useState('');
  const [tab, setTab] = useState<Tab>('plugin');
  const [openId, setOpenId] = useState<string | null>(null);
  const [toolsOpen, setToolsOpen] = useState(false);
  const addNode = useEditorStore((s) => s.addNode);

  const groups = useMemo(() => groupNodes(catalogue, integrations), [catalogue, integrations]);
  const open = useMemo(() => groups.find((group) => group.integration.id === openId) ?? null, [groups, openId]);

  const plugins = groups.filter((group) => group.integration.kind === 'plugin');
  const apps = groups.filter((group) => group.integration.kind === 'app');
  const tools = groups
    .filter((group) => group.integration.kind === 'tool')
    .sort((a, b) => {
      const rank = (id: string) => (TOOL_ORDER.includes(id) ? TOOL_ORDER.indexOf(id) : TOOL_ORDER.length);

      return rank(a.integration.id) - rank(b.integration.id);
    });

  // Installed plugins before the ones that only say what they need, so the
  // first screen is what this site can do today.
  const installed = plugins.filter((group) => group.integration.available);
  const missing = plugins.filter((group) => !group.integration.available);
  const toolCount = tools.reduce((sum, group) => sum + group.total, 0);

  const term = search.trim().toLowerCase();

  /**
   * Search cuts across integrations, apps and tools.
   *
   * Someone typing "order" wants every node about orders, not a prompt to guess
   * which integration owns it — so a search flattens the drill-down away
   * entirely rather than filtering inside one panel.
   */
  const results = useMemo(() => {
    if (term === '') {
      return [];
    }

    return groups
      .map((group) => ({
        ...group,
        categories: group.categories
          .map((category) => ({
            label: category.label,
            nodes: category.nodes.filter((node) => matches(node, term)),
          }))
          .filter((category) => category.nodes.length > 0),
      }))
      .filter((group) => group.categories.length > 0);
  }, [groups, term]);

  // Escape closes whatever covers the list, which is the gesture people
  // already expect from anything that covers what they were looking at.
  useEffect(() => {
    if (openId === null && !toolsOpen) {
      return;
    }

    const onKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        setOpenId(null);
        setToolsOpen(false);
      }
    };

    document.addEventListener('keydown', onKeyDown);

    return () => document.removeEventListener('keydown', onKeyDown);
  }, [openId, toolsOpen]);

  const place = (node: NodeSummary) => {
    if (!node.available) {
      return;
    }

    addNode({
      id: newNodeId(),
      type: node.type,
      config: {},
      // Staggered so repeated clicks do not stack nodes exactly on top of one
      // another with nothing visible to drag apart.
      position: { x: 120 + Math.random() * 160, y: 100 + Math.random() * 200 },
      label: '',
      disabled: false,
    });
  };

  const lockedCount = catalogue.filter((node) => node.lockReason === 'plan').length;

  /**
   * Which integrations the locked nodes belong to.
   *
   * "Unlock 46 more nodes" is a number; "WooCommerce, Ultimate Member and more"
   * is a reason. Naming them is what turns the row from a price into an offer.
   */
  const lockedIntegrations = useMemo(() => {
    const names = new Map<string, string>();

    for (const group of groups) {
      if (group.locked > 0) {
        names.set(group.integration.id, group.integration.name);
      }
    }

    return [...names.values()];
  }, [groups]);

  const lockedNames = lockedIntegrations.slice(0, 3);

  const nodeButton = (node: NodeSummary) => (
    <button
      key={node.type}
      type="button"
      className={`flowwp-library__item${node.available ? '' : ' is-locked'}`}
      draggable={node.available}
      onDragStart={(event) => {
        event.dataTransfer.setData('application/flowwp-node', node.type);
        event.dataTransfer.effectAllowed = 'copy';

        // Without an explicit drag image the browser snapshots the button
        // mid-repaint, which is what makes the drag feel like it starts late.
        event.dataTransfer.setDragImage(event.currentTarget, event.currentTarget.clientWidth / 2, 16);
      }}
      onClick={() => place(node)}
      title={node.description || node.type}
      aria-disabled={!node.available}
    >
      <span
        className="flowwp-library__row-icon"
        // Icons are inline SVG authored in PHP by the node, not user input.
        dangerouslySetInnerHTML={{ __html: node.icon }}
      />
      <span className="flowwp-library__label">{node.label}</span>
      {node.lockReason === 'plan' && <span className="flowwp-library__badge">{node.requiredPlan ?? 'Pro'}</span>}
      {node.lockReason === 'plugin' && (
        <span className="flowwp-library__badge flowwp-library__badge--plugin">{__('Needs plugin', 'flowwp-workflow-automation')}</span>
      )}
    </button>
  );

  const categoryBlock = (category: Category) => (
    <div key={category.label} className="flowwp-library__group">
      <h3 className="flowwp-library__heading">{category.label}</h3>
      {category.nodes.map(nodeButton)}
    </div>
  );

  const integrationRow = (group: Group) => (
    <button
      key={group.integration.id}
      type="button"
      className={`flowwp-library__integration${group.integration.available ? '' : ' is-unavailable'}`}
      onClick={() => setOpenId(group.integration.id)}
    >
      <span
        className="flowwp-library__icon"
        // Icons are inline SVG authored in PHP by the integration, not
        // user input.
        dangerouslySetInnerHTML={{ __html: group.integration.icon }}
      />

      <span className="flowwp-library__integration-text">
        <span className="flowwp-library__integration-name">{group.integration.name}</span>
        <span className="flowwp-library__integration-meta">
          {sprintf(/* translators: %d: how many steps an integration provides. */ _n('%d node', '%d nodes', group.total, 'flowwp-workflow-automation'), group.total)}
          {group.locked > 0 && ` · ${group.locked} locked`}
        </span>
      </span>

      <span className="flowwp-library__chevron" aria-hidden="true">
        ›
      </span>
    </button>
  );

  const openTools = () => {
    setOpenId(null);
    setToolsOpen(true);
  };

  return (
    <aside className="flowwp-panel-left">
      <div className="flowwp-panel__head">
        <h2 className="flowwp-panel__title">{__('Nodes', 'flowwp-workflow-automation')}</h2>
        <button
          type="button"
          className={`flowwp-tools-btn${toolsOpen ? ' is-open' : ''}`}
          aria-expanded={toolsOpen}
          onClick={() => (toolsOpen ? setToolsOpen(false) : openTools())}
          title={__('Logic, data, schedules, webhooks and HTTP requests', 'flowwp-workflow-automation')}
        >
          <IconTools />
          <span>{__('Tools', 'flowwp-workflow-automation')}</span>
          <span className="flowwp-tools-btn__count">{toolCount}</span>
        </button>
      </div>

      <div className="flowwp-panel__search">
        <input
          type="search"
          value={search}
          onChange={(event) => {
            setSearch(event.target.value);

            // Typing is a request to see everything that matches, so an open
            // integration would only be hiding most of the answer.
            if (event.target.value.trim() !== '') {
              setOpenId(null);
              setToolsOpen(false);
            }
          }}
          placeholder={__('Search all nodes…', 'flowwp-workflow-automation')}
          aria-label={__('Search nodes', 'flowwp-workflow-automation')}
        />
      </div>

      {term === '' && (
        <div className="flowwp-libtabs" role="group" aria-label={__('Node sources', 'flowwp-workflow-automation')}>
          {(
            [
              ['plugin', __('Integrations', 'flowwp-workflow-automation'), plugins.length],
              ['app', __('Apps', 'flowwp-workflow-automation'), apps.length],
            ] as const
          ).map(([id, label, count]) => (
            <button
              key={id}
              type="button"
              aria-pressed={tab === id}
              className={`flowwp-libtabs__tab${tab === id ? ' is-current' : ''}`}
              onClick={() => setTab(id)}
            >
              {label}
              <span className="flowwp-libtabs__count">{count}</span>
            </button>
          ))}
        </div>
      )}

      <div className="flowwp-panel__scroll">
        {catalogue.length === 0 && (
          <div className="flowwp-empty">
            <p style={{ margin: 0 }}>{__('No nodes are registered.', 'flowwp-workflow-automation')}</p>
          </div>
        )}

        {term !== '' && results.length === 0 && catalogue.length > 0 && (
          <div className="flowwp-empty">
            <p style={{ margin: 0 }}>Nothing matches “{search}”.</p>
          </div>
        )}

        {term !== '' &&
          results.map((group) => (
            <section key={group.integration.id} className="flowwp-library__results">
              <h3 className="flowwp-library__heading">
                {group.integration.name}
                {group.integration.kind === 'tool' && <span className="flowwp-library__kind">{__('Tool', 'flowwp-workflow-automation')}</span>}
              </h3>
              {group.categories.flatMap((category) => category.nodes.map(nodeButton))}
            </section>
          ))}

        {term === '' && tab === 'plugin' && (
          <>
            {installed.map(integrationRow)}
            {missing.length > 0 && (
              <>
                <h3 className="flowwp-library__heading flowwp-library__heading--split">
                  {__('Not installed on this site', 'flowwp-workflow-automation')}
                </h3>
                {missing.map(integrationRow)}
              </>
            )}
          </>
        )}

        {term === '' && tab === 'app' && apps.map(integrationRow)}

        {term === '' && tab === 'app' && apps.length === 0 && (
          <div className="flowwp-apps-soon">
            <span className="flowwp-apps-soon__art" aria-hidden="true">
              <span />
              <span />
              <span />
            </span>
            <strong className="flowwp-apps-soon__title">{__('Apps are on the way', 'flowwp-workflow-automation')}</strong>
            <p className="flowwp-apps-soon__text">
              {__('Services outside WordPress will be listed here, each with its own triggers and actions.', 'flowwp-workflow-automation')}
            </p>
            <ul className="flowwp-apps-soon__names" aria-label={__('Planned apps', 'flowwp-workflow-automation')}>
              {COMING_APPS.map((name) => (
                <li key={name}>{name}</li>
              ))}
            </ul>
            <p className="flowwp-apps-soon__text">
              {__('Until then, the HTTP Request step can call any app that has an API.', 'flowwp-workflow-automation')}
            </p>
            <button type="button" className="flowwp-btn" onClick={openTools}>
              <IconTools />
              {__('Open Tools', 'flowwp-workflow-automation')}
            </button>
          </div>
        )}
      </div>

      {open && (
        <div className="flowwp-library__drill" role="group" aria-label={open.integration.name}>
          <div className="flowwp-library__drill-head">
            <button
              type="button"
              className="flowwp-library__back"
              onClick={() => setOpenId(null)}
              aria-label={__('Back to the list', 'flowwp-workflow-automation')}
            >
              ‹
            </button>
            <span className="flowwp-library__icon" dangerouslySetInnerHTML={{ __html: open.integration.icon }} />
            <span className="flowwp-library__drill-name">{open.integration.name}</span>
            <span className="flowwp-library__count">{open.total}</span>
          </div>

          {!open.integration.available && <p className="flowwp-library__requirement">{open.integration.requirement}</p>}

          <div className="flowwp-library__drill-scroll">{open.categories.map(categoryBlock)}</div>
        </div>
      )}

      {/* Tools list their nodes straight away: there are few of them, and
          they are the nodes every workflow reaches for. */}
      {toolsOpen && (
        <div className="flowwp-library__drill flowwp-tools" role="group" aria-label={__('Tools', 'flowwp-workflow-automation')}>
          <div className="flowwp-library__drill-head flowwp-tools__head">
            <span className="flowwp-tools__mark" aria-hidden="true">
              <IconTools />
            </span>
            <span className="flowwp-library__drill-name">{__('Tools', 'flowwp-workflow-automation')}</span>
            <span className="flowwp-library__count">{toolCount}</span>
            <button
              type="button"
              className="flowwp-library__back"
              onClick={() => setToolsOpen(false)}
              aria-label={__('Close tools', 'flowwp-workflow-automation')}
            >
              <IconClose />
            </button>
          </div>

          <div className="flowwp-library__drill-scroll">
            {tools.map((group) => (
              <section key={group.integration.id} className="flowwp-tools__section">
                <h3 className="flowwp-tools__name">
                  <span
                    className="flowwp-library__icon"
                    dangerouslySetInnerHTML={{ __html: group.integration.icon }}
                  />
                  {group.integration.name}
                </h3>
                {group.categories.map(categoryBlock)}
              </section>
            ))}
          </div>
        </div>
      )}

      {upgradeUrl && lockedCount > 0 && (
        <a className="flowwp-upsell" href={upgradeUrl}>
          <span className="flowwp-upsell__icon" aria-hidden="true">
            {/* An open padlock: the promise is what unlocking gets you, and a
                closed one reads as a refusal instead of an offer. */}
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
              <rect x="4" y="10.5" width="16" height="10.5" rx="2.5" />
              <path d="M8 10.5V7a4 4 0 0 1 7.7-1.5" strokeLinecap="round" />
              <circle cx="12" cy="15.5" r="1.4" fill="currentColor" stroke="none" />
            </svg>
          </span>

          <span className="flowwp-upsell__text">
            <strong className="flowwp-upsell__headline">
              Unlock {lockedCount} more node{lockedCount === 1 ? '' : 's'}
            </strong>
            <span className="flowwp-upsell__sub">
              {lockedNames.join(', ')}
              {lockedIntegrations.length > 3 ? ' and more' : ''}
            </span>
          </span>

          <span className="flowwp-upsell__go" aria-hidden="true">
            →
          </span>
        </a>
      )}
    </aside>
  );
}