'use client';
import { useEffect, useState, useCallback } from 'react';
import { adminService } from '@/services/admin.service';
import type { Announcement, PaginationMeta } from '@/types/admin.types';

function StatusBadge({ label, color }: { label: string; color: string }) {
  const colors: Record<string, string> = {
    info: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
    warning: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
    important: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
    critical: 'bg-red-500/20 text-red-400 border-red-500/30',
    all: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30',
    users_only: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
    admins_only: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
    verified_users: 'bg-teal-500/20 text-teal-400 border-teal-500/30',
    active: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30',
    inactive: 'bg-slate-500/20 text-slate-400 border-slate-500/30',
  };
  return <span className={`inline-flex rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase ${colors[label.toLowerCase()] || colors.info}`}>{label.replace(/_/g, ' ')}</span>;
}

export default function AdminAnnouncementsPage() {
  const [announcements, setAnnouncements] = useState<Announcement[]>([]);
  const [meta, setMeta] = useState<PaginationMeta | null>(null);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(1);
  const [showCreate, setShowCreate] = useState(false);
  const [form, setForm] = useState({ title: '', body: '', priority: 'INFO', target: 'ALL', publishAt: '', expiresAt: '' });
  const [actionMsg, setActionMsg] = useState('');

  const fetchAnnouncements = useCallback(async () => {
    setLoading(true);
    try { const res = await adminService.listAnnouncements({ page, limit: 20 }); setAnnouncements(res.data); setMeta(res.meta); }
    catch (e) { console.error(e); }
    finally { setLoading(false); }
  }, [page]);

  useEffect(() => { fetchAnnouncements(); }, [fetchAnnouncements]);

  const handleCreate = async () => {
    if (!form.title || !form.body) return;
    try {
      const res = await adminService.createAnnouncement(form);
      setActionMsg('Announcement created'); setShowCreate(false); setForm({ title: '', body: '', priority: 'INFO', target: 'ALL', publishAt: '', expiresAt: '' }); fetchAnnouncements();
    } catch (e: any) { setActionMsg(e?.response?.data?.message || 'Error'); }
  };

  const handleDelete = async (id: string) => {
    try { await adminService.deleteAnnouncement(id); setActionMsg('Deleted'); fetchAnnouncements(); }
    catch (e: any) { setActionMsg(e?.response?.data?.message || 'Error'); }
  };

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">Announcements</h1>
          <p className="mt-1 text-sm text-white/50">Create and manage system announcements</p>
        </div>
        <button onClick={() => setShowCreate(!showCreate)} className="rounded-lg bg-indigo-500/20 px-4 py-2 text-xs font-medium text-indigo-400 hover:bg-indigo-500/30">
          {showCreate ? 'Cancel' : '+ New Announcement'}
        </button>
      </div>

      {actionMsg && <div className="rounded-lg bg-blue-500/10 p-3 text-sm text-blue-400">{actionMsg}</div>}

      {showCreate && (
        <div className="rounded-xl border border-white/10 bg-white/[0.02] p-4 space-y-3">
          <input type="text" placeholder="Title" value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-sm text-white placeholder-slate-500 focus:border-indigo-500 focus:outline-none" />
          <textarea placeholder="Body" value={form.body} onChange={(e) => setForm({ ...form, body: e.target.value })} rows={4} className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-sm text-white placeholder-slate-500 focus:border-indigo-500 focus:outline-none" />
          <div className="flex flex-wrap gap-3">
            <select value={form.priority} onChange={(e) => setForm({ ...form, priority: e.target.value })} className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-xs text-white">
              <option value="INFO">Info</option><option value="WARNING">Warning</option><option value="IMPORTANT">Important</option><option value="CRITICAL">Critical</option>
            </select>
            <select value={form.target} onChange={(e) => setForm({ ...form, target: e.target.value })} className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-xs text-white">
              <option value="ALL">All</option><option value="USERS_ONLY">Users Only</option><option value="ADMINS_ONLY">Admins Only</option><option value="VERIFIED_USERS">Verified Users</option>
            </select>
            <input type="datetime-local" value={form.publishAt} onChange={(e) => setForm({ ...form, publishAt: e.target.value })} className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-xs text-white" />
            <input type="datetime-local" value={form.expiresAt} onChange={(e) => setForm({ ...form, expiresAt: e.target.value })} className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-xs text-white" />
            <button onClick={handleCreate} className="rounded-lg bg-indigo-500/20 px-4 py-2 text-xs font-medium text-indigo-400 hover:bg-indigo-500/30">Publish</button>
          </div>
        </div>
      )}

      <div className="space-y-2">
        {loading ? <p className="text-center text-slate-500 py-8">Loading...</p>
        : announcements.length === 0 ? <p className="text-center text-slate-500 py-8">No announcements</p>
        : announcements.map((a) => (
          <div key={a.id} className="rounded-xl border border-white/5 bg-white/[0.02] p-4">
            <div className="flex items-start justify-between">
              <div>
                <div className="flex items-center gap-2">
                  <h3 className="font-medium text-white">{a.title}</h3>
                  <StatusBadge label={a.priority} color={a.priority} />
                  <StatusBadge label={a.target} color={a.target} />
                  <StatusBadge label={a.isActive ? 'active' : 'inactive'} color={a.isActive ? 'active' : 'inactive'} />
                </div>
                <p className="mt-1 text-sm text-slate-300">{a.body}</p>
                <p className="mt-1 text-xs text-slate-500">By {a.createdBy?.firstName} {a.createdBy?.lastName} &middot; {a.publishedAt ? new Date(a.publishedAt).toLocaleDateString() : 'Not published'}</p>
              </div>
              <button onClick={() => handleDelete(a.id)} className="rounded-lg bg-red-500/10 px-3 py-1.5 text-xs text-red-400 hover:bg-red-500/20">Delete</button>
            </div>
          </div>
        ))}
      </div>

      {meta && <div className="flex items-center justify-between">
        <p className="text-xs text-slate-500">Page {meta.page} of {meta.totalPages}</p>
        <div className="flex gap-2">
          <button disabled={page <= 1} onClick={() => setPage(page - 1)} className="rounded-lg bg-white/5 px-3 py-1.5 text-xs text-white disabled:opacity-30 hover:bg-white/10">Previous</button>
          <button disabled={page >= meta.totalPages} onClick={() => setPage(page + 1)} className="rounded-lg bg-white/5 px-3 py-1.5 text-xs text-white disabled:opacity-30 hover:bg-white/10">Next</button>
        </div>
      </div>}
    </div>
  );
}