import {
  cloneElement,
  type DragEvent,
  type KeyboardEvent,
  type MouseEvent,
  type ReactElement,
  type UIEvent
} from "react";
import { SlidingSelection } from "../../ui/SlidingSelection";
import {
  DataTable,
  DataTableBody,
  DataTableEmpty,
  DataTableHeader
} from "../../ui/DataTable";
import { Dialog } from "../../ui/Dialog";
import {
  ACCOUNT_COLUMNS,
  type AccountAddFilter,
  type AccountAddOption,
  type AccountRowViewModel
} from "./settings-model";

export type AccountWorkspacePanel = "overview" | "rules";

export interface AccountRulesViewModel {
  providerOrder: readonly string[];
  routing: readonly string[];
  autoFallback: boolean;
  rememberCredentials?: boolean;
  rotationEvents?: readonly { id: string; title: string; detail: string }[];
  routingEntries?: readonly {
    hosterId: string;
    hosterLabel: string;
    provider: string;
    providers: readonly { value: string; label: string }[];
  }[];
  availableRoutingHosters?: readonly { value: string; label: string }[];
}

export interface AccountWorkspaceViewModel {
  activePanel: AccountWorkspacePanel;
  rows: readonly AccountRowViewModel[];
  selectedIds: readonly string[];
  busy: boolean;
  error?: string;
  allEnabled?: boolean;
  statusSort?: "none" | "desc" | "asc";
  rules: AccountRulesViewModel;
}

export interface AccountWorkspaceActions {
  onPanelChange: (panel: AccountWorkspacePanel) => void;
  onSelect: (rowId: string) => void;
  onToggleEnabled: (rowId: string) => void;
  onEdit: (rowId: string) => void;
  onContextMenu: (rowId: string, x: number, y: number) => void;
  onAdd: () => void;
  onRemoveSelected: () => void;
  onCheckAll: () => void;
  onSetAllEnabled?: (enabled: boolean) => void;
  onStatusSort?: () => void;
  onMoveProvider?: (index: number, direction: -1 | 1) => void;
  onProviderDragStart?: (event: DragEvent<HTMLElement>, index: number) => void;
  onProviderDragOver?: (event: DragEvent<HTMLElement>, index: number) => void;
  onProviderDrop?: (event: DragEvent<HTMLElement>, index: number) => void;
  onProviderDragEnd?: () => void;
  onToggleAutoFallback?: (enabled: boolean) => void;
  onToggleRememberCredentials?: (enabled: boolean) => void;
  onRoutingProviderChange?: (hosterId: string, provider: string) => void;
  onRoutingRemove?: (hosterId: string) => void;
  onRoutingAdd?: (hosterId: string) => void;
}

export interface AccountWorkspaceProps {
  model: AccountWorkspaceViewModel;
  actions: AccountWorkspaceActions;
}

export interface AccountDialogField {
  id: string;
  label: string;
  type: "text" | "password" | "number" | "textarea";
  value: string;
  placeholder?: string;
  help?: string;
}

export interface AccountAddDialogModel {
  open: boolean;
  query: string;
  filter: AccountAddFilter;
  options: readonly AccountAddOption[];
  selectedOptionId: string | null;
  fields: readonly AccountDialogField[];
  error: string;
  busy: boolean;
}

export interface AccountAddDialogActions {
  onQueryChange: (value: string) => void;
  onFilterChange: (filter: AccountAddFilter) => void;
  onOptionSelect: (optionId: string) => void;
  onFieldChange: (fieldId: string, value: string) => void;
  onClose: () => void;
  onSubmit: () => void;
}

export interface AccountEditDialogModel {
  open: boolean;
  hoster: string;
  mode: string;
  identity: string;
  enabled: boolean;
  fields: readonly AccountDialogField[];
  error: string;
  busy: boolean;
}

export interface AccountEditDialogActions {
  onFieldChange: (fieldId: string, value: string) => void;
  onClose: () => void;
  onCheck: () => void;
  onSave: () => void;
  onRemove: () => void;
  onToggleEnabled: () => void;
}

