/* === Mantenimiento — vista con KPIs, tabla, y exportación de reporte PDF === */

const MantView = ({ tasks, onSelect, selectedId, onToggle, canEditFn, onCreate, role, user }) => {
  const mantTasks = tasks.filter(t => t.area === "mant");
  const [tab, setTab] = React.useState("activas"); // "activas" | "terminadas"
  const [reportOpen, setReportOpen] = React.useState(false);

  const summary = {
    activas:    mantTasks.filter(t => t.status !== "terminada").length,
    altas:      mantTasks.filter(t => t.priority === "alta" && t.status !== "terminada").length,
    vencidas:   mantTasks.filter(t => t.status === "vencida").length,
    progreso:   mantTasks.filter(t => t.status === "progreso").length,
    terminadas: mantTasks.filter(t => t.status === "terminada").length,
    conFotos:   mantTasks.filter(t => (t.photosBefore || []).length + (t.photosAfter || []).length > 0).length,
  };

  const filteredTasks = tab === "activas"
    ? mantTasks.filter(t => t.status !== "terminada")
    : mantTasks.filter(t => t.status === "terminada");

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
      <div className="cdc-grid-cards" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
        <div className="cdc-kpi">
          <div className="cdc-kpi__label">Tareas activas</div>
          <div className="cdc-kpi__value">{summary.activas}</div>
          <div className="cdc-kpi__sub">{summary.altas} de alta prioridad</div>
        </div>
        <div className="cdc-kpi">
          <div className="cdc-kpi__label">Vencidas</div>
          <div className="cdc-kpi__value" style={{ color: summary.vencidas ? "var(--cdc-overdue)" : "var(--cdc-ink)" }}>
            {summary.vencidas}
          </div>
          <div className="cdc-kpi__sub">{summary.vencidas ? "requieren atención" : "todo al día"}</div>
        </div>
        <div className="cdc-kpi">
          <div className="cdc-kpi__label">Terminadas</div>
          <div className="cdc-kpi__value">{summary.terminadas}</div>
          <div className="cdc-kpi__sub">{summary.conFotos} con evidencia fotográfica</div>
        </div>
        <div className="cdc-kpi">
          <div className="cdc-kpi__label">Recurrentes</div>
          <div className="cdc-kpi__value">{mantTasks.filter(t => t.recurrence).length}</div>
          <div className="cdc-kpi__sub">programadas automáticamente</div>
        </div>
      </div>

      <div className="cdc-tabs" style={{ background: "var(--cdc-panel)", borderRadius: "14px 14px 0 0", border: "1px solid var(--cdc-border)", borderBottom: 0, paddingLeft: 18 }}>
        {[
          ["activas",    `Activas (${summary.activas})`],
          ["terminadas", `Terminadas (${summary.terminadas})`],
        ].map(([id, label]) => (
          <button key={id} className="cdc-tab" aria-selected={tab === id} onClick={() => setTab(id)}>{label}</button>
        ))}
      </div>

      <div className="cdc-card" style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, marginTop: -18 }}>
        <div className="cdc-card__head">
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <I.Wrench size={20} />
            <div className="cdc-card__title">
              {tab === "activas" ? "Tareas activas" : "Tareas terminadas"} — Mantenimiento
            </div>
            <span style={{ fontSize: 12, color: "var(--cdc-ink-3)" }}>{filteredTasks.length}</span>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <button className="cdc-pill"><I.Search size={14} /> Buscar</button>
            <button className="cdc-pill"><I.Filter size={14} /> Filtros</button>
            {tab === "terminadas" && summary.terminadas > 0 && (
              <button className="cdc-pill" onClick={() => setReportOpen(true)}>
                <I.Send size={14} /> Reporte PDF
              </button>
            )}
            {role !== "staff" && (
              <button className="cdc-btn cdc-btn--coral" onClick={() => onCreate("mant")}>
                <I.Plus size={14} /> Nueva tarea
              </button>
            )}
          </div>
        </div>

        {filteredTasks.length === 0 ? (
          <div className="cdc-empty">
            <I.Wrench size={42} />
            <div className="cdc-empty__title">
              {tab === "activas" ? "Sin tareas activas" : "Sin tareas terminadas aún"}
            </div>
            {tab === "activas" && role !== "staff" && (
              <button className="cdc-btn cdc-btn--coral" onClick={() => onCreate("mant")}>
                <I.Plus size={14} /> Crear primera tarea
              </button>
            )}
          </div>
        ) : (
          <TaskTable
            tasks={filteredTasks}
            onSelect={onSelect}
            selectedId={selectedId}
            onToggle={onToggle}
            canEditFn={canEditFn}
          />
        )}
      </div>

      {reportOpen && (
        <ReportRangeDialog
          tasks={mantTasks}
          generatedBy={user.name}
          onClose={() => setReportOpen(false)}
        />
      )}
    </div>
  );
};

