import { __, _n, sprintf } from '@/lib/i18n';
import { Fragment, useState } from 'react';
import { absoluteTime, relativeTime } from '@/lib/time';
import type { AppBadgeInfo, WorkflowStats, WorkflowSummary } from '@/types';
import { RowMenu } from '@/app/RowMenu';
import { AppFlow } from '@/app/AppFlow';
import { StatusSwitch } from '@/app/StatusSwitch';
import { IconDownload, IconHistory, IconPencil, IconTrash, IconType } from '@/lib/icons';

/**
 * The workflow list, as an actual table.
 *
 * It was a pair of CSS grids — one for the header, one per row — which cannot
 * align: the header's action column is empty and the rows' holds two buttons,
 * so the `1fr` name column resolved to a different width in each and every
 * heading sat left of its own numbers. A table computes one set of column
 * widths for all of its rows, which is the entire reason the element exists.
 *
 * A row answers the questions someone opens this screen to ask: is it live,
 * what does it connect, and has it been working — the switch, the logos and the
 * health bar, read left to right.
 */

/** Why going live was refused, shown under the row it belongs to. */
export interface ActivationProblem {
  id: number;
  message: string;
  details: string[];
}

interface WorkflowTableProps {
  workflows: WorkflowSummary[];
  canManage: boolean;
  onOpen: (id: number) => void;
  onHistory: (id: number) => void;
  onRename: (id: number, name: string) => void;
  onDelete: (id: number) => void;
  /** Whether the plan includes exporting. */
  canExport: boolean;
  onExport: (id: number) => void;
  /** Name and logo of each integration the listed workflows use. */
  apps: Record<string, AppBadgeInfo>;
  onSetActive: (id: number, active: boolean) => void;
  /** Rows whose switch is waiting on the server. */
  pending: ReadonlySet<number>;
  problem: ActivationProblem | null;
  onDismissProblem: () => void;
}

const COLUMNS = 6;

/** Completed against failed, as a bar and a sentence. */
function RunHealth({ stats }: { stats: WorkflowStats }) {
  const finished = stats.completedRuns + stats.failedRuns;

  if (finished === 0) {
    return <span className="flowwp-health flowwp-health--none">{__('No runs yet', 'flowwp-workflow-automation')}</span>;
  }

  const rate = Math.round((stats.completedRuns / finished) * 100);
  const tone = stats.failedRuns === 0 ? 'good' : rate >= 80 ? 'fair' : 'poor';

  return (
    <span
      className={`flowwp-health flowwp-health--${tone}`}
      title={sprintf(
        /* translators: 1: how many runs completed, 2: how many failed, 3: the success rate as a percentage. */
        __('%1$d completed, %2$d failed (%3$d%% succeeded)', 'flowwp-workflow-automation'),
        stats.completedRuns,
        stats.failedRuns,
        rate,
      )}
    >
      <span className="flowwp-health__bar" aria-hidden="true">
        <span className="flowwp-health__ok" style={{ width: `${rate}%` }} />
      </span>
      <span className="flowwp-health__text">
        <strong>{stats.completedRuns}</strong> completed
        {/* Failures beside the successes: "48 runs" next to a workflow that
            has failed every time since Tuesday is worse than no number. */}
        {stats.failedRuns > 0 && <span className="flowwp-table__failed">{stats.failedRuns} failed</span>}
      </span>
    </span>
  );
}

