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

type Template = { id: number; keyName: string; title: string; body: string; status: string };
type Props = { templates: Template[] };

export default function GlobalSmsTemplates({ templates }: Props) {
  const create = useForm({ key_name: '', title: '', body: '' });
  const [edit, setEdit] = useState<Template | null>(null);
  const editForm = useForm({ title: '', body: '', status: 'active' });
  function start(t: Template) { setEdit(t); editForm.setData({ title: t.title, body: t.body, status: t.status }); }
  return (
    <AppLayout title="قالب SMS سراسری">
      <div className="page-stack">
        <section className="section-header"><div><h2>مدیریت قالب SMS سراسری</h2><p>این قالب‌ها برای همه مدارس نمایش داده می‌شوند و مدرسه می‌تواند نسخه خودش را بسازد.</p></div></section>
        <form className="panel-card" onSubmit={(e) => { e.preventDefault(); create.post('/super-admin/sms-templates', { onSuccess: () => create.reset() }); }}>
          <div className="form-grid"><TextInput label="کلید" value={create.data.key_name} onChange={(e) => create.setData('key_name', e.target.value)} error={create.errors.key_name} /><TextInput label="عنوان" value={create.data.title} onChange={(e) => create.setData('title', e.target.value)} /></div>
          <textarea className="form-input" rows={4} value={create.data.body} onChange={(e) => create.setData('body', e.target.value)} placeholder="متن پیامک" />
          <div className="action-row" style={{ marginTop: 12 }}><button className="btn btn-primary" disabled={create.processing} type="submit">ذخیره</button></div>
        </form>
        {edit && <form className="panel-card" onSubmit={(e) => { e.preventDefault(); editForm.put(`/super-admin/sms-templates/${edit.id}`, { onSuccess: () => setEdit(null) }); }}><h2>{edit.keyName}</h2><div className="form-grid"><TextInput label="عنوان" value={editForm.data.title} onChange={(e) => editForm.setData('title', e.target.value)} /><div className="field-wrap"><label className="field-label">وضعیت</label><select className="field-input" value={editForm.data.status} onChange={(e) => editForm.setData('status', e.target.value)}><option value="active">فعال</option><option value="inactive">غیرفعال</option></select></div></div><textarea className="form-input" rows={4} value={editForm.data.body} onChange={(e) => editForm.setData('body', e.target.value)} /><div className="action-row" style={{ marginTop: 12 }}><button className="btn btn-primary" type="submit">ذخیره</button><button className="btn btn-ghost" type="button" onClick={() => setEdit(null)}>لغو</button></div></form>}
        <div className="table-wrap"><table className="data-table"><thead><tr><th>کلید</th><th>عنوان</th><th>متن</th><th>وضعیت</th><th>عملیات</th></tr></thead><tbody>{templates.map((t) => <tr key={t.id}><td><code>{t.keyName}</code></td><td>{t.title}</td><td>{t.body}</td><td>{t.status}</td><td><button className="btn btn-soft btn-sm" onClick={() => start(t)}>ویرایش</button></td></tr>)}</tbody></table></div>
      </div>
    </AppLayout>
  );
}