function AccountDialogFields({
  fields,
  onChange
}: {
  fields: readonly AccountDialogField[];
  onChange: (fieldId: string, value: string) => void;
}): ReactElement {
  return (
    <div className="settings-account-dialog-fields">
      {fields.map((field) => (
        <label className="settings-account-dialog-field" key={field.id}>
          <span>{field.label}</span>
          {field.type === "textarea" ? (
            <textarea
              className="settings-control settings-account-dialog-textarea"
              onChange={(event) => onChange(field.id, event.target.value)}
              placeholder={field.placeholder}
              rows={4}
              value={field.value}
            />
          ) : (
            <input
              autoComplete={field.type === "password" ? "off" : undefined}
              className="settings-control"
              inputMode={field.type === "number" ? "decimal" : undefined}
              onChange={(event) => onChange(field.id, event.target.value)}
              placeholder={field.placeholder}
              type={field.type}
              value={field.value}
            />
          )}
          {field.help ? <span className="settings-field-help">{field.help}</span> : null}
        </label>
      ))}
    </div>
  );
}

function AccountRow({
  row,
  selected,
  busy,
  actions
}: {
  row: AccountRowViewModel;
  selected: boolean;
  busy: boolean;
  actions: AccountWorkspaceActions;
}): ReactElement {
  const selectRow = (): void => actions.onSelect(row.id);
  const onClick = (): void => selectRow();
  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
    if (event.target !== event.currentTarget || (event.key !== "Enter" && event.key !== " ")) {
      return;
    }
    event.preventDefault();
    selectRow();
  };
  const openContextMenu = (event: MouseEvent<HTMLElement>): void => {
    event.preventDefault();
    event.stopPropagation();
    actions.onContextMenu(row.id, event.clientX, event.clientY);
  };
  return (
    <div
      aria-selected={selected}
      className={`settings-account-row${selected ? " is-selected" : ""}${row.problem ? " has-problem" : ""}${!row.enabled ? " is-disabled" : ""}`}
      onClick={onClick}
      onContextMenu={openContextMenu}
      onDoubleClick={() => actions.onEdit(row.id)}
      onKeyDown={onKeyDown}
      role="row"
      tabIndex={0}
    >
      <span className="settings-account-column-enable" role="cell">
        <input
          aria-label={`${row.hoster} ${row.enabled ? "deaktivieren" : "aktivieren"}`}
          checked={row.enabled}
          disabled={busy}
          onChange={() => actions.onToggleEnabled(row.id)}
          onClick={(event) => event.stopPropagation()}
          type="checkbox"
        />
      </span>
      <span className="settings-account-hoster" role="cell" title={`${row.hoster} · ${row.mode}`}>
        <img alt="" aria-hidden="true" draggable={false} height="20" src={row.icon} width="20" />
        <span>
          <strong>{row.hoster}</strong>
          <small>{row.mode}</small>
        </span>
      </span>
      <span className="settings-account-status" role="cell">
        <span className={`settings-account-status-badge is-${row.status.tone}`}>{row.status.text}</span>
      </span>
      <span className="settings-account-traffic" role="cell">{row.traffic}</span>
      <span className="settings-account-username settings-copyable" role="cell" title={row.username}>{row.username}</span>
      <span className="settings-account-email settings-copyable" role="cell" title={row.email}>{row.email}</span>
      <span className="settings-account-expires" role="cell">{row.expires}</span>
      <span className="settings-account-credential" role="cell">{row.credential}</span>
      <span className="settings-account-column-actions" role="cell">
        <button
          aria-label={`${row.hoster} Aktionen`}
          className="settings-account-action-button"
          disabled={busy}
          onClick={(event) => {
            event.stopPropagation();
            const rect = event.currentTarget.getBoundingClientRect();
            actions.onContextMenu(row.id, rect.right, rect.bottom);
          }}
          type="button"
        >⋯</button>
      </span>
    </div>
  );
}

function syncAccountTableScroll(event: UIEvent<HTMLDivElement>): void {
  const header = event.currentTarget.parentElement?.querySelector<HTMLElement>(".settings-account-table-header");
  if (header) {
    header.scrollLeft = event.currentTarget.scrollLeft;
  }
}

