import { Link, router, useForm } from '@inertiajs/react';
import { useEffect, useRef, useState } from 'react';
import { AppLayout } from '@/Components/Layout/AppLayout';
import { PageHeader } from '@/Components/UI/PageHeader';
import { EmptyState } from '@/Components/UI/EmptyState';
import { formatCount } from '@/lib/formatters';
import { formatJalaliDateTime, persianDigits } from '@/lib/persianDate';

type Column = { name: string; type: string };

type Props = {
  table: { name: string; label: string };
  allTables: Array<{ name: string; label: string }>;
  columns: Column[];
  rows: Array<Record<string, string | number | null>>;
  total: number;
  page: number;
  perPage: number;
  sort: string;
  dir: 'asc' | 'desc';
  search: string;
};

function isDateColumn(type: string): boolean {
  return type.includes('timestamp') || type.includes('datetime') || type === 'date';
}

function isBoolColumn(type: string): boolean {
  return type.startsWith('tinyint(1)');
}

const LOCKED_COLUMNS = new Set(['id', 'created_at', 'updated_at']);

function RowEditor({ table, columns, row, onClose }: {
  table: string;
  columns: Column[];
  row: Record<string, string | number | null>;
  onClose: () => void;
}) {
  const editable = columns.filter((column) => !LOCKED_COLUMNS.has(column.name));
  const form = useForm({
    values: Object.fromEntries(editable.map((column) => [column.name, row[column.name] === null ? '' : String(row[column.name])])) as Record<string, string>,
  });

  const setValue = (name: string, value: string) => {
    form.setData('values', { ...form.data.values, [name]: value });
  };

  const submit = (event: React.FormEvent) => {
    event.preventDefault();
    form.put(`/super-admin/database/${table}/${row.id}`, {
      preserveScroll: true,
      onSuccess: () => onClose(),
    });
  };

  return (
    <form className="db-editor" onSubmit={submit}>
      <div className="db-editor-grid">
        {editable.map((column) => {
          const value = form.data.values[column.name] ?? '';
          if (isBoolColumn(column.type)) {
            return (
              <label className="form-field" key={column.name}>
                <span className="db-editor-label">{column.name}</span>
                <select value={value === '' ? '0' : String(Number(value) ? 1 : 0)} onChange={(e) => setValue(column.name, e.target.value)}>
                  <option value="1">بله (۱)</option>
                  <option value="0">خیر (۰)</option>
                </select>
              </label>
            );
          }
          if (column.type.includes('text')) {
            return (
              <label className="form-field db-editor-wide" key={column.name}>
                <span className="db-editor-label">{column.name}</span>
                <textarea className="form-textarea" rows={2} value={value} onChange={(e) => setValue(column.name, e.target.value)} />
              </label>
            );
          }
          return (
            <label className="form-field" key={column.name}>
              <span className="db-editor-label">{column.name} <small className="db-col-type" style={{ display: 'inline' }}>{column.type}</small></span>
              <input type="text" value={value} onChange={(e) => setValue(column.name, e.target.value)} dir="auto" />
            </label>
          );
        })}
      </div>
      {form.errors.values && <p className="field-error" style={{ margin: '0.25rem 0' }}>{form.errors.values}</p>}
      <div className="action-row" style={{ marginTop: '0.5rem' }}>
        <button className="btn btn-primary btn-sm" disabled={form.processing} type="submit">
          <i className="bi bi-check-lg" /> ذخیره ردیف
        </button>
        <button className="btn btn-ghost btn-sm" type="button" onClick={onClose}>لغو</button>
        <span className="mini-note">ستون‌های id و تاریخ‌ها قفل‌اند؛ تغییرات در رویدادهای سیستم ثبت می‌شود.</span>
      </div>
    </form>
  );
}

function CellValue({ value, type }: { value: string | number | null; type: string }) {
  if (value === null || value === '') return <span className="db-null">—</span>;

  if (isBoolColumn(type)) {
    return Number(value) === 1
      ? <span className="badge badge-success"><i className="bi bi-check-lg" /> بله</span>
      : <span className="badge badge-muted"><i className="bi bi-x-lg" /> خیر</span>;
  }

  if (isDateColumn(type)) {
    return <span className="db-date">{formatJalaliDateTime(String(value))}</span>;
  }

  if (typeof value === 'number') return <>{formatCount(value)}</>;

  const text = String(value);
  return <span title={text.length > 60 ? text : undefined}>{text.length > 60 ? `${text.slice(0, 60)}…` : text}</span>;
}

