/* Generic single-area view (Administracion, Gerencia, Ama de llaves, Mantenimiento, Remodelacion) */

const AreaView = ({ areaId, tasks, onSelect, selectedId, onToggle, canEditFn, onCreate, role }) => {
  const area = AREA_BY_ID[areaId];
  const areaTasks = tasks.filter(t => t.area === areaId);

  const [searchOpen, setSearchOpen] = React.useState(false);
  const [search, setSearch] = React.useState("");
  const [filterOpen, setFilterOpen] = React.useState(false);
  const [filterStatus, setFilterStatus] = React.useState("todos");
  const [filterPriority, setFilterPriority] = React.useState("todas");
  const [filterAssignee, setFilterAssignee] = React.useState("todos");

  const summary = {
    activas:   areaTasks.filter(t => t.status !== "terminada").length,
    altas:     areaTasks.filter(t => t.priority === "alta").length,
    vencidas:  areaTasks.filter(t => t.status === "vencida").length,
    progreso:  areaTasks.filter(t => t.status === "progreso").length,
  };

  const assigneeOptions = [...new Set(areaTasks.map(t => t.assignee).filter(Boolean))];

  const filteredTasks = areaTasks.filter(t => {
    if (search && !t.title.toLowerCase().includes(search.toLowerCase()) && !(t.description || "").toLowerCase().includes(search.toLowerCase())) return false;
    if (filterStatus !== "todos" && t.status !== filterStatus) return false;
    if (filterPriority !== "todas" && t.priority !== filterPriority) return false;
    if (filterAssignee !== "todos" && t.assignee !== filterAssignee) return false;
    return true;
  });

  const activeFiltersCount = (filterStatus !== "todos" ? 1 : 0) + (filterPriority !== "todas" ? 1 : 0) + (filterAssignee !== "todos" ? 1 : 0);

  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">En progreso</div>
          <div className="cdc-kpi__value">{summary.progreso}</div>
          <div className="cdc-kpi__sub">activas ahora</div>
        </div>
        <div className="cdc-kpi">
          <div className="cdc-kpi__label">Recurrentes</div>
          <div className="cdc-kpi__value">{areaTasks.filter(t => t.recurrence).length}</div>
          <div className="cdc-kpi__sub">programadas automáticamente</div>
        </div>
      </div>

      <div className="cdc-card">
        <div className="cdc-card__head" style={{ flexWrap: "wrap", gap: 10 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <AreaIcon id={areaId} size={20} />
            <div className="cdc-card__title">Tareas — {area.label}</div>
            <span style={{ fontSize: 12, color: "var(--cdc-ink-3)" }}>{filteredTasks.length}{filteredTasks.length !== areaTasks.length ? ` de ${areaTasks.length}` : ""}</span>
          </div>
          <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
            {searchOpen ? (
              <div style={{ display: "flex", alignItems: "center", gap: 6, background: "white", border: "1px solid var(--cdc-sea)", borderRadius: 999, padding: "4px 10px" }}>
                <I.Search size={14} style={{ color: "var(--cdc-ink-3)" }} />
                <input
                  autoFocus
                  className="cdc-input"
                  placeholder="Buscar en tareas…"
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                  style={{ border: 0, padding: 0, width: 200, background: "transparent" }}
                />
                <button className="cdc-iconbtn" onClick={() => { setSearchOpen(false); setSearch(""); }} title="Cerrar"><I.X size={13} /></button>
              </div>
            ) : (
              <button className="cdc-pill" aria-pressed={!!search} onClick={() => setSearchOpen(true)} style={search ? { borderColor: "var(--cdc-sea)", color: "var(--cdc-sea-deep)" } : {}}>
                <I.Search size={14} /> Buscar
              </button>
            )}
            <div style={{ position: "relative" }}>
              <button className="cdc-pill" aria-pressed={activeFiltersCount > 0} onClick={() => setFilterOpen(s => !s)} style={activeFiltersCount > 0 ? { borderColor: "var(--cdc-sea)", color: "var(--cdc-sea-deep)" } : {}}>
                <I.Filter size={14} /> Filtros{activeFiltersCount > 0 && <span style={{ background: "var(--cdc-sea)", color: "white", fontSize: 11, fontWeight: 700, padding: "1px 6px", borderRadius: 999, marginLeft: 4 }}>{activeFiltersCount}</span>}
              </button>
              {filterOpen && (
                <>
                  <div style={{ position: "fixed", inset: 0, zIndex: 40 }} onClick={() => setFilterOpen(false)} />
                  <div style={{
                    position: "absolute", right: 0, top: "calc(100% + 6px)",
                    background: "white", border: "1px solid var(--cdc-border)", borderRadius: 12,
                    boxShadow: "var(--cdc-shadow-lg)", padding: 14, width: 280, zIndex: 50,
                    display: "flex", flexDirection: "column", gap: 12,
                  }}>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                      <div style={{ fontWeight: 700, fontSize: 13 }}>Filtros</div>
                      {activeFiltersCount > 0 && (
                        <button className="cdc-link" onClick={() => { setFilterStatus("todos"); setFilterPriority("todas"); setFilterAssignee("todos"); }} style={{ fontSize: 11.5 }}>
                          Limpiar
                        </button>
                      )}
                    </div>
                    <div className="cdc-field">
                      <label>Estado</label>
                      <select className="cdc-select" value={filterStatus} onChange={(e) => setFilterStatus(e.target.value)}>
                        <option value="todos">Todos</option>
                        {Object.entries(STATUS_META).map(([k, m]) => <option key={k} value={k}>{m.label}</option>)}
                      </select>
                    </div>
                    <div className="cdc-field">
                      <label>Prioridad</label>
                      <select className="cdc-select" value={filterPriority} onChange={(e) => setFilterPriority(e.target.value)}>
                        <option value="todas">Todas</option>
                        <option value="alta">Alta</option>
                        <option value="media">Media</option>
                        <option value="baja">Baja</option>
                      </select>
                    </div>
                    {assigneeOptions.length > 1 && (
                      <div className="cdc-field">
                        <label>Asignado a</label>
                        <select className="cdc-select" value={filterAssignee} onChange={(e) => setFilterAssignee(e.target.value)}>
                          <option value="todos">Todos</option>
                          {assigneeOptions.map(id => <option key={id} value={id}>{STAFF_BY_ID[id]?.name || id}</option>)}
                        </select>
                      </div>
                    )}
                  </div>
                </>
              )}
            </div>
            {role !== "staff" && (
              <button className="cdc-btn cdc-btn--coral" onClick={() => onCreate(areaId)}>
                <I.Plus size={14} /> Nueva tarea
              </button>
            )}
          </div>
        </div>

        {filteredTasks.length === 0 ? (
          <div className="cdc-empty">
            <AreaIcon id={areaId} size={42} />
            <div className="cdc-empty__title">
              {areaTasks.length === 0 ? "Sin tareas en esta área" : "Sin resultados con esos filtros"}
            </div>
            {areaTasks.length === 0 && role !== "staff" && (
              <button className="cdc-btn cdc-btn--coral" onClick={() => onCreate(areaId)}>
                <I.Plus size={14} /> Crear primera tarea
              </button>
            )}
            {areaTasks.length > 0 && (search || activeFiltersCount > 0) && (
              <button className="cdc-chip" onClick={() => { setSearch(""); setFilterStatus("todos"); setFilterPriority("todas"); setFilterAssignee("todos"); }}>
                Limpiar búsqueda y filtros
              </button>
            )}
          </div>
        ) : (
          <TaskTable
            tasks={filteredTasks}
            onSelect={onSelect}
            selectedId={selectedId}
            onToggle={onToggle}
            canEditFn={canEditFn}
          />
        )}
      </div>
    </div>
  );
};

Object.assign(window, { AreaView });