function AccountOverview({ model, actions }: AccountWorkspaceProps): ReactElement {
  const selectedIds = new Set(model.selectedIds);
  return (
    <>
      <DataTable className="settings-account-table" label="Accounts">
        <DataTableHeader className="settings-account-table-header">
          <div className="settings-account-table-grid" role="row">
            <span aria-label="Aktiviert" className="settings-account-column-enable" role="columnheader" />
            {ACCOUNT_COLUMNS.map((column) => (
              <span key={column} role="columnheader">
                {column === "Status" && actions.onStatusSort ? (
                  <button className="settings-account-sort" onClick={actions.onStatusSort} type="button">
                    {column}{model.statusSort === "desc" ? " ▼" : model.statusSort === "asc" ? " ▲" : ""}
                  </button>
                ) : column}
              </span>
            ))}
            <span aria-label="Aktionen" className="settings-account-column-actions" role="columnheader" />
          </div>
        </DataTableHeader>
        <DataTableBody className="settings-account-table-body" data-visual-region="accounts-table-body" onScroll={syncAccountTableScroll}>
          {model.busy && model.rows.length === 0 ? (
            <DataTableEmpty description="Die Accountdaten werden aktualisiert." title="Accounts werden geladen" />
          ) : model.error ? (
            <DataTableEmpty className="settings-account-table-error" description="Die gespeicherten Accounts bleiben unverändert." title={model.error} />
          ) : model.rows.length === 0 ? (
            <DataTableEmpty description="Füge einen Account hinzu, um Downloads über einen Anbieter zu starten." title="Noch keine Accounts" />
          ) : model.rows.map((row) => cloneElement(
            AccountRow({ actions, busy: model.busy, row, selected: selectedIds.has(row.id) }),
            { key: row.id }
          ))}
        </DataTableBody>
      </DataTable>
      <div className="settings-account-local-actions">
        <div>
          <button className="settings-button settings-button-secondary" disabled={model.busy} onClick={actions.onAdd} type="button">＋ Hinzufügen</button>
          <button className="settings-button settings-button-secondary" disabled={model.busy || model.selectedIds.length === 0} onClick={actions.onRemoveSelected} type="button">− Entfernen</button>
          <button className="settings-button settings-button-secondary" disabled={model.busy} onClick={actions.onCheckAll} type="button">↻ Aktualisieren</button>
        </div>
        <span>{model.rows.length} {model.rows.length === 1 ? "Account" : "Accounts"}</span>
      </div>
    </>
  );
}

function AccountRules({ model, actions }: AccountWorkspaceProps): ReactElement {
  return (
    <div className="settings-account-rules">
      <section className="settings-rule-section">
        <h3>Provider-Reihenfolge</h3>
        <p>Lege fest, in welcher Reihenfolge verfügbare Provider verwendet werden.</p>
        {model.rules.providerOrder.length === 0 ? (
          <span className="settings-rule-empty">Keine Provider konfiguriert.</span>
        ) : (
          <ol className="settings-provider-order">
            {model.rules.providerOrder.map((provider, index) => (
              <li
                draggable={Boolean(actions.onProviderDragStart)}
                key={`${provider}-${index}`}
                onDragEnd={actions.onProviderDragEnd}
                onDragOver={(event) => actions.onProviderDragOver?.(event, index)}
                onDragStart={(event) => actions.onProviderDragStart?.(event, index)}
                onDrop={(event) => actions.onProviderDrop?.(event, index)}
              >
                <span>{provider}</span>
                {actions.onMoveProvider ? (
                  <span className="settings-provider-order-actions">
                    <button aria-label={`${provider} nach oben`} disabled={index === 0} onClick={() => actions.onMoveProvider?.(index, -1)} type="button">↑</button>
                    <button aria-label={`${provider} nach unten`} disabled={index === model.rules.providerOrder.length - 1} onClick={() => actions.onMoveProvider?.(index, 1)} type="button">↓</button>
                  </span>
                ) : null}
              </li>
            ))}
          </ol>
        )}
        <label className="settings-rule-toggle">
          <input
            checked={model.rules.autoFallback}
            disabled={!actions.onToggleAutoFallback}
            onChange={(event) => actions.onToggleAutoFallback?.(event.target.checked)}
            type="checkbox"
          />
          <span>Automatischer Fallback</span>
        </label>
        {typeof model.rules.rememberCredentials === "boolean" ? (
          <label className="settings-rule-toggle">
            <input
              checked={model.rules.rememberCredentials}
              disabled={!actions.onToggleRememberCredentials}
              onChange={(event) => actions.onToggleRememberCredentials?.(event.target.checked)}
              type="checkbox"
            />
            <span>Zugangsdaten lokal speichern</span>
          </label>
        ) : null}
      </section>
      <section className="settings-rule-section">
        <h3>Hoster-Routing</h3>
        <p>Eigene Zuordnungen überschreiben für den jeweiligen Hoster die Standardreihenfolge.</p>
        {model.rules.routingEntries ? (
          <>
            {model.rules.routingEntries.length === 0 ? <span className="settings-rule-empty">Keine eigenen Zuordnungen.</span> : (
              <div className="settings-routing-editor">
                {model.rules.routingEntries.map((entry) => (
                  <div className="settings-routing-editor-row" key={entry.hosterId}>
                    <span>{entry.hosterLabel}</span>
                    <select
                      aria-label={`Provider für ${entry.hosterLabel}`}
                      className="settings-control"
                      onChange={(event) => actions.onRoutingProviderChange?.(entry.hosterId, event.target.value)}
                      value={entry.provider}
                    >
                      {entry.providers.map((provider) => <option key={provider.value} value={provider.value}>{provider.label}</option>)}
                    </select>
                    <button aria-label={`${entry.hosterLabel} Zuordnung entfernen`} className="settings-button settings-button-danger" onClick={() => actions.onRoutingRemove?.(entry.hosterId)} type="button">Entfernen</button>
                  </div>
                ))}
              </div>
            )}
            {model.rules.availableRoutingHosters ? (
              <select
                aria-label="Hoster-Routing hinzufügen"
                className="settings-control settings-routing-add"
                onChange={(event) => {
                  if (event.target.value) {
                    actions.onRoutingAdd?.(event.target.value);
                  }
                  event.target.value = "";
                }}
                value=""
              >
                <option disabled value="">Hoster hinzufügen…</option>
                {model.rules.availableRoutingHosters.map((hoster) => <option key={hoster.value} value={hoster.value}>{hoster.label}</option>)}
                <option value="__custom">Eigener Hoster…</option>
              </select>
            ) : null}
          </>
        ) : model.rules.routing.length === 0 ? (
          <span className="settings-rule-empty">Keine eigenen Zuordnungen.</span>
        ) : (
          <ul className="settings-routing-list">
            {model.rules.routing.map((route, index) => <li className="settings-copyable" key={`${route}-${index}`}>{route}</li>)}
          </ul>
        )}
      </section>
      {model.rules.rotationEvents ? (
        <section className="settings-rule-section">
          <h3>Rotations-Verlauf</h3>
          {model.rules.rotationEvents.length === 0 ? (
            <span className="settings-rule-empty">Noch keine Rotations-Ereignisse.</span>
          ) : model.rules.rotationEvents.map((event) => (
            <div className="settings-rotation-event" key={event.id}>
              <strong>{event.title}</strong>
              <span>{event.detail}</span>
            </div>
          ))}
        </section>
      ) : null}
    </div>
  );
}

