'use client';

import { CrudToolbar, ManagementTable, Panel, StatCard } from '@chego/ui';
import { useEffect, useMemo, useState } from 'react';
import { fetchWithSession, humanStatus, statusTone } from './api-helpers';

type NotificationItem = {
  id: string;
  title: string;
  body: string;
  channel: string;
  createdAt: string;
  readAt?: string | null;
  user?: {
    email?: string | null;
    phone?: string | null;
    role?: string | null;
  } | null;
};

type ProviderItem = {
  provider: string;
  channel: string;
  mode: string;
};

const defaultForm = {
  title: '',
  body: '',
  channel: 'IN_APP',
  role: 'CUSTOMER',
};

export function NotificationsLivePanel() {
  const [items, setItems] = useState<NotificationItem[]>([]);
  const [providers, setProviders] = useState<ProviderItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [search, setSearch] = useState('');
  const [roleFilter, setRoleFilter] = useState('ALL');
  const [channelFilter, setChannelFilter] = useState('ALL');
  const [form, setForm] = useState(defaultForm);

  const load = async () => {
    setLoading(true);
    setError('');
    try {
      const [notificationsPayload, providersPayload] = await Promise.all([
        fetchWithSession('/notifications'),
        fetchWithSession('/notifications/providers'),
      ]);
      setItems(notificationsPayload as NotificationItem[]);
      setProviders(providersPayload as ProviderItem[]);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Falha ao carregar notificacoes.');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    void load();
    const intervalId = window.setInterval(() => {
      void load();
    }, 15000);
    return () => window.clearInterval(intervalId);
  }, []);

  const filteredItems = useMemo(() => {
    const normalizedSearch = search.trim().toLowerCase();
    return items.filter((item) => {
      if (roleFilter !== 'ALL' && item.user?.role !== roleFilter) {
        return false;
      }
      if (channelFilter !== 'ALL' && item.channel !== channelFilter) {
        return false;
      }
      if (!normalizedSearch) {
        return true;
      }
      return [item.id, item.title, item.body, item.user?.email, item.user?.phone]
        .filter(Boolean)
        .some((value) => String(value).toLowerCase().includes(normalizedSearch));
    });
  }, [channelFilter, items, roleFilter, search]);

  const metrics = useMemo(() => ({
    total: items.length,
    unread: items.filter((item) => !item.readAt).length,
    push: items.filter((item) => item.channel === 'PUSH').length,
    inApp: items.filter((item) => item.channel === 'IN_APP').length,
  }), [items]);

  const sendNotification = async () => {
    if (!form.title.trim() || !form.body.trim()) {
      setError('Preencha titulo e mensagem antes de disparar a notificacao.');
      return;
    }

    try {
      await fetchWithSession('/notifications/test', {
        method: 'POST',
        body: JSON.stringify(form),
      });
      setForm(defaultForm);
      await load();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Falha ao disparar notificacao.');
    }
  };

  return (
    <div className="space-y-6">
      <section className="grid gap-4 md:grid-cols-4">
        <StatCard label="Total enviadas" value={`${metrics.total}`} hint="historico do ecossistema" tone="sky" />
        <StatCard label="Nao lidas" value={`${metrics.unread}`} hint="backlog do inbox interno" tone="amber" />
        <StatCard label="Push" value={`${metrics.push}`} hint="driver e cliente mobile" tone="emerald" />
        <StatCard label="Inbox" value={`${metrics.inApp}`} hint="canal interno ativo" tone="rose" />
      </section>

      <Panel title="Disparo e auditoria de notificacoes" eyebrow="Tempo real por papel">
        <CrudToolbar
          filters={[
            `perfil: ${roleFilter}`,
            `canal: ${channelFilter}`,
            search ? `busca: ${search}` : 'busca: livre',
            'auto refresh: 15s',
          ]}
          actions={[
            { label: 'Atualizar agora', tone: 'primary', href: '/notifications' },
          ]}
        />

        <div className="mt-5 grid gap-3 md:grid-cols-3">
          <input
            value={search}
            onChange={(event) => setSearch(event.target.value)}
            placeholder="Buscar por titulo, mensagem, email ou telefone"
            className="rounded-[1.2rem] border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 outline-none"
          />
          <select value={roleFilter} onChange={(event) => setRoleFilter(event.target.value)} className="rounded-[1.2rem] border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 outline-none">
            <option value="ALL">Todos os perfis</option>
            <option value="CUSTOMER">CUSTOMER</option>
            <option value="DRIVER">DRIVER</option>
            <option value="RESTAURANT">RESTAURANT</option>
            <option value="ADMIN">ADMIN</option>
            <option value="SUPER_ADMIN">SUPER_ADMIN</option>
          </select>
          <select value={channelFilter} onChange={(event) => setChannelFilter(event.target.value)} className="rounded-[1.2rem] border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 outline-none">
            <option value="ALL">Todos os canais</option>
            <option value="IN_APP">IN_APP</option>
            <option value="PUSH">PUSH</option>
            <option value="EMAIL">EMAIL</option>
            <option value="SMS">SMS</option>
          </select>
        </div>

        <div className="mt-5 grid gap-3 rounded-[1.6rem] border border-slate-200 bg-slate-50 p-4 lg:grid-cols-[1fr_1.4fr_0.7fr_0.7fr_auto]">
          <input
            value={form.title}
            onChange={(event) => setForm((current) => ({ ...current, title: event.target.value }))}
            placeholder="Titulo da notificacao"
            className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 outline-none"
          />
          <input
            value={form.body}
            onChange={(event) => setForm((current) => ({ ...current, body: event.target.value }))}
            placeholder="Mensagem operacional, comercial ou alerta"
            className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 outline-none"
          />
          <select value={form.channel} onChange={(event) => setForm((current) => ({ ...current, channel: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 outline-none">
            <option value="IN_APP">IN_APP</option>
            <option value="PUSH">PUSH</option>
            <option value="EMAIL">EMAIL</option>
            <option value="SMS">SMS</option>
          </select>
          <select value={form.role} onChange={(event) => setForm((current) => ({ ...current, role: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 outline-none">
            <option value="CUSTOMER">CUSTOMER</option>
            <option value="DRIVER">DRIVER</option>
            <option value="RESTAURANT">RESTAURANT</option>
            <option value="ADMIN">ADMIN</option>
            <option value="SUPER_ADMIN">SUPER_ADMIN</option>
          </select>
          <button type="button" onClick={() => void sendNotification()} className="rounded-full border border-slate-900 bg-slate-900 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-white">
            Disparar
          </button>
        </div>

        {error ? <p className="mt-4 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{error}</p> : null}

        <div className="mt-5 grid gap-3 lg:grid-cols-4">
          {providers.map((provider) => (
            <div key={provider.provider} className="rounded-[1.5rem] border border-slate-200 bg-slate-50 p-4">
              <p className="text-sm font-black text-slate-900">{provider.provider}</p>
              <p className="mt-1 text-xs uppercase tracking-[0.18em] text-slate-500">{provider.channel}</p>
              <span className={provider.mode === 'active' ? 'mt-3 inline-flex rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-[11px] font-bold uppercase tracking-[0.18em] text-emerald-700' : 'mt-3 inline-flex rounded-full border border-amber-200 bg-amber-50 px-3 py-1 text-[11px] font-bold uppercase tracking-[0.18em] text-amber-700'}>
                {provider.mode}
              </span>
            </div>
          ))}
        </div>

        <div className="mt-5">
          <ManagementTable
            columns={[
              { key: 'notification', label: 'Notificacao' },
              { key: 'user', label: 'Destino' },
              { key: 'role', label: 'Perfil' },
              { key: 'channel', label: 'Canal' },
              { key: 'status', label: 'Leitura' },
            ]}
            rows={filteredItems.map((item) => ({
              id: item.id,
              cells: {
                notification: (
                  <div>
                    <p className="font-bold text-slate-900">{item.title}</p>
                    <p className="text-xs text-slate-500">{item.id}</p>
                    <p className="mt-1 text-xs text-slate-500">{item.body}</p>
                  </div>
                ),
                user: item.user?.email ?? item.user?.phone ?? 'destino interno',
                role: { value: humanStatus(item.user?.role ?? 'UNKNOWN'), tone: statusTone(item.user?.role), badge: true },
                channel: { value: humanStatus(item.channel), tone: statusTone(item.channel), badge: true },
                status: { value: item.readAt ? 'Lida' : 'Nao lida', tone: item.readAt ? 'emerald' : 'amber', badge: true },
              },
            }))}
            pageLabel={`Mostrando ${filteredItems.length} de ${items.length} notificacoes`}
          />
        </div>
      </Panel>

      {loading ? <p className="text-sm text-slate-500">Sincronizando notificacoes e canais externos...</p> : null}
    </div>
  );
}