import {Eye, RefreshCcw, Search, X} from 'lucide-react';
import {FormEvent, useEffect, useMemo, useState} from 'react';

import {
  getAdminDatabaseTableRows,
  getAdminDatabaseTables,
} from '../api/adminApiClient';
import type {
  AdminDatabaseTableRowPayload,
  AdminDatabaseTableRowsResponse,
} from '../api/adminApiTypes';
import {handlePageError} from './pageUtils';

interface AdminDatabaseTablesPageProps {
  token: string;
  onUnauthorized: (message?: string) => void;
}

export function AdminDatabaseTablesPage({
  token,
  onUnauthorized,
}: AdminDatabaseTablesPageProps) {
  const [tables, setTables] = useState<string[]>([]);
  const [tableName, setTableName] = useState(() => readHashTableName());
  const [search, setSearch] = useState('');
  const [filters, setFilters] = useState('');
  const [limit, setLimit] = useState('100');
  const [result, setResult] = useState<AdminDatabaseTableRowsResponse | null>(null);
  const [detailRow, setDetailRow] = useState<AdminDatabaseTableRowPayload | null>(null);
  const [errorMessage, setErrorMessage] = useState('');
  const [isLoadingTables, setIsLoadingTables] = useState(false);
  const [isLoadingRows, setIsLoadingRows] = useState(false);

  useEffect(() => {
    void loadTables();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [token]);

  useEffect(() => {
    const nextTableName = readHashTableName();
    if (nextTableName) {
      setTableName(nextTableName);
    }
    const handleHashChange = () => {
      const tableFromHash = readHashTableName();
      if (tableFromHash) {
        setTableName(tableFromHash);
        void refreshRows(tableFromHash);
      }
    };
    window.addEventListener('hashchange', handleHashChange);
    return () => window.removeEventListener('hashchange', handleHashChange);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    if (tables.length && !tableName) {
      setTableName(tables[0] ?? '');
    }
  }, [tableName, tables]);

  useEffect(() => {
    if (tableName) {
      void refreshRows(tableName);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [tableName]);

  const visibleColumns = useMemo(() => {
    const columns = result?.columns ?? [];
    if (columns.length) {
      return columns;
    }
    const firstRow = result?.rows[0];
    return firstRow ? Object.keys(firstRow.cells) : [];
  }, [result]);

  async function loadTables() {
    setIsLoadingTables(true);
    setErrorMessage('');
    try {
      const response = await getAdminDatabaseTables(token);
      setTables(response.tables);
      if (response.fetchErrors.length) {
        setErrorMessage(response.fetchErrors.join('；'));
      }
    } catch (error: unknown) {
      handlePageError(error, onUnauthorized, setErrorMessage);
    } finally {
      setIsLoadingTables(false);
    }
  }

  async function refreshRows(nextTableName = tableName) {
    const normalizedTableName = nextTableName.trim();
    if (!normalizedTableName) {
      return;
    }
    setIsLoadingRows(true);
    setErrorMessage('');
    try {
      const response = await getAdminDatabaseTableRows(token, normalizedTableName, {
        search,
        filters,
        limit: parseLimit(limit),
      });
      setResult(response);
    } catch (error: unknown) {
      handlePageError(error, onUnauthorized, setErrorMessage);
    } finally {
      setIsLoadingRows(false);
    }
  }

  function handleSearch(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    void refreshRows();
  }

  function handleTableChange(nextTableName: string) {
    setTableName(nextTableName);
    const nextHash = `#tables?table=${encodeURIComponent(nextTableName)}`;
    if (window.location.hash !== nextHash) {
      window.location.hash = nextHash;
    }
  }

  return (
    <section className="admin-page admin-page-wide">
      <div className="admin-page-heading">
        <div>
          <h2>表查询</h2>
          <p>SpacetimeDB 行数据</p>
        </div>
        <div className="admin-action-row">
          <button
            className="admin-secondary-button"
            disabled={isLoadingTables}
            type="button"
            onClick={() => void loadTables()}
          >
            <RefreshCcw size={17} aria-hidden="true" />
            <span>{isLoadingTables ? '刷新中' : '刷新表'}</span>
          </button>
          <button
            className="admin-primary-button"
            disabled={!tableName || isLoadingRows}
            type="button"
            onClick={() => void refreshRows()}
          >
            <Search size={17} aria-hidden="true" />
            <span>{isLoadingRows ? '查询中' : '查询'}</span>
          </button>
        </div>
      </div>

      <form className="admin-panel admin-form" onSubmit={handleSearch}>
        <div className="admin-table-query-grid">
          <label className="admin-field">
            <span>表</span>
            <select
              value={tableName}
              onChange={(event) => handleTableChange(event.target.value)}
            >
              {tableName && !tables.includes(tableName) ? (
                <option value={tableName}>{tableName}</option>
              ) : null}
              {tables.map((name) => (
                <option key={name} value={name}>
                  {name}
                </option>
              ))}
            </select>
          </label>
          <label className="admin-field">
            <span>关键词</span>
            <input
              placeholder="全部"
              value={search}
              onChange={(event) => setSearch(event.target.value)}
            />
          </label>
          <label className="admin-field">
            <span>筛选 JSON</span>
            <input
              placeholder='{"user_id":"u1"}'
              value={filters}
              onChange={(event) => setFilters(event.target.value)}
            />
          </label>
          <label className="admin-field admin-field-compact">
            <span>条数</span>
            <input
              inputMode="numeric"
              value={limit}
              onChange={(event) => setLimit(event.target.value)}
            />
          </label>
          <button className="admin-secondary-button" disabled={isLoadingRows} type="submit">
            <Search size={17} aria-hidden="true" />
            <span>{isLoadingRows ? '查询中' : '查询'}</span>
          </button>
        </div>
      </form>

      {errorMessage ? (
        <div className="admin-alert" role="status">
          {errorMessage}
        </div>
      ) : null}

      <section className="admin-panel">
        <div className="admin-panel-heading">
          <h3>{result?.tableName || tableName || '数据行'}</h3>
          <span>{result?.totalReturned ?? 0} 条</span>
        </div>
        <div className="admin-table-wrap">
          <table className="admin-table admin-table-wide">
            <thead>
              <tr>
                {visibleColumns.map((column) => (
                  <th key={column}>{column}</th>
                ))}
                <th>详情</th>
              </tr>
            </thead>
            <tbody>
              {result?.rows.length ? (
                result.rows.map((row, rowIndex) => (
                  <tr
                    key={buildRowKey(row, rowIndex)}
                    data-clickable="true"
                    onClick={() => setDetailRow(row)}
                  >
                    {visibleColumns.map((column) => (
                      <td key={column}>{formatCellValue(row.cells[column])}</td>
                    ))}
                    <td>
                      <button
                        className="admin-secondary-button"
                        type="button"
                        onClick={(event) => {
                          event.stopPropagation();
                          setDetailRow(row);
                        }}
                      >
                        <Eye size={16} aria-hidden="true" />
                        <span>详情</span>
                      </button>
                    </td>
                  </tr>
                ))
              ) : (
                <tr>
                  <td colSpan={Math.max(visibleColumns.length + 1, 1)}>暂无数据</td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </section>

      {detailRow ? (
        <div className="admin-confirm-backdrop" role="presentation">
          <section className="admin-detail-panel" role="dialog" aria-modal="true">
            <div className="admin-panel-heading">
              <h3>行详情</h3>
              <button
                className="admin-ghost-button"
                title="关闭"
                type="button"
                onClick={() => setDetailRow(null)}
              >
                <X size={17} aria-hidden="true" />
              </button>
            </div>
            <pre className="admin-code-block">
              {JSON.stringify(detailRow.cells, null, 2)}
            </pre>
          </section>
        </div>
      ) : null}
    </section>
  );
}

function readHashTableName() {
  const hash = window.location.hash;
  const queryIndex = hash.indexOf('?');
  if (queryIndex < 0) {
    return '';
  }
  return new URLSearchParams(hash.slice(queryIndex + 1)).get('table')?.trim() ?? '';
}

function parseLimit(value: string) {
  const parsed = Number.parseInt(value.trim(), 10);
  return Number.isFinite(parsed) ? parsed : 100;
}

function buildRowKey(row: AdminDatabaseTableRowPayload, rowIndex: number) {
  const firstValue = Object.values(row.cells)[0];
  return `${rowIndex}-${String(firstValue ?? '')}`;
}

function formatCellValue(value: unknown) {
  if (value === null || typeof value === 'undefined' || value === '') {
    return '-';
  }
  if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
    return String(value);
  }
  return <pre className="admin-json-preview">{JSON.stringify(value, null, 2)}</pre>;
}