import { Link } from '@inertiajs/react';
import { useMemo, 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';

type TableInfo = {
  name: string;
  label: string;
  icon: string;
  group: string;
  rows: number | null;
};

type Props = {
  tables: TableInfo[];
  groups: Array<{ key: string; label: string }>;
};

export default function Database({ tables, groups }: Props) {
  const [query, setQuery] = useState('');

  const filtered = useMemo(() => {
    const q = query.trim();
    if (!q) return tables;
    return tables.filter((t) => t.label.includes(q) || t.name.includes(q));
  }, [tables, query]);

  const totalRows = tables.reduce((sum, t) => sum + (t.rows ?? 0), 0);

  return (
    <AppLayout title="پایگاه داده">
      <div className="page-stack">
        <PageHeader
          title="پایگاه داده سامانه"
          icon="bi-database"
          description={`مرور همه جدول‌های سامانه به‌صورت فقط‌خواندنی. ${formatCount(tables.length)} جدول و در مجموع ${formatCount(totalRows)} ردیف داده. روی هر جدول کلیک کنید تا محتوای آن را با جستجو و مرتب‌سازی ببینید.`}
        />

        <div className="panel-card db-search-card">
          <div className="sidebar-search" style={{ margin: 0 }}>
            <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>
        </div>

        {filtered.length === 0 && (
          <div className="panel-card">
            <EmptyState icon="bi-database-x" title="جدولی یافت نشد" description="عبارت دیگری جستجو کنید." />
          </div>
        )}

        {groups.map((group) => {
          const groupTables = filtered.filter((t) => t.group === group.key);
          if (groupTables.length === 0) return null;
          return (
            <section key={group.key}>
              <h3 className="db-group-title">{group.label}</h3>
              <div className="db-grid">
                {groupTables.map((table) => (
                  <Link key={table.name} href={`/super-admin/database/${table.name}`} className="db-card">
                    <span className="db-card-icon"><i className={`bi ${table.icon}`} aria-hidden="true" /></span>
                    <span className="db-card-body">
                      <strong>{table.label}</strong>
                      <code>{table.name}</code>
                    </span>
                    <span className="db-card-count">
                      {table.rows === null ? '؟' : formatCount(table.rows)}
                      <small>ردیف</small>
                    </span>
                  </Link>
                ))}
              </div>
            </section>
          );
        })}
      </div>
    </AppLayout>
  );
}