'use client';

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

type SupportTicket = {
  id: string;
  subject: string;
  description: string;
  status: string;
  createdAt: string;
  updatedAt: string;
  user?: {
    email?: string | null;
    phone?: string | null;
    role?: string | null;
  } | null;
};

const defaultForm = {
  subject: '',
  description: '',
  status: 'OPEN',
};

export function SupportLivePanel() {
  const [items, setItems] = useState<SupportTicket[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [search, setSearch] = useState('');
  const [statusFilter, setStatusFilter] = useState('ALL');
  const [roleFilter, setRoleFilter] = useState('ALL');
  const [form, setForm] = useState(defaultForm);

  const load = async () => {
    setLoading(true);
    setError('');
    try {
      setItems(await fetchWithSession('/support-tickets'));
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Falha ao carregar suporte.');
    } 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 (statusFilter !== 'ALL' && item.status !== statusFilter) {
        return false;
      }
      if (roleFilter !== 'ALL' && item.user?.role !== roleFilter) {
        return false;
      }
      if (!normalizedSearch) {
        return true;
      }
      return [item.id, item.subject, item.description, item.user?.email, item.user?.phone]
        .filter(Boolean)
        .some((value) => String(value).toLowerCase().includes(normalizedSearch));
    });
  }, [items, roleFilter, search, statusFilter]);

  const metrics = useMemo(() => ({
    open: items.filter((item) => item.status === 'OPEN').length,
    progress: items.filter((item) => item.status === 'IN_PROGRESS').length,
    resolved: items.filter((item) => item.status === 'RESOLVED' || item.status === 'CLOSED').length,
    avgWindow: items.length ? `${Math.max(1, Math.round(items.reduce((sum, item) => sum + (Date.now() - new Date(item.createdAt).getTime()), 0) / items.length / 1000 / 60))} min` : '0 min',
  }), [items]);

  const createTicket = async () => {
    if (!form.subject.trim() || !form.description.trim()) {
      setError('Preencha assunto e descricao para abrir um chamado administrativo.');
      return;
    }

    try {
      await fetchWithSession('/support-tickets', {
        method: 'POST',
        body: JSON.stringify(form),
      });
      setForm(defaultForm);
      await load();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Falha ao criar chamado.');
    }
  };

  const updateTicket = async (id: string, status: string) => {
    try {
      await fetchWithSession(`/support-tickets/${id}`, {
        method: 'PATCH',
        body: JSON.stringify({ status }),
      });
      await load();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Falha ao atualizar chamado.');
    }
  };

  const deleteTicket = async (id: string) => {
    if (!window.confirm(`Excluir o chamado ${id}?`)) {
      return;
    }
    try {
      await fetchWithSession(`/support-tickets/${id}`, { method: 'DELETE' });
      await load();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Falha ao excluir chamado.');
    }
  };

  return (
    <div className="space-y-6">
      <section className="grid gap-4 md:grid-cols-4">
        <StatCard label="Abertos" value={String(metrics.open)} hint="tickets sem resposta final" tone="rose" />
        <StatCard label="Em analise" value={String(metrics.progress)} hint="tratamento do time interno" tone="amber" />
        <StatCard label="Resolvidos" value={String(metrics.resolved)} hint="resposta finalizada" tone="emerald" />
        <StatCard label="Janela media" value={metrics.avgWindow} hint="idade media da fila" tone="sky" />
      </section>

      <Panel title="Chamados reais do ecossistema" eyebrow="Suporte segregado por sessao">
        <CrudToolbar
          filters={[
            `status: ${statusFilter}`,
            `perfil: ${roleFilter}`,
            search ? `busca: ${search}` : 'busca: livre',
            'auto refresh: 15s',
          ]}
          actions={[
            { label: 'Atualizar agora', tone: 'primary', href: '/support' },
          ]}
        />

        <div className="mt-5 grid gap-3 lg:grid-cols-4">
          <input
            value={search}
            onChange={(event) => setSearch(event.target.value)}
            placeholder="Buscar por assunto, ticket, email ou telefone"
            className="rounded-[1.2rem] border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 outline-none lg:col-span-2"
          />
          <select value={statusFilter} onChange={(event) => setStatusFilter(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 status</option>
            <option value="OPEN">OPEN</option>
            <option value="IN_PROGRESS">IN_PROGRESS</option>
            <option value="RESOLVED">RESOLVED</option>
            <option value="CLOSED">CLOSED</option>
          </select>
          <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>
        </div>

        <div className="mt-5 grid gap-3 rounded-[1.6rem] border border-slate-200 bg-slate-50 p-4 lg:grid-cols-[1.1fr_1.5fr_0.7fr_auto]">
          <input
            value={form.subject}
            onChange={(event) => setForm((current) => ({ ...current, subject: event.target.value }))}
            placeholder="Novo chamado administrativo"
            className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 outline-none"
          />
          <input
            value={form.description}
            onChange={(event) => setForm((current) => ({ ...current, description: event.target.value }))}
            placeholder="Descricao do incidente ou acompanhamento"
            className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 outline-none"
          />
          <select value={form.status} onChange={(event) => setForm((current) => ({ ...current, status: 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="OPEN">OPEN</option>
            <option value="IN_PROGRESS">IN_PROGRESS</option>
            <option value="RESOLVED">RESOLVED</option>
            <option value="CLOSED">CLOSED</option>
          </select>
          <button type="button" onClick={() => void createTicket()} className="rounded-full border border-slate-900 bg-slate-900 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-white">
            Abrir ticket
          </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">
          <ManagementTable
            columns={[
              { key: 'ticket', label: 'Chamado' },
              { key: 'user', label: 'Usuario' },
              { key: 'role', label: 'Perfil' },
              { key: 'age', label: 'Atualizado' },
              { key: 'status', label: 'Status' },
            ]}
            rows={filteredItems.map((item) => ({
              id: item.id,
              cells: {
                ticket: (
                  <div>
                    <p className="font-bold text-slate-900">{item.subject}</p>
                    <p className="text-xs text-slate-500">{item.id}</p>
                    <p className="mt-1 text-xs text-slate-500">{item.description}</p>
                  </div>
                ),
                user: item.user?.email ?? item.user?.phone ?? 'sem contato',
                role: { value: humanStatus(item.user?.role ?? 'UNKNOWN'), tone: statusTone(item.user?.role), badge: true },
                age: new Date(item.updatedAt).toLocaleString('pt-BR'),
                status: { value: humanStatus(item.status), tone: statusTone(item.status), badge: true },
              },
            }))}
            pageLabel={`Mostrando ${filteredItems.length} de ${items.length} chamados`}
            getRowActions={(row) => [
              { label: 'Em analise', onClick: () => void updateTicket(row.id, 'IN_PROGRESS') },
              { label: 'Resolver', onClick: () => void updateTicket(row.id, 'RESOLVED') },
              { label: 'Fechar', onClick: () => void updateTicket(row.id, 'CLOSED') },
              { label: 'Excluir', onClick: () => void deleteTicket(row.id) },
            ]}
          />
        </div>
      </Panel>

      {loading ? <p className="text-sm text-slate-500">Sincronizando suporte administrativo...</p> : null}
    </div>
  );
}