export function AccountWorkspace({ model, actions }: AccountWorkspaceProps): ReactElement {
  return (
    <div className="settings-account-workspace">
      <header className="settings-account-heading">
        <div>
          <h2>Accountverwaltung</h2>
          <p>Accounts hinzufügen, prüfen und verwalten.</p>
        </div>
        {typeof model.allEnabled === "boolean" && actions.onSetAllEnabled ? (
          <label className="settings-rule-toggle settings-account-all-enabled">
            <input
              checked={model.allEnabled}
              disabled={model.busy || model.rows.length === 0}
              onChange={(event) => actions.onSetAllEnabled?.(event.target.checked)}
              type="checkbox"
            />
            <span>Accounts zum Herunterladen verwenden</span>
          </label>
        ) : null}
      </header>
      <SlidingSelection activeKey={model.activePanel} aria-label="Accountverwaltung" axis="horizontal" className="settings-account-tabs" role="tablist">
        <button
          aria-controls="settings-account-overview"
          aria-selected={model.activePanel === "overview"}
          data-sliding-selection-active={model.activePanel === "overview"}
          data-sliding-selection-item="true"
          id="settings-account-overview-tab"
          onClick={() => actions.onPanelChange("overview")}
          role="tab"
          type="button"
        >Übersicht</button>
        <button
          aria-controls="settings-account-rules"
          aria-selected={model.activePanel === "rules"}
          data-sliding-selection-active={model.activePanel === "rules"}
          data-sliding-selection-item="true"
          id="settings-account-rules-tab"
          onClick={() => actions.onPanelChange("rules")}
          role="tab"
          type="button"
        >Verwendungsregeln</button>
      </SlidingSelection>
      <div
        aria-labelledby="settings-account-overview-tab"
        className="settings-account-panel"
        hidden={model.activePanel !== "overview"}
        id="settings-account-overview"
        role="tabpanel"
      >
        {AccountOverview({ actions, model })}
      </div>
      <div
        aria-labelledby="settings-account-rules-tab"
        className="settings-account-panel"
        hidden={model.activePanel !== "rules"}
        id="settings-account-rules"
        role="tabpanel"
      >
        {AccountRules({ actions, model })}
      </div>
    </div>
  );
}

