import { useCollection, useIdentity } from '@deplixo/sdk';
import ItemForm from './components/ItemForm.jsx';
import ItemDetail from './components/ItemDetail.jsx';
import { buildSeedItems } from './components/seedData.js';
import {
  TIPOS, formatEuro, formatDatePT, annualCost, daysUntil, statusForDays,
  mostUrgentDeadline, nextDeadline, allDeadlines, monthKey, monthLabel, toUpper
} from './components/helpers.js';

function Summary({ items, totalAnnual }) {
  const buckets = { green: 0, yellow: 0, orange: 0, red: 0, gray: 0 };
  for (const it of items) {
    const urg = mostUrgentDeadline(it);
    if (!urg) continue;
    const d = daysUntil(urg.date);
    const s = statusForDays(d);
    if (s === 'green') buckets.green++;
    else if (s === 'yellow') buckets.yellow++;
    else if (s === 'orange') buckets.orange++;
    else if (s === 'red' || s === 'darkred') buckets.red++;
    else if (s === 'gray') buckets.gray++;
  }

  const monthly = totalAnnual / 12;

  return (
    <div className="summary">
      <div className="summary-total">
        <div>
          <div className="summary-total-label">TOTAL DE ITENS</div>
          <div className="summary-total-value">{items.length}</div>
        </div>
      </div>
      <div className="summary-dots">
        <div className="summary-dot">
          <div className="summary-dot-circle dot-green" />
          <div className="summary-dot-count">{buckets.green}</div>
          <div className="summary-dot-label">🟢 EM ORDEM</div>
        </div>
        <div className="summary-dot">
          <div className="summary-dot-circle dot-yellow" />
          <div className="summary-dot-count">{buckets.yellow}</div>
          <div className="summary-dot-label">🟡 ATENÇÃO</div>
        </div>
        <div className="summary-dot">
          <div className="summary-dot-circle dot-orange" />
          <div className="summary-dot-count">{buckets.orange}</div>
          <div className="summary-dot-label">🟠 PRÓXIMO</div>
        </div>
        <div className="summary-dot">
          <div className="summary-dot-circle dot-red" />
          <div className="summary-dot-count">{buckets.red}</div>
          <div className="summary-dot-label">🔴 URGENTE</div>
        </div>
        <div className="summary-dot">
          <div className="summary-dot-circle dot-gray" />
          <div className="summary-dot-count">{buckets.gray}</div>
          <div className="summary-dot-label">⚪ INCUMPRIMENTO</div>
        </div>
      </div>
      <div className="summary-costs">
        <div className="summary-cost">
          <div className="summary-cost-label">CUSTO FIXO ANUAL</div>
          <div className="summary-cost-value">{formatEuro(totalAnnual)}</div>
        </div>
        <div className="summary-cost">
          <div className="summary-cost-label">CUSTO FIXO MENSAL</div>
          <div className="summary-cost-value">{formatEuro(monthly)}</div>
        </div>
      </div>
    </div>
  );
}

function ItemCard({ item, onClick }) {
  const urg = mostUrgentDeadline(item);
  const next = nextDeadline(item);
  const days = urg ? daysUntil(urg.date) : null;
  const status = statusForDays(days);

  const subParts = [];
  if (item.matricula) subParts.push(item.matricula);
  if (item.marca) subParts.push(item.marca);
  if (item.modelo) subParts.push(item.modelo);
  if (item.companhia) subParts.push(item.companhia);
  if (item.entidade && !subParts.length) subParts.push(item.entidade);
  if (item.apolice) subParts.push(`APÓLICE ${item.apolice}`);
  const sub = subParts.join(' · ');

  let daysLabel = '';
  if (days === null) daysLabel = 'SEM PRAZO';
  else if (days < 0) daysLabel = `VENCEU HÁ ${Math.abs(days)}D`;
  else if (days === 0) daysLabel = 'HOJE';
  else daysLabel = `${days}D`;

  const deadlines = allDeadlines(item);
  const extraDeadlines = deadlines.filter(d => d.date !== (next && next.date));

  return (
    <button
      className={`item-card status-${status}`}
      onClick={onClick}
      data-testid={`item-card-${item.id}`}
    >
      <div className="item-card-top">
        <span className="item-card-type">{item.tipo}</span>
        <span className="item-card-days">{daysLabel}</span>
      </div>
      <div className="item-card-title">{item.nome || '—'}</div>
      {sub && <div className="item-card-sub">{sub}</div>}
      {deadlines.length > 1 && (
        <div className="item-card-deadlines">
          {deadlines.slice(0, 4).map((d, i) => (
            <span key={i} className="item-card-deadline-chip">
              {d.label}: {formatDatePT(d.date)}
            </span>
          ))}
        </div>
      )}
      <div className="item-card-footer">
        <span className="item-card-date">
          {next ? `${next.label} · ${formatDatePT(next.date)}` : 'SEM PRAZO'}
        </span>
        {item.valor ? <span className="item-card-value">{formatEuro(item.valor)}</span> : null}
      </div>
    </button>
  );
}

