import { useState } from 'react';
import { exportService } from '../../services/exportService';
import { FileText, Download, Calendar } from 'lucide-react';

export default function DiagramPage() {
  // Fecha por defecto: Mañana
  const tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  const [date, setDate] = useState(tomorrow.toISOString().split('T')[0]);
  const [loading, setLoading] = useState(false);

  const handleDownload = async () => {
    setLoading(true);
    try {
      await exportService.downloadDiagram(date);
    } catch (error) {
      console.error(error);
      alert('Error descargando el diagrama');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="max-w-4xl mx-auto">
      <h2 className="text-2xl font-bold text-gray-800 mb-6 flex items-center gap-2">
        <FileText className="text-blue-600" />
        Módulo de Diagramación
      </h2>

      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
        <p className="text-gray-600 mb-6">
          Seleccione la fecha de edición para generar el archivo XML de exportación.
          Este archivo contiene todos los avisos activos para el día seleccionado, agrupados por rubro.
        </p>

        <div className="flex items-end gap-4 max-w-md">
          <div className="flex-1">
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Fecha de Edición
            </label>
            <div className="relative">
              <input
                type="date"
                value={date}
                onChange={(e) => setDate(e.target.value)}
                className="w-full p-3 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
              />
              <Calendar className="absolute left-3 top-3.5 text-gray-400" size={18} />
            </div>
          </div>

          <button
            onClick={handleDownload}
            disabled={loading}
            className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 disabled:bg-blue-300 transition flex items-center gap-2 font-medium"
          >
            {loading ? 'Generando...' : (
              <>
                <Download size={20} /> Descargar XML
              </>
            )}
          </button>
        </div>

        <div className="mt-8 p-4 bg-yellow-50 border border-yellow-100 rounded-md text-sm text-yellow-800">
          <strong>Nota:</strong> Solo se exportarán los avisos que tengan texto de impresión definido y cuyo rango de fechas cubra el día seleccionado.
        </div>
      </div>
    </div>
  );
}