export function AccountAddDialog({
  model,
  actions
}: {
  model: AccountAddDialogModel;
  actions: AccountAddDialogActions;
}): ReactElement | null {
  const selectedOption = model.options.find((option) => option.id === model.selectedOptionId);
  return (
    <Dialog
      actions={(
        <>
          <button className="settings-button settings-button-secondary" disabled={model.busy} onClick={actions.onClose} type="button">Abbrechen</button>
          <button className="settings-button settings-button-primary" disabled={model.busy || !model.selectedOptionId} onClick={actions.onSubmit} type="button">Prüfen und speichern</button>
        </>
      )}
      actionsClassName="settings-account-dialog-actions"
      bodyClassName="settings-account-dialog-body"
      description="Wähle einen Dienst und trage die passenden Zugangsdaten ein."
      onClose={actions.onClose}
      open={model.open}
      size="account"
      title="Account hinzufügen"
    >
      <div className="settings-account-picker-selector">
        <span>Dienst / Zugangstyp</span>
        <input
          aria-label="Dienst oder Zugangstyp suchen"
          className="settings-control"
          onChange={(event) => actions.onQueryChange(event.target.value)}
          placeholder="Dienst oder Zugangstyp suchen"
          type="search"
          value={model.query}
        />
      </div>
      <div className="settings-account-picker-table">
        <div aria-hidden="true" className="settings-account-picker-header">
          <span>Dienst</span>
          <span>Typ/Funktion</span>
        </div>
        <div aria-label="Dienst / Zugangstyp" className="settings-account-picker-list" role="listbox">
          {model.options.map((option) => (
            <button
              aria-selected={option.id === model.selectedOptionId}
              className={`settings-account-picker-row${option.id === model.selectedOptionId ? " is-selected" : ""}`}
              data-account-option-id={option.id}
              key={option.id}
              onClick={() => actions.onOptionSelect(option.id)}
              role="option"
              type="button"
            >
              <span className="settings-account-picker-service">
                {option.icon ? <img alt="" aria-hidden="true" draggable={false} height="18" src={option.icon} width="18" /> : null}
                <span>{option.title}</span>
              </span>
              <span>{option.functionLabel}</span>
            </button>
          ))}
        </div>
      </div>
      {selectedOption ? (
        <>
          <div className="settings-account-option-summary">
            <strong>Zugangsdaten für {selectedOption.title}</strong>
            <span>{selectedOption.description}</span>
          </div>
          <AccountDialogFields fields={model.fields} onChange={actions.onFieldChange} />
        </>
      ) : null}
      {model.error ? <p className="settings-account-dialog-error" role="alert">{model.error}</p> : null}
    </Dialog>
  );
}

export function AccountEditDialog({
  model,
  actions
}: {
  model: AccountEditDialogModel;
  actions: AccountEditDialogActions;
}): ReactElement | null {
  return (
    <Dialog
      actions={(
        <>
          <button className="settings-button settings-button-danger" disabled={model.busy} onClick={actions.onRemove} type="button">Entfernen</button>
          <span className="settings-account-dialog-action-spacer" />
          <button className="settings-button settings-button-secondary" disabled={model.busy} onClick={actions.onClose} type="button">Abbrechen</button>
          <button className="settings-button settings-button-secondary" disabled={model.busy} onClick={actions.onCheck} type="button">Prüfen</button>
          <button className="settings-button settings-button-primary" disabled={model.busy} onClick={actions.onSave} type="button">Speichern</button>
        </>
      )}
      actionsClassName="settings-account-dialog-actions"
      bodyClassName="settings-account-dialog-body"
      description="Bearbeite ausschließlich den ausgewählten Account."
      onClose={actions.onClose}
      open={model.open}
      size="account"
      title="Account bearbeiten"
    >
      <div className="settings-account-edit-identity">
        <span>{model.hoster} · {model.mode}</span>
        <strong className="settings-copyable">{model.identity}</strong>
      </div>
      <label className="settings-rule-toggle settings-account-edit-enabled">
        <input checked={model.enabled} disabled={model.busy} onChange={actions.onToggleEnabled} type="checkbox" />
        <span>Account aktiviert</span>
      </label>
      <AccountDialogFields fields={model.fields} onChange={actions.onFieldChange} />
      {model.error ? <p className="settings-account-dialog-error" role="alert">{model.error}</p> : null}
    </Dialog>
  );
}