export default function DatabaseTable({ table, allTables, columns, rows, total, page, perPage, sort, dir, search }: Props) {
  const [query, setQuery] = useState(search);
  const [editingId, setEditingId] = useState<string | number | null>(null);
  const firstRender = useRef(true);

  const visit = (params: Record<string, string | number>) => {
    router.get(`/super-admin/database/${table.name}`, {
      q: query || undefined,
      sort,
      dir,
      ...params,
    } as never, { preserveState: true, preserveScroll: true });
  };

  // جستجوی زنده با تاخیر
  useEffect(() => {
    if (firstRender.current) {
      firstRender.current = false;
      return;
    }
    const timer = setTimeout(() => {
      router.get(`/super-admin/database/${table.name}`, {
        q: query || undefined,
        sort,
        dir,
      } as never, { preserveState: true, preserveScroll: true, replace: true });
    }, 450);
    return () => clearTimeout(timer);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [query]);

  const toggleSort = (column: string) => {
    const nextDir = sort === column && dir === 'desc' ? 'asc' : 'desc';
    visit({ sort: column, dir: nextDir, page: 1 });
  };

  const lastPage = Math.max(1, Math.ceil(total / perPage));

  return (
    <AppLayout title={`پایگاه داده — ${table.label}`}>
      <div className="page-stack">
        <PageHeader
          title={`جدول ${table.label}`}
          icon="bi-table"
          description={`${formatCount(total)} ردیف${search ? ' (فیلترشده)' : ''} — نمایش فقط‌خواندنی. برای مرتب‌سازی روی عنوان ستون کلیک کنید.`}
        >
          <Link href="/super-admin/database" className="btn btn-ghost">
            <i className="bi bi-arrow-right" /> همه جدول‌ها
          </Link>
        </PageHeader>

        <div className="panel-card db-toolbar">
          <div className="sidebar-search" style={{ margin: 0, flex: 1, minWidth: 220 }}>
            <i className="bi bi-search" aria-hidden="true" />
            <input
              type="text"
              value={query}
              placeholder="جستجو در ستون‌های متنی..."
              onChange={(event) => setQuery(event.target.value)}
              aria-label="جستجو در جدول"
            />
            {query && (
              <button type="button" className="sidebar-search-clear" aria-label="پاک کردن" onClick={() => setQuery('')}>
                <i className="bi bi-x-lg" />
              </button>
            )}
          </div>

          <label className="db-jump">
            <span>پرش به جدول:</span>
            <select
              value={table.name}
              onChange={(event) => router.get(`/super-admin/database/${event.target.value}`)}
            >
              {allTables.map((t) => (
                <option key={t.name} value={t.name}>{t.label} ({t.name})</option>
              ))}
            </select>
          </label>
        </div>

        {rows.length === 0 ? (
          <div className="panel-card">
            <EmptyState
              icon="bi-table"
              title="داده‌ای نیست"
              description={search ? 'با این جستجو ردیفی پیدا نشد.' : 'این جدول هنوز خالی است.'}
            />
          </div>
        ) : (
          <div className="table-wrap">
            <table className="data-table db-table">
              <thead>
                <tr>
                  {columns.map((column) => (
                    <th key={column.name}>
                      <button type="button" className="db-sort" onClick={() => toggleSort(column.name)}>
                        <span className="db-col-name">{column.name}</span>
                        {sort === column.name && (
                          <i className={`bi ${dir === 'desc' ? 'bi-sort-down' : 'bi-sort-up'}`} />
                        )}
                      </button>
                      <small className="db-col-type">{column.type}</small>
                    </th>
                  ))}
                  <th>ویرایش</th>
                </tr>
              </thead>
              <tbody>
                {rows.map((row, index) => (
                  <>
                    <tr key={String(row.id ?? index)}>
                      {columns.map((column) => (
                        <td key={column.name}>
                          <CellValue value={row[column.name] ?? null} type={column.type} />
                        </td>
                      ))}
                      <td>
                        {row.id !== undefined && row.id !== null && (
                          <button
                            type="button"
                            className="btn btn-ghost btn-sm"
                            aria-label="ویرایش ردیف"
                            onClick={() => setEditingId(editingId === row.id ? null : row.id)}
                          >
                            <i className="bi bi-pencil" />
                          </button>
                        )}
                      </td>
                    </tr>
                    {editingId === row.id && (
                      <tr key={`edit-${row.id}`} className="row-editing">
                        <td colSpan={columns.length + 1}>
                          <RowEditor table={table.name} columns={columns} row={row} onClose={() => setEditingId(null)} />
                        </td>
                      </tr>
                    )}
                  </>
                ))}
              </tbody>
            </table>
          </div>
        )}

        {lastPage > 1 && (
          <div className="db-pagination">
            <button
              type="button"
              className="btn btn-ghost btn-sm"
              disabled={page <= 1}
              onClick={() => visit({ page: page - 1 })}
            >
              <i className="bi bi-chevron-right" /> قبلی
            </button>
            <span className="db-page-info">
              صفحه {persianDigits(page)} از {persianDigits(lastPage)}
            </span>
            <button
              type="button"
              className="btn btn-ghost btn-sm"
              disabled={page >= lastPage}
              onClick={() => visit({ page: page + 1 })}
            >
              بعدی <i className="bi bi-chevron-left" />
            </button>
          </div>
        )}
      </div>
    </AppLayout>
  );
}