import { useForm } from '@inertiajs/react';
import { AppLayout } from '@/Components/Layout/AppLayout';
import { TextInput } from '@/Components/Forms/TextInput';

type Ticket = { id: number; subject: string; priority: string; status: string; body: string; adminNote: string | null; createdAt: string; closedAt: string | null };
type Props = { tickets: Ticket[] };

const statusLabel: Record<string, string> = { open: 'باز', answered: 'پاسخ داده شده', closed: 'بسته' };
const priorityLabel: Record<string, string> = { low: 'کم', normal: 'عادی', high: 'زیاد', urgent: 'فوری' };

export default function SupportTickets({ tickets }: Props) {
  const form = useForm({ subject: '', priority: 'normal', body: '' });
  return (
    <AppLayout title="پشتیبانی">
      <div className="page-stack">
        <section className="section-header"><div><h2>صف پشتیبانی</h2><p>درخواست‌های مدرسه به سوپر ادمین ارسال می‌شود.</p></div></section>
        <form className="panel-card" onSubmit={(e) => { e.preventDefault(); form.post('/school/support-tickets', { onSuccess: () => form.reset() }); }}>
          <div className="form-grid">
            <TextInput label="موضوع" value={form.data.subject} onChange={(e) => form.setData('subject', e.target.value)} error={form.errors.subject} />
            <div className="field-wrap">
              <label className="field-label">اولویت</label>
              <select className="field-input" value={form.data.priority} onChange={(e) => form.setData('priority', e.target.value)}>
                {Object.entries(priorityLabel).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
              </select>
            </div>
          </div>
          <textarea className="form-input" rows={4} value={form.data.body} onChange={(e) => form.setData('body', e.target.value)} placeholder="متن درخواست" />
          {form.errors.body && <p className="form-error">{form.errors.body}</p>}
          <div className="action-row" style={{ marginTop: 12 }}><button className="btn btn-primary" disabled={form.processing} type="submit">ارسال</button></div>
        </form>
        <div className="table-wrap">
          <table className="data-table">
            <thead><tr><th>موضوع</th><th>اولویت</th><th>وضعیت</th><th>متن</th><th>پاسخ</th><th>زمان</th></tr></thead>
            <tbody>{tickets.map((t) => (
              <tr key={t.id}><td>{t.subject}</td><td>{priorityLabel[t.priority] ?? t.priority}</td><td>{statusLabel[t.status] ?? t.status}</td><td>{t.body}</td><td>{t.adminNote ?? '—'}</td><td>{t.createdAt}</td></tr>
            ))}</tbody>
          </table>
        </div>
      </div>
    </AppLayout>
  );
}