function App() {
  const { user } = useIdentity();
  const { items: allItems, loading, add, update, remove } = useCollection('frota-items');

  const [search, setSearch] = useState('');
  const [typeFilter, setTypeFilter] = useState('TODOS');
  const [selectedId, setSelectedId] = useState(null);
  const [editingId, setEditingId] = useState(null);
  const [creating, setCreating] = useState(false);

  const dialogRef = useRef(null);

  // Only this user's items (private app)
  const items = useMemo(() => {
    if (!user) return [];
    return (allItems || []).filter(raw => raw.author?.id === user.id).map(raw => ({
      id: raw.id,
      ...(raw.value || {}),
    }));
  }, [allItems, user]);

  // Global search filter — matches across NOME, DESCRIÇÃO, MATRÍCULA, MARCA,
  // MODELO, NÚMERO, APÓLICE, ENTIDADE and TIPO (plus companhia/notas as before).
  const searched = useMemo(() => {
    const q = search.trim().toLocaleLowerCase('pt-PT');
    let list = items;
    if (q) {
      list = list.filter(it => {
        const hay = [
          it.nome,         // NOME / DESCRIÇÃO
          it.descricao,    // DESCRIÇÃO (campo alternativo, se existir)
          it.matricula,    // MATRÍCULA
          it.marca,        // MARCA
          it.modelo,       // MODELO
          it.numero,       // NÚMERO
          it.apolice,      // APÓLICE
          it.entidade,     // ENTIDADE
          it.tipo,         // TIPO
          it.companhia,
          it.notas,
        ].filter(Boolean).join(' ').toLocaleLowerCase('pt-PT');
        return hay.includes(q);
      });
    }
    if (typeFilter !== 'TODOS') {
      list = list.filter(it => it.tipo === typeFilter);
    }
    return list;
  }, [items, search, typeFilter]);

  // Total annual cost (across all items)
  const totalAnnual = useMemo(() => {
    return items.reduce((sum, it) => sum + annualCost(it.valor, it.periodicidade), 0);
  }, [items]);

  const hasSeed = useMemo(() => items.some(it => it.seed), [items]);

  // Open/close dialog imperatively
  useEffect(() => {
    const dlg = dialogRef.current;
    if (!dlg) return;
    if (creating || editingId) {
      if (!dlg.open) dlg.showModal();
    } else {
      if (dlg.open) dlg.close();
    }
  }, [creating, editingId]);

  function closeDialog() {
    setCreating(false);
    setEditingId(null);
  }

  async function handleSave(payload) {
    if (editingId) {
      await update(editingId, payload);
    } else {
      await add(payload);
    }
    closeDialog();
  }

  async function handleDelete() {
    if (editingId) {
      await remove(editingId);
      setEditingId(null);
      setSelectedId(null);
    }
  }

  async function handleAddSeed() {
    const seeds = buildSeedItems();
    for (const s of seeds) await add(s);
  }

  async function handleRemoveSeed() {
    const seedItems = items.filter(i => i.seed);
    for (const s of seedItems) await remove(s.id);
  }

  // Direct update from the detail view (notification actions)
  async function handleDetailUpdate(payload) {
    if (!selectedId) return;
    await update(selectedId, payload);
  }

  // Build grouped list (incumprimento + months)
  const { incumprimentoItems, monthGroups } = useMemo(() => {
    const withDate = searched.map(it => {
      const urg = mostUrgentDeadline(it);
      const next = nextDeadline(it);
      // Sort by next deadline date; if none, treat as far future
      const sortDate = next ? next.date : '9999-12-31';
      const days = urg ? daysUntil(urg.date) : null;
      return { it, next, urg, sortDate, days };
    });

    const incump = withDate
      .filter(x => x.urg && daysUntil(x.urg.date) < 0)
      .sort((a, b) => a.urg.date.localeCompare(b.urg.date));

    const future = withDate
      .filter(x => !(x.urg && daysUntil(x.urg.date) < 0))
      .sort((a, b) => a.sortDate.localeCompare(b.sortDate));

    const groups = {};
    for (const entry of future) {
      const key = entry.next ? monthKey(entry.next.date) : 'sem-prazo';
      if (!groups[key]) groups[key] = [];
      groups[key].push(entry);
    }
    const orderedKeys = Object.keys(groups).sort((a, b) => {
      if (a === 'sem-prazo') return 1;
      if (b === 'sem-prazo') return -1;
      return a.localeCompare(b);
    });

    return {
      incumprimentoItems: incump,
      monthGroups: orderedKeys.map(k => ({ key: k, entries: groups[k] })),
    };
  }, [searched]);

  const selectedItem = selectedId ? items.find(i => i.id === selectedId) : null;
  const editingItem = editingId ? items.find(i => i.id === editingId) : null;

  if (loading) {
    return (
      <div className="app">
        <div className="loading">A carregar…</div>
      </div>
    );
  }

  // DETAIL VIEW
  if (selectedItem) {
    return (
      <div className="app">
        <ItemDetail
          item={selectedItem}
          onBack={() => setSelectedId(null)}
          onEdit={() => setEditingId(selectedItem.id)}
          onUpdate={handleDetailUpdate}
        />
        <dialog ref={dialogRef} aria-labelledby="form-title" onClose={closeDialog}>
          <div className="dialog-inner">
            <h2 id="form-title">{editingItem ? 'EDITAR ITEM' : 'NOVO ITEM'}</h2>
            {(creating || editingItem) && (
              <ItemForm
                initial={editingItem || null}
                onSave={handleSave}
                onCancel={closeDialog}
                onDelete={editingId ? handleDelete : null}
              />
            )}
          </div>
        </dialog>
      </div>
    );
  }

  // LIST VIEW
  return (
    <div className="app">
      <header className="header">
        <div>
          <h1>MINHA FROTA</h1>
          <div className="header-sub">PRAZOS · CUSTOS · DOCUMENTOS</div>
        </div>
      </header>

      <Summary items={items} totalAnnual={totalAnnual} />

      {items.length === 0 && (
        <div className="seed-notice">
          <span>SEM ITENS — EXPERIMENTE COM DADOS DE DEMONSTRAÇÃO</span>
          <button
            className="btn btn-primary"
            onClick={handleAddSeed}
            data-testid="add-seed-button"
          >
            CRIAR DEMO
          </button>
        </div>
      )}

      {hasSeed && (
        <div className="seed-notice">
          <span>DADOS DE DEMONSTRAÇÃO ATIVOS</span>
          <button
            className="btn btn-secondary"
            onClick={handleRemoveSeed}
            data-testid="remove-seed-button"
          >
            ELIMINAR DEMO
          </button>
        </div>
      )}

      <div className="search-row">
        <input
          type="search"
          placeholder="PESQUISAR POR NOME, DESCRIÇÃO, MATRÍCULA, MARCA, MODELO, NÚMERO, APÓLICE, ENTIDADE OU TIPO..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          data-testid="search-input"
          aria-label="Pesquisar itens por nome, descrição, matrícula, marca, modelo, número, apólice, entidade ou tipo"
        />
      </div>

      <div className="filter-chip-row">
        <button
          className={`filter-chip ${typeFilter === 'TODOS' ? 'active' : ''}`}
          onClick={() => setTypeFilter('TODOS')}
          data-testid="filter-all"
        >
          TODOS
        </button>
        {TIPOS.map((t) => (
          <button
            key={t}
            className={`filter-chip ${typeFilter === t ? 'active' : ''}`}
            onClick={() => setTypeFilter(t)}
          >
            {t}
          </button>
        ))}
      </div>

      {searched.length === 0 && items.length > 0 && (
        <div className="empty">
          <h3>SEM RESULTADOS</h3>
          <p>Nenhum item corresponde aos filtros.</p>
        </div>
      )}

      {incumprimentoItems.length > 0 && (
        <>
          <div className="month-header incumprimento">⚠️ INCUMPRIMENTO</div>
          {incumprimentoItems.map(({ it }) => (
            <ItemCard
              key={it.id}
              item={it}
              onClick={() => setSelectedId(it.id)}
            />
          ))}
        </>
      )}

      {monthGroups.map((group) => (
        <div key={group.key}>
          <div className="month-header">
            {group.key === 'sem-prazo' ? 'SEM PRAZO DEFINIDO' : monthLabel(group.key)}
          </div>
          {group.entries.map(({ it }) => (
            <ItemCard
              key={it.id}
              item={it}
              onClick={() => setSelectedId(it.id)}
            />
          ))}
        </div>
      ))}

      <button
        className="fab"
        onClick={() => setCreating(true)}
        aria-label="Adicionar novo item"
        data-testid="add-item-fab"
      >
        +
      </button>

      <dialog ref={dialogRef} aria-labelledby="form-title" onClose={closeDialog}>
        <div className="dialog-inner">
          <h2 id="form-title">{editingItem ? 'EDITAR ITEM' : 'NOVO ITEM'}</h2>
          {(creating || editingItem) && (
            <ItemForm
              initial={editingItem || null}
              onSave={handleSave}
              onCancel={closeDialog}
              onDelete={editingId ? handleDelete : null}
            />
          )}
        </div>
      </dialog>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);