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

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

export default function SupportTickets({ tickets }: Props) {
  const [target, setTarget] = useState<Ticket | null>(null);
  const form = useForm({ status: 'answered', admin_note: '' });
  function start(t: Ticket) { setTarget(t); form.setData({ status: t.status === 'closed' ? 'closed' : 'answered', admin_note: t.adminNote ?? '' }); }
  return (
    <AppLayout title="تیکت‌های پشتیبانی">
      <div className="page-stack">
        <section className="section-header"><div><h2>صف پشتیبانی</h2><p>درخواست‌های مدارس و پاسخ/بستن آن‌ها.</p></div></section>
        {target && <form className="panel-card" onSubmit={(e) => { e.preventDefault(); form.put(`/super-admin/support-tickets/${target.id}`, { onSuccess: () => setTarget(null) }); }}><h2>{target.subject}</h2><p>{target.body}</p><div className="form-grid"><div className="field-wrap"><label className="field-label">وضعیت</label><select className="field-input" value={form.data.status} onChange={(e) => form.setData('status', e.target.value)}><option value="open">باز</option><option value="answered">پاسخ داده شد</option><option value="closed">بسته</option></select></div></div><textarea className="form-input" rows={4} value={form.data.admin_note} onChange={(e) => form.setData('admin_note', e.target.value)} placeholder="پاسخ / یادداشت" /><div className="action-row" style={{ marginTop: 12 }}><button className="btn btn-primary" type="submit">ذخیره</button><button className="btn btn-ghost" type="button" onClick={() => setTarget(null)}>لغو</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><th>عملیات</th></tr></thead><tbody>{tickets.map((t) => <tr key={t.id}><td>{t.school}</td><td>{t.user}</td><td>{t.subject}</td><td>{t.priority}</td><td>{t.status}</td><td>{t.createdAt}</td><td><button className="btn btn-soft btn-sm" onClick={() => start(t)}>بررسی</button></td></tr>)}</tbody></table></div>
      </div>
    </AppLayout>
  );
}