import { router } from '@inertiajs/react';
import { useState } from 'react';
import { AppLayout } from '@/Components/Layout/AppLayout';

type Props = { sql: string; rows: Record<string, unknown>[]; columns: string[]; error: string | null };

export default function SafeSql({ sql, rows, columns, error }: Props) {
  const [query, setQuery] = useState(sql);
  return (
    <AppLayout title="SQL خواندنی">
      <div className="page-stack">
        <section className="section-header"><div><h2>ابزار SQL امن</h2><p>فقط SELECT خواندنی، با LIMIT خودکار ۱۰۰ رکورد.</p></div></section>
        <form className="panel-card" onSubmit={(e) => { e.preventDefault(); router.get('/super-admin/sql', { sql: query }); }}>
          <textarea className="form-input" rows={5} dir="ltr" value={query} onChange={(e) => setQuery(e.target.value)} placeholder="SELECT * FROM schools" />
          <div className="action-row" style={{ marginTop: 12 }}><button className="btn btn-primary" type="submit">اجرا</button></div>
          {error && <p className="form-error">{error}</p>}
        </form>
        {columns.length > 0 && (
          <div className="table-wrap">
            <table className="data-table">
              <thead><tr>{columns.map((c) => <th key={c}>{c}</th>)}</tr></thead>
              <tbody>{rows.map((row, i) => <tr key={i}>{columns.map((c) => <td key={c}>{String(row[c] ?? '')}</td>)}</tr>)}</tbody>
            </table>
          </div>
        )}
      </div>
    </AppLayout>
  );
}