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

type Announcement = {
  id: number;
  title: string;
  body: string;
  audience: string;
  isImportant: boolean;
  publishedAt: string;
  creator: string;
};

type Props = {
  announcements: Announcement[];
};

const audienceLabel: Record<string, string> = {
  all: 'همه',
  students: 'دانش‌آموزان',
  teachers: 'معلمان',
  parents: 'اولیا',
};

export default function Announcements({ announcements }: Props) {
  const [showForm, setShowForm] = useState(false);
  const form = useForm({
    title: '',
    body: '',
    audience: 'all',
    is_important: false,
  });

  function handleSubmit(event: React.FormEvent) {
    event.preventDefault();
    form.post('/school/announcements', {
      onSuccess: () => {
        form.reset();
        setShowForm(false);
      },
    });
  }

  function handleDelete(id: number, title: string) {
    if (!confirm(`حذف اطلاعیه «${title}»؟`)) return;
    router.delete(`/school/announcements/${id}`, { preserveScroll: true });
  }

  return (
    <AppLayout title="اطلاعیه‌ها">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>اطلاعیه‌ها</h2>
            <p>اطلاعیه‌های مهم در داشبورد دانش‌آموزان نمایش داده می‌شوند.</p>
          </div>
          <button className="btn btn-primary" type="button" onClick={() => setShowForm(!showForm)}>
            <i className="bi bi-megaphone" /> اطلاعیه جدید
          </button>
        </section>

        {showForm && (
          <form className="panel-card" onSubmit={handleSubmit}>
            <h2>اطلاعیه جدید</h2>
            <div className="form-grid">
              <TextInput label="عنوان" value={form.data.title} onChange={(e) => form.setData('title', e.target.value)} error={form.errors.title} />
              <SelectInput
                label="مخاطب"
                value={form.data.audience}
                onChange={(e) => form.setData('audience', e.target.value)}
                options={[
                  { value: 'all', label: 'همه' },
                  { value: 'students', label: 'دانش‌آموزان' },
                  { value: 'teachers', label: 'معلمان' },
                  { value: 'parents', label: 'اولیا' },
                ]}
              />
            </div>
            <label className="form-field">
              <span>متن اطلاعیه</span>
              <textarea
                className="form-textarea"
                rows={4}
                value={form.data.body}
                onChange={(e) => form.setData('body', e.target.value)}
                style={{ resize: 'vertical' }}
              />
            </label>
            {form.errors.body && <p className="form-error">{form.errors.body}</p>}
            <label className="check-row">
              <input
                type="checkbox"
                checked={form.data.is_important}
                onChange={(e) => form.setData('is_important', e.target.checked)}
              />
              <span>اطلاعیه مهم (popup در داشبورد دانش‌آموز)</span>
            </label>
            <div className="action-row">
              <button className="btn btn-primary" disabled={form.processing} type="submit">انتشار</button>
              <button className="btn btn-ghost" type="button" onClick={() => setShowForm(false)}>لغو</button>
            </div>
          </form>
        )}

        {announcements.length > 0 ? (
          <div className="page-stack">
            {announcements.map((ann) => (
              <article className="panel-card" key={ann.id}>
                <div className="section-header" style={{ marginBottom: '0.5rem' }}>
                  <div>
                    <h3 style={{ margin: 0 }}>
                      {ann.isImportant && <span className="badge badge-danger" style={{ marginLeft: '0.5rem' }}>مهم</span>}
                      {ann.title}
                    </h3>
                    <small style={{ color: 'var(--color-text-muted)' }}>
                      {audienceLabel[ann.audience] || ann.audience} · {ann.publishedAt} · {ann.creator}
                    </small>
                  </div>
                  <button
                    className="btn btn-danger-ghost btn-sm"
                    type="button"
                    onClick={() => handleDelete(ann.id, ann.title)}
                  >
                    <i className="bi bi-trash" />
                  </button>
                </div>
                <p style={{ margin: 0, whiteSpace: 'pre-wrap' }}>{ann.body}</p>
              </article>
            ))}
          </div>
        ) : (
          <section className="panel-card">
            <h2>اطلاعیه‌ای منتشر نشده</h2>
            <p>از دکمه «اطلاعیه جدید» پیام خود را به کاربران مدرسه ارسال کنید.</p>
          </section>
        )}
      </div>
    </AppLayout>
  );
}
