'use client';

import React, { useState } from 'react';
import { Upload } from 'lucide-react';

export default function PublishRrssButton() {
  const [busy, setBusy] = useState(false);
  const [msg, setMsg] = useState<string | null>(null);

  async function publish() {
    setBusy(true);
    setMsg(null);
    try {
      const r = await fetch('/api/calendar/publish', { method: 'POST' });
      const j = await r.json();
      if (!r.ok) {
        setMsg(j.error || 'Error al publicar');
        return;
      }
      setMsg(`Publicado · ${j.pieces} piezas · ${j.month}`);
    } catch (e) {
      setMsg(e instanceof Error ? e.message : 'Error');
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="flex flex-col gap-1">
      <button
        type="button"
        disabled={busy}
        onClick={publish}
        className="inline-flex items-center justify-center min-h-[52px] px-6 rounded-xl border border-emerald-500/40 bg-emerald-500/15 text-emerald-300 text-sm font-bold hover:bg-emerald-500/25 disabled:opacity-50"
      >
        <Upload className="w-4 h-4 mr-2" />
        {busy ? 'Publicando…' : 'Publicar mes en portal'}
      </button>
      {msg ? <p className="text-[11px] text-gray-400">{msg}</p> : null}
    </div>
  );
}