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

type Announcement = {
  id: number;
  title: string;
  body: string;
  audience: string;
  isImportant: boolean;
  color: string;
  hasPulse: boolean;
  expiresAt: string | null;
  publishedAt: string;
  creator: string;
};

type Props = { announcements: Announcement[] };

const PRESET_COLORS = ['#d97706', '#dc2626', '#0ea5e9', '#16a34a', '#8b5cf6', '#ec4899', '#0EA678', '#f59e0b'];

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

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

  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><i className="bi bi-megaphone" style={{ marginLeft: '0.5rem', color: 'var(--color-primary)' }} />اطلاعیه‌ها</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}>
            <h3 style={{ marginBottom: '1rem' }}>اطلاعیه جدید</h3>
            <div className="form-grid">
              <label className="form-field">
                <span>عنوان</span>
                <input className="form-input" value={form.data.title} onChange={(e) => form.setData('title', e.target.value)} maxLength={190} />
                {form.errors.title && <p className="form-error">{form.errors.title}</p>}
              </label>
              <label className="form-field">
                <span>مخاطب</span>
                <select className="form-select" value={form.data.audience} onChange={(e) => form.setData('audience', e.target.value)}>
                  <option value="all">همه</option>
                  <option value="students">دانش‌آموزان</option>
                  <option value="teachers">معلمان</option>
                  <option value="parents">اولیا</option>
                  <option value="principals">مدیران</option>
                </select>
              </label>
            </div>

            <label className="form-field" style={{ marginTop: '0.5rem' }}>
              <span>متن اطلاعیه (HTML مجاز است: {'<b> <i> <a href="..."> <br>'})</span>
              <textarea
                className="form-textarea"
                rows={5}
                value={form.data.body}
                onChange={(e) => form.setData('body', e.target.value)}
                placeholder="متن اطلاعیه را اینجا بنویسید. می‌توانید از <b>بولد</b> یا <a href='https://...'>لینک</a> استفاده کنید."
                style={{ resize: 'vertical', fontFamily: 'monospace', fontSize: '0.85rem' }}
              />
              {form.errors.body && <p className="form-error">{form.errors.body}</p>}
            </label>

            {/* Color picker */}
            <div style={{ marginTop: '0.75rem' }}>
              <span style={{ fontSize: '0.875rem', fontWeight: 600, display: 'block', marginBottom: '0.4rem' }}>رنگ کارت</span>
              <div style={{ display: 'flex', gap: '0.4rem', flexWrap: 'wrap', alignItems: 'center' }}>
                {PRESET_COLORS.map((c) => (
                  <button
                    key={c}
                    type="button"
                    onClick={() => form.setData('color', c)}
                    style={{
                      width: 28, height: 28, borderRadius: '50%', background: c, border: form.data.color === c ? '3px solid var(--color-text)' : '2px solid transparent', cursor: 'pointer', flexShrink: 0,
                    }}
                    title={c}
                  />
                ))}
                <input
                  type="color"
                  value={form.data.color}
                  onChange={(e) => form.setData('color', e.target.value)}
                  style={{ width: 28, height: 28, border: 'none', borderRadius: '50%', cursor: 'pointer', padding: 0 }}
                  title="رنگ دلخواه"
                />
                <span style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)' }}>{form.data.color}</span>
              </div>
            </div>

            <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', marginTop: '0.75rem' }}>
              <label className="check-row">
                <input type="checkbox" checked={form.data.is_important} onChange={(e) => form.setData('is_important', e.target.checked)} />
                <span>اطلاعیه مهم</span>
              </label>
              <label className="check-row">
                <input type="checkbox" checked={form.data.has_pulse} onChange={(e) => form.setData('has_pulse', e.target.checked)} />
                <span>انیمیشن چشمک‌زن</span>
              </label>
            </div>

            <div style={{ marginTop: '0.75rem', maxWidth: 280 }}>
              <JalaliDatePicker label="انقضا (اختیاری)" value={form.data.expires_at} onChange={(value) => form.setData('expires_at', value)} />
            </div>

            {/* Live preview */}
            <div style={{ marginTop: '1rem' }}>
              <span style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)', fontWeight: 600, display: 'block', marginBottom: '0.4rem' }}>پیش‌نمایش کارت</span>
              <div style={{ background: form.data.color + '12', border: `1.5px solid ${form.data.color}40`, borderRadius: 'var(--radius-md)', padding: '0.7rem 1rem', display: 'flex', gap: '0.6rem', alignItems: 'flex-start' }}>
                <i className={`bi ${form.data.is_important ? 'bi-megaphone-fill' : 'bi-info-circle'}`} style={{ color: form.data.color, fontSize: '1rem', flexShrink: 0, marginTop: 2 }} />
                <div>
                  <div style={{ fontWeight: 700, color: form.data.color, fontSize: '0.875rem' }}>{form.data.title || 'عنوان اطلاعیه'}</div>
                  {form.data.body && (
                    <div style={{ fontSize: '0.85rem', marginTop: '0.2rem' }} dangerouslySetInnerHTML={{ __html: form.data.body }} />
                  )}
                </div>
              </div>
            </div>

            <div className="action-row" style={{ marginTop: '1rem' }}>
              <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 style={{ display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
            {announcements.map((ann) => (
              <article
                key={ann.id}
                className="panel-card"
                style={{ border: `1.5px solid ${ann.color}40`, padding: '0.75rem 1rem' }}
              >
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: '0.6rem' }}>
                  <div style={{ width: 10, height: 10, borderRadius: '50%', background: ann.color, flexShrink: 0, marginTop: 5 }} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.2rem', flexWrap: 'wrap' }}>
                      <strong style={{ fontSize: '0.9rem', color: ann.color }}>{ann.title}</strong>
                      <span style={{ background: ann.color + '18', color: ann.color, border: `1px solid ${ann.color}30`, borderRadius: 'var(--radius-sm)', padding: '0.1rem 0.45rem', fontSize: '0.72rem', fontWeight: 600 }}>
                        {audienceLabel[ann.audience] ?? ann.audience}
                      </span>
                      {ann.isImportant && <span style={{ background: '#dc262618', color: '#dc2626', border: '1px solid #dc262630', borderRadius: 'var(--radius-sm)', padding: '0.1rem 0.4rem', fontSize: '0.72rem', fontWeight: 600 }}>مهم</span>}
                      {ann.hasPulse && <span style={{ background: 'var(--color-border)', color: 'var(--color-text-muted)', borderRadius: 'var(--radius-sm)', padding: '0.1rem 0.4rem', fontSize: '0.72rem' }}>چشمک‌زن</span>}
                    </div>
                    <div style={{ fontSize: '0.85rem', color: 'var(--color-text)' }} dangerouslySetInnerHTML={{ __html: ann.body }} />
                    <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: '0.35rem' }}>
                      {ann.publishedAt} · {ann.creator}
                      {ann.expiresAt && <> · انقضا: {ann.expiresAt}</>}
                    </div>
                  </div>
                  <button className="btn btn-danger-ghost btn-sm" type="button" onClick={() => handleDelete(ann.id, ann.title)} title="حذف">
                    <i className="bi bi-trash" />
                  </button>
                </div>
              </article>
            ))}
          </div>
        ) : (
          <section className="panel-card" style={{ textAlign: 'center', padding: '2rem' }}>
            <i className="bi bi-megaphone" style={{ fontSize: '2rem', color: 'var(--color-text-muted)', display: 'block', marginBottom: '0.75rem' }} />
            <h2>اطلاعیه‌ای منتشر نشده</h2>
            <p>از دکمه «اطلاعیه جدید» پیام خود را به کاربران مدرسه ارسال کنید.</p>
          </section>
        )}
      </div>
    </AppLayout>
  );
}