import React from 'react';
import './AlertsView.css';

const alerts = [
  {
    id: 1,
    type: 'reminder',
    title: 'Recordatorio: Comprar Paracetamol',
    detail: 'Quedan 2 cajas',
    color: 'primary',
    icon: 'bell',
    actions: [{ label: 'Ver Detalles', variant: 'secondary' }],
  },
  {
    id: 2,
    type: 'availability',
    title: 'Disponibilidad: Aspirina',
    detail: 'Ya disponible en Farmacia Sol',
    color: 'secondary',
    icon: 'store',
    actions: [{ label: 'Ir a Farmacia', variant: 'primary' }],
  },
  {
    id: 3,
    type: 'dose',
    title: 'Próxima Toma',
    detail: '12:00 PM',
    color: 'tertiary',
    icon: 'schedule',
    actions: [{ label: 'Confirmar Toma', variant: 'tertiary' }],
  },
];

const iconMap = {
  bell: (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 0 0 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z" />
    </svg>
  ),
  store: (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
      <path d="M18.36 9l.6 3H5.04l.6-3h12.72M20 4H4v2h16V4zm0 3H4l-1 5v2h1v6h10v-6h4v6h2v-6h1v-2l-1-5zM6 18v-4h6v4H6z" />
    </svg>
  ),
  schedule: (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
      <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" />
    </svg>
  ),
};

function AlertsView({ onBack }) {
  return (
    <div className="alerts-view">
      <main className="alerts-main">
        <div className="alerts-header">
          <h2 className="alerts-title">Mis Avisos</h2>
          <p className="alerts-subtitle">Mantente al día con tus medicamentos.</p>
        </div>

        <div className="alerts-list">
          {alerts.map((alert) => (
            <div key={alert.id} className={`alert-card alert-card--${alert.color}`}>
              <div className="alert-card-top">
                <div className={`alert-icon alert-icon--${alert.color}`}>
                  {iconMap[alert.icon]}
                </div>
                <div className="alert-info">
                  <h3 className="alert-title">{alert.title}</h3>
                  <span className={`alert-badge alert-badge--${alert.color}`}>
                    {alert.detail}
                  </span>
                </div>
              </div>
              <div className="alert-actions">
                {alert.actions.map((action, i) => (
                  <button
                    key={i}
                    className={`alert-btn alert-btn--${action.variant}`}
                  >
                    {action.label}
                  </button>
                ))}
                <button className="alert-delete" aria-label="Eliminar">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="3 6 5 6 21 6" />
                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
                  </svg>
                </button>
              </div>
            </div>
          ))}
        </div>
      </main>
    </div>
  );
}

export default AlertsView;