export function WorkflowTable({
  workflows,
  canManage,
  onOpen,
  onHistory,
  onRename,
  onDelete,
  canExport,
  onExport,
  apps,
  onSetActive,
  pending,
  problem,
  onDismissProblem,
}: WorkflowTableProps) {
  const [confirmingId, setConfirmingId] = useState<number | null>(null);
  const [renamingId, setRenamingId] = useState<number | null>(null);
  const [draftName, setDraftName] = useState('');

  const commitRename = (id: number) => {
    const name = draftName.trim();

    setRenamingId(null);

    // An empty name is a mistake, not an instruction to erase the title.
    if (name !== '') {
      onRename(id, name);
    }
  };

  return (
    <div className="flowwp-table__wrap">
      <table className="flowwp-table">
        <thead>
          <tr>
            <th scope="col" className="flowwp-table__status">
              {__('Status', 'flowwp-workflow-automation')}
            </th>
            <th scope="col">{__('Workflow', 'flowwp-workflow-automation')}</th>
            <th scope="col">{__('Connects', 'flowwp-workflow-automation')}</th>
            <th scope="col">{__('Runs', 'flowwp-workflow-automation')}</th>
            <th scope="col">{__('Last edited', 'flowwp-workflow-automation')}</th>
            <th scope="col" className="flowwp-table__actions">
              <span className="screen-reader-text">{__('Actions', 'flowwp-workflow-automation')}</span>
            </th>
          </tr>
        </thead>

        <tbody>
          {workflows.map((workflow) => (
            <Fragment key={workflow.id}>
              <tr className={`flowwp-row flowwp-row--${workflow.status}`}>
                <td className="flowwp-table__status" data-label={__('Status', 'flowwp-workflow-automation')}>
                  <StatusSwitch
                    workflow={workflow}
                    disabled={!canManage}
                    pending={pending.has(workflow.id)}
                    onChange={(active) => onSetActive(workflow.id, active)}
                  />
                </td>

                <td data-label={__('Workflow', 'flowwp-workflow-automation')}>
                  <div className="flowwp-table__cell--name">
                    {renamingId === workflow.id ? (
                      <input
                        className="flowwp-table__rename"
                        // eslint-disable-next-line jsx-a11y/no-autofocus -- the
                        // cell became an input because Rename was clicked.
                        autoFocus
                        value={draftName}
                        aria-label={__('Workflow name', 'flowwp-workflow-automation')}
                        onChange={(event) => setDraftName(event.target.value)}
                        onBlur={() => commitRename(workflow.id)}
                        onKeyDown={(event) => {
                          if (event.key === 'Enter') {
                            commitRename(workflow.id);
                          }

                          if (event.key === 'Escape') {
                            setRenamingId(null);
                          }
                        }}
                      />
                    ) : (
                      <button type="button" className="flowwp-table__name" onClick={() => onOpen(workflow.id)}>
                        {workflow.name}
                      </button>
                    )}
                    <span className="flowwp-table__sub">
                      {sprintf(
                        /* translators: %d: how many triggers a workflow has. */
                        _n('%d trigger', '%d triggers', workflow.stats.triggers, 'flowwp-workflow-automation'),
                        workflow.stats.triggers,
                      )}{' '}
                      ·{' '}
                      {sprintf(
                        /* translators: %d: how many steps a workflow has. */
                        _n('%d step', '%d steps', workflow.stats.actions, 'flowwp-workflow-automation'),
                        workflow.stats.actions,
                      )}
                    </span>
                  </div>
                </td>

                <td data-label={__('Connects', 'flowwp-workflow-automation')}>
                  <AppFlow apps={workflow.stats.apps} info={apps} live={workflow.isActive} />
                </td>

                <td data-label={__('Runs', 'flowwp-workflow-automation')}>
                  <RunHealth stats={workflow.stats} />
                </td>

                <td data-label={__('Last edited', 'flowwp-workflow-automation')}>
                  <div className="flowwp-table__when">
                    <span title={absoluteTime(workflow.updatedAt)}>{relativeTime(workflow.updatedAt)}</span>
                    {workflow.stats.lastRunAt !== null && (
                      <span className="flowwp-table__sub" title={absoluteTime(workflow.stats.lastRunAt)}>
                        ran {relativeTime(workflow.stats.lastRunAt)}
                      </span>
                    )}
                  </div>
                </td>

                <td className="flowwp-table__actions">
                  {confirmingId === workflow.id ? (
                    <div
                      className="flowwp-rowactions flowwp-rowactions--confirm"
                      role="group"
                      aria-label={sprintf(/* translators: %s: the workflow's name. */ __('Delete %s', 'flowwp-workflow-automation'), workflow.name)}
                    >
                      <span className="flowwp-rowactions__question">{__('Delete permanently?', 'flowwp-workflow-automation')}</span>
                      <button
                        type="button"
                        className="flowwp-rowbtn flowwp-rowbtn--danger"
                        onClick={() => {
                          onDelete(workflow.id);
                          setConfirmingId(null);
                        }}
                      >
                        <IconTrash />
                        <span>{__('Delete', 'flowwp-workflow-automation')}</span>
                      </button>
                      <button type="button" className="flowwp-rowbtn" onClick={() => setConfirmingId(null)}>
                        {__('Cancel', 'flowwp-workflow-automation')}
                      </button>
                    </div>
                  ) : (
                    // The two actions used every day stay visible; the occasional
                    // ones wait behind ⋯, with the destructive one set apart.
                    <div className="flowwp-rowactions">
                      <button
                        type="button"
                        className="flowwp-rowbtn"
                        onClick={() => onOpen(workflow.id)}
                        aria-label={sprintf(/* translators: %s: the workflow's name. */ __('Edit %s', 'flowwp-workflow-automation'), workflow.name)}
                      >
                        <IconPencil />
                        <span>{__('Edit', 'flowwp-workflow-automation')}</span>
                      </button>
                      <button
                        type="button"
                        className="flowwp-rowbtn"
                        onClick={() => onHistory(workflow.id)}
                        aria-label={sprintf(/* translators: %s: the workflow's name. */ __('Runs of %s', 'flowwp-workflow-automation'), workflow.name)}
                      >
                        <IconHistory />
                        <span>{__('Runs', 'flowwp-workflow-automation')}</span>
                      </button>
                      <RowMenu
                        label={sprintf(/* translators: %s: the workflow's name. */ __('More actions for %s', 'flowwp-workflow-automation'), workflow.name)}
                        items={[
                          {
                            id: 'rename',
                            label: __('Rename', 'flowwp-workflow-automation'),
                            icon: <IconType />,
                            disabled: !canManage,
                            onSelect: () => {
                              setRenamingId(workflow.id);
                              setDraftName(workflow.name);
                            },
                          },
                          {
                            id: 'export',
                            label: __('Export', 'flowwp-workflow-automation'),
                            icon: <IconDownload />,
                            disabled: !canExport,
                            hint: canExport ? undefined : __('Upgrade', 'flowwp-workflow-automation'),
                            onSelect: () => onExport(workflow.id),
                          },
                          {
                            id: 'delete',
                            label: __('Delete', 'flowwp-workflow-automation'),
                            icon: <IconTrash />,
                            danger: true,
                            separated: true,
                            disabled: !canManage,
                            onSelect: () => setConfirmingId(workflow.id),
                          },
                        ]}
                      />
                    </div>
                  )}
                </td>
              </tr>

              {/* Going live checks the whole graph; when it is refused, the
                  reasons sit under the row whose switch was flipped. */}
              {problem?.id === workflow.id && (
                <tr className="flowwp-table__detail">
                  <td colSpan={COLUMNS}>
                    <div className="flowwp-golive" role="alert">
                      <strong className="flowwp-golive__title">“{workflow.name}” can’t go live yet</strong>
                      <p className="flowwp-golive__text">{problem.message}</p>
                      {problem.details.length > 0 && (
                        <ul className="flowwp-golive__list">
                          {problem.details.map((detail) => (
                            <li key={detail}>{detail}</li>
                          ))}
                        </ul>
                      )}
                      <div className="flowwp-golive__actions">
                        <button
                          type="button"
                          className="flowwp-btn flowwp-btn--primary"
                          onClick={() => onOpen(workflow.id)}
                        >
                          Fix it in the editor
                        </button>
                        <button type="button" className="flowwp-btn" onClick={onDismissProblem}>
                          Dismiss
                        </button>
                      </div>
                    </div>
                  </td>
                </tr>
              )}
            </Fragment>
          ))}
        </tbody>
      </table>
    </div>
  );
}