const ReportRangeDialog = ({ tasks, generatedBy, onClose }) => {
  // Default range: last 30 days
  const defaultTo = TODAY_ISO;
  const defaultFrom = fmtISO(addDays(TODAY, -30));
  const [from, setFrom] = React.useState(defaultFrom);
  const [to, setTo] = React.useState(defaultTo);
  const [preset, setPreset] = React.useState("30");

  const setRange = (days) => {
    setPreset(String(days));
    setTo(TODAY_ISO);
    setFrom(fmtISO(addDays(TODAY, -days)));
  };

  const completed = tasks.filter(t => t.status === "terminada" && t.due >= from && t.due <= to);
  const withPhotos = completed.filter(t => (t.photosBefore || []).length + (t.photosAfter || []).length > 0).length;

  const generate = () => {
    exportMaintenanceReportPDF({
      tasks,
      dateFrom: from,
      dateTo: to,
      generatedBy,
    });
    onClose();
  };

  return (
    <div className="cdc-overlay" onClick={onClose} style={{ alignItems: "center", justifyContent: "center" }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: "white", borderRadius: 14, width: 460, maxWidth: "92vw",
        boxShadow: "var(--cdc-shadow-lg)", overflow: "hidden",
      }}>
        <div style={{ padding: "16px 22px 4px" }}>
          <div className="cdc-drawer__title">Generar reporte de mantenimiento</div>
          <div style={{ fontSize: 13, color: "var(--cdc-ink-3)", marginTop: 4, lineHeight: 1.45 }}>
            Incluye todas las tareas <strong>terminadas</strong> en el rango seleccionado, con sus fotos de antes y después.
          </div>
        </div>

        <div style={{ padding: "12px 22px", display: "flex", flexDirection: "column", gap: 14 }}>
          <div className="cdc-field">
            <label>Rango rápido</label>
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
              {[
                ["7",  "Última semana"],
                ["15", "Últimos 15 días"],
                ["30", "Último mes"],
                ["90", "Último trimestre"],
                ["365", "Último año"],
              ].map(([d, lbl]) => (
                <button
                  key={d}
                  type="button"
                  className="cdc-chip"
                  aria-pressed={preset === d}
                  onClick={() => setRange(parseInt(d, 10))}
                >
                  {lbl}
                </button>
              ))}
            </div>
          </div>

          <div className="cdc-row-2">
            <div className="cdc-field">
              <label>Desde</label>
              <input type="date" className="cdc-input" value={from} onChange={(e) => { setFrom(e.target.value); setPreset(""); }} />
            </div>
            <div className="cdc-field">
              <label>Hasta</label>
              <input type="date" className="cdc-input" value={to} onChange={(e) => { setTo(e.target.value); setPreset(""); }} />
            </div>
          </div>

          <div style={{ background: "var(--cdc-bg-soft)", border: "1px solid var(--cdc-border-soft)", borderRadius: 10, padding: 12, display: "flex", gap: 16 }}>
            <div>
              <div style={{ fontSize: 11, letterSpacing: "0.1em", color: "var(--cdc-ink-3)", textTransform: "uppercase", fontWeight: 700 }}>En el reporte</div>
              <div style={{ display: "flex", gap: 20, marginTop: 4 }}>
                <div>
                  <span style={{ fontFamily: "var(--cdc-display)", fontSize: 22, fontWeight: 600 }}>{completed.length}</span>
                  <span style={{ fontSize: 11.5, color: "var(--cdc-ink-3)", marginLeft: 6 }}>tareas</span>
                </div>
                <div>
                  <span style={{ fontFamily: "var(--cdc-display)", fontSize: 22, fontWeight: 600 }}>{withPhotos}</span>
                  <span style={{ fontSize: 11.5, color: "var(--cdc-ink-3)", marginLeft: 6 }}>con fotos</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="cdc-panel__actions" style={{ position: "static", borderTop: "1px solid var(--cdc-border-soft)" }}>
          <button className="cdc-btn" onClick={onClose}>Cancelar</button>
          <button className="cdc-btn cdc-btn--primary" onClick={generate} disabled={completed.length === 0}>
            <I.Send size={14} /> Generar PDF
          </button>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { MantView });